54134


 ** _質問内容_**

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

**_概要_**

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

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

**_挙動内容_**

**\---以前---**

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

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

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

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

**\---今後---**

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

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

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

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

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

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


CC BY-SA 4.0
2019-04-12T09:04:09.273
54120
2019-04-13T06:51:08.637
2019-04-12T09:09:22.667
32876
32876
question
javascript vue.js
JavaScriptのテストツールについて


Javascript用のE2Eテストライブラリを使えば実現できます。  
E2Eテストとは、簡単に言うと、ブラウザを自動操縦して行うテストです。  
色んなライブラリがありますが、一例に[nightwatch.js](http://nightwatchjs.org/)を紹介しておきます。

次のコードは、Googleで"nightwatch"というキーワードで検索して、結果ページに"Night
Watch"という文字列が含まれていることを確認するテストコードです。

[code]

    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();
      }
    };
    
[/code]

このような感じでブラウザを自動操縦できますので、特定のプルダウンからアイテムを選択して、表示された詳細情報に特定の文字列が含まれているかとか、URLが変わってないかとかテストできますよ。


CC BY-SA 4.0
2019-04-13T06:51:08.637
54134
2019-04-13T06:51:08.637
9608
54120
answer