被监视的方法没有被调用-预期的间谍显示已被调用

Question

I have a sendMessage method which calls another service ( LoaderService ) show method.

sendMessage(url:string, body:any,httpOptions):Observable<HttpEvent<any>> {
    this.loaderService.show();
  ... //IT DOES OTHER THINGS AS WELL BUT THAT ISN'T WHAT I AM TESTING
}

I am trying to test that the show method is called but I am getting error Expected spy show to have been called. . What I might be doing wrong? In my opinion, show should get called because it is the first line in sendMessage .

The spec is

describe('sendMessage function test suite: ',()=> {
  let loader: LoaderService;
  let httpClient:HttpClient;
  let spy:any;
  const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'}),
    withCredentials: true,
    observe: 'events',
    responseType: 'json'
  };


  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [HelperService, HttpClient, HttpHandler,LoaderService],
      imports: [ReactiveFormsModule, HttpClientModule, HttpClientTestingModule]
    });
  });

  fit('should show loader/spinner',
      inject([HttpTestingController,HelperService,HttpClient,LoaderService],(httpClient:HttpClient,httpMock:HttpTestingController)=>{
      const responseData = { result: 'success', ['additional-info']: 'some data from server' };

      loader = new LoaderService();
      spyOn(loader,'show'); //sendMessage calls show method of loader.
      let httpEvent:HttpResponse<any> = new HttpResponse<any>({body:responseData});    
      let helperService = TestBed.get(HelperService);
      let result:Observable<HttpEvent<any>> = helperService.sendMessage('/someURL','someBody',httpOptions);
      let subscription = result.subscribe((event:HttpEvent<any>)=>{
        console.log('got response ',event);
      });
      expect(loader.show).toHaveBeenCalled(); 
  }));
});

Answer 1

You spy on another instance of LoaderService . The spyOn function is used to install a spy into the object, not globally.

You can get the same instance that is injected to the HelperService using TestBed.get(LoaderService) .

Please refer to this Testing - Component with a dependency document.

Answer 2

Mixth's explanation above is correct. Following are my observations which I thought I should share.

I suppose I was doing few things wrong in my the previous code. As far as I know, there are 3 ways I could test

1) Use only Jasmine and Karma without using Testbed. this is a generic approach. I explicitly create instances of the classes I need in this approach. For eg.

new LoaderService() .

The above works well for my own defined classes (services and components). But if my test case uses some Angular's modules (eg HttpClientModule ) then it is better to use TestBed - "Testbed is a very Angular specific functionality whichh would take care of instantiating components, services and taking care of dependencies using DI"

To ensure that the test case is referring to the same instance of a class all the time, TestBed should be used extract instances of all the classes.

fit('should show loader/spinner',()=>{
    let helperService = TestBed.get(HelperService);//extract helper service
    let loaderService = TestBed.get(LoaderService);//extract Loader Service. As I am using TestBed, I'll get the same instance of LoaderService which Angular would have used to create HelperrService
    spyOn(loaderService,'show'); //sendMessage calls hide method of loader.

    const responseData = { result: 'success', ['additional-info']: 'some data from server' };
    let httpEvent:HttpResponse<any> = new HttpResponse<any>({body:responseData});
/*HttpTestingController to be injected into tests, that allows for mocking and flushing of requests.
HttpTestingController has methods which could mock sending a request
 */
    let httpMock = TestBed.get(HttpTestingController);
    //call the sendMessage function and subscribe to its observable.
    let result:Observable<HttpEvent<any>> = helperService.sendMessage('/someURL','someBody',httpOptions);
    let subscription = result.subscribe((event:HttpEvent<any>)=>{
      console.log('got response ',event);
    });
    const mockReq:TestRequest = httpMock.expectOne('/someURL'); //Expect that a single request has been made which matches the given URL, and return its mock
    //once mocking of sending request is done, mock receiving a response. This will trigger the logic inside subscribe function
    mockReq.flush(httpEvent); //flush method provides dummy values as response

    httpMock.verify();//verify checks that there are no outstanding requests;

    expect(loaderService.show).toHaveBeenCalled(); //check that the loader show is called which in real application will show a progress bar
  });