unit testing - tutorial - El servicio de pruebas Angular2 se burla

unit test angular 5

Question

Tengo un componente simple Angular2 que consta de lo siguiente

import { Component, OnInit, Input } from ''@angular/core'';
import {FooterLinksService} from ''./footer-links.service'';
import { environment } from ''../../environments/environment'';

    @Component({
        selector: ''app-footer-links'',
        templateUrl: ''./footer-links.component.html'',
        styleUrls: [''./footer-links.component.css''],
        providers: [FooterLinksService]
    })
    export class FooterLinksComponent implements OnInit {        

        constructor(private footerLinksService: FooterLinksService) {
            let footerLinks = this.footerLinksService.LoadFooterLinks();
        }    

    }

Estoy intentando escribir las pruebas unitarias con Jasmine para esto. Ahora quiero burlarme de FooterLinksService, pero la mayoría de los ejemplos que he visto implican escribir manualmente un FooterLinksServiceMock. ¿Hay algún otro enfoque que pueda usar que genere automáticamente el servicio simulado como NSubStitute y proporcione los valores de devoluciones esperadas de footerLinksService.LoadFooterLinks

Answer 1

Como mencionó @JBNizet, podrías usar un espía. Lo que haría es obtener el servicio real dentro de la prueba, luego puede espiar un método y devolver cualquier valor arbitrario, cuando se llame a ese método. Puede parecer algo así como

describe(''component: FooterLinksComponent'', () => {
  let fixture;
  let service;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        FooterLinksComponent
      ],
    });

    fixture = TestBed.createComponent(FooterLinksComponent);
    service = fixture.debugElement.injector.get(FooterLinksService);
  });

  it(''should change message returned'', () => {
    spyOn(service, ''LoadFooterLinks'').and.returnValue(''Hello new message'');
    fixture.detectChanges();
    expect(fixture.componentInstance.message).toBe(''Hello new message'');
  });
});

Deberá mover el código donde accede al servicio desde dentro del constructor al ngOnInit . La razón de esto es porque

1. Está utilizando @Component.providers , por lo que el servicio no se creará hasta que se haya creado el componente.
2. Cuando se crea el componente, el constructor ya está llamado. Así que esto no da tiempo para que configures al espía. Cuando utiliza ngOnInit , ngOnInit no se llama hasta que no llame a fixture.detectChanges()