0

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(); のコメントを外すと、テストはパスしますが、それは実際のテストではありません。

これにはスタブを使用する必要がありますか?

4

1 に答える 1

3

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

それがうまくいくことを願っています:)

于 2015-12-25T17:52:38.983 に答える