質問: ***質問内容*** 下部に書いています、「実現したいこと」を実現するにあたってテストコードを書くにあたり、どのようなツールを使うと、実現できるのかどなたかお教えいただけると嬉しいです。 ***概要*** 以下のような挙動において、それが正しく動作しているか?という観点でテストを行えるテストコードを書きたいのですが、恥ずかしながらテストコードはこれまでに書いた経験がなく、はじめてのことなので、どのようなツールを使うのがいいのか、調査を重ねてもいまいち理解できず、こちらを利用させてもらいました。 尚、このコンテンツ自体は`vue.js`で作られているものです。 ***挙動内容*** **---以前---** * プルダウンメニューの中から何か一つアイテム名を選択します(プルダウンのメニューは最低1個から最大は無制限まで存在します) * ページがリダイレクトされ、トップページに戻ります * トップページに戻りますが、選択したアイテムは記憶されているので、そのまま再度アイテムページへ遷移します * ページ遷移後、選択されているアイテムの詳細情報を`api`から取得し画面に表示されます **---今後---** ※以前との変更点は、アイテム選択後リダイレクト処理ではなく、そのまま`api`から情報を取得し画面に表示するようになったことです。 * プルダウンメニューの中から何か一つアイテム名を選択します(プルダウンのメニューは最低1個から最大は無制限まで存在します) * アイテム名を選択後、`api`を叩いてそのアイテムに関する詳細情報を取得します * 取得された詳細情報が画面に表示されます * 再度プルダウンメニューからアイテムを選択し直した場合、上記の処理を繰り返します ***実現したいこと*** 挙動内容に書いた「今後」の処理について、『リダイレクト処理がなされてないか?』ということが問題なく行われているか?をテストしたい。 『リダイレクト処理がなされてないか?』は、『アイテム選択前の`URL`とアイテム選択後の`URL`は同一か?』で判断したいと考えています。
回答: Javascript用のE2Eテストライブラリを使えば実現できます。 E2Eテストとは、簡単に言うと、ブラウザを自動操縦して行うテストです。 色んなライブラリがありますが、一例にnightwatch.jsを紹介しておきます。 次のコードは、Googleで"nightwatch"というキーワードで検索して、結果ページに"Night Watch"という文字列が含まれていることを確認するテストコードです。 ``` module.exports = { 'Demo test Google' : function (browser) { browser .url('http://www.google.com') .waitForElementVisible('body') .setValue('input[type=text]', 'nightwatch') .waitForElementVisible('input[name=btnK]') .click('input[name=btnK]') .pause(1000) .assert.containsText('#main', 'Night Watch') .end(); } }; ``` このような感じでブラウザを自動操縦できますので、特定のプルダウンからアイテムを選択して、表示された詳細情報に特定の文字列が含まれているかとか、URLが変わってないかとかテストできますよ。