Logged in
@@ -428,181 +442,187 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
Not logged in
{count, select, 10 {ten} 20 {twenty} other {other}}
`);
+ '{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');
- });
+ const element = fixture.nativeElement;
+ expect(element).toHaveText('autre');
+ });
- it('multiple', () => {
- loadTranslations({
+ it('multiple', () => {
+ loadTranslations({
- '{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}}}',
- '{VAR_SELECT, select, other {(name)}}': '{VAR_SELECT, select, other {({$interpolation})}}'
- });
- const fixture = initWithTemplate(AppComp, `{count, plural,
+ '{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}}}',
+ '{VAR_SELECT, select, other {(name)}}':
+ '{VAR_SELECT, select, other {({$INTERPOLATION})}}'
+ });
+ const fixture = initWithTemplate(AppComp, `
{count, plural,
=0 {no emails!}
=1 {one email}
other {{{count}} emails}
} - {name, select,
other {({{name}})}
}
`);
- expect(fixture.nativeElement.innerHTML)
- .toEqual(`aucun email! - (Angular)
`);
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(`aucun email! - (Angular)
`);
- fixture.componentRef.instance.count = 4;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- `4 emails - (Angular)
`);
+ fixture.componentRef.instance.count = 4;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(
+ `4 emails - (Angular)
`);
- fixture.componentRef.instance.count = 0;
- fixture.componentRef.instance.name = 'John';
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(`aucun email! - (John)
`);
- });
+ fixture.componentRef.instance.count = 0;
+ fixture.componentRef.instance.name = 'John';
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(`aucun email! - (John)
`);
+ });
- it('with custom interpolation config', () => {
- loadTranslations({
+ it('with custom interpolation config', () => {
+ loadTranslations({
- '{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, `{count, select, 10 {ten} other {{% name %}}}
`);
+ '{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, `{count, select, 10 {ten} other {{% name %}}}
`);
- expect(fixture.nativeElement).toHaveText(`Angular`);
- });
+ expect(fixture.nativeElement).toHaveText(`Angular`);
+ });
- it('inside HTML elements', () => {
- loadTranslations({
+ it('inside HTML elements', () => {
+ loadTranslations({
- '{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}}}',
- '{VAR_SELECT, select, other {(name)}}': '{VAR_SELECT, select, other {({$interpolation})}}'
- });
- const fixture = initWithTemplate(AppComp, `{count, plural,
+ '{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}}}',
+ '{VAR_SELECT, select, other {(name)}}':
+ '{VAR_SELECT, select, other {({$INTERPOLATION})}}'
+ });
+ const fixture = initWithTemplate(AppComp, `
{count, plural,
=0 {no emails!}
=1 {one email}
other {{{count}} emails}
} - {name, select,
other {({{name}})}
}
`);
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- `aucun email! - (Angular)
`);
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(
+ `aucun email! - (Angular)
`);
- fixture.componentRef.instance.count = 4;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- `4 emails - (Angular)
`);
+ fixture.componentRef.instance.count = 4;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(
+ `4 emails - (Angular)
`);
- fixture.componentRef.instance.count = 0;
- fixture.componentRef.instance.name = 'John';
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- `aucun email! - (John)
`);
- });
+ fixture.componentRef.instance.count = 0;
+ fixture.componentRef.instance.name = 'John';
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(
+ `aucun email! - (John)
`);
+ });
- it('inside template directives', () => {
- loadTranslations({
+ it('inside template directives', () => {
+ loadTranslations({
- '{VAR_SELECT, select, other {(name)}}': '{VAR_SELECT, select, other {({$interpolation})}}'
- });
- const fixture = initWithTemplate(AppComp, `{name, select,
+ '{VAR_SELECT, select, other {(name)}}':
+ '{VAR_SELECT, select, other {({$INTERPOLATION})}}'
+ });
+ const fixture =
+ initWithTemplate(AppComp, `{name, select,
+ '{VAR_SELECT, select, other {(name)}}':
+ '{VAR_SELECT, select, other {({$INTERPOLATION})}}'
+ });
+ const fixture = initWithTemplate(AppComp, `{name, select,
other {({{name}})}
} `);
- expect(fixture.nativeElement.innerHTML).toEqual(`(Angular)`);
- });
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(`(Angular)`);
+ });
- it('inside ', () => {
- loadTranslations({
+ it('inside ', () => {
+ loadTranslations({
- '{VAR_SELECT, select, 10 {ten} 20 {twenty} other {other}}':
- '{VAR_SELECT, select, 10 {dix} 20 {vingt} other {autre}}'
- });
- const fixture = initWithTemplate(
- AppComp, `
+ '{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}}` +
- `
+ `{count, select, 10 {ten} 20 {twenty} other {other}}` +
+ `
`);
- const element = fixture.nativeElement;
- expect(element).toHaveText('autre');
- });
+ const element = fixture.nativeElement;
+ expect(element).toHaveText('autre');
+ });
- it('nested', () => {
- loadTranslations({
+ it('nested', () => {
+ loadTranslations({
- '{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 {chients} other {animaux}}!}}'
- });
- const fixture = initWithTemplate(AppComp, `
{name, select,
other {({{name}})}
}
`);
- expect(fixture.nativeElement.innerHTML)
- .toEqual(`(Angular)
`);
- fixture.componentRef.instance.visible = false;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual(``);
- });
+ });
- it('inside ng-container', () => {
- loadTranslations({
+ it('inside ng-container', () => {
+ loadTranslations({
- '{VAR_SELECT, select, other {(name)}}': '{VAR_SELECT, select, other {({$interpolation})}}'
- });
- const fixture = initWithTemplate(AppComp, `{count, plural,
+ '{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 {chients} other {animaux}}!}}'
+ });
+ const fixture = initWithTemplate(AppComp, `
`);
- const element = fixture.nativeElement;
- for (let i = 0; i < element.children.length; i++) {
- const child = element.children[i];
- expect((child as any).innerHTML).toBe(``);
- }
- });
+ const element = fixture.nativeElement;
+ for (let i = 0; i < element.children.length; i++) {
+ const child = element.children[i];
+ expect((child as any).innerHTML).toBe(``);
+ }
+ });
- it('should add i18n attributes on self-closing tags', () => {
- loadTranslations({'Hello {$interpolation}': 'Bonjour {$interpolation}'});
- const fixture =
- initWithTemplate(AppComp, `
`);
+ it('should add i18n attributes on self-closing tags', () => {
+ loadTranslations({'Hello {$INTERPOLATION}': 'Bonjour {$INTERPOLATION}'});
+ const fixture = initWithTemplate(
+ AppComp, ``);
- const element = fixture.nativeElement.firstChild;
- expect(element.title).toBe('Bonjour Angular');
- });
+ const element = fixture.nativeElement.firstChild;
+ expect(element.title).toBe('Bonjour Angular');
+ });
- it('should apply i18n attributes during second template pass', () => {
- @Directive({
- selector: '[test]',
- inputs: ['test'],
- exportAs: 'dir',
- })
- class Dir {
- }
+ it('should apply i18n attributes during second template pass', () => {
+ @Directive({
+ selector: '[test]',
+ inputs: ['test'],
+ exportAs: 'dir',
+ })
+ class Dir {
+ }
- @Component({
- selector: 'other',
- template: ``
- })
- class Other {
- }
+ @Component({
+ selector: 'other',
+ template: ``
+ })
+ class Other {
+ }
- @Component({
- selector: 'blah',
- template: `
+ @Component({
+ selector: 'blah',
+ template: `
I am projected from
{{name}}
`
- })
- class Parent {
- name: string = 'Parent';
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({
+ })
+ class Parent {
+ name: string = 'Parent';
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({
- 'Child of {$interpolation}': 'Enfant de {$interpolation}',
- 'I am projected from {$interpolation}': 'Je suis projeté depuis {$interpolation}'
- });
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- `Hello World! `})
- class Parent {
- name: string = 'Parent';
- }
+ @Component({selector: 'parent', template: `Hello World! `})
+ class Parent {
+ name: string = 'Parent';
+ }
- TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
- loadTranslations({
+ TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
+ loadTranslations({
- '{$startBoldText}Hello{$closeBoldText} World!':
- '{$startBoldText}Bonjour{$closeBoldText} monde!'
- });
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual('Hello World! `})
- class Parent {
- name: string = 'Parent';
- }
+ @Component({selector: 'parent', template: `Hello World! `})
+ class Parent {
+ name: string = 'Parent';
+ }
- TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
- loadTranslations({'{$startBoldText}Hello{$closeBoldText} World!': 'Bonjour monde!'});
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual('
`
- })
- class Parent {
- }
+ })
+ class Parent {
+ }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({
- '{$startTagSpan}{$closeTagSpan}{$startTagSpan_1}{$closeTagSpan}':
- '{$startTagSpan}Contenu{$closeTagSpan}'
- });
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual('Contenu ');
- });
+ '{$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('Contenu ');
+ });
- it('should project content in i18n blocks', () => {
- @Component({
- selector: 'child',
- template: `{{name}} `})
- class Parent {
- name: string = 'Parent';
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({
+ @Component({selector: 'parent', template: `{{name}} `})
+ class Parent {
+ name: string = 'Parent';
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({
- 'Content projected from {$startTagNgContent}{$closeTagNgContent}':
- 'Contenu projeté depuis {$startTagNgContent}{$closeTagNgContent}'
- });
+ '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(`{{name}} `})
- class Parent {
- name: string = 'Parent';
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({
+ @Component({selector: 'parent', template: `{{name}} `})
+ class Parent {
+ name: string = 'Parent';
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({
- 'Content projected from {$startTagNgContent}{$closeTagNgContent}':
- '{$startTagNgContent}{$closeTagNgContent} a projeté le contenu'
- });
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(`and projection from {{name}} `})
- class Parent {
- name: string = 'Parent';
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({
+ @Component({
+ selector: 'parent',
+ template: `and projection from {{name}} `
+ })
+ class Parent {
+ name: string = 'Parent';
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({
- 'Child content {$startTagNgContent}{$closeTagNgContent}':
- 'Contenu enfant {$startTagNgContent}{$closeTagNgContent}',
- 'and projection from {$interpolation}': 'et projection depuis {$interpolation}'
- });
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(`{
value // i18n(ph = "blah"),
plural,
=1 {one}
other {at least {{value}} .}
} `
- })
- class Parent {
- value = 3;
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({});
+ })
+ class Parent {
+ value = 3;
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({});
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
+ const fixture = TestBed.createComponent(Parent);
+ fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toContain('at least');
- });
+ expect(fixture.nativeElement.innerHTML).toContain('at least');
+ });
- it('should project ICUs in i18n blocks', () => {
- @Component(
- {selector: 'child', template: `and projection from {name, select, angular {Angular} other {{{name}}}} `
- })
- class Parent {
- name: string = 'Parent';
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({
+ @Component({
+ selector: 'parent',
+ template:
+ `and projection from {name, select, angular {Angular} other {{{name}}}} `
+ })
+ class Parent {
+ name: string = 'Parent';
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({
- 'Child content {$startTagNgContent}{$closeTagNgContent}':
- 'Contenu enfant {$startTagNgContent}{$closeTagNgContent}',
- 'and projection from {$icu}': 'et projection depuis {$icu}'
- });
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- `and projection from {{name}} `})
- class Parent {
- name: string = 'Parent';
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({
+ @Component({
+ selector: 'parent',
+ template: `and projection from {{name}} `
+ })
+ class Parent {
+ name: string = 'Parent';
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({
- 'Child content {$startTagNgContent}{$closeTagNgContent}': 'Contenu enfant',
- 'and projection from {$interpolation}': 'et projection depuis {$interpolation}'
- });
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual(`(
`
- })
- class MyContentApp {
- }
+ })
+ class MyContentApp {
+ }
- @Component({
- selector: 'my-app',
- template: `
+ @Component({
+ selector: 'my-app',
+ template: `
{type, select, A {A} B {B} other {other}}
`
- })
- class MyApp {
- type = 'A';
- condition = true;
- }
+ })
+ class MyApp {
+ type = 'A';
+ condition = true;
+ }
- TestBed.configureTestingModule({declarations: [MyApp, MyContentApp]});
+ TestBed.configureTestingModule({declarations: [MyApp, MyContentApp]});
- const fixture = TestBed.createComponent(MyApp);
- fixture.detectChanges();
+ const fixture = TestBed.createComponent(MyApp);
+ fixture.detectChanges();
- expect(fixture.nativeElement.textContent).toContain('(A)');
+ expect(fixture.nativeElement.textContent).toContain('(A)');
- // change `condition` to remove
- fixture.componentInstance.condition = false;
- fixture.detectChanges();
+ // change `condition` to remove
+ fixture.componentInstance.condition = false;
+ fixture.detectChanges();
- // should not contain 'A'
- expect(fixture.nativeElement.textContent).toBe('');
+ // should not contain 'A'
+ expect(fixture.nativeElement.textContent).toBe('');
- // display again
- fixture.componentInstance.type = 'B';
- fixture.componentInstance.condition = true;
- fixture.detectChanges();
+ // display again
+ fixture.componentInstance.type = 'B';
+ fixture.componentInstance.condition = true;
+ fixture.detectChanges();
- // expect that 'B' is now displayed
- expect(fixture.nativeElement.textContent).toContain('(B)');
- });
- });
+ // 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(//g, '');
- }
+ describe('queries', () => {
+ function toHtml(element: Element): string {
+ return element.innerHTML.replace(/\sng-reflect-\S*="[^"]*"/g, '')
+ .replace(//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() {}
- }
+ 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: ';
+ @Component({selector: 'div-query', template: ';
- // TODO(issue/24571): remove '!'.
- @ViewChild('vc', {read: ViewContainerRef, static: true})
- vc !: ViewContainerRef;
+ // TODO(issue/24571): remove '!'.
+ @ViewChild('vc', {read: ViewContainerRef, static: true})
+ vc !: ViewContainerRef;
- // TODO(issue/24571): remove '!'.
- @ContentChildren(TextDirective, {descendants: true})
- query !: QueryList;
+ // TODO(issue/24571): remove '!'.
+ @ContentChildren(TextDirective, {descendants: true})
+ query !: QueryList;
- create() { this.vc.createEmbeddedView(this.template); }
+ create() { this.vc.createEmbeddedView(this.template); }
- destroy() { this.vc.clear(); }
- }
+ destroy() { this.vc.clear(); }
+ }
- TestBed.configureTestingModule({declarations: [TextDirective, DivQuery]});
- loadTranslations({
+ TestBed.configureTestingModule({declarations: [TextDirective, DivQuery]});
+ loadTranslations({
- '{$startTagNgTemplate}{$startTagDiv_1}{$startTagDiv}{$startTagSpan}Content{$closeTagSpan}{$closeTagDiv}{$closeTagDiv}{$closeTagNgTemplate}':
- '{$startTagNgTemplate}Contenu{$closeTagNgTemplate}'
- });
- const fixture = initWithTemplate(AppComp, `
+ '{$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, `
{count, plural,
=0 {zero}
other {{{count}} {name, select,
cat {cats}
@@ -610,24 +630,25 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
other {animals}
}!}
}
`);
- expect(fixture.nativeElement.innerHTML).toEqual(`zero
`);
+ expect(fixture.nativeElement.innerHTML).toEqual(`zero
`);
- fixture.componentRef.instance.count = 4;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(`4 animaux!
`);
- });
+ fixture.componentRef.instance.count = 4;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(`4 animaux!
`);
+ });
- it('nested with interpolations in "other" blocks', () => {
- // Note: for some reason long string causing clang to reformat the entire file.
- const key = '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, ' +
- 'cat {cats} dog {dogs} other {animals}}!} other {other - {INTERPOLATION}}}';
- const translation =
- '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, ' +
- 'cat {chats} dog {chients} other {animaux}}!} other {other - {INTERPOLATION}}}';
- loadTranslations({[key]: translation});
+ it('nested with interpolations in "other" blocks', () => {
+ // Note: for some reason long string causing clang to reformat the entire file.
+ const key =
+ '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, ' +
+ 'cat {cats} dog {dogs} other {animals}}!} other {other - {INTERPOLATION}}}';
+ const translation =
+ '{VAR_PLURAL, plural, =0 {zero} =2 {{INTERPOLATION} {VAR_SELECT, select, ' +
+ 'cat {chats} dog {chients} other {animaux}}!} other {other - {INTERPOLATION}}}';
+ loadTranslations({[key]: translation});
- const fixture = initWithTemplate(AppComp, `{count, plural,
+ const fixture = initWithTemplate(AppComp, `{
value // i18n(ph = "blah"),
plural,
=1 {one}
other {at least {{value}} .}
} `
- })
- class Parent {
- value = 3;
- }
- TestBed.configureTestingModule({declarations: [Parent, Child]});
- loadTranslations({});
+ })
+ class Parent {
+ value = 3;
+ }
+ TestBed.configureTestingModule({declarations: [Parent, Child]});
+ loadTranslations({});
- const fixture = TestBed.createComponent(Parent);
- fixture.detectChanges();
+ const fixture = TestBed.createComponent(Parent);
+ fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toContain('at least');
- });
+ expect(fixture.nativeElement.innerHTML).toContain('at least');
+ });
- it('with empty values', () => {
- const fixture = initWithTemplate(AppComp, `{count, select, 10 {} 20 {twenty} other {other}}`);
+ it('with empty values', () => {
+ const fixture =
+ initWithTemplate(AppComp, `{count, select, 10 {} 20 {twenty} other {other}}`);
- const element = fixture.nativeElement;
- expect(element).toHaveText('other');
- });
+ const element = fixture.nativeElement;
+ expect(element).toHaveText('other');
+ });
- it('inside a container when creating a view via vcr.createEmbeddedView', () => {
- @Directive({
- selector: '[someDir]',
- })
- class Dir {
- constructor(
- private readonly viewContainerRef: ViewContainerRef,
- private readonly templateRef: TemplateRef) {}
+ it('inside a container when creating a view via vcr.createEmbeddedView', () => {
+ @Directive({
+ selector: '[someDir]',
+ })
+ class Dir {
+ constructor(
+ private readonly viewContainerRef: ViewContainerRef,
+ private readonly templateRef: TemplateRef) {}
- ngOnInit() { this.viewContainerRef.createEmbeddedView(this.templateRef); }
- }
+ ngOnInit() { this.viewContainerRef.createEmbeddedView(this.templateRef); }
+ }
- @Component({
- selector: 'my-cmp',
- template: `
+ @Component({
+ selector: 'my-cmp',
+ template: `
{
count,
plural,
@@ -755,68 +778,70 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
other {OTHER}
}
`,
- })
- class App {
- count = 1;
- condition = true;
- }
+ })
+ 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(') {
- dir = this;
- }
+ it('with nested ICU expression and inside a container when creating a view via vcr.createEmbeddedView',
+ () => {
+ let dir: Dir|null = null;
+ @Directive({
+ selector: '[someDir]',
+ })
+ class Dir {
+ constructor(
+ private readonly viewContainerRef: ViewContainerRef,
+ private readonly templateRef: TemplateRef) {
+ dir = this;
+ }
- attachEmbeddedView() { this.viewContainerRef.createEmbeddedView(this.templateRef); }
- }
+ attachEmbeddedView() {
+ this.viewContainerRef.createEmbeddedView(this.templateRef);
+ }
+ }
- @Component({
- selector: 'my-cmp',
- template: `
+ @Component({
+ selector: 'my-cmp',
+ template: `
{
count,
plural,
@@ -828,36 +853,36 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
}!}
}
`,
- })
- class App {
- count = 1;
- }
+ })
+ 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('
{type, select, A { A } B { B } other { C }}
@@ -867,31 +892,31 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
`,
- })
- class Comp {
- type = 'A';
- visible = true;
- isVisible() { return true; }
- }
+ })
+ class Comp {
+ type = 'A';
+ visible = true;
+ isVisible() { return true; }
+ }
- TestBed.configureTestingModule({declarations: [Comp]});
+ TestBed.configureTestingModule({declarations: [Comp]});
- const fixture = TestBed.createComponent(Comp);
- fixture.detectChanges();
+ const fixture = TestBed.createComponent(Comp);
+ fixture.detectChanges();
- expect(fixture.debugElement.nativeElement.innerHTML).toContain('A');
+ expect(fixture.debugElement.nativeElement.innerHTML).toContain('A');
- fixture.componentInstance.visible = false;
- fixture.detectChanges();
+ fixture.componentInstance.visible = false;
+ fixture.detectChanges();
- expect(fixture.debugElement.nativeElement.innerHTML).not.toContain('A');
- expect(fixture.debugElement.nativeElement.innerHTML).toContain('C1');
- });
+ expect(fixture.debugElement.nativeElement.innerHTML).not.toContain('A');
+ expect(fixture.debugElement.nativeElement.innerHTML).toContain('C1');
+ });
- it('with named interpolations', () => {
- @Component({
- selector: 'comp',
- template: `
+ it('with named interpolations', () => {
+ @Component({
+ selector: 'comp',
+ template: `
{
type,
select,
@@ -900,32 +925,32 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
other {other - {{ typeC // i18n(ph="PH WITH SPACES") }}}
}
`,
- })
- class Comp {
- type = 'A';
- typeA = 'Type A';
- typeB = 'Type B';
- typeC = 'Type C';
- }
+ })
+ class Comp {
+ type = 'A';
+ typeA = 'Type A';
+ typeB = 'Type B';
+ typeC = 'Type C';
+ }
- TestBed.configureTestingModule({declarations: [Comp]});
+ TestBed.configureTestingModule({declarations: [Comp]});
- const fixture = TestBed.createComponent(Comp);
- fixture.detectChanges();
+ const fixture = TestBed.createComponent(Comp);
+ fixture.detectChanges();
- expect(fixture.debugElement.nativeElement.innerHTML).toContain('A - Type A');
+ expect(fixture.debugElement.nativeElement.innerHTML).toContain('A - Type A');
- fixture.componentInstance.type = 'C'; // trigger "other" case
- fixture.detectChanges();
+ fixture.componentInstance.type = 'C'; // trigger "other" case
+ fixture.detectChanges();
- expect(fixture.debugElement.nativeElement.innerHTML).not.toContain('A - Type A');
- expect(fixture.debugElement.nativeElement.innerHTML).toContain('other - Type C');
- });
+ expect(fixture.debugElement.nativeElement.innerHTML).not.toContain('A - Type A');
+ expect(fixture.debugElement.nativeElement.innerHTML).toContain('other - Type C');
+ });
- it('should work inside an ngTemplateOutlet inside an ngFor', () => {
- @Component({
- selector: 'app',
- template: `
+ it('should work inside an ngTemplateOutlet inside an ngFor', () => {
+ @Component({
+ selector: 'app',
+ template: `
{
type,
select,
@@ -940,171 +965,176 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
`
- })
- class AppComponent {
- types = ['A', 'B', 'C'];
- }
+ })
+ class AppComponent {
+ types = ['A', 'B', 'C'];
+ }
- TestBed.configureTestingModule({declarations: [AppComponent]});
+ TestBed.configureTestingModule({declarations: [AppComponent]});
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
- expect(fixture.debugElement.nativeElement.innerHTML).toContain('A');
- expect(fixture.debugElement.nativeElement.innerHTML).toContain('B');
- });
- });
+ expect(fixture.debugElement.nativeElement.innerHTML).toContain('A');
+ expect(fixture.debugElement.nativeElement.innerHTML).toContain('B');
+ });
+ });
- describe('should support attributes', () => {
- it('text', () => {
- loadTranslations({'text': 'texte'});
- const fixture = initWithTemplate(AppComp, ``);
- expect(fixture.nativeElement.innerHTML).toEqual(``);
- });
+ describe('should support attributes', () => {
+ it('text', () => {
+ loadTranslations({'text': 'texte'});
+ const fixture = initWithTemplate(AppComp, ``);
+ expect(fixture.nativeElement.innerHTML).toEqual(``);
+ });
- it('interpolations', () => {
- loadTranslations({'hello {$interpolation}': 'bonjour {$interpolation}'});
- const fixture =
- initWithTemplate(AppComp, ``);
- expect(fixture.nativeElement.innerHTML).toEqual(``);
+ it('interpolations', () => {
+ loadTranslations({'hello {$INTERPOLATION}': 'bonjour {$INTERPOLATION}'});
+ const fixture =
+ initWithTemplate(AppComp, ``);
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(``);
- fixture.componentRef.instance.name = 'John';
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual(``);
- });
+ fixture.componentRef.instance.name = 'John';
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual(``);
+ });
- it('with pipes', () => {
- loadTranslations({'hello {$interpolation}': 'bonjour {$interpolation}'});
- const fixture = initWithTemplate(
- AppComp, ``);
- expect(fixture.nativeElement.innerHTML).toEqual(``);
- });
+ it('with pipes', () => {
+ loadTranslations({'hello {$INTERPOLATION}': 'bonjour {$INTERPOLATION}'});
+ const fixture = initWithTemplate(
+ AppComp, ``);
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(``);
+ });
- it('multiple attributes', () => {
- loadTranslations({'hello {$interpolation}': 'bonjour {$interpolation}'});
- const fixture = initWithTemplate(
- AppComp,
- ``);
- expect(fixture.nativeElement.innerHTML)
- .toEqual(``);
+ it('multiple attributes', () => {
+ loadTranslations({'hello {$INTERPOLATION}': 'bonjour {$INTERPOLATION}'});
+ const fixture = initWithTemplate(
+ AppComp,
+ ``);
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(``);
- fixture.componentRef.instance.name = 'John';
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(``);
- });
+ fixture.componentRef.instance.name = 'John';
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(``);
+ });
- it('on removed elements', () => {
- loadTranslations({'text': 'texte', '{$startTagSpan}content{$closeTagSpan}': 'contenu'});
- const fixture =
- initWithTemplate(AppComp, `{count, plural,
=0 {zero}
=2 {{{count}} {name, select,
cat {cats}
@@ -636,24 +657,25 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
}!}
other {other - {{count}}}
}
`);
- expect(fixture.nativeElement.innerHTML).toEqual(`zero
`);
+ expect(fixture.nativeElement.innerHTML).toEqual(`zero
`);
- fixture.componentRef.instance.count = 2;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(`2 animaux!
`);
+ fixture.componentRef.instance.count = 2;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(`2 animaux!
`);
- fixture.componentRef.instance.count = 4;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual(`other - 4
`);
- });
+ fixture.componentRef.instance.count = 4;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual(`other - 4
`);
+ });
- it('should return the correct plural form for ICU expressions when using a specific locale',
- () => {
- registerLocaleData(localeRo);
- TestBed.configureTestingModule({providers: [{provide: LOCALE_ID, useValue: 'ro'}]});
- // We could also use `TestBed.overrideProvider(LOCALE_ID, {useValue: 'ro'});`
- const fixture = initWithTemplate(AppComp, `
+ it('should return the correct plural form for ICU expressions when using a specific locale',
+ () => {
+ 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}
@@ -661,93 +683,94 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
=other {lots of emails}
}`);
- expect(fixture.nativeElement.innerHTML).toEqual('no email');
+ expect(fixture.nativeElement.innerHTML).toEqual('no email');
- // Change detection cycle, no model changes
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual('no email');
+ // Change detection cycle, no model changes
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('no email');
- fixture.componentInstance.count = 3;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual('a few emails');
+ fixture.componentInstance.count = 3;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('a few emails');
- fixture.componentInstance.count = 1;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual('one email');
+ fixture.componentInstance.count = 1;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('one email');
- fixture.componentInstance.count = 10;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual('a few emails');
+ fixture.componentInstance.count = 10;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('a few emails');
- fixture.componentInstance.count = 20;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual('lots of emails');
+ fixture.componentInstance.count = 20;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('lots of emails');
- fixture.componentInstance.count = 0;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual('no email');
- });
+ fixture.componentInstance.count = 0;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('no email');
+ });
- it('projection', () => {
- @Component({selector: 'child', template: 'ONE
ONE
OTHER
OTHER
ONE
ONE
2 animals!
2 animals!
ONE
ONE
content
`);
- expect(fixture.nativeElement.innerHTML).toEqual(`contenu
`);
- });
+ it('on removed elements', () => {
+ loadTranslations(
+ {'text': 'texte', '{$START_TAG_SPAN}content{$CLOSE_TAG_SPAN}': 'contenu'});
+ const fixture = initWithTemplate(
+ AppComp, `content
`);
+ expect(fixture.nativeElement.innerHTML).toEqual(`contenu
`);
+ });
- it('with custom interpolation config', () => {
- loadTranslations({'Hello {$interpolation}': 'Bonjour {$interpolation}'});
- const interpolation = ['{%', '%}'] as[string, string];
- TestBed.overrideComponent(AppComp, {set: {interpolation}});
- const fixture =
- initWithTemplate(AppComp, ``);
+ it('with custom interpolation config', () => {
+ loadTranslations({'Hello {$INTERPOLATION}': 'Bonjour {$INTERPOLATION}'});
+ const interpolation = ['{%', '%}'] as[string, string];
+ TestBed.overrideComponent(AppComp, {set: {interpolation}});
+ const fixture = initWithTemplate(
+ AppComp, ``);
- const element = fixture.nativeElement.firstChild;
- expect(element.title).toBe('Bonjour Angular');
- });
+ const element = fixture.nativeElement.firstChild;
+ expect(element.title).toBe('Bonjour Angular');
+ });
- it('in nested template', () => {
- loadTranslations({'Item {$interpolation}': 'Article {$interpolation}'});
- const fixture = initWithTemplate(AppComp, `
+ it('in nested template', () => {
+ loadTranslations({'Item {$INTERPOLATION}': 'Article {$INTERPOLATION}'});
+ const fixture = initWithTemplate(AppComp, `
`);
+ it('should add i18n attributes on self-closing tags', () => {
+ loadTranslations({'Hello {$INTERPOLATION}': 'Bonjour {$INTERPOLATION}'});
+ const fixture = initWithTemplate(
+ AppComp, ``);
- const element = fixture.nativeElement.firstChild;
- expect(element.title).toBe('Bonjour Angular');
- });
+ const element = fixture.nativeElement.firstChild;
+ expect(element.title).toBe('Bonjour Angular');
+ });
- it('should apply i18n attributes during second template pass', () => {
- @Directive({
- selector: '[test]',
- inputs: ['test'],
- exportAs: 'dir',
- })
- class Dir {
- }
+ it('should apply i18n attributes during second template pass', () => {
+ @Directive({
+ selector: '[test]',
+ inputs: ['test'],
+ exportAs: 'dir',
+ })
+ class Dir {
+ }
- @Component({
- selector: 'other',
- template: ``
- })
- class Other {
- }
+ @Component({
+ selector: 'other',
+ template: ``
+ })
+ class Other {
+ }
- @Component({
- selector: 'blah',
- template: `
+ @Component({
+ selector: 'blah',
+ template: `
trad: {exp1, plural,
=0 {no emails!}
@@ -1112,80 +1142,81 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
other {{{exp1}} emails}
}
`
- })
- class MyApp {
- exp1 = 1;
- exp2 = 2;
- }
+ })
+ class MyApp {
+ exp1 = 1;
+ exp2 = 2;
+ }
- TestBed.configureTestingModule({declarations: [ClsDir, MyApp]});
- loadTranslations({
- // Not that this translation switches the order of the expressions!
- 'start {$interpolation} middle {$interpolation_1} end':
- 'début {$interpolation_1} milieu {$interpolation} fin',
- '{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}}',
- ' trad: {$icu} ': ' traduction: {$icu} '
- });
- const fixture = TestBed.createComponent(MyApp);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- ` traduction: un email ` +
- `
`);
+ TestBed.configureTestingModule({declarations: [ClsDir, MyApp]});
+ loadTranslations({
+ // Not that this translation switches the order of the expressions!
+ 'start {$INTERPOLATION} middle {$INTERPOLATION_1} end':
+ 'début {$INTERPOLATION_1} milieu {$INTERPOLATION} fin',
+ '{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}}',
+ ' trad: {$ICU} ': ' traduction: {$ICU} '
+ });
+ const fixture = TestBed.createComponent(MyApp);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(
+ ` traduction: un email ` +
+ `
`);
- directiveInstances.forEach(instance => instance.klass = 'bar');
- fixture.componentRef.instance.exp1 = 2;
- fixture.componentRef.instance.exp2 = 3;
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML)
- .toEqual(
- ``);
- });
+ directiveInstances.forEach(instance => instance.klass = 'bar');
+ fixture.componentRef.instance.exp1 = 2;
+ fixture.componentRef.instance.exp2 = 3;
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML)
+ .toEqual(
+ ``);
+ });
- 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;
- }
+ 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;
- }
+ @Input()
+ get value() { return this.val; }
+ set value(value: string) {
+ calledValue = true;
+ this.val = value;
+ }
+ val !: string;
+ }
- TestBed.configureTestingModule({declarations: [AppComp, MyComp]});
- loadTranslations({'Hello {$interpolation}': 'Bonjour {$interpolation}', 'works': 'fonctionne'});
- const fixture = initWithTemplate(
- AppComp,
- `Je suis projeté depuis Parent
Je suis projeté depuis Parent
Bonjour monde!
Bonjour monde!
Bonjour monde!
Bonjour monde!
Content projected from
`
- })
- class Child {
- }
+ it('should project content in i18n blocks', () => {
+ @Component({
+ selector: 'child',
+ template: `Content projected from
`
+ })
+ class Child {
+ }
- @Component({selector: 'parent', template: `Contenu projeté depuis Parent
Contenu projeté depuis Parent
Contenu projeté depuis Parent component
Contenu projeté depuis Parent component
Content projected from
`
- })
- class Child {
- }
+ it('should project content in i18n blocks with placeholders', () => {
+ @Component({
+ selector: 'child',
+ template: `Content projected from
`
+ })
+ class Child {
+ }
- @Component({selector: 'parent', template: `Parent a projeté le contenu
Parent a projeté le contenu
Child content
`})
- class Child {
- }
+ it('should project translated content in i18n blocks', () => {
+ @Component({
+ selector: 'child',
+ template: `Child content
`
+ })
+ class Child {
+ }
- @Component({selector: 'parent', template: `Contenu enfant et projection depuis Parent
Contenu enfant et projection depuis Parent
Child content
`})
- class Child {
- }
+ it('should project ICUs in i18n blocks', () => {
+ @Component({
+ selector: 'child',
+ template: `Child content
`
+ })
+ class Child {
+ }
- @Component({
- selector: 'parent',
- template:
- `Contenu enfant et projection depuis Parent
Contenu enfant et projection depuis Parent
Contenu enfant et projection depuis Angular
Contenu enfant et projection depuis Angular
Child content
`})
- class Child {
- }
+ it(`shouldn't project deleted projections in i18n blocks`, () => {
+ @Component({
+ selector: 'child',
+ template: `Child content
`
+ })
+ class Child {
+ }
- @Component({selector: 'parent', template: `Contenu enfant
Contenu enfant
@@ -1613,28 +1665,28 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
`);
- const q = fixture.debugElement.children[0].references.q;
- expect(q.query.length).toEqual(0);
+ 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(`Contenu `);
+ // Create embedded view
+ q.create();
+ fixture.detectChanges();
+ expect(q.query.length).toEqual(1);
+ expect(toHtml(fixture.nativeElement))
+ .toEqual(`Contenu `);
- // Disable ng-if
- fixture.componentInstance.visible = false;
- fixture.detectChanges();
- expect(q.query.length).toEqual(0);
- expect(toHtml(fixture.nativeElement))
- .toEqual(`Contenu `);
- });
- });
+ // Disable ng-if
+ fixture.componentInstance.visible = false;
+ fixture.detectChanges();
+ expect(q.query.length).toEqual(0);
+ expect(toHtml(fixture.nativeElement))
+ .toEqual(`Contenu `);
+ });
+ });
- it('should not alloc expando slots when there is no new variable to create', () => {
- @Component({
- template: `
+ it('should not alloc expando slots when there is no new variable to create', () => {
+ @Component({
+ template: `
, template: string) {
TestBed.overrideComponent(compType, {set: {template}});
diff --git a/packages/core/test/acceptance/view_container_ref_spec.ts b/packages/core/test/acceptance/view_container_ref_spec.ts
index 2442cf5ed9..efa28c70b0 100644
--- a/packages/core/test/acceptance/view_container_ref_spec.ts
+++ b/packages/core/test/acceptance/view_container_ref_spec.ts
@@ -20,10 +20,10 @@ describe('ViewContainerRef', () => {
const TRANSLATIONS: any = {
'Bar': 'o',
- '{$startTagBefore}{$closeTagBefore}{$startTagDiv}{$startTagInside}{$closeTagInside}{$closeTagDiv}{$startTagAfter}{$closeTagAfter}':
- 'F{$startTagDiv}{$closeTagDiv}o',
- '{$startTagBefore}{$closeTagBefore}{$startTagDiv}{$startTagIn}{$closeTagIn}{$closeTagDiv}{$startTagAfter}{$closeTagAfter}':
- '{$startTagDiv}{$closeTagDiv}{$startTagBefore}{$closeTagBefore}'
+ '{$START_TAG_BEFORE}{$CLOSE_TAG_BEFORE}{$START_TAG_DIV}{$START_TAG_INSIDE}{$CLOSE_TAG_INSIDE}{$CLOSE_TAG_DIV}{$START_TAG_AFTER}{$CLOSE_TAG_AFTER}':
+ 'F{$START_TAG_DIV}{$CLOSE_TAG_DIV}o',
+ '{$START_TAG_BEFORE}{$CLOSE_TAG_BEFORE}{$START_TAG_DIV}{$START_TAG_IN}{$CLOSE_TAG_IN}{$CLOSE_TAG_DIV}{$START_TAG_AFTER}{$CLOSE_TAG_AFTER}':
+ '{$START_TAG_DIV}{$CLOSE_TAG_DIV}{$START_TAG_BEFORE}{$CLOSE_TAG_BEFORE}'
};
/**
diff --git a/packages/core/test/bundling/todo_i18n/translations.ts b/packages/core/test/bundling/todo_i18n/translations.ts
index fa79645d3c..f0871aa370 100644
--- a/packages/core/test/bundling/todo_i18n/translations.ts
+++ b/packages/core/test/bundling/todo_i18n/translations.ts
@@ -10,12 +10,12 @@ import {loadTranslations} from '@angular/localize/run_time';
export const translations = {
'What needs to be done?': `Qu'y a-t-il à faire ?`,
- '{$startHeadingLevel1}todos{$closeHeadingLevel1}{$tagInput}':
- '{$startHeadingLevel1}liste de tâches{$closeHeadingLevel1}{$tagInput}',
+ '{$START_HEADING_LEVEL1}todos{$CLOSE_HEADING_LEVEL1}{$TAG_INPUT}':
+ '{$START_HEADING_LEVEL1}liste de tâches{$CLOSE_HEADING_LEVEL1}{$TAG_INPUT}',
'{VAR_PLURAL, plural, =1 {item left} other {items left}}':
'{VAR_PLURAL, plural, =1 {tâche restante} other {tâches restantes}}',
- '{$startTagStrong}{$interpolation}{$closeTagStrong}{$icu}':
- '{$startTagStrong}{$interpolation}{$closeTagStrong} {$icu}',
+ '{$START_TAG_STRONG}{$INTERPOLATION}{$CLOSE_TAG_STRONG}{$ICU}':
+ '{$START_TAG_STRONG}{$INTERPOLATION}{$CLOSE_TAG_STRONG} {$ICU}',
' Clear completed ': ' Effacer terminés ',
'Demonstrate Components': 'Démontrer les components',
'Demonstrate Structural Directives': 'Démontrer les directives structurelles',
Some content
@@ -1642,20 +1694,21 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
`
- })
- class ContentElementDialog {
- data = false;
- }
+ })
+ class ContentElementDialog {
+ data = false;
+ }
- TestBed.configureTestingModule({declarations: [DialogDir, CloseBtn, ContentElementDialog]});
+ TestBed.configureTestingModule(
+ {declarations: [DialogDir, CloseBtn, ContentElementDialog]});
- const fixture = TestBed.createComponent(ContentElementDialog);
- fixture.detectChanges();
- expect(fixture.nativeElement.innerHTML).toEqual(``);
- });
-});
+ });
+ });
function initWithTemplate(compType: Type