test(ivy): add runtime translations to integration test app (#32867)

PR Close #32867

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');
+  });
 });

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(); }
 }

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>

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!');
   });
 });

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.`;
 }

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 {
+}

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
  */