Permalink
Browse files

Add Enzyme

  • Loading branch information...
jackfranklin committed Dec 16, 2015
1 parent 1303eea commit 83499919acc338eb89914014225b44af690ccb3f
Showing with 42 additions and 55 deletions.
  1. +1 −0 package.json
  2. +6 −7 test/add-todo-test.js
  3. +6 −7 test/setup.js
  4. +11 −13 test/todo-test.js
  5. +18 −28 test/todos-test.js
@@ -25,6 +25,7 @@
"babelify": "^7.2.0",
"browser-run": "^3.0.5",
"browserify": "^12.0.1",
"enzyme": "^1.2.0",
"jsdom": "^7.2.1",
"live-server": "^0.9.0",
"phantomjs": "^1.9.19",
@@ -3,25 +3,24 @@ import './setup';
import React from 'react';
import AddTodo from '../app/add-todo';
import TestUtils from 'react-addons-test-utils';
import { mount } from 'enzyme';
import test from 'tape';
test('Add Todo component', (t) => {
t.test('it calls the given callback prop with the new text', (t) => {
t.plan(1);
const todoCallback = ({ name }) => {
console.log('i was called');
t.equal(name, 'Buy Milk');
}
const form = TestUtils.renderIntoDocument(
<AddTodo onNewTodo={todoCallback} />
);
const form = mount(<AddTodo onNewTodo={todoCallback} />);
const input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
const input = form.find('input').get(0);
input.value = 'Buy Milk';
const button = TestUtils.findRenderedDOMComponentWithTag(form, 'button');
TestUtils.Simulate.click(button);
form.find('button').simulate('click');
});
});
@@ -1,13 +1,12 @@
import jsdom from 'jsdom';
function setupDom() {
if (typeof document !== 'undefined') {
return;
if (typeof document === 'undefined') {
global.document = jsdom.jsdom('<html><body></body></html>');
global.window = document.defaultView;
global.navigator = window.navigator;
}
global.document = jsdom.jsdom('<html><body></body></html>');
global.window = document.defaultView;
global.navigator = window.navigator;
};
}
setupDom();
@@ -1,4 +1,6 @@
import './setup';
import './setup';
import { shallow, mount } from 'enzyme';
import React from 'react';
import Todo from '../app/todo';
@@ -8,9 +10,7 @@ import TestUtils from 'react-addons-test-utils';
import test from 'tape';
function shallowRenderTodo(todo) {
const renderer = TestUtils.createRenderer();
renderer.render(<Todo todo={todo} />);
return renderer.getRenderOutput();
return shallow(<Todo todo={todo} />);
}
test('Todo component', (t) => {
@@ -20,12 +20,12 @@ test('Todo component', (t) => {
t.test('It renders the text of the todo', (t) => {
t.plan(1);
t.equal(result.props.children[0].props.children, 'Buy Milk');
t.equal(result.find('p').text(), 'Buy Milk');
});
t.test('The todo does not have the done class', (t) => {
t.plan(1);
t.equal(result.props.className.indexOf('done-todo'), -1);
t.equal(result.hasClass('done-todo'), false);
});
});
@@ -35,7 +35,7 @@ test('Todo component', (t) => {
t.test('The todo does have the done class', (t) => {
t.plan(1);
t.ok(result.props.className.indexOf('done-todo') > -1);
t.ok(result.hasClass('done-todo'));
});
});
@@ -45,24 +45,22 @@ test('Todo component', (t) => {
const doneCallback = (id) => t.equal(id, 1);
const todo = { id: 1, name: 'Buy Milk', done: false };
const result = TestUtils.renderIntoDocument(
const result = mount(
<Todo todo={todo} doneChange={doneCallback} />
);
const todoText = TestUtils.findRenderedDOMComponentWithTag(result, 'p');
TestUtils.Simulate.click(todoText);
result.find('p').simulate('click');
});
t.test('deleting a TODO calls the given prop', (t) => {
t.plan(1);
const deleteCallback = (id) => t.equal(id, 1);
const todo = { id: 1, name: 'Buy Milk', done: false };
const result = TestUtils.renderIntoDocument(
const result = mount(
<Todo todo={todo} deleteTodo={deleteCallback} />
);
const todoLink = TestUtils.findRenderedDOMComponentWithTag(result, 'a');
TestUtils.Simulate.click(todoLink);
result.find('a').simulate('click');
});
});
@@ -1,58 +1,48 @@
import './setup';
import { shallow, mount } from 'enzyme';
import React from 'react';
import ReactDOM from 'react-dom';
import Todos from '../app/todos';
import TestUtils from 'react-addons-test-utils';
import Todo from '../app/todo';
import test from 'tape';
function shallowRender() {
const renderer = TestUtils.createRenderer();
renderer.render(<Todos />);
return renderer.getRenderOutput();
}
test('Todos component', (t) => {
t.test('it renders a list of todos', (t) => {
t.plan(1);
const result = shallowRender();
const todoChildren = result.props.children[2].props.children;
t.equal(todoChildren.length, 3);
const result = shallow(<Todos />);
t.equal(result.find(Todo).length, 3);
});
t.test('Marking a todo as done', (t) => {
t.plan(1);
const result = TestUtils.renderIntoDocument(<Todos />);
const firstToggle = TestUtils.scryRenderedDOMComponentsWithClass(result, 'toggle-todo')[0];
TestUtils.Simulate.click(firstToggle);
const result = mount(<Todos />);
const firstToggle = result.find('.toggle-todo').at(0);
firstToggle.simulate('click');
const firstTodo = TestUtils.findRenderedDOMComponentWithClass(result, 'todo-1');
t.ok(firstTodo.classList.contains('done-todo'));
const firstTodo = result.find('.todo-1').at(0);
t.ok(firstTodo.hasClass('done-todo'));
});
t.test('Deleting a todo', (t) => {
t.plan(1);
const result = TestUtils.renderIntoDocument(<Todos />);
const firstDelete = TestUtils.scryRenderedDOMComponentsWithClass(result, 'delete-todo')[0];
TestUtils.Simulate.click(firstDelete);
const result = mount(<Todos />);
const firstDelete = result.find('.delete-todo').at(0);
firstDelete.simulate('click');
const todos = TestUtils.scryRenderedDOMComponentsWithClass(result, 'todo');
t.equal(todos.length, 2);
t.equal(result.find('.todo').length, 2);
});
t.test('Adding a todo', (t) => {
t.plan(1);
const result = TestUtils.renderIntoDocument(<Todos />);
const formInput = TestUtils.findRenderedDOMComponentWithTag(result, 'input');
const result = mount(<Todos />);
const formInput = result.find('input').get(0);
formInput.value = 'Buy Milk';
const button = TestUtils.findRenderedDOMComponentWithTag(result, 'button');
TestUtils.Simulate.click(button);
const todos = TestUtils.scryRenderedDOMComponentsWithClass(result, 'todo');
t.equal(todos.length, 4);
result.find('button').simulate('click');
t.equal(result.find('.todo').length, 4);
});
});

0 comments on commit 8349991

Please sign in to comment.