[AngularJS] ダミーのAPIサーバの用意に便利な ngMockE2E

シチュエーションとしては、APIサーバ側がまだ開発中でその代替を用意したい場合や、デモやモックを Amazon S3 や GitHub Pages 等に載せるために、静的リソースのみでアプリケーションを構成したい場合。

ngMockE2E は本当は E2E テスト用のものっぽいですが、ダミーの API サーバとしても活用できます。

個人的には GitHub Pages にデモを載せることが多いので重宝。

※ 執筆時点の AngularJS のバージョンは 1.3.8 です。

導入方法

① Bower でインストール

$ bower install angular-mocks --save

--save オブションにより bower.json に追記されます。もしくは先に bower.json に追記してから $ bower install でもいいです。リリースビルドに含めるには bower.json 中の devDependencies エリアでなく dependencies エリアに追記しておく必要があります。

② ライブラリの読み込み

index.html等

〜
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
〜

パスはプロジェクトに合わせてください。Yeoman で作ったプロジェクだと、$ grunt(or gulp) wiredep とすると自動で追記されることが多いです。

③ AngularJSプロジェクトへの組み込み

ngMockE2E を追記します。

angular.module('hogeApp', ['ngTouch', 'ngSanitize', 'ui.router', 'ngMockE2E'])
  .config(function ($stateProvider, $urlRouterProvider) {
〜

使用例

余分なところも含めて載せちゃいますが、下記の .run 以降です。適用を回避したい HTTPリクエストは .passThrough() で回避させる必要があります。

HTTPプロトコルは GET/POST/PUT/DELETE など主要なものは対応されています。

下記サンプルの .whenPOST のところのように、POST メソッドの body も簡単に取得できます。

使用例

'use strict';

angular.module('hogeApp', ['ngTouch', 'ngSanitize', 'ui.router', 'ngMockE2E'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('item', {
        url: '/item',
        templateUrl: 'app/item/item.html',
        controller: 'ItemCtrl'
      });

    $urlRouterProvider.otherwise('/item');
  })
  .run(function ($httpBackend) {
    $httpBackend.whenGET(/^app\//).passThrough();
    $httpBackend.whenGET(/^assets\//).passThrough();
    $httpBackend.whenGET(/^components\//).passThrough();

    var dummy_items = [
      {
        "id": "1",
        "name": "石鹸",
        "price": 230,
        "memo": "石鹸のメモ"
      },
      {
        "id": "2",
        "name": "ボディソープ",
        "price": 550,
        "memo": "ボディソープのメモ"
      },
      {
        "id": "3",
        "name": "ハンドソープ",
        "price": 340,
        "memo": "ハンドソープのメモ"
      }
    ];

    $httpBackend.whenGET(/^\/api\/items/).respond(dummy_items);
    $httpBackend.whenPOST(/^\/api\/items/).respond(function(method, url, data) {
      var res = angular.fromJson(data);
      var obj = {
        "id": "dummy",
        "name": res.name,
        "price": res.price,
        "memo": res.memo
      };
      return [200, obj, {}];
    });
    $httpBackend.whenPUT(/^\/api\/items/).respond({});
    $httpBackend.whenDELETE(/^\/api\/items/).respond({});
  })
;

ほか

使い方の詳細については公式のリファレンスを参照。
⇒ https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend