Skip to content

Instantly share code, notes, and snippets.

@waynelkh
Created January 17, 2015 22:10
Show Gist options
  • Save waynelkh/845e53ae2d2e8c3ee4c6 to your computer and use it in GitHub Desktop.
Save waynelkh/845e53ae2d2e8c3ee4c6 to your computer and use it in GitHub Desktop.
react jest in inputbox
jest.dontMock('../InputBox.js');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var InputBox = require('../InputBox.js');
describe('InputBox', function () {
it('type will change the value and state', function () {
var inputBox = TestUtils.renderIntoDocument(<InputBox />);
var inputBoxDOM = TestUtils.findRenderedDOMComponentWithTag(inputBox, 'input').getDOMNode();
TestUtils.Simulate.change(inputBoxDOM, { target: { value: 'eat dinner'}});
expect(inputBoxDOM.getAttribute('value')).toEqual('eat dinner');
});
it('Press Enter will clean inputBox', function(){
var inputBox = TestUtils.renderIntoDocument(<InputBox />);
var inputBoxDOM = TestUtils.findRenderedDOMComponentWithTag(inputBox, 'input').getDOMNode();
TestUtils.Simulate.change(inputBoxDOM, { target: { value: 'yo'}});
TestUtils.Simulate.keyDown(inputBoxDOM, { key: "Enter", keyCode: 13 });
expect(inputBoxDOM.getAttribute('value')).toEqual('');
});
});
var React = require('react');
var InputBox = React.createClass({
getInitialState: function() {
return { value: '' };
},
handleKeyDown: function(evt) {
if(evt.keyCode === 13)
{
console.log(evt.target.value);
this.setState({ value: '' });
}
},
handleChange: function(evt) {
this.setState({ value: evt.target.value });
},
render: function(){
return (
<div>
<input type="text" placeholder="Input todo"
value={this.state.value}
onKeyDown={this.handleKeyDown}
onChange={this.handleChange} />
</div>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment