From eac85b4e235fc99306945012a62ba4333e524718 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 1 Dec 2020 19:12:46 +0100
Subject: [PATCH] test(compiler-cli): migrate view compliance tests (#39914)

Migrates the `r3_view_compiler` tests to the new format.

PR Close #39914
---
 .../r3_view_compiler/GOLDEN_PARTIAL.js        | 64 ++++++++++++++++
 .../r3_view_compiler/TEST_CASES.json          | 22 ++++++
 .../animations/GOLDEN_PARTIAL.js              | 75 +++++++++++++++++++
 .../animations/TEST_CASES.json                | 39 ++++++++++
 .../duplicate_animation_listeners.ts          | 12 +++
 .../duplicate_animation_listeners_template.js |  7 ++
 .../animations/static_animation_attribute.ts  |  9 +++
 .../static_animation_attribute_template.js    |  8 ++
 .../r3_view_compiler/any/GOLDEN_PARTIAL.js    | 41 ++++++++++
 .../r3_view_compiler/any/TEST_CASES.json      | 39 ++++++++++
 .../r3_view_compiler/any/basic_any_cast.ts    |  5 ++
 .../any/basic_any_cast_template.js            |  1 +
 .../r3_view_compiler/any/this_any_access.ts   |  8 ++
 .../any/this_any_access_template.js           |  1 +
 .../hello_world/GOLDEN_PARTIAL.js             | 48 ++++++++++++
 .../hello_world/TEST_CASES.json               | 13 ++++
 .../r3_view_compiler/hello_world/test.js      |  4 +
 .../r3_view_compiler/hello_world/test.ts      | 24 ++++++
 .../r3_view_compiler/todo_example.ts          | 22 ++++++
 .../r3_view_compiler/todo_example_template.js |  4 +
 20 files changed, 446 insertions(+)
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/TEST_CASES.json
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/TEST_CASES.json
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners.ts
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners_template.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute_template.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/GOLDEN_PARTIAL.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/TEST_CASES.json
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast.ts
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast_template.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access.ts
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access_template.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/GOLDEN_PARTIAL.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/TEST_CASES.json
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.js
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.ts
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example.ts
 create mode 100644 packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example_template.js

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..10abfca066
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js
@@ -0,0 +1,64 @@
+/****************************************************************************************************
+ * PARTIAL FILE: todo_example.js
+ ****************************************************************************************************/
+import { Component, Input, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+    constructor() {
+        this.list = [];
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<todo [data]="list"></todo>', isInline: true }, directives: [{ type: function () { return TodoComponent; }, selector: "todo", inputs: ["data"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<todo [data]="list"></todo>' }]
+    }], null, null); })();
+export class TodoComponent {
+    constructor() {
+        this.data = [];
+    }
+}
+TodoComponent.ɵfac = function TodoComponent_Factory(t) { return new (t || TodoComponent)(); };
+TodoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: TodoComponent, selector: "todo", inputs: { data: "data" }, ngImport: i0, template: { source: '<ul class="list" [title]="myTitle"><li *ngFor="let item of data">{{data}}</li></ul>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TodoComponent, [{
+        type: Component,
+        args: [{
+                selector: 'todo',
+                template: '<ul class="list" [title]="myTitle"><li *ngFor="let item of data">{{data}}</li></ul>'
+            }]
+    }], null, { data: [{
+            type: Input
+        }] }); })();
+export class TodoModule {
+}
+TodoModule.ɵmod = i0.ɵɵdefineNgModule({ type: TodoModule });
+TodoModule.ɵinj = i0.ɵɵdefineInjector({ factory: function TodoModule_Factory(t) { return new (t || TodoModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TodoModule, { declarations: [TodoComponent, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TodoModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [TodoComponent, MyApp],
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: todo_example.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    list: any[];
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
+}
+export declare class TodoComponent {
+    data: any[];
+    myTitle: string;
+    static ɵfac: i0.ɵɵFactoryDef<TodoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<TodoComponent, "todo", never, { "data": "data"; }, {}, never, never>;
+}
+export declare class TodoModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<TodoModule, [typeof TodoComponent, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<TodoModule>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/TEST_CASES.json
new file mode 100644
index 0000000000..9167bba39a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/TEST_CASES.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should be able to generate the TODO example",
+      "inputFiles": [
+        "todo_example.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "todo_example_template.js",
+              "generated": "todo_example.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..d0e1ab9d0f
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js
@@ -0,0 +1,75 @@
+/****************************************************************************************************
+ * PARTIAL FILE: static_animation_attribute.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<div @attr [@binding]="exp"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<div @attr [@binding]="exp"></div>' }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: static_animation_attribute.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: duplicate_animation_listeners.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<div (@mySelector.start)="false" (@mySelector.done)="false" [@mySelector]="0"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: '<div (@mySelector.start)="false" (@mySelector.done)="false" [@mySelector]="0"></div>'
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: duplicate_animation_listeners.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/TEST_CASES.json
new file mode 100644
index 0000000000..d73be37fef
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/TEST_CASES.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should not register any @attr attributes as static attributes",
+      "inputFiles": [
+        "static_animation_attribute.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "static_animation_attribute_template.js",
+              "generated": "static_animation_attribute.js"
+            }
+          ],
+          "failureMessage": "Incorrect initialization attributes"
+        }
+      ]
+    },
+    {
+      "description": "should dedup multiple [@event] listeners",
+      "inputFiles": [
+        "duplicate_animation_listeners.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "duplicate_animation_listeners_template.js",
+              "generated": "duplicate_animation_listeners.js"
+            }
+          ],
+          "failureMessage": "Incorrect initialization attributes"
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners.ts
new file mode 100644
index 0000000000..65a320e7da
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners.ts
@@ -0,0 +1,12 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: '<div (@mySelector.start)="false" (@mySelector.done)="false" [@mySelector]="0"></div>'
+})
+export class MyApp {
+}
+
+@NgModule({declarations: [MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners_template.js
new file mode 100644
index 0000000000..3a9ac98abe
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/duplicate_animation_listeners_template.js
@@ -0,0 +1,7 @@
+template: function MyApp_Template(rf, ctx) {
+  if (rf & 1) {
+    $i0$.ɵɵelementStart(0, "div");
+    …
+    $i0$.ɵɵproperty("@mySelector", …);
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts
new file mode 100644
index 0000000000..1eb3aa12bc
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts
@@ -0,0 +1,9 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'my-app', template: '<div @attr [@binding]="exp"></div>'})
+export class MyApp {
+}
+
+@NgModule({declarations: [MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute_template.js
new file mode 100644
index 0000000000..091f7b9088
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute_template.js
@@ -0,0 +1,8 @@
+template: function MyApp_Template(rf, ctx) {
+  if (rf & 1) {
+    $i0$.ɵɵelement(0, "div");
+  }
+  if (rf & 2) {
+    $i0$.ɵɵproperty("@attr", …)("@binding", …);
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..696e6beb43
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/GOLDEN_PARTIAL.js
@@ -0,0 +1,41 @@
+/****************************************************************************************************
+ * PARTIAL FILE: basic_any_cast.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+class Comp {
+}
+Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
+Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '<div [tabIndex]="$any(10)"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
+        type: Component,
+        args: [{ template: '<div [tabIndex]="$any(10)"></div>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: basic_any_cast.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: this_any_access.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+class Comp {
+    $any(value) {
+        return value;
+    }
+}
+Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
+Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '<div [tabIndex]="this.$any(null)"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
+        type: Component,
+        args: [{ template: '<div [tabIndex]="this.$any(null)"></div>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: this_any_access.d.ts
+ ****************************************************************************************************/
+export {};
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/TEST_CASES.json
new file mode 100644
index 0000000000..1015580ac9
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/TEST_CASES.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should strip out $any wrappers",
+      "inputFiles": [
+        "basic_any_cast.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "basic_any_cast_template.js",
+              "generated": "basic_any_cast.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    },
+    {
+      "description": "should preserve $any if it is accessed through `this`",
+      "inputFiles": [
+        "this_any_access.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "this_any_access_template.js",
+              "generated": "this_any_access.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast.ts
new file mode 100644
index 0000000000..e706dd293f
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast.ts
@@ -0,0 +1,5 @@
+import {Component} from '@angular/core';
+
+@Component({template: '<div [tabIndex]="$any(10)"></div>'})
+class Comp {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast_template.js
new file mode 100644
index 0000000000..6b97d98157
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast_template.js
@@ -0,0 +1 @@
+i0.ɵɵproperty("tabIndex", 10);
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access.ts
new file mode 100644
index 0000000000..edc10c9307
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({template: '<div [tabIndex]="this.$any(null)"></div>'})
+class Comp {
+  $any(value: null): any {
+    return value as any;
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access_template.js
new file mode 100644
index 0000000000..4bfb556179
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/this_any_access_template.js
@@ -0,0 +1 @@
+i0.ɵɵproperty("tabIndex", ctx.$any(null));
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..7c9593cdcb
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/GOLDEN_PARTIAL.js
@@ -0,0 +1,48 @@
+/****************************************************************************************************
+ * PARTIAL FILE: test.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+class Greeter {
+}
+class GreeterEN {
+    greet() {
+        return 'Hi';
+    }
+}
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", providers: [GreeterEN, { provide: Greeter, useClass: GreeterEN }], ngImport: i0, template: { source: '<div></div>', isInline: true }, viewProviders: [GreeterEN] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: '<div></div>',
+                providers: [GreeterEN, { provide: Greeter, useClass: GreeterEN }],
+                viewProviders: [GreeterEN]
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: test.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/TEST_CASES.json
new file mode 100644
index 0000000000..87e37d74cb
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/TEST_CASES.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should be able to generate the hello world component",
+      "expectations": [
+        {
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.js
new file mode 100644
index 0000000000..e97308779b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.js
@@ -0,0 +1,4 @@
+import { Component, NgModule } from '@angular/core';
+…
+MyComponent.ɵfac = …;
+MyComponent.ɵcmp = …;
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.ts
new file mode 100644
index 0000000000..1e5ed6c62b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/hello_world/test.ts
@@ -0,0 +1,24 @@
+import {Component, NgModule} from '@angular/core';
+
+abstract class Greeter {
+  abstract greet(): string;
+}
+
+class GreeterEN implements Greeter {
+  greet() {
+    return 'Hi';
+  }
+}
+
+@Component({
+  selector: 'my-component',
+  template: '<div></div>',
+  providers: [GreeterEN, {provide: Greeter, useClass: GreeterEN}],
+  viewProviders: [GreeterEN]
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example.ts
new file mode 100644
index 0000000000..f814e4b6d2
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example.ts
@@ -0,0 +1,22 @@
+import {Component, Input, NgModule} from '@angular/core';
+
+@Component({selector: 'my-app', template: '<todo [data]="list"></todo>'})
+export class MyApp {
+  list: any[] = [];
+}
+
+@Component({
+  selector: 'todo',
+  template: '<ul class="list" [title]="myTitle"><li *ngFor="let item of data">{{data}}</li></ul>'
+})
+export class TodoComponent {
+  @Input() data: any[] = [];
+
+  myTitle!: string;
+}
+
+@NgModule({
+  declarations: [TodoComponent, MyApp],
+})
+export class TodoModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example_template.js
new file mode 100644
index 0000000000..1aa67f9caf
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/todo_example_template.js
@@ -0,0 +1,4 @@
+import { Component, Input, NgModule } from '@angular/core';
+…
+MyApp.ɵcmp = …;
+TodoComponent.ɵcmp = …;