javascript - Testing for a button's disabled state in React -
i have simple component want test using react , reactutils.
var textconfirmbutton = react.createclass({ getinitialstate: function() { return { inputtext: '', confirmtext: this.props.confirmtext, buttonenabled: false, inputenabled: true } }, handlechange: function(event) { this.setstate({ inputtext: event.target.value }); }, handleconfirm: function() { this.props.onconfirmclick(); // when user clicks confirm button, disable both input , button. this.setstate({ buttonenabled: false, inputenabled: false }); }, render: function() { return ( <div> <input onchange={this.handlechange} disabled={!this.state.inputenabled} type='text' ref='text' placeholder={this.state.confirmtext} /> <button onclick={this.handleconfirm} disabled={this.state.inputtext !== this.state.confirmtext} classname='btn btn-danger'>delete</button> </div> ) } })
is there way test button's disabled state?
i've attempted:
var testutils = react.addons.testutils; describe('textconfirmbutton', function () { it('starts confirm button disabled', function () { var onconfirmclick = function() { console.log("confirm click"); } var textconfirmbutton = testutils.renderintodocument( <textconfirmbutton confirmtext="example" onconfirmclick={this.onconfirmclick} /> ); var textconfirmbuttonnode = reactdom.finddomnode(textconfirmbutton); expect(textconfirmbuttonnode.disabled).toequal('disabled'); }); });
but test fails, error: textconfirmbuttonnode.disabled undefined
. .disabled
wrong way go this.
any suggestions?
you need use testutils#findrendereddomcomponentwithtag in order able query dom generated testutils.
var textconfirmbuttonnode = testutils.findrendereddomcomponentwithtag(textconfirmbutton, 'button'); expect(textconfirmbuttonnode.disabled).toequal(true);
Comments
Post a Comment