redux tests

noteReducer.test.js

import deepFreeze from 'deep-freeze'
import { createStore } from 'redux'

describe('counter', () => {
  it('increment', () => {
    const counter = (state = 0, action) => {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1
        case 'DECREMENT':
          return state - 1
        default:
          return state
      }
    }
    expect(counter(0, { type: 'INCREMENT' })).toEqual(1)

    expect(counter(1, { type: 'INCREMENT' })).toEqual(2)

    expect(counter(2, { type: 'DECREMENT' })).toEqual(1)

    expect(counter(1, { type: 'DECREMENT' })).toEqual(0)

    expect(counter(1, { type: 'SOMETHING_ELSE' })).toEqual(1)

    expect(counter(undefined, {})).toEqual(0)
  })
  it('testAddCounter', () => {
    const addCounter = list => {
      return [...list, 0]
    }

    const listBefore = []
    const listAfter = [0]

    deepFreeze(listBefore)

    expect(addCounter(listBefore)).toEqual(listAfter)
  })
  it('testRemoveCounter', () => {
    const removeCounter = (list, index) => {
      return [...list.slice(0, index), ...list.slice(index + 1)]
    }
    const listBefore = [0, 10, 20]
    const listAfter = [0, 20]

    deepFreeze(listBefore)

    expect(removeCounter(listBefore, 1)).toEqual(listAfter)
  })
  it('testIncrementCounter', () => {
    const incrementCounter = (list, index) => {
      return [
        ...list.slice(0, index),
        list[index] + 1,
        ...list.slice(index + 1),
      ]
    }
    const listBefore = [0, 10, 20]
    const listAfter = [0, 11, 20]

    deepFreeze(listBefore)

    expect(incrementCounter(listBefore, 1)).toEqual(listAfter)
  })

  it('testToggleTodo', () => {
    const toggleTodo = todo => {
      return {
        ...todo,
        completed: !todo.completed,
      }
    }
    const todoBefore = {
      id: 0,
      text: 'Learn Redux',
      completed: false,
    }
    const todoAfter = {
      id: 0,
      text: 'Learn Redux',
      completed: true,
    }
    deepFreeze(todoBefore)

    expect(toggleTodo(todoBefore)).toEqual(todoAfter)
  })

  it('testAddTodo', () => {
    const todos = (state = [], action) => {
      switch (action.type) {
        case 'ADD_TODO':
          return [
            ...state,
            {
              id: action.id,
              text: action.text,
              completed: false,
            },
          ]
        default:
          return state
      }
    }
    const stateBefore = []
    const action = {
      type: 'ADD_TODO',
      id: 0,
      text: 'Learn Redux',
    }
    const stateAfter = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false,
      },
    ]
    deepFreeze(stateBefore)
    deepFreeze(action)

    expect(todos(stateBefore, action)).toEqual(stateAfter)
  })

  it('testToggleTodo2', () => {
    const todo = (state, action) => {
      switch (action.type) {
        case 'ADD_TODO':
          return [
            ...state,
            {
              id: action.id,
              text: action.text,
              completed: false,
            },
          ]
        case 'TOGGLE_TODO':
          if (state.id !== action.id) {
            return state
          }
          return {
            ...state,
            completed: !state.completed,
          }
        default:
          return state
      }
    }
    const todos = (state = [], action) => {
      switch (action.type) {
        case 'ADD_TODO':
          return [...state, todo(undefined, action)]
        case 'TOGGLE_TODO':
          return state.map(t => todo(t, action))
        default:
          return state
      }
    }

    const store = createStore(todos)
    console.log('Initial state: ')
    store.subscribe(() => console.log(store.getState()))
    console.log('-------------------')
    console.log('Dispatching ADD_TODO')
    store.dispatch({
      type: 'ADD_TODO',
      id: 0,
      text: 'Learn Redux',
    })

    const stateBefore = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false,
      },
      {
        id: 1,
        text: 'Go Shopping',
        completed: false,
      },
    ]
    const action = {
      type: 'TOGGLE_TODO',
      id: 1,
    }
    const stateAfter = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false,
      },
      {
        id: 1,
        text: 'Go Shopping',
        completed: true,
      },
    ]
    deepFreeze(stateBefore)
    deepFreeze(action)

    expect(todos(stateBefore, action)).toEqual(stateAfter)
  })
})