【Nuxt.js】JestでTDDを実践してみる

【Nuxt.js】JestでTDDを実践してみる

2021年6月27日
Vue.js

JestでTDDを実践しながらNuxt.jsで簡単なToDoリストをつくってみました。

目次

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

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

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

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

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

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

 

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

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

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

・components/TaskForm.spec.js

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

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

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

 

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

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

・components/TaskForm.vue

 

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

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

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

 

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

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

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

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

・components/TaskList.spec.js

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

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

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

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

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

・store/index.spec.js

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

 

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

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

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

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

・components/TaskList.vue

・pages/index.vue

・store/index.spec.js

 

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

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

 

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

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

・components/TaskForm.spec.js

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

・store/index.spec.js

 

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

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

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

・components/TaskForm.vue

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

・store/index.js

 

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

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

 

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

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

・components/TaskForm.spec.js

 

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

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

・components/TaskForm.vue

 

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

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

 

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

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

・components/TaskList.spec.js

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

・store/index.spec.js

 

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

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

・components/TaskList.vue

・store/index.js

 

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

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

 

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

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

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

・components/TaskList.spec.js

 

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

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

・components/TaskList.vue

 

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

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

 

全部のテストを流す

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

 

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