redux-devtools/packages/redux-devtools-remote/examples/todomvc/test/components/MainSection.spec.js

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]);
      });
    });
  });
});