I can get the value if it's a static test, but whenever I'm trying to get the translated value (using ngx-translate
), it's empty.
<div id="header-title">
<h1>{{ 'MENU_TITLE' | translate | uppercase }}</h1>
</div>
This works and returns 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);
});
Importing translate module
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----- but not sure if this is the right way to do
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);
});
Found a solution to translate a key in Unit Testing
First you check if your textContent
equals the translate key. Then you set a translation for that key and check again if it translated:
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');
}));