test(compiler-cli): migrate view compliance tests (#39914)

Migrates the `r3_view_compiler` tests to the new format.

PR Close #39914

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

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"
+        }
+      ]
+    }
+  ]
+}

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

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"
+        }
+      ]
+    }
+  ]
+}

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

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", …);
+  }
+}

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

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", …);
+  }
+}

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

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"
+        }
+      ]
+    }
+  ]
+}

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

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/any/basic_any_cast_template.js

@@ -0,0 +1 @@
+i0.ɵɵproperty("tabIndex", 10);

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

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

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

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"
+        }
+      ]
+    }
+  ]
+}

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 = …;

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

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

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 = …;