如果它是静态测试,我可以获得值,但每当我试图获得翻译的值(使用ngx-translate)时,它都是空的.
<div id="header-title">
<h1>{{ 'MENU_TITLE' | translate | uppercase }}</h1>
</div>
这工作并返回测试
<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);
}));
—–固定—–但不确定这是否是正确的方法
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);
});
解决方法
找到了在单元测试中翻译密钥的解决方案
首先,检查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');
}));
