Transloco: Lazy loading i18n files can cause issue with karma tests

[flgraveline]

Note

I may have misunderstood a few things, feel free to roast me if I'm mistaken. From using the lazy loading in a few places, I think I understood that the "lazy loaded" part gets merged into the "main" dictionary.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[x] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

If you use the i18n lazy loading like in the documentation, for example :
providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'authentication' }],

Then you can use *transloco="let t; read: 'authentication'" in a component and translate the lazy loaded part of the dictionary fine.

But then you hit a wall in the karma test, because if you import the /authentication/en.json and give it to the TranslocoTestingModule, then the useValue: 'authentication' will fail and your unit test crashes. (Due to the fact that you gave the lazy loaded part, so useValue will try to start from a key that potentially doesn't exist).

If you import the base en.json, same will happen as the lazy loaded part haven't been merged. I'm currently working around this issue by manually merging the two json files together to make my tests work, but it's not very elegant.

import en from '../../../../../assets/i18n/en.json';
import en_authentication from '../../../../../assets/i18n/authentication/en.json';
...
 let merged = Object.assign({}, en);
  merged = Object.assign(merged, { authentication: en_authentication });
...
TranslocoTestingModule.withLangs(
          { en: merged }, { defaultLang: 'en' }
        )

Expected behavior

I don't know what's the prettiest way to handle this, maybe a config that we can give to TranslocoTestingModule to say "yo, ignore the useValue that you may encounter because I am providing a lazy loaded part of the i18n dictionary" ?

Or maybe a way to provide an array of json files that will internally get merged together ?

TranslocoTestingModule.withLangs(
          { en: TranslocoTestingModule.merge(en, en_lazy_partial) }, { defaultLang: 'en' }
        )

Minimal reproduction of the problem with instructions

• Base i18n/en.json
• Lazy loaded i18n/directory/en.json
• A lazy loaded module with a component inside that uses i18n/directory/en.json with useValue
• A karma unit test that tries to create the component

What is the motivation / use case for changing the behavior?

Feels tedious to manually merge the json files for every unit tests that will potentially have this issue (any lazy loaded i18n dictionaries).

Environment

Angular version: 8.2.4
Transloco: 1.7.9

[itayod]

Hi @Beerbossa.

We currently aren't going to add an API for merging scopes for testing.
You could provide a mock that includes the scope languages or merge them as you suggested.

Having said that, we might add an API for it in the future.

[NetanelBasal]

@Beerbossa you should pass the scope with the lang:

TranslocoTestingModule.withLangs(
  { 
    en,
    'authentication/en': authentication
  }
)      

In V2 we'll take care of the lang postfix so you'll be able to do:

TranslocoTestingModule.withLangs(
  { 
    en,
    authentication
  }
)      

[flgraveline]

@Beerbossa you should pass the scope with the lang:

TranslocoTestingModule.withLangs(
  { 
  en,
    'authentication/en': authentication
  }
)      

In V2 we'll take care of the lang postfix so you'll be able to do:

TranslocoTestingModule.withLangs(
  { 
  en,
    authentication
  }
)      

Thank you, I knew I was missing some kind of way to "merge" them in a cleaner way, that's good for me ! Appreciate the tip and the plan for V2 !

[flgraveline]

EDIT : Using this way right now and it works well

TranslocoTestingModule.withLangs(
  { 
    fr: {
      ...fr,
      authentication,
    },
  }, { defaultLang: 'fr' }
)      

---

Before the edit

@NetanelBasal

Actually quick question, it seems to fail karma tests when I do it this way :

Am I missing something ? Sorry to bother you again, maybe I don't have the latest version or something, will try to upgrade.

[itayod]

@Beerbossa could you please write here the HTML template of your component?

[flgraveline]

@Beerbossa could you please write here the HTML template of your component?

I changed my code a lot since then and now everything works when merging the json files like so :

TranslocoTestingModule.withLangs(
  { 
    fr: {
      ...fr,
      authentication,
    },
  }, { defaultLang: 'fr' },
)    

But what I tried that didn't work was

lazyLoaded.module.ts <---- This would lazy load the i18n 'i18n/authentication/fr.json'
@NgModule({
  declarations: [
    DummyComponent
  ],
  providers: [
    { provide: TRANSLOCO_SCOPE, useValue: 'authentication' },
  ],
  imports: [
    CommonModule,
    SharedModule,
  ],
})

dummy-component.html <--- This would create the variable "t" to reference "t.authentication"
<div *transloco="let t; read: 'authentication' " class="main-container">
  <span>{{ t.login_title }}</span>
</div>

dummy-component.spec.ts <------ This would NOT merge "i18n/authentication/fr.json" with "i18n/en.json".
import fr from '../../../../../assets/i18n/fr.json';
import authentication from '../../../../../assets/i18n/authentication/fr.json';
TranslocoTestingModule.withLangs(
  { 
    fr,
    'authentication/fr': authentication
  }, { defaultLang: 'fr' },
)   

Maybe I made a mistake, but pretty sure I tried a few times and ended up going for the spread operator merge.

[itayod]

@Beerbossa I have updated the playground lazy page with your case, and it seems to be working fine at version 2.
see: https://github.com/ngneat/transloco/blob/master/src/app/lazy/lazy.component.spec.ts#L38

I would suggest you upgrade your code to use the new version and update your test as @NetanelBasal suggested.