ngx-translate 如何测试组件

Question

我有一个使用这个库的应用程序。我如何用它测试组件？我不想测试图书馆。我只需要开始测试我的组件，没有关于 TranslateModule 的多个错误，然后是 TranslateService 然后是 TranslateStore ...直到我在编译时遇到错误。

有没有简单的方法运行我的测试与此依赖关系？

再一次，我不想测试这个库（检查字符串是否被翻译）我需要运行测试依赖这个库的组件。

Answer 1

我所做的是在一个单独的 TranslationModule 中设置所有与翻译相关的配置，然后导入到 SharedModule.

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 { }

并且在您的规范文件中，您只需将 SharedModule 导入 TestBed.configureTestingModule() 中，例如

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

使用翻译服务或管道的组件测试应该运行没问题！

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 您的规范数组（如 this issue 中所提议）。

翻译-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 内置存根，而不是按照 issue 中的建议创建您自己的存根（它对我也不起作用）。

Answer 4

对我来说，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');
  }));

ngx-translate 如何测试组件

ngx-translate how to test components

testing

internationalization

typescript

ngx-translate

angular