Transloco loader module for testing angular... Can't programmatically import translations?

Kind of new to Transloco, but I got this module working to test my components:


import { TranslocoTestingModule, TranslocoTestingOptions } from '@jsverse/transloco';
import { SUPPORTED_LANGUAGES } from './constants'; // ['en', 'es', 'de', 'fr', 'zh-CN', 'zh-TW'];

// TODO find a way to programmatically import languages from SUPPORTED_LANGUAGES
// (may not be possible with TranslocoTestingModule or with the variable pattern below)
import en from '../../assets/i18n/en.json';
import es from '../../assets/i18n/es.json';
import de from '../../assets/i18n/de.json';
import fr from '../../assets/i18n/fr.json';
import zhCN from '../../assets/i18n/zh-CN.json';
import zhTW from '../../assets/i18n/zh-TW.json';

export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
return TranslocoTestingModule.forRoot({
langs: {
en,
es,
de,
fr,
'zh-CN': zhCN,
'zh-TW': zhTW,
},
translocoConfig: {
availableLangs: SUPPORTED_LANGUAGES,
defaultLang: 'en',
},
preloadLangs: true,
...options
});
}


I'd like to do what the TODO says; dry up the module by not over-declaring languages. That is, to use the SUPPORTED_LANGUAGES const to populate the langs property.

I tried doing something like this to build a path object and then fetch the translation files at runtime:

const generateLanguagePaths = (languages: readonly string[]) => {
const basePath = '../../assets/i18n/';
return languages.reduce((paths, lang) => {
paths[lang] = `${basePath}${lang}.json`;
return paths;
}, {} as Record<string, string>);
};

const LANGUAGE_PATHS = generateLanguagePaths(SUPPORTED_LANGUAGES);


but I had to iterate over the resulting object and then resolve promises to load the files. Meanwhile, the spec file would decide it wasn't waiting for all that and it would bail out and throw an error.

Is there a way I can modify this spec to wait for an async import? Maybe some kind of promise on defining the module with a then to configure the testbed?

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExampleOneComponent } from './example-one.component';
import { getTranslocoModule } from 'src/app/helpers/transloco-testing.module';

describe('ExampleOneComponent', () => {
let component: ExampleOneComponent;
let fixture: ComponentFixture<ExampleOneComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
imports: [
ExampleOneComponent,
getTranslocoModule(),
],
});
fixture = TestBed.createComponent(ExampleOneComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

Continue reading...