Reactコンポーネントのテスト設計と実装(後編)

import React from 'react';
import { render } from '@testing-library/react';

import Todo from './Todo';

describe('Todo component', () => {
  describe('(2-1)completed=true', () => {
    it('has list and line-through style', () => {
      const todo = 'todo item'
      const completed = true
      const onClickMock = jest.fn();

      const { getByText } = render(<Todo text={todo} completed={completed} onClick={onClickMock}/>);

      expect(getByText(todo)).toBeInTheDocument()
      expect(getByText(todo)).toHaveStyle('text-decoration: line-through;')
    })
  });

  describe('(2-1)completed=false', () => {
    it('has list and no line-through style', () => {
      const todo = 'todo item'
      const completed = false
      const onClickMock = jest.fn();

      const { getByText } = render(<Todo text={todo} completed={completed} onClick={onClickMock}/>);

      expect(getByText(todo)).toBeInTheDocument()
      expect(getByText(todo)).toHaveStyle('text-decoration: none;')
    })
  });
})

todos = [{
  id: 1,
   completed: true,
   text: 'Todo Item 1',
    }, {
      id: 2,
   completed: false,
   text: 'Todo Item 2',
  }
]

import React from 'react';
import { render } from '@testing-library/react';

import TodoList from './TodoList';

describe('TodoList component', () => {
  describe('(a)初期状態のケース', () => {
    it('has no todo item', () => {
      const todos =[];
      const toggleTodoMock = jest.fn();
      const { queryByTestId } = render(<TodoList todos={todos} toggleTodo={toggleTodoMock}/>);

      // Todoリストの数が0個であることを確認する
      expect(queryByTestId('todo')).toBeNull();
    })
  });

  describe('(b)正常値のケース', () => {
    it('has 3 todo item', () => {
      const todos =[{
        id: 0,
        completed: false,
        text: 'パンを買う',
      }, {
        id: 1,
        completed: false,
        text: '牛乳を買う',
      }, {
        id: 2,
        completed: true,
        text: '掃除する'
      }];
      const toggleTodoMock = jest.fn();

      const { queryAllByTestId } = render(<TodoList todos={todos} toggleTodo={toggleTodoMock}/>);
      // Todoリストの数が3個であることを確認する
      expect(queryAllByTestId('todo').length).toBe(3);
    })
  });
})

import React from 'react'
import PropTypes from 'prop-types'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
    data-testid="todo" // ←　この行を追加
  >
    {text}
  </li>
)
...
export default Todo

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import reducer from '../reducers'
import App from './App';

function renderWithRedux(
  ui,
  { initialState, store = createStore(reducer, initialState) } = {}
) {
  return {
    ...render(<Provider store={store}>{ui}</Provider>),
    store,
  }
}

describe('App component', () => {
  describe('(a) Todoリストを追加する', () => {
    it('add todo', () => {
      const { getByText, queryByTestId, getByTestId } = renderWithRedux(<App />);

      // (a-1)初期状態の確認
      // Todoリストなし
      expect(queryByTestId('todo')).toBeNull();
      // Allのフィルターが選択された状態
      expect(getByText('All')).toBeDisabled();
      expect(getByText('Active')).toBeEnabled();
      expect(getByText('Completed')).toBeEnabled();

      // (a-2)空の文字列のTodoリストを追加する
      fireEvent.change(getByTestId('input'), { target: { value: '' } })
      // Todoリストなし
      expect(queryByTestId('todo')).toBeNull();

      // (a-3)Todoリストを追加する
      fireEvent.change(getByTestId('input'), { target: { value: '123' } })
      fireEvent.click(getByText('Add Todo'))
      // Todoリストが1つ
      expect(getByText('123')).toBeInTheDocument();

    });
  });


  describe('(b) フィルターを切り替える', () => {
    it('switch filter', () => {
      const todos =[{
        id: 0,
        completed: false,
        text: 'パンを買う',
      }, {
        id: 1,
        completed: false,
        text: '牛乳を買う',
      }, {
        id: 2,
        completed: true,
        text: '掃除する'
      }];
      const { getByText, queryByText } = renderWithRedux(<App />, {
        initialState: {todos: todos},
      });

      // (b-1)初期状態の確認
      // すべてのTodoコンポーネントが表示された状態
      expect(getByText(todos[0].text)).toBeInTheDocument()
      expect(getByText(todos[0].text)).toHaveStyle('text-decoration: none;')

      expect(getByText(todos[1].text)).toBeInTheDocument()
      expect(getByText(todos[1].text)).toHaveStyle('text-decoration: none;')

      expect(getByText(todos[2].text)).toBeInTheDocument()
      expect(getByText(todos[2].text)).toHaveStyle('text-decoration: line-through;')

      // Allのフィルターが選択された状態
      expect(getByText('All')).toBeEnabled();
      expect(getByText('Active')).toBeDisabled();
      expect(getByText('Completed')).toBeEnabled();


      // (b-2)フィルターを'Active'に切り替える
      fireEvent.click(getByText('Active'))

      // 未完了のTodoリストのみが表示された状態
      expect(getByText(todos[0].text)).toBeInTheDocument()
      expect(getByText(todos[0].text)).toHaveStyle('text-decoration: none;')

      expect(getByText(todos[1].text)).toBeInTheDocument()
      expect(getByText(todos[1].text)).toHaveStyle('text-decoration: none;')

      expect(queryByText(todos[2].text)).toBeNull()

      // Activeのフィルターが選択された状態
      expect(getByText('All')).toBeEnabled();
      expect(getByText('Active')).toBeDisabled();
      expect(getByText('Completed')).toBeEnabled();


      // (b-3)フィルターを'Completed'に切り替える
      fireEvent.click(getByText('Completed'))

      // 完了済みのTodoリストのみが表示された状態
      expect(queryByText(todos[0].text)).toBeNull()

      expect(queryByText(todos[1].text)).toBeNull()

      expect(getByText(todos[2].text)).toBeInTheDocument()
      expect(getByText(todos[2].text)).toHaveStyle('text-decoration: line-through;')

      // Completedのフィルターが選択された状態
      expect(getByText('All')).toBeEnabled();
      expect(getByText('Active')).toBeEnabled();
      expect(getByText('Completed')).toBeDisabled();

    })
  });

  describe('Toggle todo scenario', () => {
    it('toggle todo', () => {
      const todos =[{
        id: 0,
        completed: false,
        text: 'パンを買う',
      }, {
        id: 1,
        completed: false,
        text: '牛乳を買う',
      }, {
        id: 2,
        completed: true,
        text: '掃除する'
      }];

      const { getByText } = renderWithRedux(<App />, {
        initialState: {todos: todos},
      });

      // (c-1)初期状態の確認

      // すべてのTodoコンポーネントが表示された状態
      expect(getByText(todos[0].text)).toHaveStyle('text-decoration: none;')
      expect(getByText(todos[1].text)).toHaveStyle('text-decoration: none;')
      expect(getByText(todos[2].text)).toHaveStyle('text-decoration: line-through;')

      // Allのフィルターが選択された状態
      expect(getByText('All')).toBeEnabled();
      expect(getByText('Active')).toBeDisabled();
      expect(getByText('Completed')).toBeEnabled();


      // (c-2)Todoリストを未完了から完了済みにする
      fireEvent.click(getByText(todos[0].text));

      // 完了済みにしたTodoリストには取り消し線が引かれる
      expect(getByText(todos[0].text)).toHaveStyle('text-decoration: line-through;')
      expect(getByText(todos[1].text)).toHaveStyle('text-decoration: none;')
      expect(getByText(todos[2].text)).toHaveStyle('text-decoration: line-through;')


      // (c-3)Todoリストを完了済みから未完了にする
      fireEvent.click(getByText(todos[2].text));

      // 未完了にしたTodoリストには取り消し線が削除される
      expect(getByText(todos[0].text)).toHaveStyle('text-decoration: line-through;')
      expect(getByText(todos[1].text)).toHaveStyle('text-decoration: none;')
      expect(getByText(todos[2].text)).toHaveStyle('text-decoration: none;')

    });
  });
})