Как смоделировать «вложенный» угловой сервис, используемый в компоненте с помощью jest

Question

Я хочу написать модульный тест для углового (~ v7.2.0) компонента с Jest (^ v24.8.0).

Это компонент, он использует вложенную службу через this.api.manageUser.getUsersStats(), и я хочу проверить, вызывается ли это когда-либо, и высмеивать результат. Поэтому лучше всего было бы написать «глобальный» / «ручной» макет в папке « mocks ».

Я уже много чего пробовал, но ни одна из них не работает так, как ожидалось.

Я действительно надеюсь, что кто-нибудь может мне помочь!

// users.component

import { TstApiService } from '../../services/TstApi/TstApi.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.sass']
})
export class UsersComponent implements OnInit, OnDestroy {
  constructor(
    // ...
    private api: TstApiService
    ) { }

  ngOnInit() {
    this.getUsersStats();
  }

  private getUsersStats() {
    this.api.manageUser.getUsersStats().pipe(take(1)).subscribe(userStats => {
      /* ... */ = userStats.allUsers
    })
  }
}

Это мой сервис:

// TstApi.service

import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TstApiService {
    private http: TstHttp
    manageUser: ManageUser

    constructor(private httpClient: HttpClient) {
        this.http = new TstHttp(this.httpClient)
        this.manageUser = new ManageUser(this.http)
     }
}

class ManageUser {
    constructor(private http: TstHttp) {}
    getUsersStats(): Observable<TUserStats> { //<-- this is the function used by the component
      return this.http.get('/manage/user/stats')
    }
}

class TstHttp {
    private apiUrl: string
    constructor(private http: HttpClient) {
        this.apiUrl = environment.apiBaseUrl
    }
    /**
     * @throws{ApiError}
     * @throws{Error}
     */
    get<T>(path: string): Observable<T> {
      return this.http.get<T>(environment.apiBaseUrl + path)
    }
}

Это файл спецификации:

/// <reference types='jest'/>
import { TestBed, ComponentFixture, inject } from '@angular/core/testing';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { UsersComponent } from './users.component';
import { UsersService } from './users.service';
import { TstApiService } from "src/app/services/TstApi/TstApi.service";

// Approach No. 3
jest.mock("src/app/services/TstApi/TstApi.service")

// Approach No. 1
// jest.mock("src/app/services/TstApi/TstApi.service", () => {
//  return jest.fn().mockImplementation(() => {
//    return {manageUser: () => { getUsersStats: jest.fn() }};
//  })
// });

describe('Users', () => {
  @Component({ selector: 'app-input', template: '' }) class InputComponent {}
  let router: Router;
  let component: UsersComponent;
  let fixture: ComponentFixture<UsersComponent>;
  const http: HttpClient = new HttpClient(null);
  let apiService: TstApiService = new TstApiService(http);
  const usersService: UsersService = new UsersService(apiService);
  let usersServiceMock;
  // let tstApiServiceMock; // Approach No. 2
  let httpMock: HttpTestingController;

  beforeEach(async () => {
        // Approach No. 2
    // tstApiServiceMock = {
    //   manageUser: jest.fn().mockImplementation(() => ({
    //     getUsersStats: jest.fn().mockImplementation(() => Promise.resolve(null))
    //   }))
    // }
    await TestBed.configureTestingModule({
      declarations: [
        UsersComponent,
        InputComponent
      ],
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        // TstApiService
        // { provide: TstApiService, useValue: tstApiServiceMock } // Approch No. 2
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents()
      .then(() => {
        // create component and test fixture
        fixture = TestBed.createComponent(UsersComponent);
        router = TestBed.get(Router)
        // get test component from the fixture
        component = fixture.componentInstance;
      });
  });

  beforeEach(
        // Approach No. 4
    inject([TstApiService, HttpTestingController], (_service, _httpMock) => {
      apiService = _service;
      httpMock = _httpMock;
  }));

  test.only('Should getUsersStats on NgInit', () => {
    expect(apiService.manageUser.getUsersStats).toHaveBeenCalled();
  })
})

Для «подхода № 3» вот «ручной» -мок:

import { ManageUser, TstHttp, ErrorAlert } from './../TstApi.service';
// import { HttpClient } from '@angular/common/http';

// export const TstApiService = jest.genMockFromModule('../TstApi.service.ts');


export class TstApiService {
  private http: TstHttp;
  manageUser: ManageUser;
  error: ErrorAlert;

  constructor(private httpClient) {
    this.error = new ErrorAlert();
    this.http = new TstHttp(this.httpClient, this.error);
    this.manageUser = new ManageUser(this.http);
  }
}