Skip to content
Permalink
Browse files

Added user actions tests for TodoItem component

  • Loading branch information
phacks committed Feb 27, 2016
1 parent 71d2835 commit b3a6851e8a9f65f1c44e66046bedd1db18c19a48
Showing with 47 additions and 4 deletions.
  1. +7 −3 src/components/TodoItem.jsx
  2. +40 −1 test/components/TodoItem_spec.js
@@ -15,11 +15,15 @@ export default React.createClass({
<div className="view">
<input type="checkbox"
className="toggle"
defaultChecked={this.props.isCompleted} />
<label htmlFor="todo">
defaultChecked={this.props.isCompleted}
onClick={() => this.props.toggleComplete(this.props.id)} />
<label htmlFor="todo"
ref="text"
onDoubleClick={() => this.props.editItem(this.props.id)}>
{this.props.text}
</label>
<button className="destroy"></button>
<button className="destroy"
onClick={() => this.props.deleteItem(this.props.id)}></button>
</div>
<TextInput />
</li>
@@ -4,7 +4,8 @@ import TodoItem from '../../src/components/TodoItem';
import {expect} from 'chai';

const {renderIntoDocument,
scryRenderedDOMComponentsWithTag} = TestUtils;
scryRenderedDOMComponentsWithTag,
Simulate} = TestUtils;

describe('TodoItem', () => {
it('renders an item', () => {
@@ -49,4 +50,42 @@ describe('TodoItem', () => {
expect(input[0].checked).to.equal(true);
expect(input[1].checked).to.equal(false);
});

it('invokes callback when the delete button is clicked', () => {
const text = 'React';
var deleted = false;
const deleteItem = () => deleted = true;
const component = renderIntoDocument(
<TodoItem text={text} deleteItem={deleteItem}/>
);
const buttons = scryRenderedDOMComponentsWithTag(component, 'button');
Simulate.click(buttons[0]);

expect(deleted).to.equal(true);
});

it('invokes callback when checkbox is clicked', () => {
const text = 'React';
var isChecked = false;
const toggleComplete = () => isChecked = true;
const component = renderIntoDocument(
<TodoItem text={text} toggleComplete={toggleComplete}/>
);
const checkboxes = scryRenderedDOMComponentsWithTag(component, 'input');
Simulate.click(checkboxes[0]);

expect(isChecked).to.equal(true);
});

it('calls a callback when text is double clicked', () => {
var text = 'React';
const editItem = () => text = 'Redux';
const component = renderIntoDocument(
<TodoItem text={text} editItem={editItem}/>
);
const label = component.refs.text
Simulate.doubleClick(label);

expect(text).to.equal('Redux');
});
});

0 comments on commit b3a6851

Please sign in to comment.
You can’t perform that action at this time.