如何使用Karma为Angular测试创建虚假服务

Question

I try to create a fake service matching my AppLoaderService for karma testing of my Angular application.

I have a service which handle loader visibility state over my application. It's used in components this way:

• The main component subscribe the state of loader to display or not the loader
• Child components and other services can trigger the emitChange function to change visibility state over the service

Here is the service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class AppLoaderService {
  private isLoaderVisible = new BehaviorSubject<boolean>(false);

  changeLoaderState$ = this.isLoaderVisible.asObservable();

  emitChange(state: any) {
    this.isLoaderVisible.next(state);
  }    
}

The fact is this service will be changed over time by the team.

And I don't really care about testing the fact the logic of AppLoaderService will "work" at component testing level. I want only be able to test, at component level, subscription to service (for main component) and returns initial service value and that emitChange() has been triggered at some moments in my component life.

So in order not to be dependant on the service itself, maybe I can stub this service to then, in my component tests, be able to use this stub with:

providers: [
  {provide: AppLoaderService, useClass: AppLoaderServiceStub}
]

But I struggle defining a proper stubs without rewriting the whole service.

Do you have any idea on how I can achieve this? Especially the fact one of my component is subscribing to changeLoaderState$ .

Answer 1

The key point when stubbing is that the stub needs to implement the public API that the component under test cares about .

From your example code, you need an emitChange(state: any) method on your stub. If you don't care at all whether it gets called or not, then you can just leave that method with an empty body.

export class AppLoaderServiceStub {

  emitChange(state: any) {
  }    
}

(I'm making the assumption that the observable property on the service is only being used by your Loader component, not by the other components and services of your app - if that assumption is false, you'd have to stub that observable as well).

EDIT:

Since you need the changeLoaderState$ observable, then stub that as well -

export class AppLoaderServiceStub {

  changeLoaderState$ = Observable.of({ }) // or whatever dummy state value you want to use
  emitChange(state: any) {}    
} 

Note that Observable.of will emit its values and then complete. If you don't want a completion event to trigger, you might want Observable.never . If I am understanding your usage correctly though, I doubt the distinction matters.

PS. don't forget to import the of operator:

import 'rxjs/add/observable/of';