import { ChangeDetectionStrategy , Component , ElementRef , Injectable , ViewChild , ViewContainerRef } from '@angular/core' ; import { ComponentFixture , TestBed } from '@angular/core/testing' ; import { TranslateModule , TranslateService } from '@rxweb/ngx-translate-extension' ; import { RxTranslateModule } from "@rxweb/translate" ; @ Injectable ( ) @ Component ( { selector : 'hmx-app' , changeDetection : ChangeDetectionStrategy . OnPush , template : `
    <div #noKey translate>TEST</div>
    <div #contentAsKey translate>TEST.VALUE</div>
    <div #withKey [translate]="'TEST'">Some init content</div>
    <div #noContent [translate]="'TEST'"></div>
    <div #withOtherElements translate>TEST1 <span>Hey</span> TEST2</div>
    <div #withParams [translate]="'TEST'" [translateParams]="value">Some init content</div>
    <div #withParamsNoKey translate [translateParams]="value">TEST</div>
    <div #leadingSpaceNoKeyNoParams translate> TEST</div>
    <div #trailingSpaceNoKeyNoParams translate>TEST </div>
    <div #withSpaceAndLineBreakNoKeyNoParams translate>
      TEST
    </div>
  ` } ) class App { viewContainerRef : ViewContainerRef ; @ ViewChild ( 'noKey' , { static : true } ) noKey : ElementRef ; @ ViewChild ( 'contentAsKey' , { static : true } ) contentAsKey : ElementRef ; @ ViewChild ( 'withKey' , { static : true } ) withKey : ElementRef ; @ ViewChild ( 'withOtherElements' , { static : true } ) withOtherElements : ElementRef ; @ ViewChild ( 'withParams' , { static : true } ) withParams : ElementRef ; @ ViewChild ( 'withParamsNoKey' , { static : true } ) withParamsNoKey : ElementRef ; @ ViewChild ( 'noContent' , { static : true } ) noContent : ElementRef ; @ ViewChild ( 'leadingSpaceNoKeyNoParams' ) leadingSpaceNoKeyNoParams : ElementRef ; @ ViewChild ( 'trailingSpaceNoKeyNoParams' ) trailingSpaceNoKeyNoParams : ElementRef ; @ ViewChild ( 'withSpaceAndLineBreakNoKeyNoParams' ) withSpaceAndLineBreakNoKeyNoParams : ElementRef ; value = { value : 'ok' } ; constructor ( viewContainerRef ) { this . viewContainerRef = viewContainerRef ; } } describe ( 'TranslateDirective' , ( ) => { let translate ; let fixture ; beforeEach ( ( ) => { TestBed . configureTestingModule ( { imports : [ TranslateModule . forRoot ( ) , RxTranslateModule . forRoot ( { isTest : true , forNgxTranslate : true , cacheLanguageWiseObject : true , } ) ] , declarations : [ App ] } ) ; translate = TestBed . get ( TranslateService ) ; fixture = ( < any > TestBed ) . createComponent ( App ) ; fixture . detectChanges ( ) ; } ) ; afterEach ( ( ) => { translate = undefined ; fixture = undefined ; } ) ; it ( 'should translate a string using the container value' , ( ) => { expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; translate . setTranslation ( 'en' , { "TEST" : "This is a test" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( 'This is a test' ) ; } ) ; it ( 'should translate a string using the container value as a key' , ( ) => { expect ( fixture . componentInstance . contentAsKey . nativeElement . innerHTML ) . toEqual ( 'TEST.VALUE' ) ; translate . setTranslation ( 'en' , { "TEST" : { "VALUE" : "This is a test" } } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . contentAsKey . nativeElement . innerHTML ) . toEqual ( 'This is a test' ) ; } ) ; it ( 'should translate a string using the key value' , ( ) => { expect ( fixture . componentInstance . withKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; translate . setTranslation ( 'en' , { "TEST" : "This is a test" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withKey . nativeElement . innerHTML ) . toEqual ( 'This is a test' ) ; } ) ; it ( 'should translate first child strings with elements in the middle' , ( ) => { expect ( fixture . componentInstance . withOtherElements . nativeElement . innerHTML ) . toEqual ( 'TEST1 <span>Hey</span> TEST2' ) ; translate . setTranslation ( 'en' , { "TEST1" : "Awesome" , "TEST2" : "it works" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withOtherElements . nativeElement . innerHTML ) . toEqual ( 'Awesome <span>Hey</span> it works' ) ; } ) ; it ( 'should translate first child strings without recursion' , ( ) => { expect ( fixture . componentInstance . withOtherElements . nativeElement . innerHTML ) . toEqual ( 'TEST1 <span>Hey</span> TEST2' ) ; translate . setTranslation ( 'en' , { "TEST1" : "TEST2" , "TEST2" : "it works" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withOtherElements . nativeElement . innerHTML ) . toEqual ( 'TEST2 <span>Hey</span> it works' ) ; } ) ; it ( 'should translate a string with params and a key' , ( ) => { expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; translate . setTranslation ( 'en' , { "TEST" : "It is {{value}}" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'It is ok' ) ; } ) ; it ( 'should translate a string with params and no key' , ( ) => { expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; translate . setTranslation ( 'en' , { "TEST" : "It is {{value}}" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'It is ok' ) ; } ) ; it ( 'should update the translation when params change' , ( ) => { expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; translate . setTranslation ( 'en' , { "TEST" : "It is {{value}}" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'It is ok' ) ; expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'It is ok' ) ; fixture . componentInstance . value = { value : 'changed' } ; fixture . detectChanges ( ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'It is changed' ) ; expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'It is changed' ) ; } ) ; it ( 'should update the DOM when the lang changes and the translation key starts with space' , ( ) => { expect ( fixture . componentInstance . leadingSpaceNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( ' TEST' ) ; const en = "This is a test - with leading spaces in translation key" ; const fr = "C'est un test - avec un espace de tête dans la clé de traduction" ; const leadingSpaceFromKey = ' ' ; translate . setTranslation ( 'en' , { "TEST" : en } ) ; translate . setTranslation ( 'fr' , { "TEST" : fr } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . leadingSpaceNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( leadingSpaceFromKey + en ) ; translate . use ( 'fr' ) ; expect ( fixture . componentInstance . leadingSpaceNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( leadingSpaceFromKey + fr ) ; } ) ; it ( 'should update the DOM when the lang changes and the translation key has line breaks and spaces' , ( ) => { expect ( fixture . componentInstance . withSpaceAndLineBreakNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( ' TEST ' ) ; const en = "This is a test - with trailing spaces in translation key" ; const fr = "C'est un test - avec un espace de fuite dans la clé de traduction" ; const whiteSpaceFromKey = ' ' ; translate . setTranslation ( 'en' , { "TEST" : en } ) ; translate . setTranslation ( 'fr' , { "TEST" : fr } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withSpaceAndLineBreakNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( whiteSpaceFromKey + en + whiteSpaceFromKey ) ; translate . use ( 'fr' ) ; expect ( fixture . componentInstance . withSpaceAndLineBreakNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( whiteSpaceFromKey + fr + whiteSpaceFromKey ) ; } ) ; it ( 'should update the DOM when the lang changes and the translation key ends with space' , ( ) => { expect ( fixture . componentInstance . trailingSpaceNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( 'TEST ' ) ; const en = "This is a test - with spaces and line breaks in translation key" ; const fr = "C'est un test - avec des espaces et sauts de lignes dans la clé de traduction" ; const trailingSpaceFromKey = ' ' ; translate . setTranslation ( 'en' , { "TEST" : en } ) ; translate . setTranslation ( 'fr' , { "TEST" : fr } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . trailingSpaceNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( en + trailingSpaceFromKey ) ; translate . use ( 'fr' ) ; expect ( fixture . componentInstance . trailingSpaceNoKeyNoParams . nativeElement . innerHTML ) . toEqual ( fr + trailingSpaceFromKey ) ; } ) ; it ( 'should update the DOM when the lang changes' , ( ) => { expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; expect ( fixture . componentInstance . noContent . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; translate . setTranslation ( 'en' , { "TEST" : "This is a test" } ) ; translate . setTranslation ( 'fr' , { "TEST" : "C'est un test" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( 'This is a test' ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'This is a test' ) ; expect ( fixture . componentInstance . noContent . nativeElement . innerHTML ) . toEqual ( 'This is a test' ) ; translate . use ( 'fr' ) ; expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( "C'est un test" ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( "C'est un test" ) ; expect ( fixture . componentInstance . noContent . nativeElement . innerHTML ) . toEqual ( "C'est un test" ) ; } ) ; it ( 'should update the DOM when the lang changes and the translation ends with space' , ( ) => { expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; expect ( fixture . componentInstance . noContent . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; const en = "  This is a test - with spaces " ; const fr = "  C'est un test - avec espaces " ; translate . setTranslation ( 'en' , { "TEST" : en } ) ; translate . setTranslation ( 'fr' , { "TEST" : fr } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( `${ en }` ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( en ) ; expect ( fixture . componentInstance . noContent . nativeElement . innerHTML ) . toEqual ( en ) ; translate . use ( 'fr' ) ; expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( `${ fr }` ) ; expect ( fixture . componentInstance . withParams . nativeElement . innerHTML ) . toEqual ( fr ) ; expect ( fixture . componentInstance . noContent . nativeElement . innerHTML ) . toEqual ( fr ) ; } ) ; it ( 'should update the DOM when the default lang changes' , ( ) => { expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; translate . setTranslation ( 'en' , { "TEST" : "This is a test" } ) ; translate . setTranslation ( 'fr' , { "TEST" : "C'est un test" } ) ; translate . setDefaultLang ( 'en' ) ; expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( 'This is a test' ) ; translate . setDefaultLang ( 'fr' ) ; expect ( fixture . componentInstance . noKey . nativeElement . innerHTML ) . toEqual ( "C'est un test" ) ; } ) ; it ( 'should unsubscribe from lang change subscription on destroy' , ( ) => { expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; fixture . destroy ( ) ; translate . setTranslation ( 'en' , { "TEST" : "This is a test" } ) ; translate . use ( 'en' ) ; expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; } ) ; it ( 'should unsubscribe from default lang change subscription on destroy' , ( ) => { expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; fixture . destroy ( ) ; translate . setTranslation ( 'en' , { "TEST" : "This is a test" } ) ; translate . setDefaultLang ( 'en' ) ; expect ( fixture . componentInstance . withParamsNoKey . nativeElement . innerHTML ) . toEqual ( 'TEST' ) ; } ) ; } ) ;