测试服务角度

Question

I am facing a problem with I have no clue how to solve it beacause I am so noobie with testing in front.

Right now I am testing a service that have this code:

import { Injectable } from '@angular/core';
import { EndpointLocatorService } from './endpointLocator.service';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class CancelAppService {

    constructor(private readonly http: Http,
        private readonly _endPointLocator: EndpointLocatorService) { }

    getScopeSignature(signatureToken: string) {
        const url = this._endPointLocator.locate('cancelApp');
        const language = sessionStorage.getItem('languageSession');
        const headers = new Headers({
            'Content-Type': 'application/json',
            'Accept-Language': language,
            'X-B3-TraceId': sessionStorage.getItem('requestID')
        });
        const body = JSON.stringify({ 'signatureToken': signatureToken });
        return this.http.post(url, body, { headers }).map(data => {
            return data.json();
        }).catch((error: any) => {
            return Observable.throw(new Error(error.status));
        });
    }
}

The testing file contains this:

import { TestBed } from '@angular/core/testing';
import { CancelAppService } from './cancelApp.service';
import { HttpModule } from '@angular/http';
import { EndpointLocatorService } from './endpointLocator.service';
import { AppConfig } from '../app.config';
import 'jasmine';

fdescribe('CancelAppService', () => {
    let cancelService: CancelAppService; // Add this
    let endLocator: EndpointLocatorService;
    const mockData = {
        "signature_token": "returnedToken"
    };
    const body = JSON.stringify({ 'signatureToken': 'givenToken' });
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpModule
            ],
            providers: [
                CancelAppService,
                AppConfig,
                EndpointLocatorService
            ]
        });
        cancelService = TestBed.get(CancelAppService); // Add this
        endLocator = TestBed.get(EndpointLocatorService);
    });

    it('should be created', () => { // Remove inject()
        expect(cancelService).toBeDefined();
    });

    it('should call the service', () => {
        spyOn(endLocator, 'locate').and.returnValue('someUrl');
        spyOn(cancelService, 'getScopeSignature').and.callThrough();
        cancelService.getScopeSignature(body);
        expect(cancelService.getScopeSignature).toHaveBeenCalled();
    });

    it('should return a object', () => {
        (done: DoneFn) => {
            spyOn(endLocator, 'locate').and.returnValue('someUrl');
            spyOn(cancelService, 'getScopeSignature').and.returnValue(mockData);
            cancelService.getScopeSignature(body).subscribe(data => {
                expect(data).toEqual(mockData);
                done();
            });
        }
    });
});

The problem is that, when I try to test the returned data map, appears me like a success test, but the coverage says that I have no coveraged the lines of map, and catch.

Any idea what am I doing wrong? and how to solve it?

Thank you so much!!

Answer 1

You are mocking the service being tested, you should mock the service being used by your service EndpointLocatorService and maybe even HttpClient to minimize mocking. You can verify that by stepping through your code.

Let me explain in the code why those lines are not hit.

// In this example, the lines are hit, but after the test exited.
it('should call the service', () => {
    spyOn(endLocator, 'locate').and.returnValue('someUrl');
    spyOn(cancelService, 'getScopeSignature').and.callThrough();
    // Here you are calling a method yourself and checking that it was
    // called, it doesn't make sense, this test should make sure
    // You should check that your endLocator was called.
    // Note that because you are not waiting for the promise to resolve,
    // The test finishes before either callback is handled.
    cancelService.getScopeSignature(body);
    expect(cancelService.getScopeSignature).toHaveBeenCalled();
});


// In this example the lines in your test are never hit because you
// mocked it
it('should return a object', () => {
    (done: DoneFn) => {
        spyOn(endLocator, 'locate').and.returnValue('someUrl');
        // Here you are mocking getScopeSignature completely so it doesn't
        // Run any of your lines that you are trying to test
        // It just tests that you mocked it correctly
        spyOn(cancelService, 'getScopeSignature').and.returnValue(mockData);
        cancelService.getScopeSignature(body).subscribe(data => {
            expect(data).toEqual(mockData);
            done();
        });
    }
});

I can't rewrite your test so it actually tests it because it depends on how the EndpointLocatorService works and you may choose to mock it at that level also. I typically choose to mock at the HttpClient level since I can copy paste responses from the network tab.

The point is that you need to mock services used by your service, not the service itself. You have the option to mock the direct services used by your component, or you can mock at a deeper level. For example, your EndpointLocatorService may need to call HttpClient and you could choose to mock either service.

See https://angular.io/guide/testing#httpclienttestingmodule and https://alligator.io/angular/testing-httpclient/