I have a simple component that I want to test using React and 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 the confirm button, disable both the input and 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 a way to test for a button's disabled state?
I've attempted:
var TestUtils = React.addons.TestUtils;
describe('TextConfirmButton', function () {
it('starts with 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 the test fails, with the error: textConfirmButtonNode.disabled undefined
. So .disabled
is obviously the wrong way to go about this.
Any suggestions?
Aucun commentaire:
Enregistrer un commentaire