From 32e315755bc0504b2b6443d263cd47901761c030 Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Wed, 2 Oct 2019 18:17:56 +0100
Subject: [PATCH] test(ivy): add runtime translations to integration test app
 (#32867)

PR Close #32867
---
 .../e2e/src/app.e2e-spec.ts                   | 15 ++++++++-----
 .../e2e/src/app.po.ts                         | 14 ++++--------
 .../src/app/app.component.html                |  6 +++--
 .../src/app/app.component.spec.ts             | 17 +++++++-------
 .../src/app/app.component.ts                  | 12 +++++-----
 .../src/app/app.module.ts                     | 22 ++++++++-----------
 .../cli-hello-world-ivy-i18n/src/polyfills.ts | 11 ++++++++++
 7 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/integration/cli-hello-world-ivy-i18n/e2e/src/app.e2e-spec.ts b/integration/cli-hello-world-ivy-i18n/e2e/src/app.e2e-spec.ts
index 29e27e6edb..7abacd1d94 100644
--- a/integration/cli-hello-world-ivy-i18n/e2e/src/app.e2e-spec.ts
+++ b/integration/cli-hello-world-ivy-i18n/e2e/src/app.e2e-spec.ts
@@ -1,19 +1,22 @@
-import { AppPage } from './app.po';
+import {AppPage} from './app.po';
 
 describe('cli-hello-world-ivy App', () => {
   let page: AppPage;
 
-  beforeEach(() => {
-    page = new AppPage();
+  beforeEach(() => { page = new AppPage(); });
+
+  it('should display title', () => {
+    page.navigateTo();
+    expect(page.getHeading()).toEqual('Bonjour cli-hello-world-ivy-compat!');
   });
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to cli-hello-world-ivy-compat!');
+    expect(page.getParagraph('message')).toEqual('Bienvenue sur l\'application i18n.');
   });
 
   it('the percent pipe should work', () => {
     page.navigateTo();
-    expect(page.getPipeContent()).toEqual('100 % awesome');
-  })
+    expect(page.getParagraph('pipe')).toEqual('100 % awesome');
+  });
 });
diff --git a/integration/cli-hello-world-ivy-i18n/e2e/src/app.po.ts b/integration/cli-hello-world-ivy-i18n/e2e/src/app.po.ts
index ae3d5f7f15..d7375c9072 100644
--- a/integration/cli-hello-world-ivy-i18n/e2e/src/app.po.ts
+++ b/integration/cli-hello-world-ivy-i18n/e2e/src/app.po.ts
@@ -1,15 +1,9 @@
-import { browser, by, element } from 'protractor';
+import {browser, by, element} from 'protractor';
 
 export class AppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
+  navigateTo() { return browser.get('/'); }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+  getHeading() { return element(by.css('app-root h1')).getText(); }
 
-  getPipeContent() {
-    return element(by.css('app-root p')).getText();
-  }
+  getParagraph(name: string) { return element(by.css('app-root p#' + name)).getText(); }
 }
diff --git a/integration/cli-hello-world-ivy-i18n/src/app/app.component.html b/integration/cli-hello-world-ivy-i18n/src/app/app.component.html
index 9cc50c0b62..e91a085d47 100644
--- a/integration/cli-hello-world-ivy-i18n/src/app/app.component.html
+++ b/integration/cli-hello-world-ivy-i18n/src/app/app.component.html
@@ -1,11 +1,13 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
   <h1 i18n>
-    Welcome to {{ title }}!
+    Hello {{ title }}!
   </h1>
+
+  <p id="message">{{ message }}</p>
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
-<p>{{ 1 | percent }} awesome</p>
+<p id="pipe">{{ 1 | percent }} awesome</p>
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>
diff --git a/integration/cli-hello-world-ivy-i18n/src/app/app.component.spec.ts b/integration/cli-hello-world-ivy-i18n/src/app/app.component.spec.ts
index 9d618f8944..7e164fe335 100644
--- a/integration/cli-hello-world-ivy-i18n/src/app/app.component.spec.ts
+++ b/integration/cli-hello-world-ivy-i18n/src/app/app.component.spec.ts
@@ -1,13 +1,13 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import {TestBed, async} from '@angular/core/testing';
+import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
+    TestBed
+        .configureTestingModule({
+          declarations: [AppComponent],
+        })
+        .compileComponents();
   }));
 
   it('should create the app', () => {
@@ -26,6 +26,7 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to cli-hello-world-ivy-compat!');
+    expect(compiled.querySelector('h1').textContent)
+        .toContain('Bonjour cli-hello-world-ivy-compat!');
   });
 });
diff --git a/integration/cli-hello-world-ivy-i18n/src/app/app.component.ts b/integration/cli-hello-world-ivy-i18n/src/app/app.component.ts
index f32c58454e..c375cb38fa 100644
--- a/integration/cli-hello-world-ivy-i18n/src/app/app.component.ts
+++ b/integration/cli-hello-world-ivy-i18n/src/app/app.component.ts
@@ -1,10 +1,8 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
+@Component(
+    {selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})
 export class AppComponent {
-  title = $localize `cli-hello-world-ivy-compat`;
+  title = `cli-hello-world-ivy-compat`;
+  message = $localize `Welcome to the i18n app.`;
 }
diff --git a/integration/cli-hello-world-ivy-i18n/src/app/app.module.ts b/integration/cli-hello-world-ivy-i18n/src/app/app.module.ts
index 314179fcf7..ce62a81186 100644
--- a/integration/cli-hello-world-ivy-i18n/src/app/app.module.ts
+++ b/integration/cli-hello-world-ivy-i18n/src/app/app.module.ts
@@ -1,21 +1,17 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { LOCALE_ID, NgModule } from '@angular/core';
-import { registerLocaleData } from '@angular/common';
+import {registerLocaleData} from '@angular/common';
+import {LOCALE_ID, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 import localeFr from '@angular/common/locales/fr';
-
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
 // adding this code to detect issues like https://github.com/angular/angular-cli/issues/10322
 registerLocaleData(localeFr);
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [{ provide: LOCALE_ID, useValue: 'fr' }],
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [{provide: LOCALE_ID, useValue: 'fr'}],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}
diff --git a/integration/cli-hello-world-ivy-i18n/src/polyfills.ts b/integration/cli-hello-world-ivy-i18n/src/polyfills.ts
index 93bcf8a403..109e874544 100644
--- a/integration/cli-hello-world-ivy-i18n/src/polyfills.ts
+++ b/integration/cli-hello-world-ivy-i18n/src/polyfills.ts
@@ -86,6 +86,17 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
  */
 import '@angular/localize/init';
 
+// Note that `computeMsgId` is a private API at this stage. It will probably be exported directly
+// from `@angular/localize` at some point.
+import {computeMsgId} from '@angular/compiler';
+import {loadTranslations} from '@angular/localize';
+
+// Load some runtime translations!
+loadTranslations({
+  [computeMsgId(' Hello {$INTERPOLATION}! ')]: 'Bonjour {$INTERPOLATION}!',
+  [computeMsgId('Welcome to the i18n app.')]: 'Bienvenue sur l\'application i18n.',
+});
+
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */