Unit Testing

When running specs, we want to have the languages available immediately, in a synchronous fashion. Transloco provides you with a TranslocoTestingModule, where you can pass the languages you need in your specs, and the config.

We recommend to be DRY and create a module factory function that we can use in each spec, For example:

transloco-testing.module.ts
import { TranslocoTestingModule, TranslocoTestingOptions } from '@ngneat/transloco';
import en from '../assets/i18n/en.json';
import es from '../assets/i18n/es.json';
export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
return TranslocoTestingModule.forRoot({
langs: { en, es },
translocoConfig: {
availableLangs: ['en', 'es'],
defaultLang: 'en',
},
preloadLangs: true,
...options
});
}

Now we can use it in each spec file:

app.component.spec.ts
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [getTranslocoModule()],
declarations: [AppComponent]
}).compileComponents();
}));
it('should work', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('h1'))
.nativeElement.innerText).toBe('hello');
});
});

You can find an example here.

If you need to test scopes, you should add them as languages, for example:

transloco-testing.module.ts
export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
return TranslocoTestingModule.forRoot({
langs: {
en,
es,
'admin-page/en': admin,
'admin-page/es': adminSpanish,
},
translocoConfig: {
availableLangs: ['en', 'es'],
defaultLang: 'en',
},
preloadLangs: true,
...options
});
}

You can find an example here.

Note that in order to import JSON files, you need to configure the TypeScript compiler by adding the following properties in tsconfig.json:

{
"resolveJsonModule": true,
"esModuleInterop": true
}