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(); тест проходит, но это не проверяет его.
Должен ли я использовать заглушки для этого?