Jasmineの非同期処理を使ってみた - Adwaysエンジニアブログ

こんばんは、高橋です。
前から気になっていたJavaScriptのテストフレームワークである「Jasmine」の非同期処理について試してみたので、ご紹介します！

JavaScriptのテストは辛い

JavaScriptのテストは辛いものがありますよね。。
PhantomJSをインストールするにもビルドに長い時間が掛かったり、
やっとの思いでインストール出来ても、挙動がおかしかったり、日本語がうまく表示できなかったりと、
ちゃんとテスト出来てるのかと不安になったりします。

そこで、ブラウザベースのテストフレームワーク「Jasmine」があったではないか！と思い出して、
試してみることにしました。

Jasmine

http://jasmine.github.io/

Jasmineをダウンロードすると、サンプルとして音楽プレイヤーのテストスクリプトが付いてきます。

テストでは、曲を再生することが出来る、曲が一時停止した時に一時停止していることが示されているといった、音楽プレイヤーとしては、ごく普通なテストになっています。

テストに失敗すると・・・？

テストに失敗するとこのように赤く表示されます。

このテストコードでは、本来レジュームされるはずの処理をコメントアウトしてみました。

IEのテストでも使える！

IEでのテストは大変なものがあります。
Jasmineでは、ブラウザで直接テストコードを実行するため、IEでのテストが容易に行えます。
（古いIEではJasmine自体が動かない場合があります。。）

そしていよいよ非同期テスト！

Javascript V8で導入された Promiseに似た仕組みで、Jasmineでは非同期テストを行うことができます。

Ver2のJasmineでは beforeEach の中で非同期テストを行うことが出来るようになりました。

describe("新規登録画面", function() {
  var self;
  var window;
  beforeEach(function(done) {
    $("iframe").attr("src", "user/new").once("load", function () {
      self = $(this).contents();
      window = $(this).get(0).contentWindow;
      (function(self){
           self.find('.submit-button').click();
           setTimeout(function(){
                done();
           }, 500);
        }, 100);
      }).call(window, self);
    });
  });

  it("新規登録ができることを期待する", function() {
    expect(self.find(".alert").text()).toContain("成功");
  });

  it("もう一度新規登録ができることを期待する", function() {
    expect(self.find(".alert").text()).toContain("成功");
  });


});

このコードでは、非同期処理として iframeの読み込みを行っています。
(Jasmineの他にjQueryを使っています)

iframeの読み込みが終わり、 done(); が実行されると、次のテストケースが実行されます。
この例では、「もう一度新規登録ができることを期待する」が実行されます。

iframeを使用する事で、ページ遷移のテストも可能にしています。

PhantomJSでやりたかったことが、なんとiframeとJasmineによって出来てしまうなんてびっくりです！

テストに便利なライブラリをご紹介

最後に、Jasmineでのテストに便利なJavaScriptライブラリをご紹介します。

キー送信

https://github.com/dwachss/bililiteRange

https://github.com/dwachss/bililiteRange/blob/master/jquery.sendkeys.js

こちらは、キーの送信を行わなければいけない処理がある場合に便利なライブラリです。

実際に、キーイベントを送出して文字を入力するため、changeイベントが発火したりするので、人間の操作に近い振る舞いを行うことができる便利なライブラリです！

フェイクデータ