AngularJSのバックエンドをモック化してテストする


AngularJSでコントローラからREST APIを叩き、JSONデータを取得することがよくあると思う。バックエンドにモックを使用してJasmineにてテストする方法を備忘録も兼ねて記述しておく。

環境

  • AngularJS 1.3.4
  • Jasmine 2.1.2

APIアクセスにモックを使用する

テストの対象となるコントローラは次のような感じ。

よくある感じ。Postモデルも典型的で、REST APIにてバックエンドからJSONを取得する。

このコントローラをJasmineでユニットテストするのだが、このバックエンドへのアクセスをモック化する。$httpBackendをインジェクションすればよい。

よしよし、これでテストに成功す・・・・るはずが失敗してしまった。

{ mock: 'spec' }って、バッチリ一致してるじゃん・・と思いきや、Jasmineの toEqualメソッドはJSON同士の比較はできないらしい。ちぇっ、気が利かないなあ。

しょうがないので、angularのequalsメソッドを使用するように、カスタムマッチャを追加する。

toEqualDataという少々ダサネームのマッチャを追加した。これでテストに成功するはず。

ちょっとリファクタリング

このままでもよいのだが、この手のカスタムマッチャは色んなテストから使用すると思うので、別ファイルに定義しておきたい。 spec_helper.coffeeというファイルを作成して、そのファイルにまとめて記述しておこう。

1モジュールで構成するアプリなら、上記のようにspec_helperで読み込んじゃってもいいと思う。

requireを記述すれば、テストコードが少しスッキリするはずだ。

うむ、今日のところはコレで勘弁しといてやろう!

参考サイト

関連する記事


コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください