From db42aa4bc135af6a40cb47ad41c774980d961acb Mon Sep 17 00:00:00 2001 From: Marc Laval Date: Mon, 13 Mar 2017 11:40:22 +0100 Subject: [PATCH] test(compiler): refactor i18n integration test --- .../compiler/test/i18n/integration_common.ts | 158 +++++++++++++++++ ...on_spec.ts => integration_xmb_xtb_spec.ts} | 161 ++---------------- 2 files changed, 168 insertions(+), 151 deletions(-) create mode 100644 packages/compiler/test/i18n/integration_common.ts rename packages/compiler/test/i18n/{integration_spec.ts => integration_xmb_xtb_spec.ts} (50%) diff --git a/packages/compiler/test/i18n/integration_common.ts b/packages/compiler/test/i18n/integration_common.ts new file mode 100644 index 00000000000000..1ce8b3503d366f --- /dev/null +++ b/packages/compiler/test/i18n/integration_common.ts @@ -0,0 +1,158 @@ +/** + * @license + * Copyright Google Inc. 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 + */ + +import {NgLocalization} from '@angular/common'; +import {Component, DebugElement} from '@angular/core'; +import {ComponentFixture} from '@angular/core/testing'; + +import {By} from '@angular/platform-browser/src/dom/debug/by'; +import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util'; +import {expect} from '@angular/platform-browser/testing/src/matchers'; + +@Component({ + selector: 'i18n-cmp', + template: '', +}) +export class I18nComponent { + count: number; + sex: string; + sexB: string; + response: any = {getItemsList: (): any[] => []}; +} + +export class FrLocalization extends NgLocalization { + getPluralCategory(value: number): string { + switch (value) { + case 0: + case 1: + return 'one'; + default: + return 'other'; + } + } +} + +export function validateHtml( + tb: ComponentFixture, cmp: I18nComponent, el: DebugElement) { + expectHtml(el, 'h1').toBe('

attributs i18n sur les balises

'); + expectHtml(el, '#i18n-1').toBe('

imbriqué

'); + expectHtml(el, '#i18n-2').toBe('

imbriqué

'); + expectHtml(el, '#i18n-3').toBe('

avec des espaces réservés

'); + expectHtml(el, '#i18n-3b') + .toBe( + '

avec des espaces réservés

'); + expectHtml(el, '#i18n-4').toBe('

'); + expectHtml(el, '#i18n-5').toBe('

'); + expectHtml(el, '#i18n-6').toBe('

'); + + cmp.count = 0; + tb.detectChanges(); + expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('zero'); + expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('zero'); + cmp.count = 1; + tb.detectChanges(); + expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('un'); + expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('un'); + expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('un'); + cmp.count = 2; + tb.detectChanges(); + expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('deux'); + expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('deux'); + expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('deux'); + cmp.count = 3; + tb.detectChanges(); + expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('beaucoup'); + expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('beaucoup'); + expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('beaucoup'); + + cmp.sex = 'm'; + cmp.sexB = 'f'; + tb.detectChanges(); + expect(el.query(By.css('#i18n-8')).nativeElement).toHaveText('homme'); + expect(el.query(By.css('#i18n-8b')).nativeElement).toHaveText('femme'); + cmp.sex = 'f'; + tb.detectChanges(); + expect(el.query(By.css('#i18n-8')).nativeElement).toHaveText('femme'); + + cmp.count = 123; + tb.detectChanges(); + expectHtml(el, '#i18n-9').toEqual('
count = 123
'); + + cmp.sex = 'f'; + tb.detectChanges(); + expectHtml(el, '#i18n-10').toEqual('
sexe = f
'); + + expectHtml(el, '#i18n-11').toEqual('
custom name
'); + expectHtml(el, '#i18n-12').toEqual('

Balises dans les commentaires html

'); + expectHtml(el, '#i18n-13').toBe('
'); + expectHtml(el, '#i18n-15').toMatch(/ca devrait<\/b> marcher/); + expectHtml(el, '#i18n-16').toMatch(/avec un ID explicite/); + expectHtml(el, '#i18n-18') + .toEqual('
FOOBAR
'); +} + +function expectHtml(el: DebugElement, cssSelector: string): any { + return expect(stringifyElement(el.query(By.css(cssSelector)).nativeElement)); +} + +export const HTML = ` +
+

i18n attribute on tags

+ +

nested

+ +

nested

+ +

with placeholders

+

with placeholders

+ +
+

+

+

+
+ + +
{count, plural, =0 {zero} =1 {one} =2 {two} other {many}}
+ +
+ {sex, select, m {male} f {female}} +
+
+ {sexB, select, m {male} f {female}} +
+ +
{{ "count = " + count }}
+
sex = {{ sex }}
+
{{ "custom name" //i18n(ph="CUSTOM_NAME") }}
+
+ + +

Markers in html comments

+
+
{count, plural, =0 {zero} =1 {one} =2 {two} other {many}}
+ + +
it should work
+ +
with an explicit ID
+
{count, plural, =0 {zero} =1 {one} =2 {two} other {many}}
+ + +
{ + response.getItemsList().length, + plural, + =0 {Found no results} + =1 {Found one result} + other {Found {{response.getItemsList().length}} results} +}
+ +
foobar
+ +
{{ 'test' //i18n(ph="map name") }}
+`; diff --git a/packages/compiler/test/i18n/integration_spec.ts b/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts similarity index 50% rename from packages/compiler/test/i18n/integration_spec.ts rename to packages/compiler/test/i18n/integration_xmb_xtb_spec.ts index 573737e7c37bb3..d4e78b2958c478 100644 --- a/packages/compiler/test/i18n/integration_spec.ts +++ b/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts @@ -12,16 +12,16 @@ import {MessageBundle} from '@angular/compiler/src/i18n/message_bundle'; import {Xmb} from '@angular/compiler/src/i18n/serializers/xmb'; import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser'; import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/interpolation_config'; -import {Component, DebugElement, TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core'; -import {TestBed, async} from '@angular/core/testing'; -import {By} from '@angular/platform-browser/src/dom/debug/by'; -import {stringifyElement} from '@angular/platform-browser/testing/src/browser_util'; +import {DebugElement, TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {expect} from '@angular/platform-browser/testing/src/matchers'; import {SpyResourceLoader} from '../spies'; +import {FrLocalization, HTML, I18nComponent, validateHtml} from './integration_common'; + export function main() { - describe('i18n integration spec', () => { + describe('i18n XMB/XTB integration spec', () => { beforeEach(async(() => { TestBed.configureCompiler({ @@ -45,100 +45,16 @@ export function main() { }); it('should translate templates', () => { - const tb = TestBed.overrideTemplate(I18nComponent, HTML).createComponent(I18nComponent); - const cmp = tb.componentInstance; - const el = tb.debugElement; - - expectHtml(el, 'h1').toBe('

attributs i18n sur les balises

'); - expectHtml(el, '#i18n-1').toBe('

imbriqué

'); - expectHtml(el, '#i18n-2').toBe('

imbriqué

'); - expectHtml(el, '#i18n-3') - .toBe('

avec des espaces réservés

'); - expectHtml(el, '#i18n-3b') - .toBe( - '

avec des espaces réservés

'); - expectHtml(el, '#i18n-4') - .toBe('

'); - expectHtml(el, '#i18n-5').toBe('

'); - expectHtml(el, '#i18n-6').toBe('

'); - - cmp.count = 0; - tb.detectChanges(); - expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('zero'); - expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('zero'); - cmp.count = 1; - tb.detectChanges(); - expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('un'); - expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('un'); - expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('un'); - cmp.count = 2; - tb.detectChanges(); - expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('deux'); - expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('deux'); - expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('deux'); - cmp.count = 3; - tb.detectChanges(); - expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('beaucoup'); - expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('beaucoup'); - expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('beaucoup'); - - cmp.sex = 'm'; - cmp.sexB = 'f'; - tb.detectChanges(); - expect(el.query(By.css('#i18n-8')).nativeElement).toHaveText('homme'); - expect(el.query(By.css('#i18n-8b')).nativeElement).toHaveText('femme'); - cmp.sex = 'f'; - tb.detectChanges(); - expect(el.query(By.css('#i18n-8')).nativeElement).toHaveText('femme'); - - cmp.count = 123; - tb.detectChanges(); - expectHtml(el, '#i18n-9').toEqual('
count = 123
'); + const tb: ComponentFixture = + TestBed.overrideTemplate(I18nComponent, HTML).createComponent(I18nComponent); + const cmp: I18nComponent = tb.componentInstance; + const el: DebugElement = tb.debugElement; - cmp.sex = 'f'; - tb.detectChanges(); - expectHtml(el, '#i18n-10').toEqual('
sexe = f
'); - - expectHtml(el, '#i18n-11').toEqual('
custom name
'); - expectHtml(el, '#i18n-12') - .toEqual('

Balises dans les commentaires html

'); - expectHtml(el, '#i18n-13') - .toBe('
'); - expectHtml(el, '#i18n-15').toMatch(/ca devrait<\/b> marcher/); - expectHtml(el, '#i18n-16').toMatch(/avec un ID explicite/); - expectHtml(el, '#i18n-18') - .toEqual('
FOOBAR
'); + validateHtml(tb, cmp, el); }); }); } -function expectHtml(el: DebugElement, cssSelector: string): any { - return expect(stringifyElement(el.query(By.css(cssSelector)).nativeElement)); -} - -@Component({ - selector: 'i18n-cmp', - template: '', -}) -class I18nComponent { - count: number; - sex: string; - sexB: string; - response: any = {getItemsList: (): any[] => []}; -} - -class FrLocalization extends NgLocalization { - getPluralCategory(value: number): string { - switch (value) { - case 0: - case 1: - return 'one'; - default: - return 'other'; - } - } -} - const XTB = ` attributs i18n sur les balises @@ -194,60 +110,3 @@ const XMB = ` i18n attribute on tags {VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found INTERPOLATION results} } foo<a>bar</a> MAP_NAME`; - -const HTML = ` -
-

i18n attribute on tags

- -

nested

- -

nested

- -

with placeholders

-

with placeholders

- -
-

-

-

-
- - -
{count, plural, =0 {zero} =1 {one} =2 {two} other {many}}
- -
- {sex, select, m {male} f {female}} -
-
- {sexB, select, m {male} f {female}} -
- -
{{ "count = " + count }}
-
sex = {{ sex }}
-
{{ "custom name" //i18n(ph="CUSTOM_NAME") }}
-
- - -

Markers in html comments

-
-
{count, plural, =0 {zero} =1 {one} =2 {two} other {many}}
- - -
it should work
- -
with an explicit ID
-
{count, plural, =0 {zero} =1 {one} =2 {two} other {many}}
- - -
{ - response.getItemsList().length, - plural, - =0 {Found no results} - =1 {Found one result} - other {Found {{response.getItemsList().length}} results} -}
- -
foobar
- -
{{ 'test' //i18n(ph="map name") }}
-`;