test: add i18n to cli-hello-world integration test

integration/README.md

@@ -6,15 +6,12 @@ to work, so they allow high-fidelity reproductions of real-world issues.
 For this to work, we first build the Angular distribution just like we would
 publish it to npm, then install the distribution into each app.
 
-To test Angular CLI applications, we generate integration tests such as `cli-hello-world`.
-This was generated with a current version of the CLI, and the only modification was replacement of `@angular/*` packages with their counterparts coming from `file:../../dist/packages-dist/*`.
-When a significant change is released in the CLI, the application should be re-generated from scratch:
+To test Angular CLI applications, we use the integration test `cli-hello-world`.
+When a significant change is released in the CLI, the application should be updated with `ng update`:
 
 ```bash
 $ cd integration
-$ rm -rf cli-hello-world
-$ ng new cli-hello-world
-# Edit cli-hello-world/package.json to point the @angular packages to dist/packages-dist, and preserve local mods to
+$ ng update
 # ng build
 # ng test
 # typescript version

integration/cli-hello-world/angular.json

@@ -137,6 +137,11 @@
           "options": {
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "cli-hello-world:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "cli-hello-world:serve:production"
+            }
           }
         },
         "lint": {

integration/cli-hello-world/e2e/app.e2e-spec.ts

@@ -11,4 +11,9 @@ describe('cli-hello-world App', () => {
     page.navigateTo();
     expect(page.getParagraphText()).toEqual('Welcome to app!');
   });
+
+  it('the percent pipe should work', () => {
+    page.navigateTo();
+    expect(page.getPipeContent()).toEqual('100 % awesome');
+  })
 });

integration/cli-hello-world/e2e/app.po.ts

@@ -8,4 +8,8 @@ export class AppPage {
   getParagraphText() {
     return element(by.css('app-root h1')).getText();
   }
+
+  getPipeContent() {
+    return element(by.css('app-root p')).getText();
+  }
 }

integration/cli-hello-world/package.json

@@ -3,12 +3,13 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
     "build": "ng build --prod --progress false",
-    "test": "ng test",
+    "e2e": "ng e2e",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "ng": "ng",
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "start": "ng serve",
+    "test": "ng test && ng e2e --webdriver-update=false && ng e2e --prod --webdriver-update=false"
   },
   "private": true,
   "dependencies": {
@@ -27,21 +28,21 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.5.0",
-    "@angular/cli": "^6.0.0-rc.0",
+    "@angular/cli": "^6.0.0-rc.5",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
-    "codelyzer": "^4.0.1",
+    "codelyzer": "^4.3.0",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~2.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "file:../../node_modules/protractor",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
     "typescript": "file:../../node_modules/typescript"

integration/cli-hello-world/protractor.conf.js

@@ -9,8 +9,9 @@ exports.config = {
     './e2e/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    'browserName': 'chrome',
+    browserName: 'chrome',
     chromeOptions: {
+      binary: process.env.CHROME_BIN,
       args: ['--no-sandbox']
     }
   },

integration/cli-hello-world/src/app/app.component.html

@@ -5,6 +5,7 @@ <h1>
   </h1>
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
+<p>{{ 1 | percent }} awesome</p>
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>

integration/cli-hello-world/src/app/app.module.ts

@@ -1,9 +1,12 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
+import { LOCALE_ID, NgModule } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
 
 import { AppComponent } from './app.component';
 
+// adding this code to detect issues like https://github.com/angular/angular-cli/issues/10322
+registerLocaleData(localeFr);
 
 @NgModule({
   declarations: [
@@ -12,7 +15,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule
   ],
-  providers: [],
+  providers: [{ provide: LOCALE_ID, useValue: 'fr' }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }