Any way to use Angular's HttpClientTestingModule on code with awaits?

I'm trying to add unit tests to legacy code and noticed that if the code uses "await" I need to call a tick or flushMicrotask between each httpTestingController's expect. Here is the component:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { firstValueFrom } from 'rxjs';

@Component({
selector: 'app-t-comp',
standalone: true,
imports: [],
templateUrl: './t-comp.component.html',
styleUrl: './t-comp.component.scss'
})
export class TCompComponent implements OnInit {

constructor(private http: HttpClient) {

}

ngOnInit(): void {

// this passes tests
this.init();

// this fails tests
// this.initAwaits();
}


init(): void {
this.http.post('http://www.google.com', new HttpHeaders()).subscribe(googleResponse => {
console.log(googleResponse);
this.http.post('http://www.facebook.com', new HttpHeaders()).subscribe(facebookResponse => {
console.log(facebookResponse);
});
});
}

async initAwaits(): Promise<void> {
const googleResponse = await firstValueFrom(this.http.post('http://www.google.com', new HttpHeaders()));
console.log(googleResponse);
const facebookResponse = await firstValueFrom(this.http.post('http://www.facebook.com', new HttpHeaders()));
console.log(facebookResponse);
}
}



And the following test:

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { TCompComponent } from './t-comp.component';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe('TCompComponent', () => {
let component: TCompComponent;
let fixture: ComponentFixture<TCompComponent>;
let httpTestingController: HttpTestingController;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TCompComponent, HttpClientTestingModule]
})
.compileComponents();

fixture = TestBed.createComponent(TCompComponent);
component = fixture.componentInstance;
fixture.detectChanges();
httpTestingController = TestBed.inject(HttpTestingController);
});

afterEach(() => {
// After every test, assert that there are no more pending requests.
httpTestingController.verify();
});

it('should create', () => {
expect(component).toBeTruthy();

httpTestingController.expectOne({
method: 'POST',
url: 'http://www.google.com',
}, 'Google').flush({});

// if i call initAwaits i need to tick or flush and turn this test into fakeAsync
httpTestingController.expectOne({
method: 'POST',
url: 'http://www.facebook.com',
}, 'Facebook').flush({});
});
});


Is there any way around this? I would like to define all my client testing modules expects and then have the component finish. It would be ok to call tick or flush once at the end, but needing to get the timing between each expect is almost impossible.

Continue reading...