que - Transportador, backend burlón con angular2 en solicitud de api

que es subscribe en angular

Question

Podría usar alguna ayuda para encontrar una solución para mi problema. Necesito simular algunos datos en mi aplicación angular2 cuando hace una solicitud a una api, necesito hacer algo como:

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

El problema es que todo lo que puedo encontrar en google, usando el $ httpBackend que se usa para angularJS (angular 1).

¿Alguien sabe cómo puedo hacer que esto funcione en mi prueba E2E (la aplicación es una aplicación angular2)? Estoy tratando de hacer esto tanto con el transportador como con el vigilante nocturno (he probado ambos marcos)

Prueba de especificaciones:

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

Esta prueba no funcionará porque está usando alguna forma angular1. Lo he mostrado, para que puedas ver cómo se ve mi prueba.

Espero que alguien pueda ayudarme aquí, porque es muy difícil encontrar trabajo con angular2.

Answer 1

Como no hay soporte para módulos simulados en angular 2, hice un pequeño complemento de transportador que permite la solicitud de simulacro de ajax. Lo puedes encontrar aquí: https://github.com/krisboit/protractor-xmlhttprequest-mock

Aún no hay documentación, pero puede encontrar pruebas de muestra. Espero que te ayude.

Answer 2

El transportador aún no admite la adición de módulos simulados para aplicaciones 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.'');
}

Y, también he creado un problema de github para que TODO llame la atención:

• Admite agregar módulos simulados a aplicaciones Angular 2

Esto, por cierto, también significa que protractor-http-mock no va a funcionar ya que se basa en addMockModule internally . Personalmente, he probado protractor-http-mock en una aplicación Angular2 de muestra, obtuve:

Falló: todavía no se admite el intento de cargar módulos simulados en una aplicación Angular2.

Lo mismo es cierto para los paquetes http-backend-proxy y httpbackend .

Supongo que, si bien el problema aún no está resuelto, debería considerar encender un proxy que actúe como una especie de "simulacro externo" para su servidor de API, no lo haya hecho personalmente, vea más en:

• Ejecutando el transportador AngularJS con proxy a https
• Burlas y Stubbing con transportador

Answer 3

Encontré una solución a esto que es relativamente indolora y hasta ahora funciona bien, y no requiere que cambies todas las referencias a tus importaciones existentes.

Hay varios pasos dependiendo de lo que está tratando de lograr. Estaba trabajando en las pruebas e2e, así que esto esbozará esa solución.

Primero actualice su angular.json con configuraciones que son específicas de su entorno de prueba, (justo arriba de "servir") el mío es:

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

Luego, actualice su configuración e2e existente actualizando devServerTarget con su nueva configuración:

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

A continuación, creé un nuevo conjunto de archivos específicos para el entorno llamado mock-service-mapping , por lo que en mi carpeta de entorno ahora tengo:

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

En estos archivos, almaceno la asignación a mis servicios reales y simulados:

import { RealDataService } from ''../app/lib/services/real-data.service'';
export const mockServiceMapping = {
dataServiceClass: RealDataService
};

Ahora tenemos que hacerlos específicos del entorno. Actualice su angular.json para configurar las asignaciones adecuadas para sus diferentes entornos:

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

Y la última pieza de magia. En las declaraciones de sus módulos, configure sus proveedores para extraer la clase de sus nuevos archivos de entorno simulados.

{ provide: DataService, useClass: mockServiceMapping.dataServiceClass }

¡Y voila, servicios simulados, sin bibliotecas, sin desorden, sin código compilado adicional, y bastante sencillo!

Answer 4

Terminé usando json-server ya que todavía no hay soporte para addMockModule para Angular 2

Answer 5

ng-apimock complemento ng-apimock para ng-apimock todas las llamadas de red al servidor con un proxy.

Funciona muy bien y es fácil de configurar. Simplemente siga la configuración de la aplicación Angular here