angular - ngx-translate hur man testar komponenter

Jag har en applikation som använder detta bibliotek. Hur testar jag komponenter med det? JAG VILL INTE TESTA BIBLIOTEKET. Jag behöver bara starta tester av min komponent utan flera fel om TranslateModule sedan TranslateService sedan TranslateStore ... tills jag får ett fel vid kompilering.

Finns det ett enkelt sätt att bara köra mina tester med detta beroende?

Än en gång, jag vill inte testa det här biblioteket (kontrollera om strängen översätts) Jag behöver köra tester på komponenter som är beroende av det här biblioteket.

Svar #1

Om du inte nödvändigtvis behöver att nycklarna översätts kan du importera TranslateModule i ditt test på detta sätt:

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

Det kommer endast att visa översättningsnycklarna

Svar #2

För mig fungerade ngx-translate-testing bra https://www.npmjs.com/package/ngx-translate-testing

först

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

då

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

då testa

  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');
  }));

Svar #3

(Testat med Angular 8.1.0 och ngx-translate 11.0.1)

A) Om du använder translate pipe i din komponent, skapa en TranslateMockPipe och lägg till den i declarations-arrayen i din specifikation (som föreslagits i detta ärende).

translate-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;
  }
}

din-komponent.spec.ts

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

I ett fall av någon anledning var jag också tvungen att göra steg B).

B) Om du använder översättningstjänsten direkt i din komponent, t.ex. this.translate.get('foo.bar'), behöver du importera TranslateModule och använda ngx-translate TranslateFakeLoader som en loader för det.

din-komponent.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();
  }));

På det här sättet kan du använda ngx-translate inbyggda Stub istället för att skapa din egen som föreslaget i ärendet (det fungerade inte för mig heller).

Relaterade artiklar