reactjs - 摩卡中的柴间谍问题

Question

这是 GlobalMenu.react.js：

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();
    });
});

间谍没有被调用，我不确定我做错了什么。警报正在输出到控制台，所以我知道该函数正在被调用。如果我取消注释 componentDocument.handleHomeButton(); 测试通过了，但这并不是真正的测试。

我应该为此使用存根吗？

Answer 1

我对 chai 间谍不太熟悉，但是使用 sinon 你可能可以做这样的事情：

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();
    });
});

希望它有效:)