web-dev-qa-db-ja.com

ngx-translate：単体テストで文字列を翻訳する

静的テストであれば値を取得できますが、（ngx-translateを使用して）変換された値を取得しようとすると、常に空になります。

<div id="header-title">
    <h1>{{ 'MENU_TITLE' | translate | uppercase }}</h1>
</div>

これは機能しますとTestを返します

<div id="header-title">
    <h1>Test</h1>
</div>

spec.ts

it('should translate a string using the key value', () => {
    fixture = TestBed.createComponent(NavComponent);
    const title = fixture.nativeElement;
    console.log(title.querySelector('#header-title h1').innerHTML);
});

翻訳モジュールのインポート

beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useFactory: HttpLoaderFactory,
                        deps: [HttpClient]
                    }
                }),
                HttpClientModule
            ],
            declarations: [NavComponent]
        }).compileComponents();

        injector = getTestBed();
        translate = injector.get(TranslateService);
    }));

----- FIXED -----しかし、これが正しい方法かどうかはわかりません

let fixture: ComponentFixture<NavComponent>;

it('should translate a string using the key value', () => {
    fixture.detectChanges() // fixture = TestBed.createComponent(NavComponent);
    const title = fixture.nativeElement;
    console.log(title.querySelector('#header-title h1').innerHTML);
});
angularunit-testingtypescriptkarma-jasminengx-translate
6
Greg

Unit Testingでキーを翻訳するソリューションを見つけました

最初に、あなたのtextContentが変換キーと等しいかどうかを確認します。次に、そのキーの翻訳を設定し、翻訳されたかどうかを再度確認します。

it('should translate a string using the key value', async(() => {
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('#header-title h1').textContent).toEqual('MENU_TITLE');
    translate.setTranslation('en', { MENU_TITLE: 'reporting' });
    translate.use('en');
    fixture.detectChanges();
    expect(compiled.querySelector('#header-title h1').textContent).toEqual('REPORTING');
}));
5
Greg

なぜこれを単体テストでテストするのかわからない。

これが機能しない理由は、変換パイプが値を取得している間に発生するログと非同期であるためです。

TestBedですでにTranslateModuleを提供していると想定します。

さて、これが100％機能するかどうかはわかりませんので、試してみてください。ただし、理論的には、asyncとwhenStable（）を使用してみることができます。

  it(
    'should translate a string using the key value',
    async(() => {
      fixture = TestBed.createComponent(NavComponent);
      const title = fixture.nativeElement;

      fixture.whenStable().then(() => {
        fixture.detectChanges();
        console.log(title.querySelector('#header-title h1').innerHTML);
      });
    })
  );

幸運を ：）！

2
Jmsdb