test(compiler-cli): add compliance tests for external runtime styles (angular#57613)

To ensure that the external runtime style component feature is correctly
emitted by the Angular compiler, compliance tests have been added for
file-based component styles. Additionally, the partial golden generator
has been updated to work with file-based component styles.

PR Close angular#57613

Author: clydin

packages/compiler-cli/test/compliance/partial/partial_compliance_goldens.bzl

@@ -12,7 +12,7 @@ def partial_compliance_golden(filePath):
         "//packages/compiler-cli/test/compliance/partial:generate_golden_partial_lib",
         "//packages/core:npm_package",
         filePath,
-    ] + native.glob(["%s/*.ts" % path, "%s/**/*.html" % path])
+    ] + native.glob(["%s/*.ts" % path, "%s/**/*.html" % path, "%s/**/*.css" % path])
 
     nodejs_binary(
         name = generate_partial_name,

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/GOLDEN_PARTIAL.js

@@ -35,6 +35,43 @@ export declare class MyModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: encapsulation_emulated.js
+ ****************************************************************************************************/
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: '...', isInline: true, styles: ["div.bar { color: blue; }\n", "div.baz { color: purple; }\n", "div.foo { color: red; }", ":host p:nth-child(even) { --webkit-transition: 1s linear all; }"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'my-component', encapsulation: ViewEncapsulation.Emulated, template: '...', styles: ["div.bar { color: blue; }\n", "div.baz { color: purple; }\n", "div.foo { color: red; }", ":host p:nth-child(even) { --webkit-transition: 1s linear all; }"] }]
+        }] });
+export class MyModule {
+}
+MyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, declarations: [MyComponent] });
+MyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, decorators: [{
+            type: NgModule,
+            args: [{ declarations: [MyComponent] }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: encapsulation_emulated.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, false, never>;
+}
+export declare class MyModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
+}
+
 /****************************************************************************************************
  * PARTIAL FILE: encapsulation_none.js
  ****************************************************************************************************/
@@ -109,3 +146,40 @@ export declare class MyModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: external_runtime_files.js
+ ****************************************************************************************************/
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: '...', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'my-component', encapsulation: ViewEncapsulation.Emulated, template: '...' }]
+        }] });
+export class MyModule {
+}
+MyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, declarations: [MyComponent] });
+MyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, decorators: [{
+            type: NgModule,
+            args: [{ declarations: [MyComponent] }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: external_runtime_files.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, false, never>;
+}
+export declare class MyModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
+}
+

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/TEST_CASES.json

@@ -15,6 +15,20 @@
         }
       ]
     },
+    {
+      "description": "should pass in the component metadata styles into the component definition and shim them using style encapsulation",
+      "inputFiles": [
+        "encapsulation_emulated.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect template",
+          "files": [
+            "encapsulation_emulated.js"
+          ]
+        }
+      ]
+    },
     {
       "description": "should pass in styles, but skip shimming the styles if the view encapsulation signals not to",
       "inputFiles": [
@@ -42,6 +56,26 @@
           ]
         }
       ]
+    },
+    {
+      "description": "should emit external runtime styles component feature for file-based styles when 'externalRuntimeStyles' option is enabled",
+      "inputFiles": [
+        "external_runtime_files.ts"
+      ],
+      "angularCompilerOptions": {
+        "externalRuntimeStyles": true
+      },
+      "compilationModeFilter": [
+        "full compile"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect template",
+          "files": [
+            "external_runtime_files.js"
+          ]
+        }
+      ]
     }
   ]
-}
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/encapsulation_emulated.js

@@ -0,0 +1 @@
+["div.bar { color: blue; }\n", "div.baz { color: purple; }\n", "div.foo { color: red; }", ":host p:nth-child(even) { --webkit-transition: 1s linear all; }"]

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/encapsulation_emulated.ts

@@ -0,0 +1,17 @@
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  encapsulation: ViewEncapsulation.Emulated,
+  styles: [
+    'div.foo { color: red; }', ':host p:nth-child(even) { --webkit-transition: 1s linear all; }'
+  ],
+  styleUrls: ['./style-A.css', './style-B.css'],
+  template: '...'
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/external_runtime_files.js

@@ -0,0 +1 @@
+ɵɵExternalStylesFeature(["/style-A.css", "/style-B.css"])

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/external_runtime_files.ts

@@ -0,0 +1,14 @@
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  encapsulation: ViewEncapsulation.Emulated,
+  styleUrls: ['./style-A.css', './style-B.css'],
+  template: '...'
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/style-A.css

@@ -0,0 +1 @@
+div.bar { color: blue; }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/component_styles/style-B.css

@@ -0,0 +1 @@
+div.baz { color: purple; }