2622 lines
94 KiB
TypeScript
2622 lines
94 KiB
TypeScript
/**
|
||
* @license
|
||
* Copyright Google LLC All Rights Reserved.
|
||
*
|
||
* Use of this source code is governed by an MIT-style license that can be
|
||
* found in the LICENSE file at https://angular.io/license
|
||
*/
|
||
// Make the `$localize()` global function available to the compiled templates, and the direct calls
|
||
// below. This would normally be done inside the application `polyfills.ts` file.
|
||
import '@angular/localize/init';
|
||
|
||
import {CommonModule, DOCUMENT, registerLocaleData} from '@angular/common';
|
||
import localeEs from '@angular/common/locales/es';
|
||
import localeRo from '@angular/common/locales/ro';
|
||
import {computeMsgId} from '@angular/compiler';
|
||
import {Component, ContentChild, ContentChildren, Directive, ElementRef, HostBinding, Input, LOCALE_ID, NO_ERRORS_SCHEMA, Pipe, PipeTransform, QueryList, RendererFactory2, TemplateRef, Type, ViewChild, ViewContainerRef, ɵsetDocument} from '@angular/core';
|
||
import {setDelayProjection} from '@angular/core/src/render3/instructions/projection';
|
||
import {TestBed} from '@angular/core/testing';
|
||
import {clearTranslations, loadTranslations} from '@angular/localize';
|
||
import {By, ɵDomRendererFactory2 as DomRendererFactory2} from '@angular/platform-browser';
|
||
import {expect} from '@angular/platform-browser/testing/src/matchers';
|
||
import {onlyInIvy} from '@angular/private/testing';
|
||
import {BehaviorSubject} from 'rxjs';
|
||
|
||
|
||
onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
|
||
beforeEach(() => {
|
||
TestBed.configureTestingModule({
|
||
declarations: [AppComp, DirectiveWithTplRef, UppercasePipe],
|
||
// In some of the tests we use made-up tag names for better readability, however they'll
|
||
// cause validation errors. Add the `NO_ERRORS_SCHEMA` so that we don't have to declare
|
||
// dummy components for each one of them.
|
||
schemas: [NO_ERRORS_SCHEMA],
|
||
});
|
||
});
|
||
|
||
afterEach(() => {
|
||
setDelayProjection(false);
|
||
clearTranslations();
|
||
});
|
||
|
||
it('should translate text', () => {
|
||
loadTranslations({[computeMsgId('text')]: 'texte'});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n>text</div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>texte</div>`);
|
||
});
|
||
|
||
it('should support interpolations', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}!')]: 'Bonjour {$INTERPOLATION}!'});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n>Hello {{name}}!</div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>Bonjour Angular!</div>`);
|
||
fixture.componentRef.instance.name = `John`;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>Bonjour John!</div>`);
|
||
});
|
||
|
||
it('should support named interpolations', () => {
|
||
loadTranslations({
|
||
[computeMsgId(' Hello {$USER_NAME}! Emails: {$AMOUNT_OF_EMAILS_RECEIVED} ')]:
|
||
' Bonjour {$USER_NAME}! Emails: {$AMOUNT_OF_EMAILS_RECEIVED} '
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
Hello {{ name // i18n(ph="user_name") }}!
|
||
Emails: {{ count // i18n(ph="amount of emails received") }}
|
||
</div>
|
||
`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div> Bonjour Angular! Emails: 0 </div>`);
|
||
fixture.componentRef.instance.name = `John`;
|
||
fixture.componentRef.instance.count = 5;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div> Bonjour John! Emails: 5 </div>`);
|
||
});
|
||
|
||
it('should support interpolations with custom interpolation config', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
const interpolation = ['{%', '%}'] as [string, string];
|
||
TestBed.overrideComponent(AppComp, {set: {interpolation}});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n>Hello {% name %}</div>`);
|
||
|
||
expect(fixture.nativeElement.innerHTML).toBe('<div>Bonjour Angular</div>');
|
||
});
|
||
|
||
it('should support &ngsp; in translatable sections', () => {
|
||
// note: the `` unicode symbol represents the `&ngsp;` in translations
|
||
loadTranslations({[computeMsgId('text ||')]: 'texte ||'});
|
||
const fixture = initWithTemplate(AppCompWithWhitespaces, `<div i18n>text |&ngsp;|</div>`);
|
||
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>texte | |</div>`);
|
||
});
|
||
|
||
it('should support interpolations with complex expressions', () => {
|
||
loadTranslations({
|
||
[computeMsgId(' {$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} ')]:
|
||
' {$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} (fr) '
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
{{ name | uppercase }} -
|
||
{{ obj?.a?.b }} -
|
||
{{ obj?.getA()?.b }}
|
||
</div>
|
||
`);
|
||
// the `obj` field is not yet defined, so 2nd and 3rd interpolations return empty strings
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div> ANGULAR - - (fr) </div>`);
|
||
|
||
fixture.componentRef.instance.obj = {
|
||
a: {b: 'value 1'},
|
||
getA: () => ({b: 'value 2'}),
|
||
};
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div> ANGULAR - value 1 - value 2 (fr) </div>`);
|
||
});
|
||
|
||
it('should support elements', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'Hello {$START_TAG_SPAN}world{$CLOSE_TAG_SPAN} and {$START_TAG_DIV}universe{$CLOSE_TAG_DIV}!',
|
||
'')]:
|
||
'Bonjour {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN} et {$START_TAG_DIV}univers{$CLOSE_TAG_DIV}!'
|
||
});
|
||
const fixture = initWithTemplate(
|
||
AppComp, `<div i18n>Hello <span>world</span> and <div>universe</div>!</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>Bonjour <span>monde</span> et <div>univers</div>!</div>`);
|
||
});
|
||
|
||
it('should support removing elements', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'Hello {$START_BOLD_TEXT}my{$CLOSE_BOLD_TEXT}{$START_TAG_SPAN}world{$CLOSE_TAG_SPAN}',
|
||
'')]: 'Bonjour {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN}'
|
||
});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<div i18n>Hello <b>my</b><span>world</span></div><div>!</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>Bonjour <span>monde</span></div><div>!</div>`);
|
||
});
|
||
|
||
it('should support moving elements', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'Hello {$START_TAG_SPAN}world{$CLOSE_TAG_SPAN} and {$START_TAG_DIV}universe{$CLOSE_TAG_DIV}!',
|
||
'')]:
|
||
'Bonjour {$START_TAG_DIV}univers{$CLOSE_TAG_DIV} et {$START_TAG_SPAN}monde{$CLOSE_TAG_SPAN}!'
|
||
});
|
||
const fixture = initWithTemplate(
|
||
AppComp, `<div i18n>Hello <span>world</span> and <div>universe</div>!</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>Bonjour <div>univers</div> et <span>monde</span>!</div>`);
|
||
});
|
||
|
||
it('should support template directives', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'Content: {$START_TAG_DIV}before{$START_TAG_SPAN}middle{$CLOSE_TAG_SPAN}after{$CLOSE_TAG_DIV}!',
|
||
'')]:
|
||
'Contenu: {$START_TAG_DIV}avant{$START_TAG_SPAN}milieu{$CLOSE_TAG_SPAN}après{$CLOSE_TAG_DIV}!'
|
||
});
|
||
const fixture = initWithTemplate(
|
||
AppComp,
|
||
`<div i18n>Content: <div *ngIf="visible">before<span>middle</span>after</div>!</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>Contenu: <div>avant<span>milieu</span>après</div><!--bindings={
|
||
"ng-reflect-ng-if": "true"
|
||
}-->!</div>`);
|
||
|
||
fixture.componentRef.instance.visible = false;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>Contenu: <!--bindings={
|
||
"ng-reflect-ng-if": "false"
|
||
}-->!</div>`);
|
||
});
|
||
|
||
it('should support multiple i18n blocks', () => {
|
||
loadTranslations({
|
||
[computeMsgId('trad {$INTERPOLATION}')]: 'traduction {$INTERPOLATION}',
|
||
[computeMsgId('start {$INTERPOLATION} middle {$INTERPOLATION_1} end')]:
|
||
'start {$INTERPOLATION_1} middle {$INTERPOLATION} end',
|
||
[computeMsgId(
|
||
'{$START_TAG_C}trad{$CLOSE_TAG_C}{$START_TAG_D}{$CLOSE_TAG_D}{$START_TAG_E}{$CLOSE_TAG_E}',
|
||
'')]: '{$START_TAG_E}{$CLOSE_TAG_E}{$START_TAG_C}traduction{$CLOSE_TAG_C}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div>
|
||
<a i18n>trad {{name}}</a>
|
||
hello
|
||
<b i18n i18n-title title="start {{count}} middle {{name}} end">
|
||
<c>trad</c>
|
||
<d></d>
|
||
<e></e>
|
||
</b>
|
||
</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><a>traduction Angular</a> hello <b title="start Angular middle 0 end"><e></e><c>traduction</c></b></div>`);
|
||
});
|
||
|
||
it('should support multiple sibling i18n blocks', () => {
|
||
loadTranslations({
|
||
[computeMsgId('Section 1')]: 'Section un',
|
||
[computeMsgId('Section 2')]: 'Section deux',
|
||
[computeMsgId('Section 3')]: 'Section trois',
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div>
|
||
<div i18n>Section 1</div>
|
||
<div i18n>Section 2</div>
|
||
<div i18n>Section 3</div>
|
||
</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div><div>Section un</div><div>Section deux</div><div>Section trois</div></div>`);
|
||
});
|
||
|
||
it('should support multiple sibling i18n blocks inside of a template directive', () => {
|
||
loadTranslations({
|
||
[computeMsgId('Section 1')]: 'Section un',
|
||
[computeMsgId('Section 2')]: 'Section deux',
|
||
[computeMsgId('Section 3')]: 'Section trois',
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<ul *ngFor="let item of [1,2,3]">
|
||
<li i18n>Section 1</li>
|
||
<li i18n>Section 2</li>
|
||
<li i18n>Section 3</li>
|
||
</ul>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><ul><li>Section un</li><li>Section deux</li><li>Section trois</li></ul><!--bindings={
|
||
"ng-reflect-ng-for-of": "1,2,3"
|
||
}-->`);
|
||
});
|
||
|
||
it('should properly escape quotes in content', () => {
|
||
loadTranslations({
|
||
[computeMsgId('\'Single quotes\' and "Double quotes"')]:
|
||
'\'Guillemets simples\' et "Guillemets doubles"'
|
||
});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<div i18n>'Single quotes' and "Double quotes"</div>`);
|
||
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual('<div>\'Guillemets simples\' et "Guillemets doubles"</div>');
|
||
});
|
||
|
||
it('should correctly bind to context in nested template', () => {
|
||
loadTranslations({[computeMsgId('Item {$INTERPOLATION}')]: 'Article {$INTERPOLATION}'});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div *ngFor='let id of items'>
|
||
<div i18n>Item {{ id }}</div>
|
||
</div>
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
for (let i = 0; i < element.children.length; i++) {
|
||
const child = element.children[i];
|
||
expect(child).toHaveText(`Article ${i + 1}`);
|
||
}
|
||
});
|
||
|
||
it('should ignore i18n attributes on self-closing tags', () => {
|
||
const fixture = initWithTemplate(AppComp, '<img src="logo.png" i18n>');
|
||
expect(fixture.nativeElement.innerHTML).toBe(`<img src="logo.png">`);
|
||
});
|
||
|
||
it('should handle i18n attribute with directives', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
const fixture = initWithTemplate(AppComp, `<div *ngIf="visible" i18n>Hello {{ name }}</div>`);
|
||
expect(fixture.nativeElement.firstChild).toHaveText('Bonjour Angular');
|
||
});
|
||
|
||
it('should work correctly with event listeners', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
|
||
@Component(
|
||
{selector: 'app-comp', template: `<div i18n (click)="onClick()">Hello {{ name }}</div>`})
|
||
class ListenerComp {
|
||
name = `Angular`;
|
||
clicks = 0;
|
||
|
||
onClick() {
|
||
this.clicks++;
|
||
}
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [ListenerComp]});
|
||
const fixture = TestBed.createComponent(ListenerComp);
|
||
fixture.detectChanges();
|
||
|
||
const element = fixture.nativeElement.firstChild;
|
||
const instance = fixture.componentInstance;
|
||
|
||
expect(element).toHaveText('Bonjour Angular');
|
||
expect(instance.clicks).toBe(0);
|
||
|
||
element.click();
|
||
expect(instance.clicks).toBe(1);
|
||
});
|
||
|
||
it('should support local refs inside i18n block', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_NG_CONTAINER} One {$CLOSE_TAG_NG_CONTAINER}' +
|
||
'{$START_TAG_DIV} Two {$CLOSE_TAG_DIV}' +
|
||
'{$START_TAG_SPAN} Three {$CLOSE_TAG_SPAN}' +
|
||
'{$START_TAG_NG_TEMPLATE} Four {$CLOSE_TAG_NG_TEMPLATE}' +
|
||
'{$START_TAG_NG_CONTAINER_1}{$CLOSE_TAG_NG_CONTAINER}')]:
|
||
|
||
'{$START_TAG_NG_CONTAINER} Une {$CLOSE_TAG_NG_CONTAINER}' +
|
||
'{$START_TAG_DIV} Deux {$CLOSE_TAG_DIV}' +
|
||
'{$START_TAG_SPAN} Trois {$CLOSE_TAG_SPAN}' +
|
||
'{$START_TAG_NG_TEMPLATE} Quatre {$CLOSE_TAG_NG_TEMPLATE}' +
|
||
'{$START_TAG_NG_CONTAINER_1}{$CLOSE_TAG_NG_CONTAINER}'
|
||
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
<ng-container #localRefA> One </ng-container>
|
||
<div #localRefB> Two </div>
|
||
<span #localRefC> Three </span>
|
||
|
||
<ng-template #localRefD> Four </ng-template>
|
||
<ng-container *ngTemplateOutlet="localRefD"></ng-container>
|
||
</div>
|
||
`);
|
||
expect(fixture.nativeElement.textContent).toBe(' Une Deux Trois Quatre ');
|
||
});
|
||
|
||
it('should handle local refs correctly in case an element is removed in translation', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_NG_CONTAINER} One {$CLOSE_TAG_NG_CONTAINER}' +
|
||
'{$START_TAG_DIV} Two {$CLOSE_TAG_DIV}' +
|
||
'{$START_TAG_SPAN} Three {$CLOSE_TAG_SPAN}')]: '{$START_TAG_DIV} Deux {$CLOSE_TAG_DIV}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
<ng-container #localRefA> One </ng-container>
|
||
<div #localRefB> Two </div>
|
||
<span #localRefC> Three </span>
|
||
</div>
|
||
`);
|
||
expect(fixture.nativeElement.textContent).toBe(' Deux ');
|
||
});
|
||
|
||
describe('ng-container and ng-template support', () => {
|
||
it('should support ng-container', () => {
|
||
loadTranslations({[computeMsgId('text')]: 'texte'});
|
||
const fixture = initWithTemplate(AppComp, `<ng-container i18n>text</ng-container>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`texte<!--ng-container-->`);
|
||
});
|
||
|
||
it('should handle single translation message within ng-template', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<ng-template i18n tplRef>Hello {{ name }}</ng-template>`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element).toHaveText('Bonjour Angular');
|
||
});
|
||
|
||
// Note: applying structural directives to <ng-template> is typically user error, but it
|
||
// is technically allowed, so we need to support it.
|
||
it('should handle structural directives on ng-template', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
const fixture = initWithTemplate(
|
||
AppComp, `<ng-template *ngIf="name" i18n tplRef>Hello {{ name }}</ng-template>`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element).toHaveText('Bonjour Angular');
|
||
});
|
||
|
||
it('should be able to act as child elements inside i18n block (plain text content)', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_NG_TEMPLATE} Hello {$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER} Bye {$CLOSE_TAG_NG_CONTAINER}',
|
||
'')]:
|
||
'{$START_TAG_NG_TEMPLATE} Bonjour {$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER} Au revoir {$CLOSE_TAG_NG_CONTAINER}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
<ng-template tplRef>
|
||
Hello
|
||
</ng-template>
|
||
<ng-container>
|
||
Bye
|
||
</ng-container>
|
||
</div>
|
||
`);
|
||
|
||
const element = fixture.nativeElement.firstChild;
|
||
expect(element.textContent.replace(/\s+/g, ' ').trim()).toBe('Bonjour Au revoir');
|
||
});
|
||
|
||
it('should be able to act as child elements inside i18n block (text + tags)', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_NG_TEMPLATE}{$START_TAG_SPAN}Hello{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}{$START_TAG_SPAN}Hello{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_CONTAINER}',
|
||
'')]:
|
||
'{$START_TAG_NG_TEMPLATE}{$START_TAG_SPAN}Bonjour{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}{$START_TAG_SPAN}Bonjour{$CLOSE_TAG_SPAN}{$CLOSE_TAG_NG_CONTAINER}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
<ng-template tplRef>
|
||
<span>Hello</span>
|
||
</ng-template>
|
||
<ng-container>
|
||
<span>Hello</span>
|
||
</ng-container>
|
||
</div>
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
const spans = element.getElementsByTagName('span');
|
||
for (let i = 0; i < spans.length; i++) {
|
||
expect(spans[i]).toHaveText('Bonjour');
|
||
}
|
||
});
|
||
|
||
it('should be able to act as child elements inside i18n block (text + pipes)', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_NG_TEMPLATE}Hello {$INTERPOLATION}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}Bye {$INTERPOLATION}{$CLOSE_TAG_NG_CONTAINER}',
|
||
'')]:
|
||
'{$START_TAG_NG_TEMPLATE}Hej {$INTERPOLATION}{$CLOSE_TAG_NG_TEMPLATE}{$START_TAG_NG_CONTAINER}Vi ses {$INTERPOLATION}{$CLOSE_TAG_NG_CONTAINER}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
<ng-template tplRef>Hello {{name | uppercase}}</ng-template>
|
||
<ng-container>Bye {{name | uppercase}}</ng-container>
|
||
</div>
|
||
`);
|
||
|
||
const element = fixture.nativeElement.firstChild;
|
||
expect(element.textContent.replace(/\s+/g, ' ').trim()).toBe('Hej ANGULARVi ses ANGULAR');
|
||
});
|
||
|
||
it('should be able to handle deep nested levels with templates', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_SPAN} Hello - 1 {$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1} Hello - 2 {$START_TAG_SPAN_1} Hello - 3 {$START_TAG_SPAN_1} Hello - 4 {$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN} Hello - 5 {$CLOSE_TAG_SPAN}',
|
||
'')]:
|
||
'{$START_TAG_SPAN} Bonjour - 1 {$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1} Bonjour - 2 {$START_TAG_SPAN_1} Bonjour - 3 {$START_TAG_SPAN_1} Bonjour - 4 {$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN} Bonjour - 5 {$CLOSE_TAG_SPAN}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
<span>
|
||
Hello - 1
|
||
</span>
|
||
<span *ngIf="visible">
|
||
Hello - 2
|
||
<span *ngIf="visible">
|
||
Hello - 3
|
||
<span *ngIf="visible">
|
||
Hello - 4
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span>
|
||
Hello - 5
|
||
</span>
|
||
</div>
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
const spans = element.getElementsByTagName('span');
|
||
for (let i = 0; i < spans.length; i++) {
|
||
expect(spans[i].innerHTML).toContain(`Bonjour - ${i + 1}`);
|
||
}
|
||
});
|
||
|
||
it('should handle self-closing tags as content', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$START_TAG_SPAN}My logo{$TAG_IMG}{$CLOSE_TAG_SPAN}')]:
|
||
'{$START_TAG_SPAN}Mon logo{$TAG_IMG}{$CLOSE_TAG_SPAN}'
|
||
});
|
||
const content = `My logo<img src="logo.png" title="Logo">`;
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<ng-container i18n>
|
||
<span>${content}</span>
|
||
</ng-container>
|
||
<ng-template i18n tplRef>
|
||
<span>${content}</span>
|
||
</ng-template>
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
const spans = element.getElementsByTagName('span');
|
||
for (let i = 0; i < spans.length; i++) {
|
||
const child = spans[i];
|
||
expect(child).toHaveText('Mon logo');
|
||
}
|
||
});
|
||
|
||
it('should correctly find context for an element inside i18n section in <ng-template>', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$START_LINK}Not logged in{$CLOSE_LINK}')]:
|
||
'{$START_LINK}Not logged in{$CLOSE_LINK}'
|
||
});
|
||
@Directive({selector: '[myDir]'})
|
||
class Dir {
|
||
condition = true;
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-cmp',
|
||
template: `
|
||
<div *ngIf="isLogged; else notLoggedIn">
|
||
<span>Logged in</span>
|
||
</div>
|
||
<ng-template #notLoggedIn i18n>
|
||
<a myDir>Not logged in</a>
|
||
</ng-template>
|
||
`,
|
||
})
|
||
class Cmp {
|
||
isLogged = false;
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
declarations: [Cmp, Dir],
|
||
});
|
||
const fixture = TestBed.createComponent(Cmp);
|
||
fixture.detectChanges();
|
||
|
||
const a = fixture.debugElement.query(By.css('a'));
|
||
const dir = a.injector.get(Dir);
|
||
expect(dir.condition).toEqual(true);
|
||
});
|
||
});
|
||
|
||
describe('should work correctly with namespaces', () => {
|
||
beforeEach(() => {
|
||
function _document(): any {
|
||
// Tell Ivy about the global document
|
||
ɵsetDocument(document);
|
||
return document;
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
providers: [
|
||
{provide: DOCUMENT, useFactory: _document, deps: []},
|
||
// TODO(FW-811): switch back to default server renderer (i.e. remove the line below)
|
||
// once it starts to support Ivy namespace format (URIs) correctly. For now, use
|
||
// `DomRenderer` that supports Ivy namespace format.
|
||
{provide: RendererFactory2, useClass: DomRendererFactory2}
|
||
],
|
||
});
|
||
});
|
||
|
||
it('should handle namespaces inside i18n blocks', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG__XHTML_DIV} Hello ' +
|
||
'{$START_TAG__XHTML_SPAN}world{$CLOSE_TAG__XHTML_SPAN}{$CLOSE_TAG__XHTML_DIV}')]:
|
||
'{$START_TAG__XHTML_DIV} Bonjour ' +
|
||
'{$START_TAG__XHTML_SPAN}monde{$CLOSE_TAG__XHTML_SPAN}{$CLOSE_TAG__XHTML_DIV}'
|
||
});
|
||
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<svg xmlns="http://www.w3.org/2000/svg">
|
||
<foreignObject i18n>
|
||
<xhtml:div xmlns="http://www.w3.org/1999/xhtml">
|
||
Hello <span>world</span>
|
||
</xhtml:div>
|
||
</foreignObject>
|
||
</svg>
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element.textContent.trim()).toBe('Bonjour monde');
|
||
expect(element.querySelector('svg').namespaceURI).toBe('http://www.w3.org/2000/svg');
|
||
expect(element.querySelector('div').namespaceURI).toBe('http://www.w3.org/1999/xhtml');
|
||
expect(element.querySelector('span').namespaceURI).toBe('http://www.w3.org/1999/xhtml');
|
||
});
|
||
|
||
it('should handle namespaces on i18n block containers', () => {
|
||
loadTranslations({
|
||
[computeMsgId(' Hello {$START_TAG__XHTML_SPAN}world{$CLOSE_TAG__XHTML_SPAN}')]:
|
||
' Bonjour {$START_TAG__XHTML_SPAN}monde{$CLOSE_TAG__XHTML_SPAN}'
|
||
});
|
||
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<svg xmlns="http://www.w3.org/2000/svg">
|
||
<foreignObject>
|
||
<xhtml:div xmlns="http://www.w3.org/1999/xhtml" i18n>
|
||
Hello <span>world</span>
|
||
</xhtml:div>
|
||
</foreignObject>
|
||
</svg>
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element.textContent.trim()).toBe('Bonjour monde');
|
||
expect(element.querySelector('svg').namespaceURI).toBe('http://www.w3.org/2000/svg');
|
||
expect(element.querySelector('div').namespaceURI).toBe('http://www.w3.org/1999/xhtml');
|
||
expect(element.querySelector('span').namespaceURI).toBe('http://www.w3.org/1999/xhtml');
|
||
});
|
||
});
|
||
|
||
describe('should support ICU expressions', () => {
|
||
it('with no root node', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}')]:
|
||
'{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}'
|
||
});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `{count, select, 10 {ten} 20 {twenty} other {other}}`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element).toHaveText('autre');
|
||
});
|
||
|
||
it('with no root node and text surrounding ICU', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {Ten} 20 {Twenty} other {Other}}')]:
|
||
'{VAR_SELECT, select, 10 {Dix} 20 {Vingt} other {Autre}}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
ICU start -->
|
||
{count, select, 10 {Ten} 20 {Twenty} other {Other}}
|
||
<-- ICU end
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element.textContent).toContain('ICU start --> Autre <-- ICU end');
|
||
});
|
||
|
||
it('with no root node and text and DOM nodes surrounding ICU', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {Ten} 20 {Twenty} other {Other}}')]:
|
||
'{VAR_SELECT, select, 10 {Dix} 20 {Vingt} other {Autre}}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<span>ICU start --> </span>
|
||
{count, select, 10 {Ten} 20 {Twenty} other {Other}}
|
||
<-- ICU end
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element.textContent).toContain('ICU start --> Autre <-- ICU end');
|
||
});
|
||
|
||
it('with no i18n tag', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}')]:
|
||
'{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}'
|
||
});
|
||
const fixture = initWithTemplate(
|
||
AppComp, `<div>{count, select, 10 {ten} 20 {twenty} other {other}}</div>`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element).toHaveText('autre');
|
||
});
|
||
|
||
it('multiple', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
|
||
'')]:
|
||
'{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
|
||
[computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
|
||
'{VAR_SELECT, select, other {({INTERPOLATION})}}',
|
||
[computeMsgId('{$ICU} - {$ICU_1}')]: '{$ICU} - {$ICU_1}',
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n>{count, plural,
|
||
=0 {no <b>emails</b>!}
|
||
=1 {one <i>email</i>}
|
||
other {{{count}} <span title="{{name}}">emails</span>}
|
||
} - {name, select,
|
||
other {({{name}})}
|
||
}</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>aucun <b>email</b>!<!--ICU 7--> - (Angular)<!--ICU 13--></div>`);
|
||
|
||
fixture.componentRef.instance.count = 4;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div>4 <span title="Angular">emails</span><!--ICU 7--> - (Angular)<!--ICU 13--></div>`);
|
||
|
||
fixture.componentRef.instance.count = 0;
|
||
fixture.componentRef.instance.name = 'John';
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>aucun <b>email</b>!<!--ICU 7--> - (John)<!--ICU 13--></div>`);
|
||
});
|
||
|
||
it('with custom interpolation config', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {ten} other {{INTERPOLATION}}}')]:
|
||
'{VAR_SELECT, select, 10 {dix} other {{INTERPOLATION}}}'
|
||
});
|
||
const interpolation = ['{%', '%}'] as [string, string];
|
||
TestBed.overrideComponent(AppComp, {set: {interpolation}});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<div i18n>{count, select, 10 {ten} other {{% name %}}}</div>`);
|
||
|
||
expect(fixture.nativeElement).toHaveText(`Angular`);
|
||
});
|
||
|
||
it('inside HTML elements', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
|
||
'')]:
|
||
'{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} {START_TAG_SPAN}emails{CLOSE_TAG_SPAN}}}',
|
||
[computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
|
||
'{VAR_SELECT, select, other {({INTERPOLATION})}}',
|
||
[computeMsgId(
|
||
'{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - ' +
|
||
'{$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}')]:
|
||
'{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n><span>{count, plural,
|
||
=0 {no <b>emails</b>!}
|
||
=1 {one <i>email</i>}
|
||
other {{{count}} <span title="{{name}}">emails</span>}
|
||
}</span> - <span>{name, select,
|
||
other {({{name}})}
|
||
}</span></div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><span>aucun <b>email</b>!<!--ICU 9--></span> - <span>(Angular)<!--ICU 15--></span></div>`);
|
||
|
||
fixture.componentRef.instance.count = 4;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><span>4 <span title="Angular">emails</span><!--ICU 9--></span> - <span>(Angular)<!--ICU 15--></span></div>`);
|
||
|
||
fixture.componentRef.instance.count = 0;
|
||
fixture.componentRef.instance.name = 'John';
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><span>aucun <b>email</b>!<!--ICU 9--></span> - <span>(John)<!--ICU 15--></span></div>`);
|
||
});
|
||
|
||
it('inside template directives', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$START_TAG_SPAN}{$ICU}{$CLOSE_TAG_SPAN}')]:
|
||
'{$START_TAG_SPAN}{$ICU}{$CLOSE_TAG_SPAN}',
|
||
[computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
|
||
'{VAR_SELECT, select, other {({INTERPOLATION})}}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n><span *ngIf="visible">{name, select,
|
||
other {({{name}})}
|
||
}</span></div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div><span>(Angular)<!--ICU 4--></span><!--bindings={
|
||
"ng-reflect-ng-if": "true"
|
||
}--></div>`);
|
||
|
||
fixture.componentRef.instance.visible = false;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div><!--bindings={
|
||
"ng-reflect-ng-if": "false"
|
||
}--></div>`);
|
||
});
|
||
|
||
it('inside ng-container', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, other {({INTERPOLATION})}}')]:
|
||
'{VAR_SELECT, select, other {({INTERPOLATION})}}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `<ng-container i18n>{name, select,
|
||
other {({{name}})}
|
||
}</ng-container>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`(Angular)<!--ICU 4--><!--ng-container-->`);
|
||
});
|
||
|
||
it('inside <ng-template>', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}')]:
|
||
'{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}'
|
||
});
|
||
const fixture = initWithTemplate(
|
||
AppComp,
|
||
`
|
||
<ng-template i18n tplRef>` +
|
||
`{count, select, 10 {ten} 20 {twenty} other {other}}` +
|
||
`</ng-template>
|
||
`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element).toHaveText('autre');
|
||
});
|
||
|
||
it('nested', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{VAR_PLURAL, plural, =0 {zero} other {{INTERPOLATION} {VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}',
|
||
'')]:
|
||
'{VAR_PLURAL, plural, =0 {zero} other {{INTERPOLATION} {VAR_SELECT, select, cat {chats} dog {chiens} other {animaux}}!}}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n>{count, plural,
|
||
=0 {zero}
|
||
other {{{count}} {name, select,
|
||
cat {cats}
|
||
dog {dogs}
|
||
other {animals}
|
||
}!}
|
||
}</div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>zero<!--ICU 5--></div>`);
|
||
|
||
fixture.componentRef.instance.count = 4;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>4 animaux<!--nested ICU 0-->!<!--ICU 5--></div>`);
|
||
});
|
||
|
||
it('nested with interpolations in "other" blocks', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!} other {other - {INTERPOLATION}}}',
|
||
'')]:
|
||
'{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, cat {chats} dog {chiens} other {animaux}}!} other {autre - {INTERPOLATION}}}'
|
||
});
|
||
|
||
const fixture = initWithTemplate(AppComp, `<div i18n>{count, plural,
|
||
=0 {zero}
|
||
=2 {{{count}} {name, select,
|
||
cat {cats}
|
||
dog {dogs}
|
||
other {animals}
|
||
}!}
|
||
other {other - {{count}}}
|
||
}</div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>zero<!--ICU 5--></div>`);
|
||
|
||
fixture.componentRef.instance.count = 2;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<div>2 animaux<!--nested ICU 0-->!<!--ICU 5--></div>`);
|
||
|
||
fixture.componentRef.instance.count = 4;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>autre - 4<!--ICU 5--></div>`);
|
||
});
|
||
|
||
it('should return the correct plural form for ICU expressions when using "ro" locale', () => {
|
||
// The "ro" locale has a complex plural function that can handle muliple options
|
||
// (and string inputs)
|
||
//
|
||
// function plural(n: number): number {
|
||
// let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
|
||
// if (i === 1 && v === 0) return 1;
|
||
// if (!(v === 0) || n === 0 ||
|
||
// !(n === 1) && n % 100 === Math.floor(n % 100) && n % 100 >= 1 && n % 100 <= 19)
|
||
// return 3;
|
||
// return 5;
|
||
// }
|
||
//
|
||
// Compare this to the "es" locale in the next test
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{VAR_PLURAL, plural, =0 {no email} =one {one email} =few {a few emails} =other {lots of emails}}')]:
|
||
'{VAR_PLURAL, plural, =0 {no email} =one {one email} =few {a few emails} =other {lots of emails}}'
|
||
});
|
||
registerLocaleData(localeRo);
|
||
TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'ro'}]});
|
||
// We could also use `TestBed.overrideProvider(LOCALE_ID, {useValue: 'ro'});`
|
||
const fixture = initWithTemplate(AppComp, `
|
||
{count, plural,
|
||
=0 {no email}
|
||
=one {one email}
|
||
=few {a few emails}
|
||
=other {lots of emails}
|
||
}`);
|
||
|
||
expect(fixture.nativeElement.innerHTML).toEqual('no email<!--ICU 2-->');
|
||
|
||
// Change detection cycle, no model changes
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('no email<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 3;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('a few emails<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 1;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('one email<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 10;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('a few emails<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 20;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('lots of emails<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 0;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('no email<!--ICU 2-->');
|
||
});
|
||
|
||
it(`should return the correct plural form for ICU expressions when using "es" locale`, () => {
|
||
// The "es" locale has a simple plural function that can only handle a few options
|
||
// (and not string inputs)
|
||
//
|
||
// function plural(n: number): number {
|
||
// if (n === 1) return 1;
|
||
// return 5;
|
||
// }
|
||
//
|
||
// Compare this to the "ro" locale in the previous test
|
||
const icuMessage = '{VAR_PLURAL, plural, =0 {no email} =one ' +
|
||
'{one email} =few {a few emails} =other {lots of emails}}';
|
||
loadTranslations({[computeMsgId(icuMessage)]: icuMessage});
|
||
registerLocaleData(localeEs);
|
||
TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'es'}]});
|
||
// We could also use `TestBed.overrideProvider(LOCALE_ID, {useValue: 'es'});`
|
||
const fixture = initWithTemplate(AppComp, `
|
||
{count, plural,
|
||
=0 {no email}
|
||
=one {one email}
|
||
=few {a few emails}
|
||
=other {lots of emails}
|
||
}`);
|
||
|
||
expect(fixture.nativeElement.innerHTML).toEqual('no email<!--ICU 2-->');
|
||
|
||
// Change detection cycle, no model changes
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('no email<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 3;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('lots of emails<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 1;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('one email<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 10;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('lots of emails<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 20;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('lots of emails<!--ICU 2-->');
|
||
|
||
fixture.componentInstance.count = 0;
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual('no email<!--ICU 2-->');
|
||
});
|
||
|
||
it('projection', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}')]:
|
||
'{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}'
|
||
});
|
||
@Component({selector: 'child', template: '<div><ng-content></ng-content></div>'})
|
||
class Child {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'parent',
|
||
template: `
|
||
<child i18n>{
|
||
value // i18n(ph = "blah"),
|
||
plural,
|
||
=1 {one}
|
||
other {at least {{value}} .}
|
||
}</child>`
|
||
})
|
||
class Parent {
|
||
value = 3;
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.nativeElement.innerHTML).toContain('at least');
|
||
});
|
||
|
||
it('with empty values', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {} 20 {twenty} other {other}}')]:
|
||
'{VAR_SELECT, select, 10 {} 20 {twenty} other {other}}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `{count, select, 10 {} 20 {twenty} other {other}}`);
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element).toHaveText('other');
|
||
});
|
||
|
||
it('inside a container when creating a view via vcr.createEmbeddedView', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_PLURAL, plural, =1 {ONE} other {OTHER}}')]:
|
||
'{VAR_PLURAL, plural, =1 {ONE} other {OTHER}}'
|
||
});
|
||
@Directive({
|
||
selector: '[someDir]',
|
||
})
|
||
class Dir {
|
||
constructor(
|
||
private readonly viewContainerRef: ViewContainerRef,
|
||
private readonly templateRef: TemplateRef<any>) {}
|
||
|
||
ngOnInit() {
|
||
this.viewContainerRef.createEmbeddedView(this.templateRef);
|
||
}
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-cmp',
|
||
template: `
|
||
<div *someDir>
|
||
<ng-content></ng-content>
|
||
</div>
|
||
`,
|
||
})
|
||
class Cmp {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-app',
|
||
template: `
|
||
<my-cmp i18n="test" *ngIf="condition">{
|
||
count,
|
||
plural,
|
||
=1 {ONE}
|
||
other {OTHER}
|
||
}</my-cmp>
|
||
`,
|
||
})
|
||
class App {
|
||
count = 1;
|
||
condition = true;
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
declarations: [App, Cmp, Dir],
|
||
});
|
||
const fixture = TestBed.createComponent(App);
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.innerHTML)
|
||
.toContain('<my-cmp><div>ONE<!--ICU 13--></div><!--container--></my-cmp>');
|
||
|
||
fixture.componentRef.instance.count = 2;
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.innerHTML)
|
||
.toContain('<my-cmp><div>OTHER<!--ICU 13--></div><!--container--></my-cmp>');
|
||
|
||
// destroy component
|
||
fixture.componentInstance.condition = false;
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.textContent).toBe('');
|
||
|
||
// render it again and also change ICU case
|
||
fixture.componentInstance.condition = true;
|
||
fixture.componentInstance.count = 1;
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.innerHTML)
|
||
.toContain('<my-cmp><div>ONE<!--ICU 13--></div><!--container--></my-cmp>');
|
||
});
|
||
|
||
it('with nested ICU expression and inside a container when creating a view via vcr.createEmbeddedView',
|
||
() => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{VAR_PLURAL, plural, =1 {ONE} other {{INTERPOLATION} ' +
|
||
'{VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}')]:
|
||
'{VAR_PLURAL, plural, =1 {ONE} other {{INTERPOLATION} ' +
|
||
'{VAR_SELECT, select, cat {cats} dog {dogs} other {animals}}!}}'
|
||
});
|
||
|
||
let dir: Dir|null = null;
|
||
@Directive({
|
||
selector: '[someDir]',
|
||
})
|
||
class Dir {
|
||
constructor(
|
||
private readonly viewContainerRef: ViewContainerRef,
|
||
private readonly templateRef: TemplateRef<any>) {
|
||
dir = this;
|
||
}
|
||
|
||
attachEmbeddedView() {
|
||
this.viewContainerRef.createEmbeddedView(this.templateRef);
|
||
}
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-cmp',
|
||
template: `
|
||
<div *someDir>
|
||
<ng-content></ng-content>
|
||
</div>
|
||
`,
|
||
})
|
||
class Cmp {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-app',
|
||
template: `
|
||
<my-cmp i18n="test">{
|
||
count,
|
||
plural,
|
||
=1 {ONE}
|
||
other {{{count}} {name, select,
|
||
cat {cats}
|
||
dog {dogs}
|
||
other {animals}
|
||
}!}
|
||
}</my-cmp>
|
||
`,
|
||
})
|
||
class App {
|
||
count = 1;
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
declarations: [App, Cmp, Dir],
|
||
});
|
||
const fixture = TestBed.createComponent(App);
|
||
fixture.componentRef.instance.count = 2;
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.innerHTML)
|
||
.toBe('<my-cmp><!--container--></my-cmp>');
|
||
|
||
dir!.attachEmbeddedView();
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.innerHTML)
|
||
.toBe(
|
||
'<my-cmp><div>2 animals<!--nested ICU 0-->!<!--ICU 15--></div><!--container--></my-cmp>');
|
||
|
||
fixture.componentRef.instance.count = 1;
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.innerHTML)
|
||
.toBe('<my-cmp><div>ONE<!--ICU 15--></div><!--container--></my-cmp>');
|
||
});
|
||
|
||
it('with nested containers', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, A {A } B {B } other {C }}')]:
|
||
'{VAR_SELECT, select, A {A } B {B } other {C }}',
|
||
[computeMsgId('{VAR_SELECT, select, A1 {A1 } B1 {B1 } other {C1 }}')]:
|
||
'{VAR_SELECT, select, A1 {A1 } B1 {B1 } other {C1 }}',
|
||
[computeMsgId(' {$ICU} ')]: ' {$ICU} ',
|
||
});
|
||
@Component({
|
||
selector: 'comp',
|
||
template: `
|
||
<ng-container [ngSwitch]="visible">
|
||
<ng-container *ngSwitchCase="isVisible()" i18n>
|
||
{type, select, A { A } B { B } other { C }}
|
||
</ng-container>
|
||
<ng-container *ngSwitchCase="!isVisible()" i18n>
|
||
{type, select, A1 { A1 } B1 { B1 } other { C1 }}
|
||
</ng-container>
|
||
</ng-container>
|
||
`,
|
||
})
|
||
class Comp {
|
||
type = 'A';
|
||
visible = true;
|
||
isVisible() {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [Comp]});
|
||
|
||
const fixture = TestBed.createComponent(Comp);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.debugElement.nativeElement.innerHTML).toContain('A');
|
||
|
||
fixture.componentInstance.visible = false;
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.debugElement.nativeElement.innerHTML).not.toContain('A');
|
||
expect(fixture.debugElement.nativeElement.innerHTML).toContain('C1');
|
||
});
|
||
|
||
it('with named interpolations', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{VAR_SELECT, select, A {A - {PH_A}} ' +
|
||
'B {B - {PH_B}} other {other - {PH_WITH_SPACES}}}')]:
|
||
'{VAR_SELECT, select, A {A (translated) - {PH_A}} ' +
|
||
'B {B (translated) - {PH_B}} other {other (translated) - {PH_WITH_SPACES}}}',
|
||
});
|
||
@Component({
|
||
selector: 'comp',
|
||
template: `
|
||
<ng-container i18n>{
|
||
type,
|
||
select,
|
||
A {A - {{ typeA // i18n(ph="PH_A") }}}
|
||
B {B - {{ typeB // i18n(ph="PH_B") }}}
|
||
other {other - {{ typeC // i18n(ph="PH WITH SPACES") }}}
|
||
}</ng-container>
|
||
`,
|
||
})
|
||
class Comp {
|
||
type = 'A';
|
||
typeA = 'Type A';
|
||
typeB = 'Type B';
|
||
typeC = 'Type C';
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [Comp]});
|
||
|
||
const fixture = TestBed.createComponent(Comp);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.debugElement.nativeElement.innerHTML).toContain('A (translated) - Type A');
|
||
|
||
fixture.componentInstance.type = 'C'; // trigger "other" case
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.debugElement.nativeElement.innerHTML).not.toContain('A (translated) - Type A');
|
||
expect(fixture.debugElement.nativeElement.innerHTML).toContain('other (translated) - Type C');
|
||
});
|
||
|
||
it('should work inside an ngTemplateOutlet inside an ngFor', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, A {A } B {B } other {other - {PH_WITH_SPACES}}}')]:
|
||
'{VAR_SELECT, select, A {A } B {B } other {other - {PH_WITH_SPACES}}}',
|
||
[computeMsgId('{$ICU} ')]: '{$ICU} '
|
||
});
|
||
|
||
@Component({
|
||
selector: 'app',
|
||
template: `
|
||
<ng-template #myTemp i18n let-type>{
|
||
type,
|
||
select,
|
||
A {A }
|
||
B {B }
|
||
other {other - {{ typeC // i18n(ph="PH WITH SPACES") }}}
|
||
}
|
||
</ng-template>
|
||
|
||
<div *ngFor="let type of types">
|
||
<ng-container *ngTemplateOutlet="myTemp; context: {$implicit: type}">
|
||
</ng-container>
|
||
</div>
|
||
`
|
||
})
|
||
class AppComponent {
|
||
types = ['A', 'B', 'C'];
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [AppComponent]});
|
||
|
||
const fixture = TestBed.createComponent(AppComponent);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.debugElement.nativeElement.innerHTML).toContain('A');
|
||
expect(fixture.debugElement.nativeElement.innerHTML).toContain('B');
|
||
});
|
||
|
||
it('should use metadata from container element if a message is a single ICU', () => {
|
||
loadTranslations({idA: '{VAR_SELECT, select, 1 {un} other {plus d\'un}}'});
|
||
|
||
@Component({
|
||
selector: 'app',
|
||
template: `
|
||
<div i18n="@@idA">{count, select, 1 {one} other {more than one}}</div>
|
||
`
|
||
})
|
||
class AppComponent {
|
||
count = 2;
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [AppComponent]});
|
||
|
||
const fixture = TestBed.createComponent(AppComponent);
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.nativeElement.innerHTML).toContain('plus d\'un');
|
||
});
|
||
|
||
it('should support ICUs without "other" cases', () => {
|
||
loadTranslations({
|
||
idA: '{VAR_SELECT, select, 1 {un (select)} 2 {deux (select)}}',
|
||
idB: '{VAR_PLURAL, plural, =1 {un (plural)} =2 {deux (plural)}}',
|
||
});
|
||
|
||
@Component({
|
||
selector: 'app',
|
||
template: `
|
||
<div i18n="@@idA">{count, select, 1 {one (select)} 2 {two (select)}}</div> -
|
||
<div i18n="@@idB">{count, plural, =1 {one (plural)} =2 {two (plural)}}</div>
|
||
`
|
||
})
|
||
class AppComponent {
|
||
count = 1;
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [AppComponent]});
|
||
|
||
const fixture = TestBed.createComponent(AppComponent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.textContent).toBe('un (select) - un (plural)');
|
||
|
||
fixture.componentInstance.count = 3;
|
||
fixture.detectChanges();
|
||
// there is no ICU case for count=3
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('-');
|
||
|
||
fixture.componentInstance.count = 4;
|
||
fixture.detectChanges();
|
||
// there is no ICU case for count=4, making sure content is still empty
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('-');
|
||
|
||
fixture.componentInstance.count = 2;
|
||
fixture.detectChanges();
|
||
// check switching to an existing case after processing an ICU without matching case
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('deux (select) - deux (plural)');
|
||
|
||
fixture.componentInstance.count = 1;
|
||
fixture.detectChanges();
|
||
// check that we can go back to the first ICU case
|
||
expect(fixture.nativeElement.textContent).toBe('un (select) - un (plural)');
|
||
});
|
||
|
||
it('should support nested ICUs without "other" cases', () => {
|
||
loadTranslations({
|
||
idA: '{VAR_SELECT_1, select, A {{VAR_SELECT, select, ' +
|
||
'1 {un (select)} 2 {deux (select)}}} other {}}',
|
||
idB: '{VAR_SELECT, select, A {{VAR_PLURAL, plural, ' +
|
||
'=1 {un (plural)} =2 {deux (plural)}}} other {}}',
|
||
});
|
||
|
||
@Component({
|
||
selector: 'app',
|
||
template: `
|
||
<div i18n="@@idA">{
|
||
type, select,
|
||
A {{count, select, 1 {one (select)} 2 {two (select)}}}
|
||
other {}
|
||
}</div> -
|
||
<div i18n="@@idB">{
|
||
type, select,
|
||
A {{count, plural, =1 {one (plural)} =2 {two (plural)}}}
|
||
other {}
|
||
}</div>
|
||
`
|
||
})
|
||
class AppComponent {
|
||
type = 'A';
|
||
count = 1;
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [AppComponent]});
|
||
|
||
const fixture = TestBed.createComponent(AppComponent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.textContent).toBe('un (select) - un (plural)');
|
||
|
||
fixture.componentInstance.count = 3;
|
||
fixture.detectChanges();
|
||
// there is no case for count=3 in nested ICU
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('-');
|
||
|
||
fixture.componentInstance.count = 4;
|
||
fixture.detectChanges();
|
||
// there is no case for count=4 in nested ICU, making sure content is still empty
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('-');
|
||
|
||
fixture.componentInstance.count = 2;
|
||
fixture.detectChanges();
|
||
// check switching to an existing case after processing nested ICU without matching case
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('deux (select) - deux (plural)');
|
||
|
||
fixture.componentInstance.count = 1;
|
||
fixture.detectChanges();
|
||
// check that we can go back to the first case in nested ICU
|
||
expect(fixture.nativeElement.textContent).toBe('un (select) - un (plural)');
|
||
|
||
fixture.componentInstance.type = 'B';
|
||
fixture.detectChanges();
|
||
// check that nested ICU is removed if root ICU case has changed
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('-');
|
||
});
|
||
|
||
it('should support ICUs with pipes', () => {
|
||
loadTranslations({
|
||
idA: '{VAR_SELECT, select, 1 {{INTERPOLATION} article} 2 {deux articles}}',
|
||
});
|
||
|
||
@Component({
|
||
selector: 'app',
|
||
template: `
|
||
<div i18n="@@idA">{count$ | async, select, 1 {{{count$ | async}} item} 2 {two items}}</div>
|
||
`
|
||
})
|
||
class AppComponent {
|
||
count$ = new BehaviorSubject<number>(1);
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
imports: [CommonModule],
|
||
declarations: [AppComponent],
|
||
});
|
||
|
||
const fixture = TestBed.createComponent(AppComponent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.textContent).toBe('1 article');
|
||
|
||
fixture.componentInstance.count$.next(3);
|
||
fixture.detectChanges();
|
||
// there is no ICU case for count=3, expecting empty content
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('');
|
||
|
||
fixture.componentInstance.count$.next(2);
|
||
fixture.detectChanges();
|
||
// checking the second ICU case
|
||
expect(fixture.nativeElement.textContent.trim()).toBe('deux articles');
|
||
});
|
||
});
|
||
|
||
describe('should support attributes', () => {
|
||
it('text', () => {
|
||
loadTranslations({[computeMsgId('text')]: 'texte'});
|
||
const fixture = initWithTemplate(AppComp, `<div i18n i18n-title title='text'></div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div title="texte"></div>`);
|
||
});
|
||
|
||
it('interpolations', () => {
|
||
loadTranslations({[computeMsgId('hello {$INTERPOLATION}')]: 'bonjour {$INTERPOLATION}'});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<div i18n i18n-title title="hello {{name}}"></div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour Angular"></div>`);
|
||
|
||
fixture.componentRef.instance.name = 'John';
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour John"></div>`);
|
||
});
|
||
|
||
it('with pipes', () => {
|
||
loadTranslations({[computeMsgId('hello {$INTERPOLATION}')]: 'bonjour {$INTERPOLATION}'});
|
||
const fixture = initWithTemplate(
|
||
AppComp, `<div i18n i18n-title title="hello {{name | uppercase}}"></div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour ANGULAR"></div>`);
|
||
});
|
||
|
||
it('multiple attributes', () => {
|
||
loadTranslations({[computeMsgId('hello {$INTERPOLATION}')]: 'bonjour {$INTERPOLATION}'});
|
||
const fixture = initWithTemplate(
|
||
AppComp,
|
||
`<input i18n i18n-title title="hello {{name}}" i18n-placeholder placeholder="hello {{name}}">`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<input title="bonjour Angular" placeholder="bonjour Angular">`);
|
||
|
||
fixture.componentRef.instance.name = 'John';
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<input title="bonjour John" placeholder="bonjour John">`);
|
||
});
|
||
|
||
it('on removed elements', () => {
|
||
loadTranslations({
|
||
[computeMsgId('text')]: 'texte',
|
||
[computeMsgId('{$START_TAG_SPAN}content{$CLOSE_TAG_SPAN}')]: 'contenu',
|
||
});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<div i18n><span i18n-title title="text">content</span></div>`);
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div>contenu</div>`);
|
||
});
|
||
|
||
it('with custom interpolation config', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}', 'm')]: 'Bonjour {$INTERPOLATION}'});
|
||
const interpolation = ['{%', '%}'] as [string, string];
|
||
TestBed.overrideComponent(AppComp, {set: {interpolation}});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<div i18n-title="m|d" title="Hello {% name %}"></div>`);
|
||
|
||
const element = fixture.nativeElement.firstChild;
|
||
expect(element.title).toBe('Bonjour Angular');
|
||
});
|
||
|
||
it('in nested template', () => {
|
||
loadTranslations({[computeMsgId('Item {$INTERPOLATION}', 'm')]: 'Article {$INTERPOLATION}'});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div *ngFor='let item of [1,2,3]'>
|
||
<div i18n-title='m|d' title='Item {{ item }}'></div>
|
||
</div>`);
|
||
|
||
const element = fixture.nativeElement;
|
||
for (let i = 0; i < element.children.length; i++) {
|
||
const child = element.children[i];
|
||
expect((child as any).innerHTML).toBe(`<div title="Article ${i + 1}"></div>`);
|
||
}
|
||
});
|
||
|
||
it('should add i18n attributes on self-closing tags', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
const fixture =
|
||
initWithTemplate(AppComp, `<img src="logo.png" i18n-title title="Hello {{ name }}">`);
|
||
|
||
const element = fixture.nativeElement.firstChild;
|
||
expect(element.title).toBe('Bonjour Angular');
|
||
});
|
||
|
||
it('should process i18n attributes on explicit <ng-template> elements', () => {
|
||
const titleDirInstances: TitleDir[] = [];
|
||
loadTranslations({[computeMsgId('Hello')]: 'Bonjour'});
|
||
|
||
@Directive({
|
||
selector: '[title]',
|
||
})
|
||
class TitleDir {
|
||
@Input() title = '';
|
||
constructor() {
|
||
titleDirInstances.push(this);
|
||
}
|
||
}
|
||
|
||
@Component({
|
||
selector: 'comp',
|
||
template: '<ng-template i18n-title title="Hello"></ng-template>',
|
||
})
|
||
class Comp {
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
declarations: [Comp, TitleDir],
|
||
});
|
||
|
||
const fixture = TestBed.createComponent(Comp);
|
||
fixture.detectChanges();
|
||
|
||
// make sure we only match `TitleDir` once
|
||
expect(titleDirInstances.length).toBe(1);
|
||
|
||
expect(titleDirInstances[0].title).toBe('Bonjour');
|
||
});
|
||
|
||
it('should match directive only once in case i18n attrs are present on inline template', () => {
|
||
const titleDirInstances: TitleDir[] = [];
|
||
loadTranslations({[computeMsgId('Hello')]: 'Bonjour'});
|
||
|
||
@Directive({selector: '[title]'})
|
||
class TitleDir {
|
||
@Input() title: string = '';
|
||
constructor(public elRef: ElementRef) {
|
||
titleDirInstances.push(this);
|
||
}
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-cmp',
|
||
template: `
|
||
<button *ngIf="true" i18n-title title="Hello"></button>
|
||
`,
|
||
})
|
||
class Cmp {
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
imports: [CommonModule],
|
||
declarations: [Cmp, TitleDir],
|
||
});
|
||
const fixture = TestBed.createComponent(Cmp);
|
||
fixture.detectChanges();
|
||
|
||
// make sure we only match `TitleDir` once and on the right element
|
||
expect(titleDirInstances.length).toBe(1);
|
||
expect(titleDirInstances[0].elRef.nativeElement instanceof HTMLButtonElement).toBeTruthy();
|
||
|
||
expect(titleDirInstances[0].title).toBe('Bonjour');
|
||
});
|
||
|
||
it('should allow directive inputs (as an interpolated prop) on <ng-template>', () => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
|
||
let dirInstance: WithInput;
|
||
@Directive({selector: '[dir]'})
|
||
class WithInput {
|
||
constructor() {
|
||
dirInstance = this;
|
||
}
|
||
@Input() dir: string = '';
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-app',
|
||
template: '<ng-template i18n-dir dir="Hello {{ name }}"></ng-template>',
|
||
})
|
||
class TestComp {
|
||
name = 'Angular';
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [TestComp, WithInput]});
|
||
const fixture = TestBed.createComponent(TestComp);
|
||
fixture.detectChanges();
|
||
|
||
expect(dirInstance!.dir).toBe('Bonjour Angular');
|
||
});
|
||
|
||
it('should allow directive inputs (as interpolated props)' +
|
||
'on <ng-template> with structural directives present',
|
||
() => {
|
||
loadTranslations({[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}'});
|
||
|
||
let dirInstance: WithInput;
|
||
@Directive({selector: '[dir]'})
|
||
class WithInput {
|
||
constructor() {
|
||
dirInstance = this;
|
||
}
|
||
@Input() dir: string = '';
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-app',
|
||
template: '<ng-template *ngIf="true" i18n-dir dir="Hello {{ name }}"></ng-template>',
|
||
})
|
||
class TestComp {
|
||
name = 'Angular';
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [TestComp, WithInput]});
|
||
const fixture = TestBed.createComponent(TestComp);
|
||
fixture.detectChanges();
|
||
|
||
expect(dirInstance!.dir).toBe('Bonjour Angular');
|
||
});
|
||
|
||
it('should apply i18n attributes during second template pass', () => {
|
||
loadTranslations({[computeMsgId('Set')]: 'Set'});
|
||
@Directive({
|
||
selector: '[test]',
|
||
inputs: ['test'],
|
||
exportAs: 'dir',
|
||
})
|
||
class Dir {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'other',
|
||
template: `<div i18n #ref="dir" test="Set" i18n-test="This is also a test"></div>`
|
||
})
|
||
class Other {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'blah',
|
||
template: `
|
||
<other></other>
|
||
<other></other>
|
||
`
|
||
})
|
||
class Cmp {
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
declarations: [Dir, Cmp, Other],
|
||
});
|
||
|
||
const fixture = TestBed.createComponent(Cmp);
|
||
fixture.detectChanges();
|
||
expect(fixture.debugElement.children[0].children[0].references.ref.test).toBe('Set');
|
||
expect(fixture.debugElement.children[1].children[0].references.ref.test).toBe('Set');
|
||
});
|
||
|
||
it('with complex expressions', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2}')]:
|
||
'{$INTERPOLATION} - {$INTERPOLATION_1} - {$INTERPOLATION_2} (fr)'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n-title title="{{ name | uppercase }} - {{ obj?.a?.b }} - {{ obj?.getA()?.b }}"></div>
|
||
`);
|
||
// the `obj` field is not yet defined, so 2nd and 3rd interpolations return empty strings
|
||
expect(fixture.nativeElement.firstChild.title).toEqual(`ANGULAR - - (fr)`);
|
||
|
||
fixture.componentRef.instance.obj = {
|
||
a: {b: 'value 1'},
|
||
getA: () => ({b: 'value 2'}),
|
||
};
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.firstChild.title).toEqual(`ANGULAR - value 1 - value 2 (fr)`);
|
||
});
|
||
|
||
it('should create corresponding ng-reflect properties', () => {
|
||
@Component({
|
||
selector: 'welcome',
|
||
template: '{{ messageText }}',
|
||
})
|
||
class WelcomeComp {
|
||
@Input() messageText!: string;
|
||
}
|
||
|
||
@Component({
|
||
template: `
|
||
<welcome
|
||
messageText="Hello"
|
||
i18n-messageText="Welcome message description">
|
||
</welcome>
|
||
`
|
||
})
|
||
class App {
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
declarations: [App, WelcomeComp],
|
||
});
|
||
loadTranslations({
|
||
[computeMsgId('Hello')]: 'Bonjour',
|
||
});
|
||
const fixture = TestBed.createComponent(App);
|
||
fixture.detectChanges();
|
||
|
||
const comp = fixture.debugElement.query(By.css('welcome'));
|
||
expect(comp.attributes['messagetext']).toBe('Bonjour');
|
||
expect(comp.attributes['ng-reflect-message-text']).toBe('Bonjour');
|
||
});
|
||
|
||
it('should support i18n attributes on <ng-container> elements', () => {
|
||
loadTranslations({[computeMsgId('Hello', 'meaning')]: 'Bonjour'});
|
||
|
||
@Directive({selector: '[mydir]'})
|
||
class Dir {
|
||
@Input() mydir: string = '';
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-cmp',
|
||
template: `
|
||
<ng-container i18n-mydir="meaning|description" mydir="Hello"></ng-container>
|
||
`,
|
||
})
|
||
class Cmp {
|
||
}
|
||
|
||
TestBed.configureTestingModule({
|
||
declarations: [Cmp, Dir],
|
||
});
|
||
const fixture = TestBed.createComponent(Cmp);
|
||
fixture.detectChanges();
|
||
|
||
const dir = fixture.debugElement.childNodes[0].injector.get(Dir);
|
||
expect(dir.mydir).toEqual('Bonjour');
|
||
});
|
||
});
|
||
|
||
describe('empty translations', () => {
|
||
it('should replace existing text content with empty translation', () => {
|
||
loadTranslations({[computeMsgId('Some Text')]: ''});
|
||
const fixture = initWithTemplate(AppComp, '<div i18n>Some Text</div>');
|
||
expect(fixture.nativeElement.textContent).toBe('');
|
||
});
|
||
|
||
it('should replace existing DOM elements with empty translation', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
' Start {$START_TAG_DIV}DIV{$CLOSE_TAG_DIV}' +
|
||
'{$START_TAG_SPAN}SPAN{$CLOSE_TAG_SPAN} End ')]: '',
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
Start
|
||
<div>DIV</div>
|
||
<span>SPAN</span>
|
||
End
|
||
</div>
|
||
`);
|
||
expect(fixture.nativeElement.textContent).toBe('');
|
||
});
|
||
|
||
it('should replace existing ICU content with empty translation', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_PLURAL, plural, =0 {zero} other {more than zero}}')]: '',
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>{count, plural, =0 {zero} other {more than zero}}</div>
|
||
`);
|
||
expect(fixture.nativeElement.textContent).toBe('');
|
||
});
|
||
});
|
||
|
||
it('should work with directives and host bindings', () => {
|
||
let directiveInstances: ClsDir[] = [];
|
||
|
||
@Directive({selector: '[test]'})
|
||
class ClsDir {
|
||
@HostBinding('className') klass = 'foo';
|
||
|
||
constructor() {
|
||
directiveInstances.push(this);
|
||
}
|
||
}
|
||
|
||
@Component({
|
||
selector: `my-app`,
|
||
template: `
|
||
<div i18n test i18n-title title="start {{exp1}} middle {{exp2}} end" outer>
|
||
trad: {exp1, plural,
|
||
=0 {no <b title="none">emails</b>!}
|
||
=1 {one <i>email</i>}
|
||
other {{{exp1}} emails}
|
||
}
|
||
</div><div test inner></div>`
|
||
})
|
||
class MyApp {
|
||
exp1 = 1;
|
||
exp2 = 2;
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [ClsDir, MyApp]});
|
||
loadTranslations({
|
||
// Note that this translation switches the order of the expressions!
|
||
[computeMsgId('start {$INTERPOLATION} middle {$INTERPOLATION_1} end')]:
|
||
'début {$INTERPOLATION_1} milieu {$INTERPOLATION} fin',
|
||
[computeMsgId(
|
||
'{VAR_PLURAL, plural, =0 {no {START_BOLD_TEXT}emails{CLOSE_BOLD_TEXT}!} =1 {one {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} emails}}')]:
|
||
'{VAR_PLURAL, plural, =0 {aucun {START_BOLD_TEXT}email{CLOSE_BOLD_TEXT}!} =1 {un {START_ITALIC_TEXT}email{CLOSE_ITALIC_TEXT}} other {{INTERPOLATION} emails}}',
|
||
[computeMsgId(' trad: {$ICU} ')]: ' traduction: {$ICU} '
|
||
});
|
||
const fixture = TestBed.createComponent(MyApp);
|
||
fixture.detectChanges();
|
||
|
||
const outerDiv: HTMLElement = fixture.nativeElement.querySelector('div[outer]');
|
||
const innerDiv: HTMLElement = fixture.nativeElement.querySelector('div[inner]');
|
||
|
||
// Note that ideally we'd just compare the innerHTML here, but different browsers return
|
||
// the order of attributes differently. E.g. most browsers preserve the declaration order,
|
||
// but IE does not.
|
||
expect(outerDiv.getAttribute('title')).toBe('début 2 milieu 1 fin');
|
||
expect(outerDiv.getAttribute('class')).toBe('foo');
|
||
expect(outerDiv.textContent!.trim()).toBe('traduction: un email');
|
||
expect(innerDiv.getAttribute('class')).toBe('foo');
|
||
|
||
directiveInstances.forEach(instance => instance.klass = 'bar');
|
||
fixture.componentRef.instance.exp1 = 2;
|
||
fixture.componentRef.instance.exp2 = 3;
|
||
fixture.detectChanges();
|
||
|
||
expect(outerDiv.getAttribute('title')).toBe('début 3 milieu 2 fin');
|
||
expect(outerDiv.getAttribute('class')).toBe('bar');
|
||
expect(outerDiv.textContent!.trim()).toBe('traduction: 2 emails');
|
||
expect(innerDiv.getAttribute('class')).toBe('bar');
|
||
});
|
||
|
||
it('should handle i18n attribute with directive inputs', () => {
|
||
let calledTitle = false;
|
||
let calledValue = false;
|
||
@Component({selector: 'my-comp', template: ''})
|
||
class MyComp {
|
||
t!: string;
|
||
@Input()
|
||
get title() {
|
||
return this.t;
|
||
}
|
||
set title(title) {
|
||
calledTitle = true;
|
||
this.t = title;
|
||
}
|
||
|
||
@Input()
|
||
get value() {
|
||
return this.val;
|
||
}
|
||
set value(value: string) {
|
||
calledValue = true;
|
||
this.val = value;
|
||
}
|
||
val!: string;
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [AppComp, MyComp]});
|
||
loadTranslations({
|
||
[computeMsgId('Hello {$INTERPOLATION}')]: 'Bonjour {$INTERPOLATION}',
|
||
[computeMsgId('works')]: 'fonctionne',
|
||
});
|
||
const fixture = initWithTemplate(
|
||
AppComp,
|
||
`<my-comp i18n i18n-title title="works" i18n-value="hi" value="Hello {{name}}"></my-comp>`);
|
||
fixture.detectChanges();
|
||
|
||
const directive = fixture.debugElement.children[0].injector.get(MyComp);
|
||
expect(calledValue).toEqual(true);
|
||
expect(calledTitle).toEqual(true);
|
||
expect(directive.value).toEqual(`Bonjour Angular`);
|
||
expect(directive.title).toEqual(`fonctionne`);
|
||
});
|
||
|
||
it('should support adding/moving/removing nodes', () => {
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_DIV2}{$CLOSE_TAG_DIV2}' +
|
||
'{$START_TAG_DIV3}{$CLOSE_TAG_DIV3}' +
|
||
'{$START_TAG_DIV4}{$CLOSE_TAG_DIV4}' +
|
||
'{$START_TAG_DIV5}{$CLOSE_TAG_DIV5}' +
|
||
'{$START_TAG_DIV6}{$CLOSE_TAG_DIV6}' +
|
||
'{$START_TAG_DIV7}{$CLOSE_TAG_DIV7}' +
|
||
'{$START_TAG_DIV8}{$CLOSE_TAG_DIV8}')]: '{$START_TAG_DIV2}{$CLOSE_TAG_DIV2}' +
|
||
'{$START_TAG_DIV8}{$CLOSE_TAG_DIV8}' +
|
||
'{$START_TAG_DIV4}{$CLOSE_TAG_DIV4}' +
|
||
'{$START_TAG_DIV5}{$CLOSE_TAG_DIV5}Bonjour monde' +
|
||
'{$START_TAG_DIV3}{$CLOSE_TAG_DIV3}' +
|
||
'{$START_TAG_DIV7}{$CLOSE_TAG_DIV7}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div i18n>
|
||
<div2></div2>
|
||
<div3></div3>
|
||
<div4></div4>
|
||
<div5></div5>
|
||
<div6></div6>
|
||
<div7></div7>
|
||
<div8></div8>
|
||
</div>`);
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><div2></div2><div8></div8><div4></div4><div5></div5>Bonjour monde<div3></div3><div7></div7></div>`);
|
||
});
|
||
|
||
describe('projection', () => {
|
||
it('should project the translations', () => {
|
||
@Component({selector: 'child', template: '<p><ng-content></ng-content></p>'})
|
||
class Child {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'parent',
|
||
template: `
|
||
<div i18n>
|
||
<child>I am projected from
|
||
<b i18n-title title="Child of {{name}}">{{name}}<remove-me-1></remove-me-1></b>
|
||
<remove-me-2></remove-me-2>
|
||
</child>
|
||
<remove-me-3></remove-me-3>
|
||
</div>`
|
||
})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('Child of {$INTERPOLATION}')]: 'Enfant de {$INTERPOLATION}',
|
||
[computeMsgId(
|
||
'{$START_TAG_CHILD}I am projected from' +
|
||
' {$START_BOLD_TEXT}{$INTERPOLATION}{$START_TAG_REMOVE_ME_1}{$CLOSE_TAG_REMOVE_ME_1}{$CLOSE_BOLD_TEXT}' +
|
||
'{$START_TAG_REMOVE_ME_2}{$CLOSE_TAG_REMOVE_ME_2}' +
|
||
'{$CLOSE_TAG_CHILD}' +
|
||
'{$START_TAG_REMOVE_ME_3}{$CLOSE_TAG_REMOVE_ME_3}')]:
|
||
'{$START_TAG_CHILD}Je suis projeté depuis {$START_BOLD_TEXT}{$INTERPOLATION}{$CLOSE_BOLD_TEXT}{$CLOSE_TAG_CHILD}'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><child><p>Je suis projeté depuis <b title="Enfant de Parent">Parent</b></p></child></div>`);
|
||
});
|
||
|
||
it('should project a translated i18n block', () => {
|
||
@Component({selector: 'child', template: '<p><ng-content></ng-content></p>'})
|
||
class Child {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'parent',
|
||
template: `
|
||
<div>
|
||
<child>
|
||
<any></any>
|
||
<b i18n i18n-title title="Child of {{name}}">I am projected from {{name}}</b>
|
||
<any></any>
|
||
</child>
|
||
</div>`
|
||
})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('Child of {$INTERPOLATION}')]: 'Enfant de {$INTERPOLATION}',
|
||
[computeMsgId('I am projected from {$INTERPOLATION}')]:
|
||
'Je suis projeté depuis {$INTERPOLATION}'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><child><p><any></any><b title="Enfant de Parent">Je suis projeté depuis Parent</b><any></any></p></child></div>`);
|
||
|
||
// it should be able to render a new component with the same template code
|
||
const fixture2 = TestBed.createComponent(Parent);
|
||
fixture2.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(fixture2.nativeElement.innerHTML);
|
||
|
||
fixture2.componentRef.instance.name = 'Parent 2';
|
||
fixture2.detectChanges();
|
||
expect(fixture2.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<div><child><p><any></any><b title="Enfant de Parent 2">Je suis projeté depuis Parent 2</b><any></any></p></child></div>`);
|
||
|
||
// The first fixture should not have changed
|
||
expect(fixture.nativeElement.innerHTML).not.toEqual(fixture2.nativeElement.innerHTML);
|
||
});
|
||
|
||
it('should re-project translations when multiple projections', () => {
|
||
@Component({selector: 'grand-child', template: '<div><ng-content></ng-content></div>'})
|
||
class GrandChild {
|
||
}
|
||
|
||
@Component(
|
||
{selector: 'child', template: '<grand-child><ng-content></ng-content></grand-child>'})
|
||
class Child {
|
||
}
|
||
|
||
@Component({selector: 'parent', template: `<child i18n><b>Hello</b> World!</child>`})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
|
||
loadTranslations({
|
||
[computeMsgId('{$START_BOLD_TEXT}Hello{$CLOSE_BOLD_TEXT} World!')]:
|
||
'{$START_BOLD_TEXT}Bonjour{$CLOSE_BOLD_TEXT} monde!'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual('<child><grand-child><div><b>Bonjour</b> monde!</div></grand-child></child>');
|
||
});
|
||
|
||
it('should be able to remove projected placeholders', () => {
|
||
@Component({selector: 'grand-child', template: '<div><ng-content></ng-content></div>'})
|
||
class GrandChild {
|
||
}
|
||
|
||
@Component(
|
||
{selector: 'child', template: '<grand-child><ng-content></ng-content></grand-child>'})
|
||
class Child {
|
||
}
|
||
|
||
@Component({selector: 'parent', template: `<child i18n><b>Hello</b> World!</child>`})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
|
||
loadTranslations(
|
||
{[computeMsgId('{$START_BOLD_TEXT}Hello{$CLOSE_BOLD_TEXT} World!')]: 'Bonjour monde!'});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual('<child><grand-child><div>Bonjour monde!</div></grand-child></child>');
|
||
});
|
||
|
||
it('should project translations with selectors', () => {
|
||
@Component({selector: 'child', template: `<ng-content select='span'></ng-content>`})
|
||
class Child {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'parent',
|
||
template: `
|
||
<child i18n>
|
||
<span title="keepMe"></span>
|
||
<span title="deleteMe"></span>
|
||
</child>
|
||
`
|
||
})
|
||
class Parent {
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('{$START_TAG_SPAN}{$CLOSE_TAG_SPAN}{$START_TAG_SPAN_1}{$CLOSE_TAG_SPAN}')]:
|
||
'{$START_TAG_SPAN}Contenu{$CLOSE_TAG_SPAN}'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual('<child><span title="keepMe">Contenu</span></child>');
|
||
});
|
||
|
||
it('should project content in i18n blocks', () => {
|
||
@Component({
|
||
selector: 'child',
|
||
template: `<div i18n>Content projected from <ng-content></ng-content></div>`
|
||
})
|
||
class Child {
|
||
}
|
||
|
||
@Component({selector: 'parent', template: `<child>{{name}}</child>`})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('Content projected from {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
|
||
'Contenu projeté depuis {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}'
|
||
});
|
||
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<child><div>Contenu projeté depuis Parent</div></child>`);
|
||
|
||
fixture.componentRef.instance.name = 'Parent component';
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<child><div>Contenu projeté depuis Parent component</div></child>`);
|
||
});
|
||
|
||
it('should project content in i18n blocks with placeholders', () => {
|
||
@Component({
|
||
selector: 'child',
|
||
template: `<div i18n>Content projected from <ng-content></ng-content></div>`
|
||
})
|
||
class Child {
|
||
}
|
||
|
||
@Component({selector: 'parent', template: `<child><b>{{name}}</b></child>`})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('Content projected from {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
|
||
'{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} a projeté le contenu'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<child><div><b>Parent</b> a projeté le contenu</div></child>`);
|
||
});
|
||
|
||
it('should project translated content in i18n blocks', () => {
|
||
@Component(
|
||
{selector: 'child', template: `<div i18n>Child content <ng-content></ng-content></div>`})
|
||
class Child {
|
||
}
|
||
|
||
@Component({selector: 'parent', template: `<child i18n>and projection from {{name}}</child>`})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('Child content {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
|
||
'Contenu enfant {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}',
|
||
[computeMsgId('and projection from {$INTERPOLATION}')]:
|
||
'et projection depuis {$INTERPOLATION}'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(`<child><div>Contenu enfant et projection depuis Parent</div></child>`);
|
||
});
|
||
|
||
it('should project bare ICU expressions', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}')]:
|
||
'{VAR_PLURAL, plural, =1 {one} other {at least {INTERPOLATION} .}}'
|
||
});
|
||
@Component({selector: 'child', template: '<div><ng-content></ng-content></div>'})
|
||
class Child {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'parent',
|
||
template: `
|
||
<child i18n>{
|
||
value // i18n(ph = "blah"),
|
||
plural,
|
||
=1 {one}
|
||
other {at least {{value}} .}
|
||
}</child>`
|
||
})
|
||
class Parent {
|
||
value = 3;
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.nativeElement.innerHTML).toContain('at least');
|
||
});
|
||
|
||
it('should project ICUs in i18n blocks', () => {
|
||
@Component(
|
||
{selector: 'child', template: `<div i18n>Child content <ng-content></ng-content></div>`})
|
||
class Child {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'parent',
|
||
template:
|
||
`<child i18n>and projection from {name, select, angular {Angular} other {{{name}}}}</child>`
|
||
})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, angular {Angular} other {{INTERPOLATION}}}')]:
|
||
'{VAR_SELECT, select, angular {Angular} other {{INTERPOLATION}}}',
|
||
[computeMsgId('Child content {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
|
||
'Contenu enfant {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}',
|
||
[computeMsgId('and projection from {$ICU}')]: 'et projection depuis {$ICU}'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<child><div>Contenu enfant et projection depuis Parent<!--ICU 15--></div></child>`);
|
||
|
||
fixture.componentRef.instance.name = 'angular';
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML)
|
||
.toEqual(
|
||
`<child><div>Contenu enfant et projection depuis Angular<!--ICU 15--></div></child>`);
|
||
});
|
||
|
||
it(`shouldn't project deleted projections in i18n blocks`, () => {
|
||
@Component(
|
||
{selector: 'child', template: `<div i18n>Child content <ng-content></ng-content></div>`})
|
||
class Child {
|
||
}
|
||
|
||
@Component({selector: 'parent', template: `<child i18n>and projection from {{name}}</child>`})
|
||
class Parent {
|
||
name: string = 'Parent';
|
||
}
|
||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||
loadTranslations({
|
||
[computeMsgId('Child content {$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT}')]:
|
||
'Contenu enfant',
|
||
[computeMsgId('and projection from {$INTERPOLATION}')]:
|
||
'et projection depuis {$INTERPOLATION}'
|
||
});
|
||
const fixture = TestBed.createComponent(Parent);
|
||
fixture.detectChanges();
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<child><div>Contenu enfant</div></child>`);
|
||
});
|
||
|
||
it('should display/destroy projected i18n content', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, A {A} B {B} other {other}}')]:
|
||
'{VAR_SELECT, select, A {A} B {B} other {other}}'
|
||
});
|
||
@Component({
|
||
selector: 'app',
|
||
template: `
|
||
<ng-container>(<ng-content></ng-content>)</ng-container>
|
||
`
|
||
})
|
||
class MyContentApp {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'my-app',
|
||
template: `
|
||
<app i18n *ngIf="condition">{type, select, A {A} B {B} other {other}}</app>
|
||
`
|
||
})
|
||
class MyApp {
|
||
type = 'A';
|
||
condition = true;
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [MyApp, MyContentApp]});
|
||
|
||
const fixture = TestBed.createComponent(MyApp);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.nativeElement.textContent).toContain('(A)');
|
||
|
||
// change `condition` to remove <app>
|
||
fixture.componentInstance.condition = false;
|
||
fixture.detectChanges();
|
||
|
||
// should not contain 'A'
|
||
expect(fixture.nativeElement.textContent).toBe('');
|
||
|
||
// display <app> again
|
||
fixture.componentInstance.type = 'B';
|
||
fixture.componentInstance.condition = true;
|
||
fixture.detectChanges();
|
||
|
||
// expect that 'B' is now displayed
|
||
expect(fixture.nativeElement.textContent).toContain('(B)');
|
||
});
|
||
});
|
||
|
||
describe('queries', () => {
|
||
function toHtml(element: Element): string {
|
||
return element.innerHTML.replace(/\sng-reflect-\S*="[^"]*"/g, '')
|
||
.replace(/<!--bindings=\{(\W.*\W\s*)?\}-->/g, '');
|
||
}
|
||
|
||
it('detached nodes should still be part of query', () => {
|
||
@Directive({selector: '[text]', inputs: ['text'], exportAs: 'textDir'})
|
||
class TextDirective {
|
||
// TODO(issue/24571): remove '!'.
|
||
text!: string;
|
||
constructor() {}
|
||
}
|
||
|
||
@Component({selector: 'div-query', template: '<ng-container #vc></ng-container>'})
|
||
class DivQuery {
|
||
// TODO(issue/24571): remove '!'.
|
||
@ContentChild(TemplateRef, {static: true}) template !: TemplateRef<any>;
|
||
|
||
// TODO(issue/24571): remove '!'.
|
||
@ViewChild('vc', {read: ViewContainerRef, static: true}) vc!: ViewContainerRef;
|
||
|
||
// TODO(issue/24571): remove '!'.
|
||
@ContentChildren(TextDirective, {descendants: true}) query!: QueryList<TextDirective>;
|
||
|
||
create() {
|
||
this.vc.createEmbeddedView(this.template);
|
||
}
|
||
|
||
destroy() {
|
||
this.vc.clear();
|
||
}
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [TextDirective, DivQuery]});
|
||
loadTranslations({
|
||
[computeMsgId(
|
||
'{$START_TAG_NG_TEMPLATE}{$START_TAG_DIV_1}' +
|
||
'{$START_TAG_DIV}' +
|
||
'{$START_TAG_SPAN}Content{$CLOSE_TAG_SPAN}' +
|
||
'{$CLOSE_TAG_DIV}' +
|
||
'{$CLOSE_TAG_DIV}{$CLOSE_TAG_NG_TEMPLATE}')]:
|
||
'{$START_TAG_NG_TEMPLATE}Contenu{$CLOSE_TAG_NG_TEMPLATE}'
|
||
});
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<div-query #q i18n>
|
||
<ng-template>
|
||
<div>
|
||
<div *ngIf="visible">
|
||
<span text="1">Content</span>
|
||
</div>
|
||
</div>
|
||
</ng-template>
|
||
</div-query>
|
||
`);
|
||
const q = fixture.debugElement.children[0].references.q;
|
||
expect(q.query.length).toEqual(0);
|
||
|
||
// Create embedded view
|
||
q.create();
|
||
fixture.detectChanges();
|
||
expect(q.query.length).toEqual(1);
|
||
expect(toHtml(fixture.nativeElement))
|
||
.toEqual(`<div-query>Contenu<!--ng-container--></div-query>`);
|
||
|
||
// Disable ng-if
|
||
fixture.componentInstance.visible = false;
|
||
fixture.detectChanges();
|
||
expect(q.query.length).toEqual(0);
|
||
expect(toHtml(fixture.nativeElement))
|
||
.toEqual(`<div-query>Contenu<!--ng-container--></div-query>`);
|
||
});
|
||
});
|
||
|
||
describe('invalid translations handling', () => {
|
||
it('should throw in case invalid ICU is present in a template', () => {
|
||
// Error message is produced by Compiler.
|
||
expect(() => initWithTemplate(AppComp, '{count, select, 10 {ten} other {other}'))
|
||
.toThrowError(
|
||
/Invalid ICU message. Missing '}'. \("{count, select, 10 {ten} other {other}\[ERROR ->\]"\)/);
|
||
});
|
||
|
||
it('should throw in case invalid ICU is present in translation', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{VAR_SELECT, select, 10 {ten} other {other}}')]:
|
||
// Missing "}" at the end of translation.
|
||
'{VAR_SELECT, select, 10 {dix} other {autre}'
|
||
});
|
||
|
||
// Error message is produced at runtime.
|
||
expect(() => initWithTemplate(AppComp, '{count, select, 10 {ten} other {other}}'))
|
||
.toThrowError(
|
||
/Unable to parse ICU expression in "{<7B>0<EFBFBD>, select, 10 {dix} other {autre}" message./);
|
||
});
|
||
|
||
it('should throw in case unescaped curly braces are present in a template', () => {
|
||
// Error message is produced by Compiler.
|
||
expect(() => initWithTemplate(AppComp, 'Text { count }'))
|
||
.toThrowError(
|
||
/Do you have an unescaped "{" in your template\? Use "{{ '{' }}"\) to escape it/);
|
||
});
|
||
|
||
it('should throw in case curly braces are added into translation', () => {
|
||
loadTranslations({
|
||
// Curly braces which were not present in a template were added into translation.
|
||
[computeMsgId('Text')]: 'Text { count }',
|
||
});
|
||
expect(() => initWithTemplate(AppComp, '<div i18n>Text</div>'))
|
||
.toThrowError(/Unable to parse ICU expression in "Text { count }" message./);
|
||
});
|
||
});
|
||
|
||
it('should handle extra HTML in translation as plain text', () => {
|
||
loadTranslations({
|
||
// Translation contains HTML tags that were not present in original message.
|
||
[computeMsgId('Text')]: 'Text <div *ngIf="true">Extra content</div>',
|
||
});
|
||
const fixture = initWithTemplate(AppComp, '<div i18n>Text</div>');
|
||
|
||
const element = fixture.nativeElement;
|
||
expect(element).toHaveText('Text <div *ngIf="true">Extra content</div>');
|
||
});
|
||
|
||
it('should reflect lifecycle hook changes in text interpolations in i18n block', () => {
|
||
@Directive({selector: 'input'})
|
||
class InputsDir {
|
||
constructor(private elementRef: ElementRef) {}
|
||
ngOnInit() {
|
||
this.elementRef.nativeElement.value = 'value set in Directive.ngOnInit';
|
||
}
|
||
}
|
||
|
||
@Component({
|
||
template: `
|
||
<input #myinput>
|
||
<div i18n>{{myinput.value}}</div>
|
||
`
|
||
})
|
||
class App {
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [App, InputsDir]});
|
||
|
||
const fixture = TestBed.createComponent(App);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.nativeElement.textContent).toContain('value set in Directive.ngOnInit');
|
||
});
|
||
|
||
it('should reflect lifecycle hook changes in text interpolations in i18n attributes', () => {
|
||
@Directive({selector: 'input'})
|
||
class InputsDir {
|
||
constructor(private elementRef: ElementRef) {}
|
||
ngOnInit() {
|
||
this.elementRef.nativeElement.value = 'value set in Directive.ngOnInit';
|
||
}
|
||
}
|
||
|
||
@Component({
|
||
template: `
|
||
<input #myinput>
|
||
<div i18n-title title="{{myinput.value}}"></div>
|
||
`
|
||
})
|
||
class App {
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [App, InputsDir]});
|
||
|
||
const fixture = TestBed.createComponent(App);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.nativeElement.querySelector('div').title)
|
||
.toContain('value set in Directive.ngOnInit');
|
||
});
|
||
|
||
it('should not alloc expando slots when there is no new variable to create', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$START_TAG_DIV} Some content {$CLOSE_TAG_DIV}')]:
|
||
'{$START_TAG_DIV} Some content {$CLOSE_TAG_DIV}',
|
||
[computeMsgId(
|
||
'{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}')]:
|
||
'{$START_TAG_SPAN_1}{$ICU}{$CLOSE_TAG_SPAN} - {$START_TAG_SPAN_1}{$ICU_1}{$CLOSE_TAG_SPAN}',
|
||
});
|
||
@Component({
|
||
template: `
|
||
<div dialog i18n>
|
||
<div *ngIf="data">
|
||
Some content
|
||
</div>
|
||
</div>
|
||
<button [close]="true">Button label</button>
|
||
`
|
||
})
|
||
class ContentElementDialog {
|
||
data = false;
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [DialogDir, CloseBtn, ContentElementDialog]});
|
||
|
||
const fixture = TestBed.createComponent(ContentElementDialog);
|
||
fixture.detectChanges();
|
||
|
||
// Remove the reflect attribute, because the attribute order in innerHTML
|
||
// isn't guaranteed in different browsers so it could throw off our assertions.
|
||
const button = fixture.nativeElement.querySelector('button');
|
||
button.removeAttribute('ng-reflect-dialog-result');
|
||
|
||
expect(fixture.nativeElement.innerHTML).toEqual(`<div dialog=""><!--bindings={
|
||
"ng-reflect-ng-if": "false"
|
||
}--></div><button title="Close dialog">Button label</button>`);
|
||
});
|
||
|
||
describe('ngTemplateOutlet', () => {
|
||
it('should work with i18n content that includes elements', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$START_TAG_SPAN}A{$CLOSE_TAG_SPAN} B ')]:
|
||
'{$START_TAG_SPAN}a{$CLOSE_TAG_SPAN} b',
|
||
});
|
||
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<ng-container *ngTemplateOutlet="tmpl"></ng-container>
|
||
<ng-template #tmpl i18n>
|
||
<span>A</span> B
|
||
</ng-template>
|
||
`);
|
||
expect(fixture.nativeElement.textContent).toContain('a b');
|
||
});
|
||
|
||
it('should work with i18n content that includes other templates (*ngIf)', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$START_TAG_SPAN}A{$CLOSE_TAG_SPAN} B ')]:
|
||
'{$START_TAG_SPAN}a{$CLOSE_TAG_SPAN} b',
|
||
});
|
||
|
||
const fixture = initWithTemplate(AppComp, `
|
||
<ng-container *ngTemplateOutlet="tmpl"></ng-container>
|
||
<ng-template #tmpl i18n>
|
||
<span *ngIf="visible">A</span> B
|
||
</ng-template>
|
||
`);
|
||
expect(fixture.nativeElement.textContent).toContain('a b');
|
||
});
|
||
|
||
it('should work with i18n content that includes projection', () => {
|
||
loadTranslations({
|
||
[computeMsgId('{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} B ')]:
|
||
'{$START_TAG_NG_CONTENT}{$CLOSE_TAG_NG_CONTENT} b',
|
||
});
|
||
|
||
@Component({
|
||
selector: 'projector',
|
||
template: `
|
||
<ng-container *ngTemplateOutlet="tmpl"></ng-container>
|
||
<ng-template #tmpl i18n>
|
||
<ng-content></ng-content> B
|
||
</ng-template>
|
||
`
|
||
})
|
||
class Projector {
|
||
}
|
||
|
||
@Component({
|
||
selector: 'app',
|
||
template: `
|
||
<projector>a</projector>
|
||
`
|
||
})
|
||
class AppComponent {
|
||
}
|
||
|
||
TestBed.configureTestingModule({declarations: [AppComponent, Projector]});
|
||
|
||
const fixture = TestBed.createComponent(AppComponent);
|
||
fixture.detectChanges();
|
||
|
||
expect(fixture.nativeElement.textContent).toContain('a b');
|
||
});
|
||
});
|
||
});
|
||
|
||
function initWithTemplate(compType: Type<any>, template: string) {
|
||
TestBed.overrideComponent(compType, {set: {template}});
|
||
const fixture = TestBed.createComponent(compType);
|
||
fixture.detectChanges();
|
||
return fixture;
|
||
}
|
||
|
||
@Component({selector: 'app-comp', template: ``})
|
||
class AppComp {
|
||
name = `Angular`;
|
||
visible = true;
|
||
count = 0;
|
||
}
|
||
|
||
@Component({
|
||
selector: 'app-comp-with-whitespaces',
|
||
template: ``,
|
||
preserveWhitespaces: true,
|
||
})
|
||
class AppCompWithWhitespaces {
|
||
}
|
||
|
||
@Directive({
|
||
selector: '[tplRef]',
|
||
})
|
||
class DirectiveWithTplRef {
|
||
constructor(public vcRef: ViewContainerRef, public tplRef: TemplateRef<{}>) {}
|
||
ngOnInit() {
|
||
this.vcRef.createEmbeddedView(this.tplRef, {});
|
||
}
|
||
}
|
||
|
||
@Pipe({name: 'uppercase'})
|
||
class UppercasePipe implements PipeTransform {
|
||
transform(value: string) {
|
||
return value.toUpperCase();
|
||
}
|
||
}
|
||
|
||
@Directive({selector: `[dialog]`})
|
||
export class DialogDir {
|
||
}
|
||
|
||
@Directive({selector: `button[close]`, host: {'[title]': 'name'}})
|
||
export class CloseBtn {
|
||
@Input('close') dialogResult: any;
|
||
name: string = 'Close dialog';
|
||
}
|