angular - Angular2 testing service mocks

Question

I have a simple Angular2 component that consists of the following

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

    }

I am trying to write the unit tests with Jasmine for this. Now I want to mock the FooterLinksService, but most of the examples I have seen involve manually writing a FooterLinksServiceMock. Is there any other approach I can use which autogenerates the mock service like NSubStitute and I provide the expected returns values from footerLinksService.LoadFooterLinks

Answer 1

As mentioned by @JBNizet, you could just use a spy. What you would do is get the actual service inside the test, then you can spy on a method an return any arbitrary value, when that method is called. It might look something like

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

You will need to move the code where you access the service from inside the constructor into the ngOnInit. The reason for this is because

1. You are using @Component.providers, so the service will not be created until the component is created.
2. When the component is created, the constructor is already called. So this doesn't give time for you to set up the spy. When you use ngOnInit, the ngOnInit is not called until you call fixture.detectChanges()