如何在 angular 中正确地对来自 transloco api 的标签进行单元测试

Question

我已经使用 Transloco API 一段时间了，但在单元测试期间无法使用它。

我正在关注来自 ngneat 的博客 Unit testing with transloco

但是我的简单测试用例也由于某些原因失败并出现以下错误：

Chrome 83.0.4103 (Windows 10.0.0) AppComponent should render title in a h1 tag FAILED
        Error: Expected ' page-heading! ' to contain 'Welcome to transloco-sample!'.
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts:40:54)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)

我的配置文件和测试套件如下：

transloco-root.module.ts

import { HttpClient } from '@angular/common/http';
import {
  TRANSLOCO_LOADER,
  Translation,
  TranslocoLoader,
  TRANSLOCO_CONFIG,
  translocoConfig,
  TranslocoModule
} from '@ngneat/transloco';
import { Injectable, NgModule } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) { }

  getTranslation(lang: string) {
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['fr', 'en'],
        defaultLang: 'en',
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: environment.production,
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
  ]
})
export class TranslocoRootModule { }

app.component.html

<div style="text-align:center">
  <h1>
    {{ 'page-heading' | transloco }}!
  </h1>
</div>

transloco-testing.module.ts

import { TranslocoTestingModule, TranslocoConfig } from '@ngneat/transloco';
import * as en from '../assets/i18n/en.json';
import * as fr from '../assets/i18n/fr.json';

export function getTranslocoModule(config: Partial<TranslocoConfig> = {}) {
    return TranslocoTestingModule.withLangs(
        { en, fr },
        {
            availableLangs: ['en', 'fr'],
            defaultLang: 'en',
            ...config
        }
    );
}

和

测试套件为

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { getTranslocoModule } from './transloco-testing.module';
import { LangDropDownComponent } from './lang-drop-down/lang-drop-down.component';

fdescribe('AppComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        getTranslocoModule()
      ],
      declarations: [
        AppComponent, LangDropDownComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    console.log(compiled.querySelector('h1').textContent);
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to transloco-sample!');
  });
});

Also, en.json

{
    "application": "Transloco - Sample ",
    "title": "Testing Transloco",
    "para-title": "Here are some links to help you start: ",
    "page-heading": "Welcome to Transloco App",
    "client": {
        "name": "Name"
    }
}

我在tsconfig.json中还有以下选项：

"resolveJsonModule"：是的， "esModuleInterop": 真

任何人都可以提出建议吗？

Answer 1

发布此答案，可能会对其他人有所帮助。

根据transloco的文档，我们需要在tsconfig.json中添加以下参数：

{
  "resolveJsonModule": true,
  "esModuleInterop": true
}

而且很多地方都写着这些需要在编译器选项中加上。但是它没有用，所以我尝试将它们添加到 tsconfig.json 中的 angularCompilerOptions 并且它工作正常。

所以我在 tsconfig.json 中添加了如下内容：

  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "resolveJsonModule": true,
    "esModuleInterop": true
  }

它运行良好。

如何在 angular 中正确地对来自 transloco api 的标签进行单元测试

How to correctly unit test labels coming from transloco api in angular

unit-testing

angular

transloco