このレッスンではシナリオテストについて学んでいきます。 シナリオテストを実行することでアプリの問題点を洗い出すことができるため非常に重要な作業になります。 このレッスンでシナリオテストについて理解を深めていただければ幸いです。

シナリオテストとは

シナリオテストとは、複数のユーザーアクションを順に実行しそれらが期待通りに動作するかを検証するテスト手法のことです。 複数のユーザーアクションを組み合わせて行われるため、システムの全体像を確認することができます。

また、ユーザシナリオは、ユーザーがシステムを使用する際に行う一連の操作を定義したものです。 ユーザーがシステムをどのように使用するかを想定し、その使用法に基づいてテストを実施するために用いられます。 ユーザの視点からシステムをテストすることができるため、ユーザの体験を改善するためのフィードバックを得ることができます。

今回のTODOアプリの利用シナリオを考えてみます。

1. タスクを作成する
2. タスク一覧ページに表示されることを確認する
3. タスク詳細ページが表示されることを確認する
4. タスク編集ページに入り編集する
5. タスク一覧ページで編集が成功したことを確認する
6. タスク詳細ページに入り削除する
7. タスク一覧ページで削除が成功したことを確認する

一つずつ実行してみます。

タスクを作成する

メインメニューからタスク作成を開きます。

タイトルと詳細を入力します。

登録します

登録できたようです。

タスク一覧ページに表示されることを確認する

タスク一覧ページにテストというタスクができていることが確認できます。

タスク詳細ページが表示されることを確認する

タスク一覧ページから詳細へをクリックし詳細ページを見てみます。

作成日時など詳細が表示されることが確認できました。

タスク編集ページに入り編集する

編集ボタンを押して編集画面に入ります。

編集画面も機能しているようです。初期値も問題ありません。編集してみます。

更新ボタンを押してみます。

更新できたようです。

タスク一覧ページで編集が成功したことを確認する

タスク一覧画面に戻ります。

先ほど編集した内容が反映されています。

タスク詳細ページに入り削除する

詳細へを押して詳細ページに入ります。

削除ボタンを押してみます。

削除できたようです。

タスク一覧ページで削除が成功したことを確認する

タスク一覧ページを見て削除ができているか確認します。

無事削除ができています。

jestはJavaScriptのテストに用いられるフレームワークです。

単体テスト、統合テストなど様々なテストが行え、またTypeScript、Vue.js、Reactなど、JavaScriptであれば幅広くテストを行うことができます。 npmモジュールですのでnpmもしくはyarnで簡単にインストールできます。

例えば二つの引数を受け取り、加算して返す単純な関数を考えます。

JavaScript

const add = (a, b) => {
  return a + b;
}

この関数のテストを考えてみます。

JavaScript

test('1+2を渡すと3が返ってくる', () => {
  expect(add(1, 2)).toBe(3);
});

このテストコードではadd関数に引数1と2を渡して3が返されるかどうかをテストしています。 expect関数を使用してadd関数に1と2を渡して呼び出しています。 toBeは正確な値が等しいかどうかをチェックするために使用されます。 ===相当であり、==で等しい場合でもテストが通らないことに注意してください。 この場合正しいのでテストが通ります。3以外の戻り値が返ってきた場合はテストが失敗し、add関数にバグがあることがわかります。

jestによるTODOアプリのテスト

jestを実際に使ってみます。まずはインストールを行います。 同時にリクエストを送信するためにaxiosもインストールします。

terminal

npm install -D jest axios

test.jsを作成し、下記を記載してください。

test.js

const axios = require('axios')

test('作成テスト', async () => {
  const res = await axios.post('http://localhost:3000/api/task', {
    title: 'jestからのタイトル',
    detail: 'jestからの内容'
  })
  expect(res.data).toBe('作成しましたトップへ');
});

順番に見ていきます。

test.js

const axios = require('axios')

axiosというnpmモジュールをインポートしています。 これはNode.jsからHTTPリクエストを送信するためのモジュールです。

test.js

  test('作成テスト', async () => {

作成テストというテストケースを定義しています。

test.js

const res = await axios.post('http://localhost:3000/api/task', {
  title: 'jestからのタイトル',
  detail: 'jestからの内容'
})

axiosを用いてタスクの作成を行なっています。

test.js

expect(res.data).toBe('作成しましたトップへ');

レスポンス内容が正しいかどうか検証しています。

このようにすることで、テストを実行することができます。

テストを記述することで、バグに気づくことができることはもちろん、 想定された通りにソフトウェアが動作していることが保証でき、 またリファクタリングを後に行った時にもテストがあると変更後のコードがテストでき、 コードが壊れていないことが確認できます。