2

質問内容

下部に書いています、「実現したいこと」を実現するにあたってテストコードを書くにあたり、どのようなツールを使うと、実現できるのかどなたかお教えいただけると嬉しいです。

概要

以下のような挙動において、それが正しく動作しているか?という観点でテストを行えるテストコードを書きたいのですが、恥ずかしながらテストコードはこれまでに書いた経験がなく、はじめてのことなので、どのようなツールを使うのがいいのか、調査を重ねてもいまいち理解できず、こちらを利用させてもらいました。

尚、このコンテンツ自体はvue.jsで作られているものです。

挙動内容

---以前---

  • プルダウンメニューの中から何か一つアイテム名を選択します(プルダウンのメニューは最低1個から最大は無制限まで存在します)

  • ページがリダイレクトされ、トップページに戻ります

  • トップページに戻りますが、選択したアイテムは記憶されているので、そのまま再度アイテムページへ遷移します

  • ページ遷移後、選択されているアイテムの詳細情報をapiから取得し画面に表示されます

---今後---

※以前との変更点は、アイテム選択後リダイレクト処理ではなく、そのままapiから情報を取得し画面に表示するようになったことです。

  • プルダウンメニューの中から何か一つアイテム名を選択します(プルダウンのメニューは最低1個から最大は無制限まで存在します)

  • アイテム名を選択後、apiを叩いてそのアイテムに関する詳細情報を取得します

  • 取得された詳細情報が画面に表示されます

  • 再度プルダウンメニューからアイテムを選択し直した場合、上記の処理を繰り返します

実現したいこと
挙動内容に書いた「今後」の処理について、『リダイレクト処理がなされてないか?』ということが問題なく行われているか?をテストしたい。
『リダイレクト処理がなされてないか?』は、『アイテム選択前のURLとアイテム選択後のURLは同一か?』で判断したいと考えています。

1
  • > itmammothさん ありがとうございます。 例までご提示いただき大変助かります。 これを参考に実装してみたいと思います。
    – user32876
    Commented 2019年4月14日 7:55

1 件の回答 1

1

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が変わってないかとかテストできますよ。

この質問に回答するには、ログインする必要があります。