unit testing - test - Simulacro de servicio personalizado en angular2 durante la prueba unitaria

unit test angular 5

Question

Intento escribir una prueba unitaria para el componente utilizado en mi servicio. El componente y el servicio funcionan bien.

Componente:

import {Component} from ''@angular/core'';
import {PonyService} from ''../../services'';
import {Pony} from "../../models/pony.model";
@Component({
selector: ''el-ponies'',
templateUrl: ''ponies.component.html'',
providers: [PonyService]
})
export class PoniesComponent {
ponies: Array<Pony>;
constructor(private ponyService: PonyService) {
this.ponies = this.ponyService.getPonies(2);
}
refreshPonies() {
this.ponies = this.ponyService.getPonies(3);
}
}

Servicio:

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import {Pony} from "../../models/pony.model";
@Injectable()
export class PonyService {
constructor(private http: Http) {}
getPonies(count: number): Array<Pony> {
let toReturn: Array<Pony> = [];
this.http.get(''http://localhost:8080/js-backend/ponies'')
.subscribe(response => {
response.json().forEach((tmp: Pony)=> { toReturn.push(tmp); });
if (count && count % 2 === 0) { toReturn.splice(0, count); }
else { toReturn.splice(count); }
});
return toReturn;
}}

Prueba de unidad de componentes:

import {TestBed} from "@angular/core/testing";
import {PoniesComponent} from "./ponies.component";
import {PonyComponent} from "../pony/pony.component";
import {PonyService} from "../../services";
import {Pony} from "../../models/pony.model";
describe(''Ponies component test'', () => {
let poniesComponent: PoniesComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [PoniesComponent, PonyComponent],
providers: [{provide: PonyService, useClass: MockPonyService}]
});
poniesComponent = TestBed.createComponent(PoniesComponent).componentInstance;
});
it(''should instantiate component'', () => {
expect(poniesComponent instanceof PoniesComponent).toBe(true, ''should create PoniesComponent'');
});
});
class MockPonyService {
getPonies(count: number): Array<Pony> {
let toReturn: Array<Pony> = [];
if (count === 2) {
toReturn.push(new Pony(''Rainbow Dash'', ''green''));
toReturn.push(new Pony(''Pinkie Pie'', ''orange''));
}
if (count === 3) {
toReturn.push(new Pony(''Fluttershy'', ''blue''));
toReturn.push(new Pony(''Rarity'', ''purple''));
toReturn.push(new Pony(''Applejack'', ''yellow''));
}
return toReturn;
};
}

Parte del paquete .json:

{
...
"dependencies": {
"@angular/core": "2.0.0",
"@angular/http": "2.0.0",
...
},
"devDependencies": {
"jasmine-core": "2.4.1",
"karma": "1.2.0",
"karma-jasmine": "1.0.2",
"karma-phantomjs-launcher": "1.0.2",
"phantomjs-prebuilt": "2.1.7",
...
}
}

Cuando ejecuto ''karma start'' obtengo este error

Error: error en la clase ./PoniesComponent PoniesComponent_Host - plantilla en línea: 0: 0 causada por: ¡Ningún proveedor para Http! en config / karma-test-shim.js

Parece que karma usa PonyService lugar de burlarse de MockPonyService , a pesar de esta línea: providers: [{provide: PonyService, useClass: MockPonyService}] .

La pregunta: ¿cómo debería burlarme del servicio?

Answer 1

Es por esto

@Component({
providers: [PonyService] <======
})

Esto hace que el servicio alcance el componente, lo que significa que Angular lo creará para cada componente, y también significa que reemplaza a cualquier proveedor global configurado a nivel de módulo. Esto incluye el proveedor simulado que configura en el banco de pruebas.

Para evitar esto, Angular proporciona el método TestBed.overrideComponent , que nos permite anular elementos como @Component.providers y @Component.template .

TestBed.configureTestingModule({
declarations: [PoniesComponent, PonyComponent]
})
.overrideComponent(PoniesComponent, {
set: {
providers: [
{provide: PonyService, useClass: MockPonyService}
]
}
});