我正在尝试为我的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;