From e01969d2718e25a12e86edb05c488c8a33270dd6 Mon Sep 17 00:00:00 2001 From: David Mott Date: Wed, 12 Feb 2020 11:37:06 -0500 Subject: [PATCH] [Issue 1163] Rolling back changes to translate.directive.ts from commit 24b7b2b8cb716adcb25905df9d64e5da43d41838 (but keeping tests), and adding additional tests. 1163 appears to have actually been fixed by 1167/1164, as evidenced by the newly added tests. --- .../core/src/lib/translate.directive.ts | 15 ++--- .../core/tests/translate.directive.spec.ts | 62 +++++++++++++++---- 2 files changed, 53 insertions(+), 24 deletions(-) diff --git a/projects/ngx-translate/core/src/lib/translate.directive.ts b/projects/ngx-translate/core/src/lib/translate.directive.ts index 542b6940..85ab66ca 100644 --- a/projects/ngx-translate/core/src/lib/translate.directive.ts +++ b/projects/ngx-translate/core/src/lib/translate.directive.ts @@ -72,28 +72,21 @@ export class TranslateDirective implements AfterViewChecked, OnDestroy { if (forceUpdate) { node.lastKey = null; } - if(isDefined(node.lookupKey)) { - key = node.lookupKey; - } else if (this.key) { + if (this.key) { key = this.key; } else { let content = this.getContent(node); let trimmedContent = content.trim(); if (trimmedContent.length) { - node.lookupKey = trimmedContent; - // we want to use the content as a key, not the translation value - if (content !== node.currentValue) { - key = trimmedContent; - // the content was changed from the user, we'll use it as a reference if needed - node.originalContent = content || node.originalContent; - } else if (node.originalContent) { // the content seems ok, but the lang has changed + if (node.originalContent && forceUpdate) { // the content seems ok, but the lang has changed + node.lastKey = null; // the current content is the translation, not the key, use the last real content as key key = node.originalContent.trim(); } else if (content !== node.currentValue) { // we want to use the content as a key, not the translation value key = trimmedContent; // the content was changed from the user, we'll use it as a reference if needed - node.originalContent = content || node.originalContent; + node.originalContent = content; } } } diff --git a/projects/ngx-translate/core/tests/translate.directive.spec.ts b/projects/ngx-translate/core/tests/translate.directive.spec.ts index c2216df3..3ca01c13 100644 --- a/projects/ngx-translate/core/tests/translate.directive.spec.ts +++ b/projects/ngx-translate/core/tests/translate.directive.spec.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, ElementRef, Injectable, ViewChild, ViewContainerRef} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injectable, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TranslateModule, TranslateService} from '../src/public_api'; @@ -17,12 +17,14 @@ import {TranslateModule, TranslateService} from '../src/public_api';
TEST
TEST
- TEST + NESTED.TEST.KEY +
+
+ {{ myInterpolatedTranslationKey }}
` }) class App { - viewContainerRef: ViewContainerRef; @ViewChild('noKey', {static: true}) noKey: ElementRef; @ViewChild('contentAsKey', {static: true}) contentAsKey: ElementRef; @ViewChild('withKey', {static: true}) withKey: ElementRef; @@ -33,12 +35,12 @@ class App { @ViewChild('leadingSpaceNoKeyNoParams') leadingSpaceNoKeyNoParams: ElementRef; @ViewChild('trailingSpaceNoKeyNoParams') trailingSpaceNoKeyNoParams: ElementRef; @ViewChild('withSpaceAndLineBreakNoKeyNoParams') withSpaceAndLineBreakNoKeyNoParams: ElementRef; + @ViewChild('interpolatedWithSpaceAndLineBreakNoKeyNoParams') interpolatedWithSpaceAndLineBreakNoKeyNoParams: ElementRef; value = {value: 'ok'}; + myInterpolatedTranslationKey = 'Placeholder Text'; - constructor(viewContainerRef: ViewContainerRef) { - this.viewContainerRef = viewContainerRef; + constructor(public changeDetectorRef: ChangeDetectorRef) { } } -} describe('TranslateDirective', () => { let translate: TranslateService; @@ -51,7 +53,7 @@ describe('TranslateDirective', () => { ], declarations: [App] }); - translate = TestBed.inject(TranslateService); + translate = TestBed.get(TranslateService); fixture = (TestBed).createComponent(App); fixture.detectChanges(); @@ -164,19 +166,53 @@ describe('TranslateDirective', () => { }); 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 '); + expect(fixture.componentInstance.withSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(' NESTED.TEST.KEY '); 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.setTranslation("en", { "NESTED": { "TEST": { "KEY": en } } }); + translate.setTranslation("fr", { "NESTED": { "TEST": { "KEY": fr } } }); translate.use('en'); - expect(fixture.componentInstance.withSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(whiteSpaceFromKey + en + whiteSpaceFromKey); + expect(fixture.componentInstance.withSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(` ${en} `); translate.use('fr'); - expect(fixture.componentInstance.withSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(whiteSpaceFromKey + fr + whiteSpaceFromKey); + expect(fixture.componentInstance.withSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(` ${fr} `); + }); + + it('should update the DOM when the lang changes and the translation key is interpolated', async () => { + expect(fixture.componentInstance.interpolatedWithSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(' Placeholder Text '); + + const en1="This is a test - with trailing spaces in interpolated translation key"; + const en2="Another test"; + const fr1="C'est un test - pardon, je ne parle pas francais :)"; + const fr2="Un autre test"; + const setKey = key => { + fixture.componentInstance.myInterpolatedTranslationKey = key; + fixture.componentInstance.changeDetectorRef.markForCheck(); // Needed when changeDetection is ChangeDetectionStrategy.OnPush + fixture.detectChanges(); + }; + + translate.setTranslation("en", { "NESTED": { "TEST3": en1, "TEST4": en2 } }); + translate.setTranslation("fr", { "NESTED": { "TEST3": fr1, "TEST4": fr2 } }); + translate.use('en'); + + expect(fixture.componentInstance.interpolatedWithSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(' Placeholder Text '); + + setKey('NESTED.TEST3'); + expect(fixture.componentInstance.interpolatedWithSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(` ${en1} `); + + setKey('NESTED.TEST4'); + expect(fixture.componentInstance.interpolatedWithSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(` ${en2} `); + + translate.use('fr'); + expect(fixture.componentInstance.interpolatedWithSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(` ${fr2} `); + + setKey('NESTED.TEST3'); + expect(fixture.componentInstance.interpolatedWithSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(` ${fr1} `); + + setKey(''); // display nothing + expect(fixture.componentInstance.interpolatedWithSpaceAndLineBreakNoKeyNoParams.nativeElement.innerHTML).toEqual(` `); }); it('should update the DOM when the lang changes and the translation key ends with space', () => {