web-dev-qa-db-ja.com

分度器、APIリクエストでangle2を使用したバックエンドのモック

私の問題の解決策を見つけるためにいくつかのヘルプを使用できます。 APIにリクエストを送信するときに、angular2アプリケーションにデータをモックする必要があります。次のようなことをする必要があります。

$httpBackend.when('GET', '/userbookings/').respond(my json file data);

問題は、angularJS（angular 1）に使用される$ httpBackendを使用して、Googleで見つけることができるすべてのことです。

私のE2Eテストでこれを機能させる方法を知っていますか（アプリケーションはangular2アプリケーションです）？私は分度器またはナイトウォッチの両方でこれをしようとしています（両方のフレームワークを試しました）

仕様テスト：

describe('Protractor Mocking bookings for angular2 site', function() {

var ngMockE2E = require('ng-mock-e2e');

var $httpBackend = ngMockE2E.$httpBackend;

beforeEach(function() {
    ngMockE2E.addMockModule();
    ngMockE2E.addAsDependencyForModule('myApp');
    ngMockE2E.embedScript('/bower_components/angular-mocks/angular-mocks.js');
});


afterEach(function() {
    ngMockE2E.clearMockModules();
});

it('Inject mock data of bookings', function() {

    var EC = protractor.ExpectedConditions;
    var global = require('../bin/globals.js');

    // Bookings data in a json file which should be send as the response
    var mockData = require('../testData.json');

    browser.ignoreSynchronization = false;

    $httpBackend.when('GET', '/userbookings').respond(mockData);

    browser.get(global.so.enLoggedIn);

});

});

このテストは、何らかの角度1の方法を使用しているため機能しません。それを示したので、私のテストがどのように見えるかを見ることができます。

誰かがここで私を助けてくれることを願っています、angular2で働いている人を見つけるのが本当に難しいです。

angularprotractornightwatch.js
23
Mandersen

分度器Angular 2アプリケーションのモックモジュールの追加はまだサポートしていません：

// TODO: support mock modules in Angular2. For now, error if someone
// has tried to use one.
if (self.mockModules_.length > 1) {
  deferred.reject('Trying to load mock modules on an Angular2 app ' +
      'is not yet supported.');
}

また、TODOが注目を集めるためにgithubの問題も作成しました。

ちなみに、これはaddMockModule内部 に依存しているため、protractor-http-mockが機能しないことも意味します。私は個人的にprotractor-http-mockをサンプルのAngular2アプリケーションで試しました。

失敗：Angular2アプリでモックモジュールをロードしようとすることはまだサポートされていません。

http-backend-proxy および httpbackend パッケージについても同様です。

この問題はまだ修正されていませんが、proxyを起動することを検討する必要があります。 APIバックエンド、個人的には行っていません。詳細は以下をご覧ください。

24
alecxe

Angular 2のaddMockModuleのサポートがまだないため、 json-server を使用して終了しました

3
nastyklad

angular 2ではモックされたモジュールのサポートがないため、モックajaxリクエストを許可する小さな分度器プラグインを作成しました。ここで見つけることができます： https://github.com/krisboit/protractor-xmlhttprequest-mock

ドキュメントはまだありませんが、サンプルテストを見つけることができます。それがあなたのお役に立てば幸いです。

1
Tiberiu Krisboi

私はこれに対する解決策を見つけましたが、これは比較的痛みがなく、今のところうまく機能し、既存のインポートへのすべての参照を変更する必要はありません。

何を達成しようとしているかによって、いくつかのステップがあります。私はe2eテストに取り組んでいたので、このソリューションの概要を説明します。

まず、angular.jsonをテスト環境に固有の設定で更新します（「serve」のすぐ上）。

"serve-e2e": {
    builder: '@angular-devkit/build-angular:dev-server',
    options: {
        browserTarget: '{APP_NAME}:build'
    },
    configurations: {
        test: {
            browserTarget: '{APP_NAME}:build:test'
        }
    }
};

次に、新しい構成でdevServerTargetを更新して、既存のe2e構成を更新します。

"devServerTarget": "{APP_NAME}:serve-e2e:test"

次に、mock-service-mappingと呼ばれる環境固有のファイルの新しいセットを作成したので、環境フォルダーに次のようになりました。

mock-service-mapping.ts
mock-service-mapping.test.ts

これらのファイルには、マッピングを実際のサービスと模擬サービスに保存します。

import { RealDataService } from '../app/lib/services/real-data.service';

export const mockServiceMapping = {
     dataServiceClass: RealDataService
};

次に、それらを環境固有にする必要があります。 angular.jsonを更新して、さまざまな環境に適切なマッピングを設定します。

"test": {
    fileReplacements: [
        {
            replace: 'src/environments/environment.ts',
            with: 'src/environments/environment.test.ts'
        },
        {
            replace: 'src/environments/mock-service-mapping.ts',
            with: 'src/environments/mock-service-mapping.test.ts'
        }
    ]
};

そして最後の魔法。モジュール宣言で、プロバイダーをセットアップして、新しいモック環境ファイルからクラスをプルします。

{ provide: DataService, useClass: mockServiceMapping.dataServiceClass }

そして出来上がり、模擬サービス、ライブラリー、混乱、余分なコンパイルされたコードはなく、かなり簡単です！

1
Gabriel Doty