How to mock Angular HttpClient response within test of observable stream?

531 Views Asked by At

I have an observable that ultimately triggers a call to Angular HttpClient. I need to mock the response from the HttpClient, but I'm at a loss how to do it within the context of the TestScheduler run method. Say I have the following test:

it('observable should trigger call to HttpClient', () => {

    scheduler.run(helpers => {
        const { expectObservable, cold } = helpers;
        const transferObservable = cold('-a-', { a: someInput });
        transferService.value$ = transferObservable;

        sut = new MyService(transferService, apiService);
        const expectedMarble = '-a-';
        const expectedValues = { a: expectedData };
        expectObservable(sut.data$).toBe(expectedMarble, expectedValues);
    });
});

Values emitted on transferObservable cascade to a switchMap call to a service which in turn sends a GET request via Angular HttpClient; the resulting value is emitted from sut.data$.

I've tried placing following lines at various places within and outside the scheduler.run method, but I always get the same error: Expected one matching request for criteria "Match URL: http://foo", found none.

const request = httpMock.expectOne(`http://foo`);
request.flush(expectedContract);

Roughly where and how would I mock a single call to http://foo and flush expectedData as the desired response?

EDIT Stripped-down beforeEach setup showing configuration of HttpTestingController:

beforeEach(() => {

    scheduler = new TestScheduler((actual, expected) => {
        expect(actual).toEqual(expected);
    });

    transferService = jasmine.createSpyObj<TransferService>(['value$']);

    TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        declarations: [],
        providers: [],
        schemas: [NO_ERRORS_SCHEMA]
    });

    httpMock = TestBed.inject(HttpTestingController);
});

EDIT 2: Screenshot of HttpClient instance from within my service when debugging.

enter image description here

EDIT 3: Stackblitz for issue here. The failing test contract$ should return contract is the one of interest.

0

There are 0 best solutions below