web-dev-qa-db-fra.com

Rapporteur, moqueur de backend avec angular2 sur demande d'api

Je pourrais avoir besoin d’aide pour trouver une solution à mon problème. J'ai besoin de me moquer de certaines données de mon application angular2 quand elle fait une demande à une API, je dois faire quelque chose comme:

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

Le problème est que tout ce que je peux trouver sur Google, en utilisant le $ httpBackend qui est utilisé pour angularJS (1 angulaire).

Est-ce que tout le monde sait comment cela peut fonctionner dans mon test E2E (l'application est une application angular2)? J'essaie de faire cela avec le rapporteur ou l'observateur de nuit (j'ai essayé les deux cadres)

Test de spécification: 

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

});

});

Ce test ne fonctionnera pas car il utilise une méthode angulaire1. Je l'ai montré pour que vous puissiez voir à quoi ressemble mon test.

J'espère que quelqu'un pourra m'aider ici, car il est très difficile de trouver du travail avec angular2.

angularprotractornightwatch.js
22
Mandersen

Rapporteur NE SUPPORTE PAS ENCORE L'AJOUT DE MODULES FACTICES POUR LES APPLICATIONS 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.');
}

Et, j'ai également créé un numéro de github pour le TODO afin d'attirer l'attention:

Soit dit en passant, cela signifie également que protractor-http-mock ne fonctionnera pas car il repose sur addMockModuleen interne . J'ai personnellement essayé protractor-http-mock sur un exemple d'application Angular2:

Echec: le chargement de modules factices sur une application Angular2 n’est pas encore pris en charge.

Il en va de même pour les packages http-backend-proxy et httpbackend .

Je suppose que, bien que le problème ne soit pas encore résolu, vous devriez envisager de déclencher un proxy qui agirait comme une sorte de "maquette externe" de votre backend d'API.

24
alecxe

J'ai fini par utiliser json-server car il n'y a toujours pas de support de addMockModule pour Angular 2

3
nastyklad

Comme il n’existe aucun support pour les modules fictifs dans angular 2, j’ai créé un petit plugin de rapporteur qui permet de simuler des requêtes ajax. Vous pouvez le trouver ici: https://github.com/krisboit/protractor-xmlhttprequest-mock

Il n'y a pas encore de documentation, mais vous pouvez trouver des exemples de tests. J'espère que ça t'aide.

1
Tiberiu Krisboi

J'ai trouvé une solution à ce problème relativement simple et qui fonctionne jusqu'ici très bien, sans que vous ayez à changer toutes les références à vos importations existantes. 

Il y a plusieurs étapes selon ce que vous essayez d'accomplir. Je travaillais sur les tests e2e, donc cela décrira cette solution.

Commencez par mettre à jour votre fichier angular.json avec les configurations spécifiques à votre environnement de test (juste au-dessus de "servir"), voici:

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

Ensuite, mettez à jour votre configuration e2e existante en mettant à jour la devServerTarget avec votre nouvelle configuration:

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

Ensuite, j'ai créé un nouvel ensemble de fichiers spécifiques à l'environnement appelé mock-service-mapping. J'ai donc maintenant dans mon dossier d'environnement:

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

Dans ces fichiers, je stocke le mappage avec mes services réels et simulés:

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

export const mockServiceMapping = {
     dataServiceClass: RealDataService
};

Nous devons maintenant les rendre spécifiques à l'environnement. Mettez à jour votre fichier angular.json pour configurer les mappages appropriés pour vos différents environnements:

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

Et le dernier morceau de magie. Dans vos déclarations de module, configurez vos fournisseurs pour extraire la classe de vos nouveaux fichiers d’environnement fictif.

{ provide: DataService, useClass: mockServiceMapping.dataServiceClass }

Et voila, services factices, pas de bibliothèques, pas de fouillis, pas de code compilé supplémentaire, et assez simple!

0
Gabriel Doty