ドメインのstaticメソッドをmockする方法

Interface & Adapter層のGatewayでエンティティをドメインに変換する際に、ドメインの

Driverからデータを取得して、ドメインに変換するメソッドをテストする場合はこんな感じになります。

・NewsGateway.ts

async getNews(): Promise<News> {
  const newsEntity = await this.newsDriver.getNews();
  return this.convertNews(newsEntity)
}

・NewsGateway.test.ts

 ...

describe('getNews', () => {
  it('ニュース一覧を取得することができる', async () => {
    const newsEntity = mock<NewsEntity[]>()
    const news = mock<News>()
      
    const getNewsMock = jest.fn()
    when(getNewsMock).calledWith().defaultReturnValue(newsEntity)
    newsDriver.getNews = getNewsMock

    const convertNewsMock = jest.fn()
    when(convertNewsMock).calledWith(newsEntity).defaultReturnValue(news)
    newsGateway['convertNews'] = convertNewsMock

    const actual = await newsGateway.getNews()

    expect(actual).toEqual(news)
    expect(newsDriver.getNews).nthCalledWith(1)
    expect(newsGateway['convertNews']).nthCalledWith(1, newsEntity)
  })
})

 ...

convertNewsの単体テストにおいて、Newsドメインにファクトリメソッドであるfromメソッドをmockする方法がわかりました。

private convertNews(newsEntity: NewsEntity[]): News {
  const news = News.from(newsEntity)

  return news
}

...

describe('convertNews', () => {
  it('ニュースドメインに変換することができる', async () => {
    const newsEntity = mock<NewsEntity[]>()
    const news= mock<News>()
    const from = jest.spyOn(News, 'from')
      .mockImplementation((_: NewsEntity[]): News => {
          return news;
      })

    const actual = newsGateway['convertNews'](newsEntity)

    expect(actual).toEqual(news)
    expect(from).toBeCalled()
  })
})

...

まずspyOnでNewsドメインのfromメソッドをmockします。mockImplementation() 関数の引数は、以下のようになっています。

• 第1引数：モックするメソッドの引数型
• 第2引数：モックするメソッドの戻り値型
• 第3引数：モックするメソッドの処理本体

この場合、第1引数は NewsEntity[] 型、第2引数はNews型、第3引数はNews型のオブジェクトを返す処理です。つまり、from() メソッドにNewsEntity[]型のエンティティを渡すと、常にnewsを返すように設定しています。

convertNewsはprivateメソッドなので、newsEntityを引数rにnewsGateway[‘convertNews’]の形で呼び出します。

あとは結果が正しいかと、mockしたfromメソッドが呼び出されたかを確認しています。

ToDoリストのストーリーを考える

Nuxt.jsで簡単なToDoリストをつくりにあたり、ユーザーストーリーを考えます。考えた結果、以下のストーリーができました。

• ユーザーはフォームと作成ボタンを見ることができる
• ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる
• ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる
• ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない
• ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる
• ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる

ToDoリストの画面は、TaskFormコンポーネントとTaskListコンポーネントに分けて実装します。

またタスクのデータはFirestoreに格納するようにし、REST APIでデータを操作します。

Nuxt.jsやJestのインストールやFirestoreのセットアップなどは省略しています。

「ユーザーはフォームと作成ボタンを見ることができる」のテストを書く

まず「ユーザーはフォームと作成ボタンを見ることができる」のテストを書いていきます。

TaskFormコンポーネントを作成し、タスク入力フォームと作成ボタンが存在することをチェックします。

・components/TaskForm.spec.js

import { mount } from '@vue/test-utils'
import TaskForm from '@/components/TaskForm.vue'

describe('components/TaskForm.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(TaskForm)
  })

  describe('template', () => {
    test('タスク入力フォームが存在すること', () => {
      const form = wrapper.find('input');
      expect(form.exists()).toBe(true);
    })

    test('タスク作成ボタンが存在すること', () => {
      const button = wrapper.find('input');
      expect(button.exists()).toBe(true);
   })
  })
})

テストを作成したら実際にテストを実行してみます。TDDでいうレッドのところです。

まだ実装はしていないので全部のテストが失敗しますが、期待通りの落ち方をしているかを確認します。

FAIL  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✕ タスク入力フォームが存在すること (10 ms)
      ✕ タスク作成ボタンが存在すること (1 ms)

  ● components/TaskForm.vue > template > タスク入力フォームが存在すること

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      16 |     test('タスク入力フォームが存在すること', () => {
      17 |       const form = wrapper.find('input');
    > 18 |       expect(form.exists()).toBe(true);
         |                             ^
      19 |     })
      20 |
      21 |     test('タスク作成ボタンが存在すること', () => {

      at Object.<anonymous> (components/TaskForm.spec.js:18:29)

  ● components/TaskForm.vue > template > タスク作成ボタンが存在すること

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      21 |     test('タスク作成ボタンが存在すること', () => {
      22 |       const button = wrapper.find('input');
    > 23 |       expect(button.exists()).toBe(true);
         |                               ^
      24 |     })
      25 |
      26 |   })

      at Object.<anonymous> (components/TaskForm.spec.js:23:31)

存在していない、実装されていないなどの落ち方をしていればひとまず完了です。

「ユーザーはフォームと作成ボタンを見ることができる」を実装する

テストで書いたシナリオを元にTaskFormコンポーネントを実装してきます。今回は簡易的なHTMLでフォームとボタンを作成しました。

・components/TaskForm.vue

<template>
  <div>
    <input>
    <button>
      タスク作成
    </button>
  </div>
</template>

「ユーザーはフォームと作成ボタンを見ることができる」をテストする

実装が終わったら、再度TaskFormのテストを流してみます。TDDでいうグリーンのところです。

テストが全て通ったらこのストーリーの実装は完了です。必要に応じてリファクタリングをします。

PASS  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✓ タスク入力フォームが存在すること (9 ms)
      ✓ タスク作成ボタンが存在すること (1 ms)

「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」のテストを書く

次に「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」のテストを書いていきます。

TaskListコンポーネントでToDoリストと完了リストを表示するようにします。

そのため、ToDoリストと完了リストにFirestoreに格納されているデータをfetchしてくるようにします。

・components/TaskList.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue} from '@vue/test-utils'
import * as indexStore from '@/store'
import TaskList from '@/components/TaskList.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskList.vue', () => {
  let wrapper
  let store
  let todoTask
  let doneTask
  beforeEach(() => {
    store = new Vuex.Store(indexStore)
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
    wrapper = mount(TaskList, {
      store: store,
      localVue
    })
    store.replaceState({ tasks: [todoTask, doneTask] })
  })

  describe('template', () => {
    test('todoリストが表示されること', () => {
      const li = wrapper.find('li.todo')
      expect(li.find('span').text()).toBe(todoTask.content)
      expect(li.find('button).text()).toBe('完了')
    })

    test('完了リストが表示されること', () => {
      const li = wrapper.find('li.done')
      expect(li.find('span').text()).toBe(doneTask.content)
      expect(li.find('button).text()).toBe('ToDoに戻す')
    })
  })

  describe('script', () => {
    describe('computed', () => {
      describe('todos', () => {
        test('storeからtodoTasksが取得できること', () => {
          expect(wrapper.vm.todoTasks).toEqual(expect.arrayContaining([todoTask]))
        })
        test('storeからdoneTasksが取得できること', () => {
          expect(wrapper.vm.doneTasks).toEqual(expect.arrayContaining([doneTask]))
        })
      })
    })
  })
})

タスクリストの状態管理をするストアのテストを書きます。

ステータスの状態によってToDoタスクと完了タスクを出し分けるようにします。

Storeではaxiosを使って外部サービスにHTTPリクエストしているためaxiosをモック化してテストしています。

async/awaitでaxiosの非同期処理を実現し、結果をgettersから取り出し比較します。

参考：https://github.com/nuxt-community/axios-module/issues/105

・store/index.spec.js

import Vuex from 'vuex'
import * as index from '@/store'
import { createLocalVue } from '@vue/test-utils'
import _ from 'lodash'
import axios from 'axios'

const localVue = createLocalVue()
localVue.use(Vuex)

let mockAxiosGetResult
jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve(mockAxiosGetResult))
}))

let action
const testedAction = (context = {}, payload = {}) => {
  return index.actions[action].bind({ $axios: axios })(context, payload)
}

describe('store/index.js', () => {
  let store
  let todoTask, doneTask
  beforeEach(() => {
    store = new Vuex.Store(_.cloneDeep(index))
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
  })

  describe('getters', () => {
    let tasks
    let todoTasks
    let doneTasks
    beforeEach(() => {
      tasks = [todoTask, doneTask]
      todoTasks = [todoTask]
      doneTasks = [doneTask]
      store.replaceState({
        tasks,
        todoTasks,
        doneTasks
      })
    })

    describe('todoTasks', () => {
      test('statusがtodoのtaskが取得できること', () => {
        expect(store.getters['todoTasks']).toContainEqual(todoTask)
        expect(store.getters['todoTasks']).not.toContainEqual(doneTask)
      })
    })
    describe('doneTasks', () => {
      test('statusがdoneのtaskが取得できること', () => {
        expect(store.getters['doneTasks']).not.toContainEqual(todoTask)
        expect(store.getters['doneTasks']).toContainEqual(doneTask)
      })
    })
    describe('tasks', () => {
      test('すべてのtasksが取得できること', () => {
        expect(store.getters['tasks']).toEqual(
          expect.arrayContaining(tasks)
        )
      })
    })
  })

  describe('actions', () => {
    let commit
    beforeEach(() => {
      commit = store.commit
    })

    describe('fetchTasks', () => {
      test('tasksが取得できること', async () => {
        action = 'fetchTasks'
        mockAxiosGetResult = {
          data: {
            documents: [
              {
                name: `tasks/${todoTask.id}`,
                fields: {
                  content: { stringValue: todoTask.content },
                  status: { stringValue: todoTask.status }
                }
              },
              {
                name: `tasks/${doneTask.id}`,
                fields: {
                  content: { stringValue: doneTask.content },
                  status: { stringValue: doneTask.status }
                }
              }
            ]
          }
        }

        await testedAction({ commit })
        expect(store.getters['tasks']).toEqual([todoTask, doneTask])
      })
    })
  })
})

テスト結果を省略していますが、ここでまたテストを実行し期待通りに落ちているかを確認します。

「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」を実装する

テストが書いたシナリオを元にTaskListコンポーネントとindexページ、indexストアを実装してきます。

TaskListコンポーネントではToDoリストと完了リストがあり、indexページではTaskListコンポーネントとTaskFormコンポーネントを呼び出してタスクをストアから呼び出すようにします。

indexストアではFirestoreからデータを取ってきてToDoタスクと完了タスクに状態管理するようにします。

・components/TaskList.vue

<template>
  <div>
    <p>ToDoリスト</p>
    <ul>
      <li
        v-for="todoTask in todoTasks"
        :key="todoTask.id"
        class="todo"
      >
        <span>{{ todoTask.content }}</span>
      </li>
    </ul>
    <hr>
    <p>完了リスト</p>
    <ul>
      <li
        v-for="doneTask in doneTasks"
        :key="doneTask.id"
        class="done"
      >
        <span>{{ doneTask.content }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {
  computed: {
    ...mapGetters(['todoTasks']),
    ...mapGetters(['doneTasks'])
  }
}
</script>

・pages/index.vue

<template>
  <section>
    <TaskForm/>
    <TaskList/>
  </section>
</template>

<script>
import TaskForm from '@/components/TaskForm.vue'
import TaskList from '@/components/TaskList.vue'

export default {
  async asyncData({ store }) {
    await store.dispatch('fetchTasks')
  },
  components: {
    TaskForm,
    TaskList
  }
}
</script>

・store/index.spec.js

import _ from 'lodash'

export const state = () => ({
  tasks: []
})

export const getters = {
  tasks: state => state.tasks,
  todoTasks: state => state.tasks.filter(task => task.status === 'todo'),
  doneTasks: state => state.tasks.filter(task => task.status === 'done')
}

export const mutations = {
  updateTasks(state, tasks) {
    state.tasks = tasks
  }
}

export const actions = {
  async fetchTasks({ commit }) {
    await this.$axios.get(`/tasks`, {
      baseURL: process.env._AXIOS_BASE_URL_
    })
      .then(res => {
      let tasks = []
      if (_.has(res.data, 'documents')) {
        tasks = res.data.documents.map(doc => {
          return {
            id: _.last(doc.name.split('/')),
            content: doc.fields.content.stringValue,
            status: doc.fields.status.stringValue
          }
        })
      }
      commit('updateTasks', tasks)
    })
  }
}

「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」をテストする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskList.spec.js
  components/TaskList.vue
    template
      ✓ todoリストが表示されること (13 ms)
      ✓ 完了リストが表示されること (2 ms)
    script
      computed
        todos
          ✓ storeからtodoTasksが取得できること (2 ms)
          ✓ storeからdoneTasksが取得できること (1 ms)

PASS  store/index.spec.js
  store/index.js
    getters
      todoTasks
        ✓ statusがtodoのtaskが取得できること (3 ms)
      doneTasks
        ✓ statusがdoneのtaskが取得できること (1 ms)
      tasks
        ✓ すべてのtasksが取得できること (1 ms)
    actions
      fetchTasks
        ✓ tasksが取得できること

「ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる」のテストを書く

先ほどTaskFormコンポーネントに作成したフォームに入力して作成ボタンを押すとToDoタスク一覧に追加されることが確認できるテストを書きます。

・components/TaskForm.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as store from '@/store'
import TaskForm from '@/components/TaskForm.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskForm.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(TaskForm, {
      store: store,
      localVue
    })
  })

  describe('template', () => {
    
...

    describe('タスク入力がある場合', () => {
      beforeEach(() => {
        const mock = jest.fn()
        wrapper.vm.addTask = mock
        wrapper.find('input').setValue('content')
      })

      test('dataに入力が反映されること', () => {
        expect(wrapper.vm.taskForm.content).toBe('content')
      })

      test('タスク作成ボタンを押下するとaddTaskが呼ばれること', () => {
        wrapper.find('button').trigger('click')
        
        expect(wrapper.vm.addTask).toHaveBeenCalled()
      })
    })
  })

  describe('script', () => {
    describe('data', () => {
      test('dataの構造が正しいこと', () => {
        expect(wrapper.vm.$data).toHaveProperty('taskForm.content')
      })
    })
  })
})

ストアのテストでは作成ボタンが押下された際にFirestoreに入力されたタスクのデータが保存されることを確認します。

・store/index.spec.js

import Vuex from 'vuex'
import * as index from '@/store'
import { createLocalVue } from '@vue/test-utils'
import _ from 'lodash'
import axios from 'axios'

const localVue = createLocalVue()
localVue.use(Vuex)

let mockAxiosGetResult
jest.mock('axios', () => ({
  
...

  post: jest.fn(() => Promise.resolve(mockAxiosGetResult))
}))

let action
const testedAction = (context = {}, payload = {}) => {
  return index.actions[action].bind({ $axios: axios })(context, payload)
}

describe('store/index.js', () => {

...

  describe('actions', () => {
    let commit
    beforeEach(() => {
      commit = store.commit
    })

...

    describe('createTask', () => {
      test('taskが追加されること', async () => {
        mockAxiosGetResult = {
          data: {
            name: `tasks/${todoTask.id}`,
            fields: {
              content: { stringValue: todoTask.content },
              status: { stringValue: todoTask.status }
            }
          }
        }
        action = 'createTask'
        await testedAction({ commit })
        expect(store.getters['todoTasks']).toContainEqual(todoTask)
      })
    })
  })
})

「ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる」を実装する

タスク作成ボタンが押されるとaddTaskが呼び出されるように実装していきます。

addTaskメソッドはストアのcreateTaskを呼び出し、タスクが状態管理されるようにします。

・components/TaskForm.vue

<template>
  <div>
    <input
      v-model="taskForm.content"
    >
    <button
      @click="addTask">
      タスク作成
    </button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      taskForm: { content: '' }
    }
  },
  methods: {
    async addTask() {
        await this.$store.dispatch('createTask', _.cloneDeep(this.taskForm))
        this.taskForm.content = ''
    }
  }
}
</script>

addTaskから呼びだされるcreateTaskの実装をストアに書いていきます。

・store/index.js

import _ from 'lodash'

export const state = () => ({
  tasks: []
})

export const getters = {
  tasks: state => state.tasks,

...

}

export const mutations = {

  ...

  addTask(state, newTask) {
    state.tasks.push(newTask)
  }

...

}

export const actions = {
  async createTask({ commit }, payload) {
    const req = {
      fields: {
        content: {
          stringValue: payload.content
        },
        status: {
          stringValue: 'todo'
        }
      }
    }
    await this.$axios.post('/tasks', req, {
      baseURL: process.env._AXIOS_BASE_URL_
    }).then(res => {
      const newTask = {
        id: _.last(res.data.name.split('/')),
        content: res.data.fields.content.stringValue,
        status: res.data.fields.status.stringValue
      }
      commit('addTask', newTask)
    })
  }
 }

「ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる」をテストする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✓ タスク入力フォームが存在すること (11 ms)
      ✓ タスク作成ボタンが存在すること (6 ms)
      タスク入力がある場合
        ✓ dataに入力が反映されること (3 ms)
        ✓ タスク作成ボタンを押下するとaddTaskが呼ばれること (2 ms)
    script
      data
        ✓ dataの構造が正しいこと (1 ms)

PASS  store/index.spec.js
  store/index.js
    getters
      todoTasks
        ✓ statusがtodoのtaskが取得できること (3 ms)
      doneTasks
        ✓ statusがdoneのtaskが取得できること (1 ms)
      tasks
        ✓ すべてのtasksが取得できること (1 ms)
    actions
      fetchTasks
        ✓ tasksが取得できること (1 ms)
      createTask
        ✓ taskが追加されること (1 ms)

「ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない」のテストを書く

フォームにタスクが入力していない場合は、作成ボタンを押すことができないことを確認できるテストを書いていきます。

・components/TaskForm.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as store from '@/store'
import TaskForm from '@/components/TaskForm.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskForm.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(TaskForm, {
      store: store,
      localVue
    })
  })


  describe('template', () => {

    ...

    describe('タスク入力がない場合', () => {
      beforeEach(() => {
        const mock = jest.fn()
        wrapper.vm.addTask = mock
        wrapper.find('input').setValue('')
      })

      test('dataに入力が反映されること', () => {
        expect(wrapper.vm.taskForm.content).toBe('')
      })

      test('タスク作成ボタンを押下するとaddTaskが呼ばれないこと', () => {
        wrapper.find('button').trigger('click')
        
        expect(wrapper.vm.addTask).not.toHaveBeenCalled()
      })
    })
  
  })

 ...

})

「ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない」を実装する

ボタンにdisabled属性を付与し、computedでフォームの入力を監視してボタンの活性非活性を制御するように実装しました。

・components/TaskForm.vue

<template>
  <div>
    <input
      v-model="taskForm.content"
    >
    <button
      :disabled="activateSubmit"
      @click="addTask">
      タスク作成
    </button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  
...

  computed: {
    activateSubmit () {
      return this.taskForm.content == ''
    }
  },
  
...

}
</script>

「ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない」をテストする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✓ タスク入力フォームが存在すること (9 ms)
      ✓ タスク作成ボタンが存在すること (1 ms)
      タスク入力がある場合
        ✓ dataに入力が反映されること (2 ms)
        ✓ タスク作成ボタンを押下するとaddTaskが呼ばれること (2 ms)
      タスク入力がない場合
        ✓ dataに入力が反映されること (1 ms)
        ✓ タスク作成ボタンを押下するとaddTaskが呼ばれないこと (1 ms)
    script
      data
        ✓ dataの構造が正しいこと (1 ms)

「ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる」のテストを書く

ToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できるテストを書いていきます。

・components/TaskList.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as indexStore from '@/store'
import TaskList from '@/components/TaskList.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskList.vue', () => {
  let wrapper
  let store
  let todoTask
  let doneTask
  beforeEach(() => {
    store = new Vuex.Store(indexStore)
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
    wrapper = mount(TaskList, {
      store: store,
      localVue
    })
    store.replaceState({ tasks: [todoTask, doneTask] })
  })

  describe('template', () => {
   
...

    describe('todoリストの完了をクリックする場合', () => {
      test('doneTaskが指定の引数で呼び出されること', () => {
        const mock = jest.fn(todoTask => todoTask)
        wrapper.vm.doneTask = mock
     
        wrapper.find('li.todo button').trigger('click')
        expect(wrapper.vm.doneTask).toHaveBeenCalled()
        expect(wrapper.vm.doneTask.mock.results[0].value).toBe(todoTask)
      })
    })
  })

  ...

})

ストアではタスクのステータスが更新されることが確認できるテストを書いていきます。

・store/index.spec.js

import Vuex from 'vuex'
import * as index from '@/store'
import { createLocalVue } from '@vue/test-utils'
import _ from 'lodash'
import axios from 'axios'

const localVue = createLocalVue()
localVue.use(Vuex)

let mockAxiosGetResult
jest.mock('axios', () => ({
  
...

  patch: jest.fn(() => Promise.resolve(mockAxiosGetResult))
}))

let action
const testedAction = (context = {}, payload = {}) => {
  return index.actions[action].bind({ $axios: axios })(context, payload)
}

describe('store/index.js', () => {
  let store
  let todoTask, doneTask
  beforeEach(() => {
    store = new Vuex.Store(_.cloneDeep(index))
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
  })


...

  describe('actions', () => {
    let commit
    beforeEach(() => {
      commit = store.commit
    })

   ...

    describe('updateTask', () => {
      beforeEach(() => {
        store.replaceState({
          tasks: [todoTask]
        })
      })

      test('taskが更新されること', async () => {
        mockAxiosGetResult = {
          data: {
            name: `tasks/${todoTask.id}`,
            fields: {
              content: { stringValue: 'updatedContent' },
              status: { stringValue: 'done' }
            }
          }
        }
        action = 'updateTask'
        await testedAction({ commit })
        expect(store.getters['doneTasks']).toContainEqual({
          id: todoTask.id,
          content: 'updatedContent',
          status: 'done'
        })
      })
    })
  })
})

「ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる」を実装する

ToDoタスクの完了ボタンを押すと、ストアのupdateTaskを呼び出しステータスを完了にすることで完了タスク一覧に移動されるように実装します。

・components/TaskList.vue

<template>
  <div>
    <p>ToDoタスク</p>
    <ul>
      <li
        v-for="todoTask in todoTasks"
        :key="todoTask.id"
        class="todo"
      >
        <span>{{ todoTask.content }}</span>
        <button 
          @click="doneTask(todoTask)">
          完了
        </button>
      </li>
    </ul>
    <hr>
    <p>完了タスク</p>
    <ul>
      <li
        v-for="doneTask in doneTasks"
        :key="doneTask.id"
        class="done"
      >
        <span>{{ doneTask.content }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {
  
...

  methods: {
    async doneTask(task) {
      const payload = _.cloneDeep(task)
      payload.status = 'done'
      await this.$store.dispatch('updateTask', payload)
    }
  }
}
</script>

・store/index.js

import _ from 'lodash'

export const state = () => ({
  tasks: []
})

export const getters = {
  tasks: state => state.tasks,

  ...

}

export const mutations = {
  
...

  updateTask(state, newTask) {
    const task = state.tasks.find(task => task.id === newTask.id)
    if (task) {
      task.content = newTask.content
      task.status = newTask.status
    }
  }
}

export const actions = {
 
...

  async updateTask({ commit }, payload) {
    const req = {
      fields: {
        content: {
          stringValue: payload.content
        },
        status: {
          stringValue: payload.status
        }
      }
    }
    await this.$axios.patch(`/tasks/${payload.id}`, req, {
      baseURL: process.env._AXIOS_BASE_URL_
    }).then(res => {
      const updateTask = {
        id: _.last(res.data.name.split('/')),
        content: res.data.fields.content.stringValue,
        status: res.data.fields.status.stringValue
      }
      commit('updateTask', updateTask)
    })
  }
}

「ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる」のテストをする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskList.spec.js
  components/TaskList.vue
    template
      ✓ todoリストが表示されること (17 ms)
      ✓ 完了リストが表示されること (2 ms)
      todoリストの完了をクリックする場合
        ✓ doneTaskが指定の引数で呼び出されること (3 ms)
    script
      computed
        todos
          ✓ storeからtodoTasksが取得できること (1 ms)
          ✓ storeからdoneTasksが取得できること (2 ms)

PASS  store/index.spec.js
  store/index.js
    getters
      todoTasks
        ✓ statusがtodoのtaskが取得できること (3 ms)
      doneTasks
        ✓ statusがdoneのtaskが取得できること (1 ms)
      tasks
        ✓ すべてのtasksが取得できること
    actions
      fetchTasks
        ✓ tasksが取得できること (1 ms)
      createTask
        ✓ taskが追加されること
      updateTask
        ✓ taskが更新されること

「ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる」のテストを書く

完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できることが確認できるテストを書いていきます。

ストアのタスクステータス更新のテストは先程のストーリーで確認済みなため、新しくストアのテストは書いていません。

・components/TaskList.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as indexStore from '@/store'
import TaskList from '@/components/TaskList.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskList.vue', () => {
  let wrapper
  let store
  let todoTask
  let doneTask
  beforeEach(() => {
    store = new Vuex.Store(indexStore)
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
    wrapper = mount(TaskList, {
      store: store,
      localVue
    })
    store.replaceState({ tasks: [todoTask, doneTask] })
  })

  describe('template', () => {
   
...

   describe('完了リストのToDoに戻すをクリックする場合', () => {
      test('returnTaskが指定の引数で呼び出されること', () => {
        const mock = jest.fn(doneTask => doneTask)
        wrapper.vm.returnTask = mock
     
        wrapper.find('li.done button').trigger('click')
        expect(wrapper.vm.returnTask).toHaveBeenCalled()
        expect(wrapper.vm.returnTask.mock.results[0].value).toBe(doneTask)
      })
    })
 })

  ...

})

「ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる」を実装する

完了タスクのToDoに戻すボタンを押すと、ストアのupdateTaskを呼び出しステータスをToDoにすることでToDoタスク一覧に移動されるように実装します。

・components/TaskList.vue

<template>
  <div>
    <p>ToDoタスク</p>
    <ul>
      <li
        v-for="todoTask in todoTasks"
        :key="todoTask.id"
        class="todo"
      >
        <span>{{ todoTask.content }}</span>
        <button 
          @click="doneTask(todoTask)">
          完了
        </button>
      </li>
    </ul>
    <hr>
    <p>完了タスク</p>
    <ul>
      <li
        v-for="doneTask in doneTasks"
        :key="doneTask.id"
        class="done"
      >
        <span>{{ doneTask.content }}</span>
        <button 
          @click="returnTask(doneTask)">
          ToDoに戻す
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {

...

  methods: {

    ...

    async returnTask(task) {
      const payload = _.cloneDeep(task)
      payload.status = 'todo'
      await this.$store.dispatch('updateTask', payload)
    }
  }
}
</script>

「ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる」のテストをする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskList.spec.js
  components/TaskList.vue
    template
      ✓ todoリストが表示されること (12 ms)
      ✓ 完了リストが表示されること (3 ms)
      todoリストの完了をクリックする場合
        ✓ doneTaskが指定の引数で呼び出されること (3 ms)
      完了リストのToDoに戻すをクリックする場合
        ✓ returnTaskが指定の引数で呼び出されること (2 ms)
    script
      computed
        todos
          ✓ storeからtodoTasksが取得できること (1 ms)
          ✓ storeからdoneTasksが取得できること (5 ms)

全部のテストを流す

全部の実装が終わったら、全てのテストを流します。package.jsonのscriptに”test”: “jest –config jest.config.js”を追加し、以下のコマンドで実行します。

$ npm run test

PASS components/TaskForm.spec.js
PASS components/TaskList.spec.js
PASS store/index.spec.js

全てのテストが通ったら完了です。

TDDのサイクル

テスト駆動開発は「レッド」「グリーン」「リファクタリング」のサイクルで回していきます。これは全てのストーリーの受け入れ条件を満たすまで繰り返します。

TDDにおいてまだ存在していなコードのテストを書くのに戸惑いますが、必要なコードがすでにそこにあるかのごとく書くことを意識すると良いみたいです。

レッド

新しいコードを書く前に、まずは失敗するテストコードを書きます。

新しいコードの意図をテストで示します。

グリーン

どんな方法でも良いのでテストが成功するコードを書きます。

素早くバーをグリーンに変えることが最優先になります。

リファクタリング

テストが成功する状態を維持しつつ簡潔・明快なコードにします。

持ち込んだ重複を取り除き、素早くグリーンになるようにします。

TDDのルール

失敗するテストを一つ書くまでは、新しいコードを一切書かない

テストを書くということは、追加しようとしているコードの価値について真剣に考えることになり、そうすることで凝りすぎた解決策に走ることを避けることができます。

ここで大事なのは、本当に必要なコード以外書いてはいけないということです。

危なっかしいところを全てテストする

TDDでは文字通り全てをテストするわけはなく、危なっかしいところを全てテストします。

いかにも壊れてしまいそうな箇所や特定の条件下で特殊な挙動をする箇所がある場合、そうした意図を伝えるためにテストを書きます。

テストを作成する

実際にテスト駆動開発入門を読みながらTDDを学びます。VSCodeにJavaの実行環境を構築し、実際にコードを書いてテストを実行していきます。

まずはテストを作成します。テスト駆動開発入門に則って5ドルを2回回すと10ドルと等しくなることをテストします。

・DollarTest.java

public class DollarTest {
  @Test

  public void testMultiplication() {
    Dollar five = new Dollar(5);
    five.times(2);
    assertEquals(10, five.amount);
  }
}

失敗することを確認する

テストを作成したら、まだ実装していないので当たり前ですがテストが失敗することを確認します。ここまでがTDDサイクルで言う「レッド」であるという認識です。

テストが通るように実装する

テストを作成し、失敗することを確認したら実際に処理を実装をしていきます。

・Dollar.java

public class Dollar {
  int amount;

  Dollar(int amount) {
  }

  void times(int multiplier) {
  }
}

シンタックス系のエラーはなくなりましたが、テスト結果が正しくありません。期待されている値は10ですが、0となっています。

期待されている値が10になるように実装していきます。

public class Dollar {
  int amount = 5 * 2;

  Dollar(int amount) {
  }

  void times(int multiplier) {
  }
}

テストが通りました。ここまでがTDDサイクルで言う「グリーン」であるという認識です。

リファクタリングする

テストが成功したといえど、amountの初期値を10にしているため引数の値が変わればテストが失敗します。そのため、どんな値でも対応できるようにリファクタリングをしていきます。

public class Dollar {
  int amount;

  Dollar(int amount) {
    this.amount = amount;
  }

  void times(int multiplier) {
    amount *= multiplier;
  }
}

リファクタリングをしたら再度テストを実行し、テストが成功することを確認します。