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