Webアプリでのエンドポイントをモッキング

TLRあなたの残りAPI APIエンドポイントのクライアント側のモックを使用しますconnect-api-mocker

なぜ我々はお金が必要ですか?
以前の会社の一つでは、初期の頃、私たちはそういう流れをしました.

機能の実装は、デザインチームによって作成されます

デザインはフロントエンドチーム(US)に来る.静的HTMLページを作成し、タスクはバックエンドチームに行きます.

バックエンドチームは、HTMLダイナミックになります.

その後、おそらくいくつかの再仕事といくつかの余分なJavaScriptコードが必要なので、タスクはフロントエンドチームに戻ります.

その後、タスクのテストチームに行きます.

我々は、単一のページアプリケーションとして我々のアーキテクチャを変更し、バックエンドとしてREST APIを使用し始めた後、我々はその流れを速くし、クライアント側のモッキングソリューションを使用することを決めた.その考え方は、こういった流れを変えることでした.

デザインはフロントエンドチームに

フロントエンドとバックエンドチームは、そのタスクに必要なエンドポイント構造を決定します.

フロントエンドチームはモックを使用し、実際のエンドポイントを待たずに実装を開始する

バックエンドチームはその終点を作成しようとします.エンドポイントが準備ができている場合、フロントエンドチームはリリースの変更を必要としません.
つまり、あなたのバックエンドのチームと並列にタスクを開発することができます.これはあなたの生産性を向上させ、あなたのバックエンドの依存関係についてのトラブルの多くを持っていないでしょう.

これは面白いバグを再生するのにも良いでしょう.時には我々は非常に例外的なだけでなく、実際のデータを再現するのは難しい迷惑な問題があった.単純な方法でAPI応答を定義するような機会で、テストのためにいくつかの厄介な状況を作成するのは非常に簡単です.
別の利点は、いくつかのリモートサーバーを接続する必要はありません開発環境を、インターネットさえする必要があります.働くREST APIサーバを必要としないでしょう.
次に、接続API mockerを作成しました

どのような接続APIモッカーですか?
connect-api-mocker は、残りのエンドポイントの偽の応答を作成するために使用できるNPMパッケージ(実際にはシンプルな接続ミドルウェア)です.
私たちは私の前の会社の1つで2013年に最初のバージョンを作成し、またGithubで共有しました.私はそこに残った後、私は倉庫をフォークし、私のクライアントのプロジェクトでそれを使用するためにそれを改善し続けた.私もnpm package と多くの機能を追加しました.
API mockerを接続して、残りの終点で同じフォルダ構造でつくられるファイルシステムの若干の模擬JSONファイルを使ってください.これは非常に使いやすく、それを変更することができます.しかし、それだけではない、もっと!

モッキングはどのように使いやすいですか
あなたは、Webpack、Grunt、Gulpと他の接続でConnect API Mockerを使用することができます.パワー環境.connect API mockerをコマンドでインストールできます.

npm i --save-dev connect-api-mocker

Webpackプロジェクトを使用するには、使用する必要がありますsetup 資産webpack-dev-server :

var apiMocker = require(‘connect-api-mocker’);
...
setup: function(app) {
    app.use('/api', apiMocker('mocks/api'));
},
...

その設定の意味は、APIのmockerは/api いくつかのファイルでmocks/api フォルダ.例えば、あなたが作るならGET リクエスト/api/users/1 これは、ファイルの要求に応じてmocks/api/users/1/GET.json .
あなたは既に、アイデアを得た?リクエストマッピング構造は以下のようになります.
[メソッド]/{ baseURL }/{ path } >{ basepath }/{ path }/[ method ]JSON
リクエストメソッドのすべての種類を動作しますPOST , PUT , DELETE , OPTIONS などの例POST /api/users/1 ==> mocks/api/users/1/POST.json DELETE /api/users/1 ==> mocks/api/users/1/DELETE.jsonJSONファイルは、通常のJSONファイルです.

カスタムレスポンス
リクエストパスで同じパスを持つ模擬JSONファイルの作成は良いアイデアですが、すべての場合には十分ではありません.クエリやその他のリクエストパラメータに対していくつかの異なるmock応答を作成したい場合は、さらに必要になります.これはカスタムレスポンスサポートが入るところです.
カスタム応答は、JSファイル拡張子を除いて(もちろん、もちろん)同じパスで作成されたシンプルな接続ミドルウェア機能です.例えば、単純な使用の代わりにPOST.json ファイルを作成するPOST.js 以下のような内容のファイル:

module.exports = function (request, response) {
    if (!request.get('X-Auth-Key')) {
        response.status(403).send({});
    } else {
        response.sendFile('POST.json', {root: __dirname});
    }
}

ファイルをmocks/api/users/POST.js そして、あなたが作るならばPOST リクエスト/api/users , API Mockerは、返却する代わりにカスタムレスポンスミドルウェアを実行しますPOST.json パスのファイル.上記のカスタムレスポンスの例では、ヘッダーの存在をテストしていますが、そうでなければ403エラーで応答します.同じフォルダ内のJSONファイルの内容.
あなたはその機能の力を見ることができますか?
別の例GET /api/users?type=active ==> mocks/api/users/GET.js

module.exports = function (request, response) {
  var targetFileName = 'GET.json';
  // Check is a type parameter exist
  if (request.query.type) {
    // Generate a new targetfilename with that type parameter
    targetFileName = 'GET_' + request.query.type + '.json';
    // If file does not exist then respond with 404 header
    if (!fs.accessSync(targetFileName)) {
      return response.status(404);
    }
  }
  // Respond with targetFileName
  response.sendFile(targetFileName, {root: __dirname});
}

上記の例では、クエリパラメータに応じて別々のJSONレスポンスを送信できます.
別の機会と別の例GET /api/gateway/3213132 ==> mocks/api/gateway/3213132/GET.js

var requestCount = 0;
module.exports = function (request, response, next) {
    requestCount++;
    if (requestCount == 1) {
        response.json({
            status: 'notready'
        });
    } else {
        response.json({
            status: 'ready'
        });
    }
};

接続サーバがインスタンスとして実行されているので、上の例のようなメモリ変数を格納できます.この例では、リクエストカウントによって異なる結果に応答します.
あなたが見ることができるように、カスタム応答を制限はありません!

ワイルドカードサポート
パス定義にワイルドカードを定義する必要があります.我々のような我々のモデルのすべてのIDのフォルダを作成するために非常にクールではないので、我々はそれが必要ですusers/1 , users/2 , users/3 などのフォルダを作成するusers/__user_id__ そして、user_id リクエストパラメータとしてのカスタムレスポンスの変数?はい、それは素晴らしいです!良いニュースはすでにある!
そのような要求をするなら、GET /api/projects/50b3c102–298a-45ad-acad-e21b6c1bbdcc/あなたはモックインを定義することができますmocks/api/projects/50b3c102-298a-45ad-acad-e21b6c1bbdcc/GET.json API MOCKEがそのパスでファイルを見つけるなら、それはそれに反応します.しかし、別のオプションは、パスのようなファイルを作成することですmocks/api/projects/__project_uuid__/GET.json . その場合、特定の模擬ファイルを持っていないプロジェクト/{ } }へのすべての要求は、同じ応答で応答されます.また、同じフォルダにカスタムレスポンスを定義することも可能ですGET.js ファイルを生成し、動的応答を生成するワイルドカード変数には、フォルダ名で定義されます.例えば、

module.exports = function (request, response) {
  response.json({
    id: request.params.project_uuid
  });
}

ワイルドカードの定義を開始し、ダブルアンダースコアで終了します.そして、それはAPIモッカーがチェックした最後です.それで、モック応答の流れを探すことは、そのようです

探すmocks/api/projects/50b3c102-298a-45ad-acad-e21b6c1bbdcc/GET.js

探すmocks/api/projects/50b3c102-298a-45ad-acad-e21b6c1bbdcc/GET.json

探すmocks/api/projects/__{something}__/GET.js

探すmocks/api/projects/__{something}__/GET.json

また、次のように複数のネストされたワイルドカードを定義することもできます.mocks/api/__resource_type__/__resource_uuid__/GET.json . それはすべてのリクエストを返すapi/*/* .

nexttonnotfound設定
デフォルトでは、パスのAPI mockerを有効にして、要求のモックスファイルを定義しない場合は、404 NOT FORMATエラーで応答します.しかし、nexttonnotfindをtrueに設定することもできます.サンプルの設定

app.use('/api', apiMocker({
  target: 'mocks/api',
  nextOnNotFound: true
});

あなたが彼らのすべての代わりにあなたの終点の一部を偽装したいならば、これは非常に強力です.Webpack、GruntまたはGulpのプロキシ機能の助けを借りて、あなたはモックアップしたくないあなたの本当のAPIからの応答を得るために継続することができます.Webpackの例

// webpack.config.js
...
setup: function (app) {
  app.use('/backend/api/v1/', apiMocker({
    target:         'mocks/api',
    nextOnNotFound: true
  }));
  app.use('/analytics/api/v1/', apiMocker({
    target:         'mocks/analytics',
    nextOnNotFound: true
  }));
},
proxy: {
  '/backend': {
    target: 'https://api.backend.yourdomain.com'
  },
  '/analytics': {
    target: 'https://api.analytics.yourdomain.com'
  }
}

上記の例では、2つの別々のパスのために2つのAPI mockerを定義して、また、その経路のために本当のAPIサーバにいくらかのプロキシを定義しました.nexttonnotlocateオプションの助けを借りて、モック定義を持たないパスへの要求はそのプロキシに渡されます.

結論
私はほとんどすべての私のプロジェクトのすべての私のプロジェクトの最後の4〜5年間いくつかのチームで使用して、私たちはそれの利点を得るために非常に満足していた.私もあなたのプロジェクトのようないくつかの解決策を使用するように提案します.それはオープンソースのため、あなたの貢献を非常に歓迎しています.

muratcorlu / connect-api-mocker
残りのAPIのためのモックを作成するミドルウェアを接続します
あなたのアイデアやAPIモッカーで問題がありますか?GitHubリポジトリに関する問題を作成してください.