feat: allow css testing with @Component property styleUrls (#903)

ahnpnl · web-flow · commit c275166191e3 · 2021-04-16T12:12:17.000+02:00
diff --git a/e2e/ast-transformers/replace-resources/__tests__/bar.component.ts b/e2e/ast-transformers/replace-resources/__tests__/bar.component.ts
@@ -28,5 +28,7 @@ test(
     const elementToFind = fixture.debugElement.nativeElement.querySelector('p');
     expect(elementToFind).toBeDefined();
     expect(window.getComputedStyle(elementToFind).color).toEqual('red');
+    console.warn(window.getComputedStyle(elementToFind));
+    expect(window.getComputedStyle(elementToFind).fontSize).toEqual('1.6rem');
   }),
 );
diff --git a/e2e/ast-transformers/replace-resources/jest-esm.config.js b/e2e/ast-transformers/replace-resources/jest-esm.config.js
@@ -5,12 +5,12 @@ module.exports = {
     'ts-jest': {
       useESM: true,
       tsconfig: 'tsconfig-esm.json',
-      stringifyContentPathRegex: '\\.html$',
+      stringifyContentPathRegex: '\\.(html|scss)$',
     },
   },
   setupFilesAfterEnv: ['<rootDir>/../../../setup-jest.js'],
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(ts|js|html)$': '<rootDir>/../../../build/index.js',
+    '^.+\\.(ts|js|html|scss)$': '<rootDir>/../../../build/index.js',
   },
 };
diff --git a/e2e/ast-transformers/replace-resources/package.json b/e2e/ast-transformers/replace-resources/package.json
@@ -3,13 +3,13 @@
     "globals": {
       "ts-jest": {
         "tsconfig": "<rootDir>/../../tsconfig.json",
-        "stringifyContentPathRegex": "\\.html$"
+        "stringifyContentPathRegex": "\\.(html|scss)$"
       }
     },
     "setupFilesAfterEnv": ["<rootDir>/../../../setup-jest.js"],
     "testEnvironment": "jsdom",
     "transform": {
-      "^.+\\.(ts|js|html)$": "<rootDir>/../../../build/index.js"
+      "^.+\\.(ts|js|html|scss)$": "<rootDir>/../../../build/index.js"
     }
   }
 }
diff --git a/e2e/snapshot-serializers/jest-esm.config.js b/e2e/snapshot-serializers/jest-esm.config.js
@@ -5,7 +5,7 @@ module.exports = {
     'ts-jest': {
       useESM: true,
       tsconfig: 'tsconfig-esm.json',
-      stringifyContentPathRegex: '\\.html$',
+      stringifyContentPathRegex: '\\.(html|scss)$',
     },
   },
   setupFilesAfterEnv: ['<rootDir>/../../setup-jest.js'],
@@ -16,6 +16,6 @@ module.exports = {
   ],
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(ts|js|html)$': '<rootDir>/../../build/index.js',
+    '^.+\\.(ts|js|html|scss)$': '<rootDir>/../../build/index.js',
   },
 };
diff --git a/e2e/snapshot-serializers/package.json b/e2e/snapshot-serializers/package.json
@@ -3,7 +3,7 @@
     "globals": {
       "ts-jest": {
         "tsconfig": "<rootDir>/../tsconfig.json",
-        "stringifyContentPathRegex": "\\.html$"
+        "stringifyContentPathRegex": "\\.(html|scss)$"
       }
     },
     "setupFilesAfterEnv": ["<rootDir>/../../setup-jest.js"],
@@ -14,7 +14,7 @@
     ],
     "testEnvironment": "jsdom",
     "transform": {
-      "^.+\\.(ts|js|html)$": "<rootDir>/../../build/index.js"
+      "^.+\\.(ts|js|html|scss)$": "<rootDir>/../../build/index.js"
     }
   }
 }
diff --git a/presets/index.js b/presets/index.js
@@ -4,12 +4,12 @@ const basePreset = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.html$',
+      stringifyContentPathRegex: '\\.(html|css|sass|scss|less|styl)$',
     },
   },
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+    '^.+\\.(ts|js|html|css|sass|scss|less|styl)$': 'jest-preset-angular',
   },
   moduleFileExtensions: ['ts', 'html', 'js', 'json'],
   moduleNameMapper: {
diff --git a/src/__tests__/__snapshots__/jest-preset.spec.ts.snap b/src/__tests__/__snapshots__/jest-preset.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Jest presets should return the correct jest config 1`] = `
 Object {
   "globals": Object {
     "ts-jest": Object {
-      "stringifyContentPathRegex": "\\\\.html$",
+      "stringifyContentPathRegex": "\\\\.(html|css|sass|scss|less|styl)$",
       "tsconfig": "<rootDir>/tsconfig.spec.json",
     },
   },
@@ -27,7 +27,7 @@ Object {
   ],
   "testEnvironment": "jsdom",
   "transform": Object {
-    "^.+\\\\.(ts|js|html)$": "jest-preset-angular",
+    "^.+\\\\.(ts|js|html|css|sass|scss|less|styl)$": "jest-preset-angular",
   },
 }
 `;
@@ -39,7 +39,7 @@ Object {
   ],
   "globals": Object {
     "ts-jest": Object {
-      "stringifyContentPathRegex": "\\\\.html$",
+      "stringifyContentPathRegex": "\\\\.(html|css|sass|scss|less|styl)$",
       "tsconfig": "<rootDir>/tsconfig.spec.json",
       "useESM": true,
     },
@@ -64,7 +64,7 @@ Object {
   ],
   "testEnvironment": "jsdom",
   "transform": Object {
-    "^.+\\\\.(ts|js|html)$": "jest-preset-angular",
+    "^.+\\\\.(ts|js|html|css|sass|scss|less|styl)$": "jest-preset-angular",
   },
   "transformIgnorePatterns": Array [
     "node_modules/(?!tslib)",
diff --git a/src/__tests__/__snapshots__/presets.spec.ts.snap b/src/__tests__/__snapshots__/presets.spec.ts.snap
diff --git a/src/__tests__/__snapshots__/replace-resources.spec.ts.snap b/src/__tests__/__snapshots__/replace-resources.spec.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should keep styles but not styleUrls, keep template and transform templateUrl to proper syntax for CommonJS/ESM: app.component.ts-with-esm-false 1`] = `
+exports[`should keep styles/template and transform styleUrls/templateUrl to proper syntax for CommonJS/ESM: app.component.ts-with-esm-false 1`] = `
 "\\"use strict\\";
 Object.defineProperty(exports, \\"__esModule\\", { value: true });
 exports.AppComponent = void 0;
@@ -15,16 +15,18 @@ AppComponent = tslib_1.__decorate([
     core_1.Component({
         selector: 'app-root',
         template: require(\\"./app.component.html\\"),
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\", require(\\"./app.component.scss\\"), require(\\"./foo.component.css\\")]
     })
 ], AppComponent);
 exports.AppComponent = AppComponent;
 //# "
 `;
 
-exports[`should keep styles but not styleUrls, keep template and transform templateUrl to proper syntax for CommonJS/ESM: app.component.ts-with-esm-true 1`] = `
+exports[`should keep styles/template and transform styleUrls/templateUrl to proper syntax for CommonJS/ESM: app.component.ts-with-esm-true 1`] = `
 "import { __decorate } from \\"tslib\\";
 import __NG_CLI_RESOURCE__0 from \\"./app.component.html\\";
+import __NG_CLI_RESOURCE__1 from \\"./app.component.scss\\";
+import __NG_CLI_RESOURCE__2 from \\"./foo.component.css\\";
 import { Component } from '@angular/core';
 let AppComponent = class AppComponent {
     constructor() {
@@ -35,14 +37,14 @@ AppComponent = __decorate([
     Component({
         selector: 'app-root',
         template: __NG_CLI_RESOURCE__0,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\", __NG_CLI_RESOURCE__1, __NG_CLI_RESOURCE__2]
     })
 ], AppComponent);
 export { AppComponent };
 //# "
 `;
 
-exports[`should keep styles but not styleUrls, keep template and transform templateUrl to proper syntax for CommonJS/ESM: foo.component.ts-with-esm-false 1`] = `
+exports[`should keep styles/template and transform styleUrls/templateUrl to proper syntax for CommonJS/ESM: foo.component.ts-with-esm-false 1`] = `
 "\\"use strict\\";
 Object.defineProperty(exports, \\"__esModule\\", { value: true });
 exports.FooComponent = void 0;
@@ -57,15 +59,17 @@ FooComponent = tslib_1.__decorate([
     core_1.Component({
         selector: 'app-root',
         template: \`<h1>Foo Bar</h1>\`,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\", require(\\"./app.component.scss\\"), require(\\"./foo.component.css\\")]
     })
 ], FooComponent);
 exports.FooComponent = FooComponent;
 //# "
 `;
 
-exports[`should keep styles but not styleUrls, keep template and transform templateUrl to proper syntax for CommonJS/ESM: foo.component.ts-with-esm-true 1`] = `
+exports[`should keep styles/template and transform styleUrls/templateUrl to proper syntax for CommonJS/ESM: foo.component.ts-with-esm-true 1`] = `
 "import { __decorate } from \\"tslib\\";
+import __NG_CLI_RESOURCE__0 from \\"./app.component.scss\\";
+import __NG_CLI_RESOURCE__1 from \\"./foo.component.css\\";
 import { Component } from '@angular/core';
 let FooComponent = class FooComponent {
     constructor() {
@@ -76,7 +80,7 @@ FooComponent = __decorate([
     Component({
         selector: 'app-root',
         template: \`<h1>Foo Bar</h1>\`,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\", __NG_CLI_RESOURCE__0, __NG_CLI_RESOURCE__1]
     })
 ], FooComponent);
 export { FooComponent };
diff --git a/src/__tests__/presets.spec.ts b/src/__tests__/presets.spec.ts
diff --git a/src/__tests__/replace-resources.spec.ts b/src/__tests__/replace-resources.spec.ts
@@ -32,7 +32,7 @@ const baseJestCfg = {
 };
 
 test.each([true, false])(
-  'should keep styles but not styleUrls, keep template and transform templateUrl to proper syntax for CommonJS/ESM',
+  'should keep styles/template and transform styleUrls/templateUrl to proper syntax for CommonJS/ESM',
   (useESM) => {
     const ngJestConfig = new NgJestConfig({
       ...baseJestCfg,
diff --git a/src/transformers/replace-resources.ts b/src/transformers/replace-resources.ts
@@ -166,6 +166,7 @@ function visitComponentMetadata(
       return ts.updatePropertyAssignment(node, ts.createIdentifier(TEMPLATE), importName);
 
     case STYLES:
+    case STYLE_URLS:
       if (!ts.isArrayLiteralExpression(node.initializer)) {
         return node;
       }
@@ -188,12 +189,6 @@ function visitComponentMetadata(
         styleReplacements.push(...styles);
       }
 
-      return undefined;
-    case STYLE_URLS:
-      if (!ts.isArrayLiteralExpression(node.initializer)) {
-        return node;
-      }
-
       return undefined;
     default:
       return node;
diff --git a/website/docs/getting-started/options.md b/website/docs/getting-started/options.md
@@ -37,9 +37,8 @@ module.exports = {
 
 :::important
 
-Jest doesn't run in browser nor through dev server. It uses `JSDOM` to abstract browser environment. So we have to cheat
-a little and inline our templates and get rid of styles (**we're not testing CSS**) because otherwise Angular will try
-to make `XHR` call for our templates and fail miserably.
+Jest runs with `jest-preset-angular` neither in browser nor through dev server. It uses `JSDOM` to abstract browser environment hence we depend on
+`JSDOM` implementation for real browser features.
 
 :::
 

Original file line number	Diff line number	Diff line change
`@@ -3,13 +3,13 @@`
`3`	`3`	`"globals": {`
`4`	`4`	`"ts-jest": {`
`5`	`5`	`"tsconfig": "<rootDir>/../../tsconfig.json",`
`6`		`- "stringifyContentPathRegex": "\\.html$"`
	`6`	`+ "stringifyContentPathRegex": "\\.(html\|scss)$"`
`7`	`7`	`}`
`8`	`8`	`},`
`9`	`9`	`"setupFilesAfterEnv": ["<rootDir>/../../../setup-jest.js"],`
`10`	`10`	`"testEnvironment": "jsdom",`
`11`	`11`	`"transform": {`
`12`		`- "^.+\\.(ts\|js\|html)$": "<rootDir>/../../../build/index.js"`
	`12`	`+ "^.+\\.(ts\|js\|html\|scss)$": "<rootDir>/../../../build/index.js"`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`"globals": {`
`4`	`4`	`"ts-jest": {`
`5`	`5`	`"tsconfig": "<rootDir>/../tsconfig.json",`
`6`		`- "stringifyContentPathRegex": "\\.html$"`
	`6`	`+ "stringifyContentPathRegex": "\\.(html\|scss)$"`
`7`	`7`	`}`
`8`	`8`	`},`
`9`	`9`	`"setupFilesAfterEnv": ["<rootDir>/../../setup-jest.js"],`
`@@ -14,7 +14,7 @@`
`14`	`14`	`],`
`15`	`15`	`"testEnvironment": "jsdom",`
`16`	`16`	`"transform": {`
`17`		`- "^.+\\.(ts\|js\|html)$": "<rootDir>/../../build/index.js"`
	`17`	`+ "^.+\\.(ts\|js\|html\|scss)$": "<rootDir>/../../build/index.js"`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`	`}`