30 de març del 2019

Ionic/Angular: Tests unitaris amb ngx-translate

Si treballeu amb Ionic o Angular possiblement utilitzeu la llibreria d'internacionalització ngx-translate.com. I si no ho feu encara, us ho recomano, ja que facilitat la traducció a diversos idiomes i el canvi de llenguatge sense haver de reiniciar l'aplicació. Podeu veure com fer-ho en aquest article, on detallo com afegir un servei de traducció a una aplicació.

El cas és que Ionic v4 facilita la realització de tests unitaris, però no es fàcil comprovar un mòdul que utilitzi els serveis de traducció: pipes, carregadors, dependències... Com gestionar-ho, tot plegat?

La informació no és molt clara i hi ha diverses alternatives, algunes de força complicades. Per això vull compartir aquí la que m'ha semblat més senzilla.

En primer lloc, instal·lem un parell de llibreries que ens serviran de suport:
 npm install ngx-translate-testing --save-dev
 npm install ngx-translate-messageformat-compiler messageformat --save-dev
Llavors ja podem utilitzar la llibreria en els nostres test unitaris:
 ...
 import { TranslateTestingModule } from 'ngx-translate-testing';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';

 describe('ElMeuComponent', () => {
    const ENGLISH_LANGUAGE = 'en';
    const ENGLISH_TRANSLATIONS = require('../../assets/i18n/en.json');
    ...
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ElMeuComponent],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            imports: [
                TranslateTestingModule
                    .withTranslations(ENGLISH_LANGUAGE, ENGLISH_TRANSLATIONS)
                    .withCompiler(new TranslateMessageFormatCompiler())
            ]
        }).compileComponents();
    }));
    ...
 });


I el resultat:
Com es pot veure, és força senzill. Ara ja no hi ha cap excusa per no comprovar els mòduls que utilitzin la pipe translate !!!