Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(directive): trim white spaces to find matching keys #1142

Merged
merged 1 commit into from
Feb 5, 2020
Merged

fix(directive): trim white spaces to find matching keys #1142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions projects/ngx-translate/core/src/lib/translate.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ export class TranslateDirective implements AfterViewChecked, OnDestroy {
let content = this.getContent(node);
let trimmedContent = content.trim();
if (trimmedContent.length) {
// 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 = this.getContent(node);
} else if (node.originalContent && forceUpdate) { // 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 = node.originalContent || content;
}
}
}
Expand Down
36 changes: 24 additions & 12 deletions projects/ngx-translate/core/tests/translate.directive.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import {TranslateModule, TranslateService} from '../src/public_api';
selector: 'hmx-app',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div #noKey translate>TEST</div>
<div #noKey translate>
TEST
</div>
<div #withKey [translate]="'TEST'">Some init content</div>
<div #noContent [translate]="'TEST'"></div>
<div #withOtherElements translate>TEST1 <span>Hey</span> TEST2</div>
Expand Down Expand Up @@ -53,12 +55,12 @@ describe('TranslateDirective', () => {
});

it('should translate a string using the container value', () => {
expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual('TEST');
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');
expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual(' This is a test ');
});

it('should translate a string using the key value', () => {
Expand All @@ -81,6 +83,16 @@ describe('TranslateDirective', () => {
expect(fixture.componentInstance.withOtherElements.nativeElement.innerHTML).toEqual('Awesome <span>Hey</span> it works');
});

it('should translate first child strings without recursion', () => {
// replace the content with the key
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', () => {
// replace the content with the key
expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual('TEST');
Expand Down Expand Up @@ -119,26 +131,26 @@ describe('TranslateDirective', () => {
});

it('should update the DOM when the lang changes', () => {
expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual('TEST');
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.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.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.noKey.nativeElement.innerHTML).toEqual(' TEST ');
expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual('TEST');
expect(fixture.componentInstance.noContent.nativeElement.innerHTML).toEqual('TEST');

Expand All @@ -149,26 +161,26 @@ describe('TranslateDirective', () => {
translate.setTranslation('fr', {"TEST": fr});

translate.use('en');
expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual(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.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');
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');
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");
expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual(" C'est un test ");
});

it('should unsubscribe from lang change subscription on destroy', () => {
Expand Down