2015-11-23 6 views
0

Вот GlobalMenu.react.js:Проблемы с Chai шпиона в мокко

var React = require('react'); 
var AppBar = require('material-ui/lib/app-bar'); 
var IconMenu = require('material-ui/lib/menus/icon-menu'); 
var MenuItem = require('material-ui/lib/menus/menu-item'); 
var IconButton = require('material-ui/lib/icon-button'); 
var NavigationMenu = require('material-ui/lib/svg-icons/navigation/menu'); 
var ActionHome = require('material-ui/lib/svg-icons/action/home'); 
var ActionInfo = require('material-ui/lib/svg-icons/action/info'); 
var ActionExitToApp = require('material-ui/lib/svg-icons/action/exit-to-app'); 


var GlobalMenu = React.createClass({ 
    handleHomeButton: function() { 
     //When this gets implemented, don't forget to add test to GlobalMenu.Test.js, kthxbai 
     alert('home'); 
    }, 
    handleInfoButton: function() { 
     //When this gets implemented, don't forget to add test to GlobalMenu.Test.js, kthxbai 
     alert('info'); 
    }, 
    handleExitButton: function() { 
     //When this gets implemented, don't forget to add test to GlobalMenu.Test.js, kthxbai 
     alert('exit'); 
    }, 
    /** 
    * @return {object} 
    */ 
    render: function() { 
     var barStyle = { 
      width: '@.global-menu' 
     }; 
     return (
      <AppBar className = "global-menu" 
       style = { barStyle } 
       iconElementLeft = { 
        <div id="store-logo"> 
         <a href="#" title="Home" onClick={this.handleHomeButton}></a> 
        </div> 
       } 
       iconElementRight = { 
        <div> 
         <IconButton 
          className = "GlobalMenuButtons-Large" 
          tooltip="Home" 
          name="homeButton" 
          onClick={this.handleHomeButton} ><ActionHome /> 
         </IconButton> 
         <IconButton 
          className = "GlobalMenuButtons-Large" 
          tooltip="Info" 
          name="infoButton" 
          onClick={this.handleInfoButton} ><ActionInfo /> 
         </IconButton> 
         <IconButton 
          className = "GlobalMenuButtons-Large" 
          tooltip="Exit" 
          name="exitButton" 
          onClick={this.handleExitButton} ><ActionExitToApp /> 
         </IconButton> 
         <IconMenu 
          className = "GlobalMenuButtons-Small" 
          iconButtonElement = {<IconButton><NavigationMenu /></IconButton>} 
         > 
          <MenuItem 
           primaryText="Home" 
           leftIcon={ <ActionHome /> } 
           onClick={this.handleHomeButton} 
          /> 
          <MenuItem 
           primaryText="Info" 
           leftIcon={ <ActionInfo /> } 
           onClick={this.handleInfoButton} 
          /> 
          <MenuItem 
           primaryText="Exit" 
           leftIcon={ <ActionExitToApp /> } 
           onClick={this.handleExitButton} 
          /> 
         </IconMenu> 
        </div> 
       } 
      /> 
     ); 
    } 
}); 

module.exports = GlobalMenu; 

Вот мой тест на ней:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactDOMServer = require('react-dom/server'); 
var TestUtils = require('react-addons-test-utils'); 

var IconButton = require('material-ui/lib/icon-button'); 
var GlobalMenu = require("../../src/components/GlobalMenu/GlobalMenu.react.js"); 
var component, componentDocument; 
var spies = require('chai-spies'); 
chai.use(spies); 
var spy = chai.spy.on(window,"alert"); 

describe("GlobalMenu",function(){ 
    before(function(){ 
     this.timeout(8000); 
     //Campaign.fakeCampaign(); 
     component = ReactDOMServer.renderToStaticMarkup(
      <GlobalMenu /> 
     ); 

     componentDocument = TestUtils.renderIntoDocument(
      <GlobalMenu/> 
     ); 

    }); 


    it.only("should handle home button click",function(){ 
     var homeSpy = chai.spy.on(componentDocument,"handleHomeButton"); 
     var buttons = TestUtils.scryRenderedComponentsWithType(componentDocument,IconButton); 
     var firstButton = ReactDOM.findDOMNode(buttons[0]);  
     console.log(homeSpy); 
     TestUtils.Simulate.click(firstButton); 
     console.log(homeSpy); 
     //componentDocument.handleHomeButton(); 
     expect(homeSpy).to.have.been.called(); 
    }); 
}); 

Шпион не вызывается, и я не уверен, что я делаю неправильно. Предупреждение выводится на консоль, поэтому я знаю, что функция вызывается. Если я раскомментирую компонентDocument.handleHomeButton(); тест проходит, но это не проверяет его.

Должен ли я использовать заглушки для этого?

ответ

3

Я не слишком хорошо знаком с Chai шпионов, но с Синоном вы можете, вероятно, сделать что-то вроде этого:

describe("GlobalMenu",function(){ 
 
    let _spy; 
 
    before(function(){ 
 
     _spy = sinon.spy(); 
 
     GlobalMenu.prototype.handleHomeButton = _spy; 
 
     componentDocument = TestUtils.renderIntoDocument(
 
      <GlobalMenu/> 
 
     ); 
 

 
    }); 
 

 

 
    it.only("should handle home button click",function(){ 
 
     var buttons = TestUtils.scryRenderedComponentsWithType(componentDocument,IconButton); 
 
     var firstButton = ReactDOM.findDOMNode(buttons[0]);  
 
     TestUtils.Simulate.click(firstButton); 
 
     expect(_spy).to.have.been.called(); 
 
    }); 
 
});

Надеется, что это работает :)