Testing With The Angular HttpClientTestingModule

// api.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';
import {
    HttpClientTestingModule,
    HttpTestingController
} from '@angular/common/http/testing';
import { UserService } from './api.service';
import { HttpEvent, HttpEventType } from '@angular/common/http';

describe('ApiService', () => {
    let service: UserService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [UserService]
        });
        service = TestBed.inject(UserService);
    });

    it(
        'should get users',
        inject(
            [HttpTestingController, UserService],
            (httpMock: HttpTestingController, userService: UserService) => {
                const mockUsers = [
                    { name: 'Alice', website: 'example.com' },
                    { name: 'Bob', website: 'example.org' }
                ];

                userService.getData().subscribe((event: HttpEvent<any>) => {
                    switch (event.type) {
                        case HttpEventType.Response:
                            expect(event.body).toEqual(mockUsers);
                    }
                });

                const mockReq = httpMock.expectOne(userService.url);

                expect(mockReq.cancelled).toBeFalsy();
                expect(mockReq.request.responseType).toEqual('json');
                mockReq.flush(mockUsers);

                httpMock.verify();
            }
        )
    );
});

//app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { UserService } from './api.service';
import { HttpEvent, HttpEventType } from '@angular/common/http';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'angular-test-2';
    users: any = [];

    constructor(private userService: UserService) { }

    ngOnInit() {
        this.fetchUsers();
    }

    fetchUsers() {
        this.userService.getData().subscribe((event: HttpEvent<any>) => {
            if (event.type === HttpEventType.Response) {
                this.users = event.body;
            }
        });
    }
}

//  api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class UserService {
    url = 'https://jsonplaceholder.typicode.com/users';

    constructor(private http: HttpClient) { }

    getData() {
        const req = new HttpRequest('GET', this.url, {
            reportProgress: true
        });

        return this.http.request(req);
    }
}