Jasmine - 如何从 @ngx-translate 测试 HttpLoaderFactory

Question

我正在使用 @ngx-translate 依赖项编写 Angular 应用程序，因此我根据文档配置了包：

https://github.com/ngx-translate/core?tab=readme-ov-file#configuration

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { AppComponent } from './main';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

然后，我的 Jasmine 代码覆盖率报告说我应该测试 HttpLoaderFactory。

我想知道我该怎么做？ stackblitz 上的代码

Answer 1

我们可以创建一个单独的描述块，它只是针对此功能的普通茉莉花单元测试，为了覆盖此功能，我们可以使用下面的代码。

首先我们将整个包

@ngx-translate/http-loader

导入为

translateApi

，然后我们使用

spyOnProperty

来监视

TranslateHttpLoader

，最后我们检查它是否被调用，这足以覆盖这段代码！

import * as translateApi from '@ngx-translate/http-loader';
...

...
describe('should cover HttpLoaderFactory', () => {
  it('should initialize TranslateHttpLoader with params', () => {
    const spy = spyOnProperty<any>(
      translateApi,
      'TranslateHttpLoader'
    ).and.callThrough();
    HttpLoaderFactory({} as any);
    expect(spy).toHaveBeenCalled();
  });
});

Stackblitz Demo