JavaScriptでスパイ、スタブ、モックなどのテストダブルを行う

JavaScriptでテストを書こう！ 第4回

フェイク

　フェイクは、時間やXMLHttpRequestオブジェクトを置き換え、擬似的に実行されたり変更されたりした状態を作ります。Sinon.jsには、時間を擬似的に進められるFakeTimersと、Ajaxの戻り値などを偽装することができるFakeXMLHttpRequestが用意されています。

　リスト4-01は、FakeXMLHttpRequestのサンプルです。テスト実行前処理の関数beforeEach内の①でFakeXMLHttpRequestのオブジェクトを取得し、XMLHttpRequestを偽装します。requestsの処理は、Ajaxリクエストを行った際の戻り値を制御するための記述です。テスト実行後処理の関数afterEach内の②では、テスト終了後に偽装したXMLHttpRequestを元に戻しています。

　実際のテストを見ていきましょう。テスト対象のメソッドの実行後、③のように実際に擬似的にレスポンスを発生させます。引数は第1引数はhttpレスポンスコード、第2引数はhttpヘッダ、第3引数は呼び出し結果のbodyです。この関数を実行することで、コールバック関数が実行されます。④では、指定したbody値がコールバック関数で取得できているか確認しています。このように、サーバサイドの処理を用意しなくてもテストを実行することが可能になります。

［リスト4-01］バリデーションのテスト（Sinon.js.html）

describe("Ajaxでの登録処理のテスト", function() {
  beforeEach(function() {
    // XMLHttpRequestをフェイク ①
    this.xhr = sinon.useFakeXMLHttpRequest();
    var requests = this.requests = [];

    this.xhr.onCreate = function(xhr) {
      requests.push(xhr);
    };
  });

  afterEach(function() {
    // テスト終了後、XMLHttpRequestを元に戻す ②
    this.xhr.restore();
  });

  it("Ajaxのテスト", function() {
    /** 事前準備 */
    // コールバック関数をスパイする
    var callback = sinon.spy();
    var userName = new UserName('Koike Naoki');
    var mailAddress = new MailAddress('[e-mail]');
    var user = new User(userName, mailAddress);

    /** 実行 */
    UserRepository.register(user, callback);
    // Ajaxのレスポンスを指定する ③
    this.requests[0].respond(200, {"Content-Type": "application/json"},
    '[{ "userId": 213 }]');

    /** 確認 */
    // コールバックが呼ばれ、どのような引数で呼ばれたかを確認する ④
    expect(callback.calledWith([{"userId": 213}])).to.be.true;
  });
});

実行結果

　ここまで説明したテストの実行結果は以下のとおりです。これでAjaxやオブジェクトの中まで考慮してテストができるようになりました。

テスト実行結果

最後に

　今回は、sinon.jsの機能を使ってテストダブルの説明をしました。ここまでの連載で、テストの幅も広がったのではないでしょうか。次回は、マルチブラウザでテストコードを実行する方法を説明します。