角度アプリの初期化後に$ httpMockを有効にします

Question

私のangularJSアプリで$ httpBackendモックをオン/オフできるようにします。

つまり、$ httpBackendを遅延/オンデマンドで挿入したいということです。 もう一度電源を入れたり切ったりすることもできればいいですね。

たとえば、CMSからプレビューされているAngularJSアプリケーションの入力データを提供する場合などです。

以下のコードは、ngMockE2Eを通常の依存関係に移行し、標準的な方法で$ httpBackendを私の工場に注入する場合にのみ機能します。

コードは設定ファイルからのすべての呼び出しにUPP $ httpBackendを設定し、それらのすべてに対応し...

const registerCalls =() => { 
    const injectormock = angular.injector(['ngMockE2E']); //lazy load not working as expected 
    const $httpBackend = injectormock.get('$httpBackend'); //lazy load not working as expected. 
    //Pass through for resources: 
    $httpBackend.whenGET(/.*.html/).passThrough(); 
    $httpBackend.whenGET(/.*.json/).passThrough(); 
    //API calls should be mocked: 
    const apiCalls = {}; 
    for (var call in apiConfig) { 
     if ({}.hasOwnProperty.call(apiConfig, call)) { 
      const callConfig = apiConfig[call]; 
      const url = angular.isDefined(callConfig.regex) ? callConfig.regex : callConfig.url(); 
      if (callConfig.method === 'GET') { 
       apiCalls[call] = $httpBackend.whenGET(url); 
      } else if (callConfig.method === 'POST') { 
       apiCalls[call] = $httpBackend.whenPOST(url); 
      } 
     } 
    } 
    return apiCalls; 

} 

const success = function() { 
    const apiCalls = registerCalls(); 
    for (var call in apiConfig) { 
     let response = {}; 
     if (angular.isDefined(apiConfig[call].response)) { 
      response = apiConfig[call].response(); 
     } 
     apiCalls[call].respond(200, response); 
    } 
}; 

どうすればセットアップ$ httpBackendそれが有効/無効できるように、 AngularJSアプリは実行中ですか？

Answer 1

角度サービスは、最初の注入時に遅れてインスタンス化されるシングルトンです。 $httpBackendの注入がアプリケーションのブートストラップ（通常は$httpが使用される場合です）で実行された場合、サービスをモックすることはできません。

E2E $httpBackend〜angular.injectorのバージョンを取得することは明らかですが、これを行うには間違った方法です。これにより、独自のコアサービスシングルトン（$browserなど）を使用する新しいインジェクタインスタンスが作成されます。

this exampleに示すように、これを行うためのきれいな方法は、angular.mock.e2eです。利用可能なのはonce angular-mocks.js is loadedです。重要な点は、$httpBackend（これは関数）をデコレートして、元の実装とE2E実装の両方をラップし、条件付きで使用することです。

それはそのように行うことができます。mockableHttpは、アプリモジュールにロードされている

angular.module('mockableHttp', []) 
.decorator('$httpBackend', function ($injector, $delegate) { 
    var $httpBackendOriginal = $delegate; 
    var $httpBackendE2E = $injector.invoke(angular.mock.e2e.$httpBackendDecorator, null, { 
    $delegate: $delegate 
    }); 

    function $httpBackend() { 
    var $httpBackendImplementation = $httpBackend.isMocking 
     ? $httpBackendE2E 
     : $httpBackendOriginal; 

    return $httpBackendImplementation.apply(this, arguments); 
    } 

    return Object.assign($httpBackend, $httpBackendE2E, { 
    enableMocking: function() { 
     $httpBackend.isMocking = true; 
    }, 
    disableMocking: function() { 
     $httpBackend.isMocking = false; 
    } 
    }); 
}); 

は（完全生産に除外することができる）とHTTPのモックは$httpBackend.enableMocking()で活性化されています。