ngx-translate 如何測試組件

Question

我有一個使用這個庫的應用程序。 我如何用它測試組件？ 我不想測試庫。 我只需要開始測試我的組件，而不會出現關於 TranslateModule 然后 TranslateService 然后 TranslateStore 的多個錯誤......直到我在編譯時出現錯誤。

有沒有一種簡單的方法可以使用這種依賴來運行我的測試？

再一次，我不想測試這個庫（檢查字符串是否被翻譯）我需要對依賴這個庫的組件運行測試。

Answer 1

對我來說，ngx-translate-testing 運行良好https://www.npmjs.com/package/ngx-translate-testing

第一的

import { TranslateTestingModule } from 'ngx-translate-testing';

然后

  imports: [
    ...
    TranslateTestingModule.withTranslations({ en: require('src/assets/i18n/en.json'), de: require('src/assets/i18n/de.json') })
  ], 

然后測試

  it('should render german title', inject([TranslateService], (translateService: TranslateService) => {
    translateService.setDefaultLang('de');
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('.title').textContent).toContain('GERMANTITLE');
  }));

Answer 2

如果您不一定需要翻譯密鑰，您可以像這樣在測試中導入TranslateModule ：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      ...
    ],
    imports: [
      TranslateModule.forRoot(),
    ],
    providers: [
      ...
    ]
  })
  .compileComponents();
}));

它只會顯示翻譯鍵

Answer 3

（使用 Angular 8.1.0 和 ngx-translate 11.0.1 測試）

A)如果您在組件中使用翻譯管道，請創建一個TranslateMockPipe並將其添加到您的規范的declarations數組中（如本期建議）。

翻譯-mock.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';


@Pipe({
  name: "translate"
})
export class TranslateMockPipe implements PipeTransform {
  public name: string = "translate";

  public transform(query: string, ...args: any[]): any {
    return query;
  }
}

你的component.spec.ts

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ YourComponent, TranslateMockPipe ],
      imports: [
        ...
      ]
    })
    .compileComponents();
  }));

在一種情況下，出於某種原因，我還必須執行步驟 B)。

B)如果你直接在你的組件中使用翻譯服務，例如this.translate.get('foo.bar') ，你需要導入TranslateModule並使用 ngx-translate TranslateFakeLoader作為它的loader 。

你的component.spec.ts

import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core';
...
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ YourComponent ], // you may add TranslateMockPipe from step 1 here, too
      imports: [
        ...
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useClass: TranslateFakeLoader
          }
        })
      ]
    })
    .compileComponents();
  }));

這樣，您可以使用 ngx-translate 內置存根，而不是按照問題中的建議創建自己的存根（它對我也不起作用）。

Answer 4

我所做的是在我導入到SharedModule的單獨TranslationModule中設置所有與翻譯相關的配置。

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

@NgModule({
  declarations: [],
  imports: [CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: IfYouHaveACustomFactory,
        deps: [HttpClient]
      }
    })],
  exports: [TranslateModule],
  providers: [],
})
export class TranslationModule {

}

然后可以將其導出到導入SharedModule所有組件，

@NgModule({
  imports: [],
  exports: [TranslationModule, SomeOtherModule],
})
export class SharedModule { }

在您的規范文件中，您只需在TestBed.configureTestingModule()導入SharedModule就像

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        SharedModule,
...

對使用翻譯服務或管道的組件的測試應該運行良好！