Jasmine反应组件,测试一直失败

时间:2015-07-19 09:04:17

标签: javascript unit-testing jasmine reactjs

我正在尝试为我的react组件传递jasmine测试,我想测试select all复选框取消选中,当从其中一个选中的复选框触发发布事件时。因为并非所有复选框都会被选中,所以select all需要取消选中。下面是我的茉莉花测试和组件,我是新手测试反应组件,非常感谢:

目前获取错误,undefined不是对象this.stubs.subscribe

var React = require('react/addons');
var postal = require('postal');
var contactChannel = postal.channel("contact")
var SelectAll = require('../../../components/controls/SelectAll');
var channelStub = require('../../stub/channelStub');

// When subscribe event check checkbox

describe("Select All Checkbox Specification", function() {

describe("Checking deselect response", function () {

it("On receive subscribe event uncheck the select all box", function () {

        // when the select all is created it will create the channel
        // publish an event to the channel (de-select event)

        instance = TestUtils.renderIntoDocument(<SelectAll />);

        // publish event to check all checkboxes
        contactChannel.publish({
            channel: 'contact',
            topic: 'selectAll',
            data: {
                selectAll: true
            }});

        var checkbox = TestUtils.findRenderedDOMComponentWithTag(instance, "input");

        // publish event to uncheck select all checkbox
        contactChannel.publish({
            channel: "basket",
            topic: "deselectedContact",
            data: {}
        });

        // Checking the module - to see if the checkbox inside is unchecked

        var checkbox = TestUtils.findRenderedDOMComponentWithTag(instance, "input");

        var data = this.stubbed.subscribe();
        // check box checked should be false
        expect(data.topic === 'deselectedContact');
        expect(input.checked === false);
    });

反应组件:

var postal = require('postal');var postal = require('postal');
var contactChannel = postal.channel("contact");
var React = require('react');

var SelectAll = React.createClass({

getInitialState: function() {
    return {
        checked:false
    };
},

setUnChecked: function(){
    this.setState({checked: false});
},

handler: function(e) {

    var updatedContacts = [],
        contacts = this.props.data.contacts,
        topic = 'selectAll',
        checked = false,
        channel = 'contact';

    contactChannel.publish({
        channel: channel,
        topic: topic,
        data: {
            selectAll: event.target.checked
        }});

        this.setState({checked: event.target.checked});
},

render: function() {

    return (
        <div className="contact-selector">
            <input type="checkbox" checked={this.state.checked}
                onChange={this.handler} ref="checkAll" />
        </div>
    );
},

componentDidMount: function() {
    var self = this;
    contactChannel.subscribe("deselectedContact", function(data) {
        self.setUnChecked();
    });
}

});

module.exports = SelectAll;

ChannelStub:

var lastPublished = {},
lastTopicSubscribed = '',
lastCallbackSubscribed;

var ChannelStub = {

publish: function(data) {
    lastPublished = data;
},

getLastPublished: function() {

    return lastPublished;
},

subscribe: function(topic, callback) {

    lastCallbackSubscribed = callback;
    lastTopicSubscribed = topic;
}



};

module.exports = ChannelStub;

0 个答案:

没有答案