test(ivy): add render3 integration tests (#21557)

PR Close #21557

integration/_payload-limits.json

@@ -30,5 +30,19 @@
         "bundle": 100661
       }
     }
+  },
+  "hello_world__render3__closure": {
+    "master": {
+      "uncompressed": {
+        "bundle": 6671
+      }
+    }
+  },
+  "hello_world__render3__rollup": {
+    "master": {
+      "uncompressed": {
+        "bundle": 56550
+      }
+    }
   }
 }

integration/hello_world__render3__closure/clean_ngDevMode.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+# This script replaces 'ngDevMode' by false in @angular/core/render3 source code, so that this code can be eliminated.
+# This is a workaround for https://github.com/google/closure-compiler/issues/1601
+
+find built/packages/core/src/render3/* -name '*.js' -exec sed  -i '' -e "s/import '.\/ng_dev_mode';//g" {} \;
+find built/packages/core/src/render3/* -name '*.js' -exec sed  -i '' -e 's/ngDevMode/false/g' {} \;

integration/hello_world__render3__closure/closure.conf

@@ -0,0 +1,22 @@
+--compilation_level=ADVANCED_OPTIMIZATIONS
+--language_out=ES5
+--js_output_file=dist/bundle.js
+--output_manifest=dist/manifest.MF
+--variable_renaming_report=dist/variable_renaming_report
+--property_renaming_report=dist/property_renaming_report
+--create_source_map=%outname%.map
+
+--warning_level=QUIET
+--dependency_mode=STRICT
+--rewrite_polyfills=false
+--jscomp_off=checkVars
+
+--module_resolution=node
+--package_json_entry_names es2015
+--process_common_js_modules
+
+--js built/**.js
+--entry_point=built/index
+
+--output_wrapper "%output%
+//# sourceMappingURL=bundle.js.map"

integration/hello_world__render3__closure/e2e/app.e2e-spec.ts

@@ -0,0 +1,12 @@
+import { browser, element, by } from 'protractor';
+
+describe('Hello world E2E Tests', function () {
+  it('should display: Hello world!', function () {
+    browser.ignoreSynchronization = true;
+    browser.get('');
+    const div = element(by.css('div'));
+    expect(div.getText()).toEqual('Hello world!');
+    element(by.css('input')).sendKeys('!');
+    expect(div.getText()).toEqual('Hello world!!');
+  });
+});

integration/hello_world__render3__closure/e2e/browser.config.json

@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}

integration/hello_world__render3__closure/e2e/protractor.config.js

@@ -0,0 +1,15 @@
+exports.config = {
+  specs: [
+    '../built/e2e/*.e2e-spec.js'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--no-sandbox'],
+      binary: process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8080/',
+  framework: 'jasmine'
+};

integration/hello_world__render3__closure/e2e/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine"],
+    // TODO(alexeagle): was required for Protractor 4.0.11
+    "skipLibCheck": true
+  }
+}

integration/hello_world__render3__closure/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "angular-integration",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "typescript": "file:../../node_modules/typescript"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor",
+    "google-closure-compiler": "20171023.0.1"
+  },
+  "scripts": {
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG && mkdir -p built && cp -rf ../../dist/packages ./built/packages && ./clean_ngDevMode.sh",
+    "closure": "java -jar node_modules/google-closure-compiler/compiler.jar --flagfile closure.conf && mkdir -p dist/packages && cp -rf ../../packages/core dist/packages/core",
+    "test": "tsc && yarn run closure && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first",
+    "serve": "lite-server -c e2e/browser.config.json",
+    "preprotractor": "tsc -p e2e",
+    "protractor": "protractor e2e/protractor.config.js"
+  }
+}

integration/hello_world__render3__closure/src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+  <base href="/">
+</head>
+
+<body>
+  <hello-world></hello-world>
+
+  <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>

integration/hello_world__render3__closure/src/index.ts

@@ -0,0 +1,37 @@
+/**
+ * @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 {defineComponent, renderComponent, detectChanges, T, t, E, e, L, p, b, b1} from '../built/packages/core/src/render3';
+import {ComponentDef} from '../built/packages/core/src/render3/interfaces/definition';
+
+export class HelloWorld {
+  name: string = "world";
+
+  /** @nocollapse */
+  static ngComponentDef: ComponentDef<HelloWorld> = defineComponent({
+    tag: 'hello-world',
+    template: function (ctx: HelloWorld, cm: boolean) {
+      if (cm) {
+        E(0, 'div');
+          T(1);
+        e();
+        E(2, 'input');
+          L('input', (e) => {
+            ctx.name = (<HTMLInputElement>e.target).value;
+            detectChanges(component);
+          });
+        e();
+      }
+      t(1, b1('Hello ', ctx.name, '!'));
+      p(2, 'value', b(ctx.name));
+    },
+    factory: () => new HelloWorld()
+  });
+}
+
+const component = renderComponent(HelloWorld);

integration/hello_world__render3__closure/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true,
+    "alwaysCompileGeneratedCode": true
+  },
+
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "strict": true,
+    "target": "es5",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "rootDir": "./src",
+    "declaration": true,
+    "types": [],
+    "lib": ["es2015", "dom"]
+  },
+  "files": [
+    "src/index.ts"
+  ]
+}

integration/hello_world__render3__rollup/e2e/app.e2e-spec.ts

@@ -0,0 +1,12 @@
+import { browser, element, by } from 'protractor';
+
+describe('Hello world E2E Tests', function () {
+  it('should display: Hello world!', function () {
+    browser.ignoreSynchronization = true;
+    browser.get('');
+    const div = element(by.css('div'));
+    expect(div.getText()).toEqual('Hello world!');
+    element(by.css('input')).sendKeys('!');
+    expect(div.getText()).toEqual('Hello world!!');
+  });
+});

integration/hello_world__render3__rollup/e2e/browser.config.json

@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}

integration/hello_world__render3__rollup/e2e/protractor.config.js

@@ -0,0 +1,15 @@
+exports.config = {
+  specs: [
+    '../built/e2e/*.e2e-spec.js'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--no-sandbox'],
+      binary: process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8080/',
+  framework: 'jasmine'
+};

integration/hello_world__render3__rollup/e2e/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine"],
+    // TODO(alexeagle): was required for Protractor 4.0.11
+    "skipLibCheck": true
+  }
+}

integration/hello_world__render3__rollup/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "angular-integration",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor",
+    "rollup": "0.54.0",
+    "rollup-plugin-commonjs": "8.2.6",
+    "rollup-plugin-node-resolve": "3.0.2",
+    "rollup-plugin-replace": "2.0.0",
+    "rollup-plugin-typescript2": "0.10.0",
+    "rollup-plugin-uglify": "2.0.1"
+  },
+  "scripts": {
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "rollup": "rollup -c rollup.config.js",
+    "test": "yarn run rollup && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first",
+    "serve": "lite-server -c e2e/browser.config.json",
+    "preprotractor": "tsc -p e2e",
+    "protractor": "protractor e2e/protractor.config.js"
+  }
+}

integration/hello_world__render3__rollup/rollup.config.js

@@ -0,0 +1,41 @@
+import commonjs from 'rollup-plugin-commonjs';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import typescript2 from 'rollup-plugin-typescript2';
+import uglify from 'rollup-plugin-uglify';
+
+export default {
+  input: `src/index.ts`,
+  output: {
+    name: 'hw',
+    file: `dist/bundle.js`,
+    format: 'iife',
+    sourcemap: false
+  },
+  plugins: [
+    typescript2({
+      typescript: require('typescript'),
+      "experimentalDecorators": true,
+      "emitDecoratorMetadata": true
+    }),
+    replace({
+      delimiters: ['', ''],
+      values: {
+        '/** @class */': '/** @__PURE__ */'
+      }
+    }),
+    nodeResolve({jsnext: true, module: true}),
+    commonjs({
+      include: 'node_modules/rxjs/**',
+    }),
+    uglify({
+      mangle: true,
+      compress: {
+        global_defs: {
+          'ngDevMode': false,
+        }
+      }
+    })
+  ],
+  external: []
+}

integration/hello_world__render3__rollup/src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+  <base href="/">
+</head>
+
+<body>
+  <hello-world></hello-world>
+
+  <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>

integration/hello_world__render3__rollup/src/index.ts

@@ -0,0 +1,37 @@
+/**
+ * @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 {ɵdefineComponent as defineComponent, ɵdetectChanges as detectChanges, ɵrenderComponent as renderComponent, ɵT as T, ɵt as t, ɵE as E, ɵe as e, ɵp as p, ɵL as L, ɵb as b, ɵb1 as b1} from '@angular/core';
+import {ComponentDef} from '@angular/core/src/render3/interfaces/definition';
+
+export class HelloWorld {
+  name: string = "world";
+
+  /** @nocollapse */
+  static ngComponentDef: ComponentDef<HelloWorld> = defineComponent({
+    tag: 'hello-world',
+    template: function (ctx: HelloWorld, cm: boolean) {
+      if (cm) {
+        E(0, 'div');
+        T(1);
+        e();
+        E(2, 'input');
+        L('input', (e) => {
+          ctx.name = (<HTMLInputElement>e.target).value;
+          detectChanges(component);
+        });
+        e();
+      }
+      t(1, b1('Hello ', ctx.name, '!'));
+      p(2, 'value', b(ctx.name));
+    },
+    factory: () => new HelloWorld()
+  });
+}
+
+const component = renderComponent(HelloWorld);

integration/hello_world__render3__rollup/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true,
+    "alwaysCompileGeneratedCode": true
+  },
+
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "strict": true,
+    "target": "es5",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "rootDir": ".",
+    "declaration": true,
+    "types": []
+  },
+
+  "exclude": [
+    "vendor",
+    "node_modules",
+    "built",
+    "dist",
+    "e2e"
+  ]
+}

integration/run_tests.sh

@@ -48,7 +48,7 @@ for testDir in $(ls | grep -v node_modules) ; do
     yarn install --cache-folder ../$cache
     yarn test || exit 1
     # Track payload size for cli-hello-world and hello_world__closure
-    if [[ $testDir == cli-hello-world ]] || [[ $testDir == hello_world__closure ]]; then
+    if [[ $testDir == cli-hello-world ]] || [[ $testDir == hello_world__closure ]] || [[ $testDir == hello_world__render3__closure ]] || [[ $testDir == hello_world__render3__rollup ]]; then
       if [[ $testDir == cli-hello-world ]]; then
         yarn build
       fi

packages/core/src/core_render3_private_export.ts

@@ -13,6 +13,7 @@ export {
   renderComponent as ɵrenderComponent,
   C as ɵC,
   E as ɵE,
+  L as ɵL,
   T as ɵT,
   V as ɵV,
   b as ɵb,