CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/05/08 14:00
目次

フェイク

 フェイクは、時間や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('koike@koikenaoki.com');
    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の機能を使ってテストダブルの説明をしました。ここまでの連載で、テストの幅も広がったのではないでしょうか。次回は、マルチブラウザでテストコードを実行する方法を説明します。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:JavaScriptでテストを書こう!

著者プロフィール

  • WINGSプロジェクト 安西剛 (ヤスニシ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5