mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-12-04 23:43:51 +03:00
151 lines
4.5 KiB
JavaScript
151 lines
4.5 KiB
JavaScript
import expect from 'expect';
|
|
import React from 'react';
|
|
import TestUtils from 'react-addons-test-utils';
|
|
import MainSection from '../../components/MainSection';
|
|
import TodoItem from '../../components/TodoItem';
|
|
import Footer from '../../components/Footer';
|
|
import { SHOW_ALL, SHOW_COMPLETED } from '../../constants/TodoFilters';
|
|
|
|
function setup(propOverrides) {
|
|
const props = Object.assign(
|
|
{
|
|
todos: [
|
|
{
|
|
text: 'Use Redux',
|
|
completed: false,
|
|
id: 0,
|
|
},
|
|
{
|
|
text: 'Run the tests',
|
|
completed: true,
|
|
id: 1,
|
|
},
|
|
],
|
|
actions: {
|
|
editTodo: expect.createSpy(),
|
|
deleteTodo: expect.createSpy(),
|
|
completeTodo: expect.createSpy(),
|
|
completeAll: expect.createSpy(),
|
|
clearCompleted: expect.createSpy(),
|
|
},
|
|
},
|
|
propOverrides
|
|
);
|
|
|
|
const renderer = TestUtils.createRenderer();
|
|
renderer.render(<MainSection {...props} />);
|
|
const output = renderer.getRenderOutput();
|
|
|
|
return {
|
|
props: props,
|
|
output: output,
|
|
renderer: renderer,
|
|
};
|
|
}
|
|
|
|
describe('components', () => {
|
|
describe('MainSection', () => {
|
|
it('should render container', () => {
|
|
const { output } = setup();
|
|
expect(output.type).toBe('section');
|
|
expect(output.props.className).toBe('main');
|
|
});
|
|
|
|
describe('toggle all input', () => {
|
|
it('should render', () => {
|
|
const { output } = setup();
|
|
const [toggle] = output.props.children;
|
|
expect(toggle.type).toBe('input');
|
|
expect(toggle.props.type).toBe('checkbox');
|
|
expect(toggle.props.checked).toBe(false);
|
|
});
|
|
|
|
it('should be checked if all todos completed', () => {
|
|
const { output } = setup({
|
|
todos: [
|
|
{
|
|
text: 'Use Redux',
|
|
completed: true,
|
|
id: 0,
|
|
},
|
|
],
|
|
});
|
|
const [toggle] = output.props.children;
|
|
expect(toggle.props.checked).toBe(true);
|
|
});
|
|
|
|
it('should call completeAll on change', () => {
|
|
const { output, props } = setup();
|
|
const [toggle] = output.props.children;
|
|
toggle.props.onChange({});
|
|
expect(props.actions.completeAll).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('footer', () => {
|
|
it('should render', () => {
|
|
const { output } = setup();
|
|
const [, , footer] = output.props.children;
|
|
expect(footer.type).toBe(Footer);
|
|
expect(footer.props.completedCount).toBe(1);
|
|
expect(footer.props.activeCount).toBe(1);
|
|
expect(footer.props.filter).toBe(SHOW_ALL);
|
|
});
|
|
|
|
it('onShow should set the filter', () => {
|
|
const { output, renderer } = setup();
|
|
const [, , footer] = output.props.children;
|
|
footer.props.onShow(SHOW_COMPLETED);
|
|
const updated = renderer.getRenderOutput();
|
|
const [, , updatedFooter] = updated.props.children;
|
|
expect(updatedFooter.props.filter).toBe(SHOW_COMPLETED);
|
|
});
|
|
|
|
it('onClearCompleted should call clearCompleted', () => {
|
|
const { output, props } = setup();
|
|
const [, , footer] = output.props.children;
|
|
footer.props.onClearCompleted();
|
|
expect(props.actions.clearCompleted).toHaveBeenCalled();
|
|
});
|
|
|
|
it('onClearCompleted shouldnt call clearCompleted if no todos completed', () => {
|
|
const { output, props } = setup({
|
|
todos: [
|
|
{
|
|
text: 'Use Redux',
|
|
completed: false,
|
|
id: 0,
|
|
},
|
|
],
|
|
});
|
|
const [, , footer] = output.props.children;
|
|
footer.props.onClearCompleted();
|
|
expect(props.actions.clearCompleted.calls.length).toBe(0);
|
|
});
|
|
});
|
|
|
|
describe('todo list', () => {
|
|
it('should render', () => {
|
|
const { output, props } = setup();
|
|
const [, list] = output.props.children;
|
|
expect(list.type).toBe('ul');
|
|
expect(list.props.children.length).toBe(2);
|
|
list.props.children.forEach((item, i) => {
|
|
expect(item.type).toBe(TodoItem);
|
|
expect(item.props.todo).toBe(props.todos[i]);
|
|
});
|
|
});
|
|
|
|
it('should filter items', () => {
|
|
const { output, renderer, props } = setup();
|
|
const [, , footer] = output.props.children;
|
|
footer.props.onShow(SHOW_COMPLETED);
|
|
const updated = renderer.getRenderOutput();
|
|
const [, updatedList] = updated.props.children;
|
|
expect(updatedList.props.children.length).toBe(1);
|
|
expect(updatedList.props.children[0].props.todo).toBe(props.todos[1]);
|
|
});
|
|
});
|
|
});
|
|
});
|