web-dev-qa-db-de.com

Winkelmesser, spottendes Backend mit Angle2 auf api-Anfrage

Ich könnte etwas Hilfe brauchen, um eine Lösung für mein Problem zu finden. Ich muss einige Daten mit meiner angle2-Anwendung simulieren, wenn eine Anfrage an ein API gestellt wird. Ich muss Folgendes tun:

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

Das Problem ist, dass alles, was ich auf Google finden kann, das $ httpBackend verwendet wird, das für angleJS (angle 1) verwendet wird.

Weiß jemand, wie ich das in meinem E2E-Test zum Laufen bringen kann (Die Anwendung ist eine winklige Anwendung)? Ich versuche dies sowohl mit Winkelmesser als auch mit Nachtwache zu tun (habe beide Frameworks ausprobiert)

Spezifikationsprüfung:

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);

});

});

Dieser Test wird nicht funktionieren, da er auf irgendeiner Weise Winkel1 verwendet. Habe es gezeigt, damit Sie sehen können, wie mein Test aussieht.

Ich hoffe, jemand kann mir hier draußen helfen, denn es ist wirklich schwer, etwas zu finden, das mit Angle2 arbeitet.

22
Mandersen

Winkelmesser UNTERSTÜTZT NOCH NICHT DAS HINZUFÜGEN VON MOCK-MODULEN FÜR ANGULAR 2-ANWENDUNGEN:

// 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.');
}

Und ich habe auch eine Github-Ausgabe für das TODO erstellt, um auf sich aufmerksam zu machen:

Dies bedeutet übrigens auch, dass protractor-http-mock nicht funktionieren wird, da es auf addMockModuleintern angewiesen ist. Ich habe persönlich protractor-http-mock an einer Beispielanwendung von Angular2 ausprobiert.

Fehlgeschlagen: Der Versuch, Scheinmodule in einer Angular2-App zu laden, wird noch nicht unterstützt.

Gleiches gilt für die Pakete http-backend-proxy und httpbackend .


Ich denke, während das Problem noch nicht behoben ist, sollten Sie ein proxy starten, das als eine Art "externer Mock" für Ihr API-Backend fungiert.

24
alecxe

Endete mit json-server , da es noch keine Unterstützung von addMockModule für Angular 2 gibt

3
nastyklad

Da es in Winkel 2 keine Unterstützung für Scheinmodule gibt, habe ich ein kleines Winkelmesser-Plugin erstellt, das eine Schein-Ajax-Anforderung zulässt. Sie finden es hier: https://github.com/krisboit/protractor-xmlhttprequest-mock

Es gibt noch keine Dokumentation, aber Sie können Beispieltests finden. Ich hoffe es hilft dir.

1
Tiberiu Krisboi

Ich habe eine Lösung gefunden, die relativ schmerzlos ist und bisher gut funktioniert und Sie nicht alle Verweise auf Ihre bestehenden Importe ändern müssen. 

Je nachdem, was Sie erreichen wollen, gibt es mehrere Schritte. Ich habe an e2e-Tests gearbeitet, daher wird diese Lösung skizziert.

Aktualisieren Sie zunächst Ihre angle.json mit Konfigurationsdateien, die für Ihre Testumgebung spezifisch sind (rechts über "dienen"):

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

Aktualisieren Sie anschließend Ihre vorhandene e2e-Konfiguration, indem Sie die devServerTarget mit Ihrer neuen Konfiguration aktualisieren:

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

Als Nächstes erstellte ich einen neuen Satz umgebungsspezifischer Dateien mit dem Namen mock-service-mapping. In meinem Umgebungsordner habe ich jetzt:

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

In diesen Dateien speichere ich die Zuordnung zu meinen echten und Mock-Diensten:

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

export const mockServiceMapping = {
     dataServiceClass: RealDataService
};

Jetzt müssen wir sie umweltspezifisch machen. Aktualisieren Sie Ihre angle.json, um die richtigen Zuordnungen für Ihre verschiedenen Umgebungen einzurichten:

"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'
        }
    ]
};

Und das letzte Stück Magie. Richten Sie in Ihren Moduldeklarationen Ihre Provider so ein, dass sie die Klasse aus Ihren neuen Mock-Umgebungsdateien ziehen.

{ provide: DataService, useClass: mockServiceMapping.dataServiceClass }

Und voila, Scheindienste, keine Bibliotheken, kein Chaos, kein extra kompilierter Code und ziemlich unkompliziert!

0
Gabriel Doty