Why isn't http request being picked up in angular test

Question

I have a simple service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiConfiguration } from '../../api/api-configuration';
import { BaseService } from '../../api/base-service';
import { Observable } from 'rxjs';

const TIMER = 120000;

@Injectable({
    providedIn: 'root'
})
export class AppService extends BaseService {
    constructor(
        config: ApiConfiguration,
        http?: HttpClient,
    ) {
        super(config, http);
    }

    getContextualHelp(id, helpType): Observable<Object> {
        return this.http.get(`${this.rootUrl}/api/v2/contextual-help`, {
            params: { id, helpType }
        });
    }
}

I have tests that make sure the service returns some mocked data:

import { AppService } from '../app.service';
import { TestBed } from '@angular/core/testing';
import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
import { StoreModule } from '@ngrx/store';
import { ApiConfiguration } from '../../../api/api-configuration';

fdescribe('app.service', () => {
    let service: AppService;
    let httpMock: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientTestingModule,
                StoreModule.forRoot({}),
            ],
            providers: [
                AppService,
                {
                    provide: ApiConfiguration, useValue: ''
                },
            ]
        });

        service = TestBed.get(AppService);
        httpMock = TestBed.get(HttpTestingController);
    });

    describe('getContextualHelp', () => {
        it('should be created', () => {
            expect(service).toBeTruthy();
        });

        it('calls the contextual help route with the expected params', () => {
            const mockData = '<div></div>';
            service.rootUrl = 'https://www.mock.com';
            service.getContextualHelp('foo', 'bar').subscribe((html) => {
                expect(html).toEqual('<div></div>');
            });

            const req = httpMock.expectOne('https://www.mock.com/api/v2/contextual-help');
            req.flush(mockData);
        });
    });
});

It seems like I have everything hooked up correctly but when I run the test I get:

 Error: Expected one matching request for criteria "Match URL: https://www.mock.com/api/v2/contextual-help", found none.

When I debug the test and go into the code context I see that http client is being called, and it's being called with the url I expect. So I guess somehow I misconfigured the test modules somehow? Does anyone see what I might have done wrong?

score 0 · Answer 1 · answered Sep 07 '19 at 05:43

Note that expectOne() matches the url as well as the url params. Try to pass the complete url to the function, like:

const req = httpMock.expectOne('https://www.mock.com/api/v2/contextual-help?id=foo&helpType=bar');

Take a look at this question and the answer.

Why isn't http request being picked up in angular test

1 Answers1