fix(transformers): revert #903 as some file extensions are not proces…

…sed with their original content
thymikee · Apr 28, 2021 · aebc186 · aebc186
1 parent a14ab84
commit aebc186
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 27 deletions.
diff --git a/e2e/ast-transformers/replace-resources/__tests__/bar.component.ts b/e2e/ast-transformers/replace-resources/__tests__/bar.component.ts
@@ -28,6 +28,6 @@ test(
     const elementToFind = fixture.debugElement.nativeElement.querySelector('p');
     expect(elementToFind).toBeDefined();
     expect(window.getComputedStyle(elementToFind).color).toEqual('red');
-    expect(window.getComputedStyle(elementToFind).fontSize).toEqual('1.6rem');
+    expect(window.getComputedStyle(elementToFind).fontSize).toEqual('');
   }),
 );
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|scss)$',
+      stringifyContentPathRegex: '\\.html$',
     },
   },
   setupFilesAfterEnv: ['<rootDir>/../../../setup-jest.js'],
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(ts|js|html|scss)$': '<rootDir>/../../../build/index.js',
+    '^.+\\.(ts|js|html)$': '<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|scss)$"
+        "stringifyContentPathRegex": "\\.html$"
       }
     },
     "setupFilesAfterEnv": ["<rootDir>/../../../setup-jest.js"],
     "testEnvironment": "jsdom",
     "transform": {
-      "^.+\\.(ts|js|html|scss)$": "<rootDir>/../../../build/index.js"
+      "^.+\\.(ts|js|html)$": "<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|scss)$',
+      stringifyContentPathRegex: '\\.html$',
     },
   },
   setupFilesAfterEnv: ['<rootDir>/../../setup-jest.js'],
@@ -16,6 +16,6 @@ module.exports = {
   ],
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(ts|js|html|scss)$': '<rootDir>/../../build/index.js',
+    '^.+\\.(ts|js|html)$': '<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|scss)$"
+        "stringifyContentPathRegex": "\\.html$"
       }
     },
     "setupFilesAfterEnv": ["<rootDir>/../../setup-jest.js"],
@@ -14,7 +14,7 @@
     ],
     "testEnvironment": "jsdom",
     "transform": {
-      "^.+\\.(ts|js|html|scss)$": "<rootDir>/../../build/index.js"
+      "^.+\\.(ts|js|html)$": "<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|css|sass|scss|less|styl)$',
+      stringifyContentPathRegex: '\\.html$',
     },
   },
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(ts|js|html|css|sass|scss|less|styl)$': 'jest-preset-angular',
+    '^.+\\.(ts|js|html)$': '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|css|sass|scss|less|styl)$",
+      "stringifyContentPathRegex": "\\\\.html$",
       "tsconfig": "<rootDir>/tsconfig.spec.json",
     },
   },
@@ -27,7 +27,7 @@ Object {
   ],
   "testEnvironment": "jsdom",
   "transform": Object {
-    "^.+\\\\.(ts|js|html|css|sass|scss|less|styl)$": "jest-preset-angular",
+    "^.+\\\\.(ts|js|html)$": "jest-preset-angular",
   },
 }
 `;
@@ -39,7 +39,7 @@ Object {
   ],
   "globals": Object {
     "ts-jest": Object {
-      "stringifyContentPathRegex": "\\\\.(html|css|sass|scss|less|styl)$",
+      "stringifyContentPathRegex": "\\\\.html$",
       "tsconfig": "<rootDir>/tsconfig.spec.json",
       "useESM": true,
     },
@@ -64,7 +64,7 @@ Object {
   ],
   "testEnvironment": "jsdom",
   "transform": Object {
-    "^.+\\\\.(ts|js|html|css|sass|scss|less|styl)$": "jest-preset-angular",
+    "^.+\\\\.(ts|js|html)$": "jest-preset-angular",
   },
   "transformIgnorePatterns": Array [
     "node_modules/(?!tslib)",

diff --git a/src/__tests__/__snapshots__/replace-resources.spec.ts.snap b/src/__tests__/__snapshots__/replace-resources.spec.ts.snap
@@ -15,7 +15,7 @@ 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    \\", require(\\"./app.component.scss\\"), require(\\"./foo.component.css\\")]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], AppComponent);
 exports.AppComponent = AppComponent;
@@ -25,8 +25,6 @@ exports.AppComponent = AppComponent;
 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() {
@@ -37,7 +35,7 @@ AppComponent = __decorate([
     Component({
         selector: 'app-root',
         template: __NG_CLI_RESOURCE__0,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\", __NG_CLI_RESOURCE__1, __NG_CLI_RESOURCE__2]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], AppComponent);
 export { AppComponent };
@@ -59,7 +57,7 @@ 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    \\", require(\\"./app.component.scss\\"), require(\\"./foo.component.css\\")]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], FooComponent);
 exports.FooComponent = FooComponent;
@@ -68,8 +66,6 @@ exports.FooComponent = FooComponent;
 
 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() {
@@ -80,7 +76,7 @@ FooComponent = __decorate([
     Component({
         selector: 'app-root',
         template: \`<h1>Foo Bar</h1>\`,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\", __NG_CLI_RESOURCE__0, __NG_CLI_RESOURCE__1]
+        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], FooComponent);
 export { FooComponent };

diff --git a/src/transformers/replace-resources.ts b/src/transformers/replace-resources.ts
@@ -208,7 +208,6 @@ function visitComponentMetadata(
         : ts.updatePropertyAssignment(node, ts.createIdentifier(TEMPLATE), importName);
 
     case STYLES:
-    case STYLE_URLS:
       if (!ts.isArrayLiteralExpression(node.initializer)) {
         return node;
       }
@@ -240,6 +239,12 @@ 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/guides/testing-css-styles.md b/website/docs/guides/testing-css-styles.md
@@ -3,11 +3,10 @@ id: testing-css-styles
 title: Testing CSS Styles
 ---
 
-Starting from **v9.0.0**, `jest-preset-angular` supports testing CSS styles. The supported style extensions following
-Angular support, which are: `css`, `sass`, `scss`, `less` and `styl`. This is provided default by `jest-preset-angular`.
+Starting from **v9.0.0**, `jest-preset-angular` supports testing CSS styles for `styles` property in `@Component` metadata. This is provided default by `jest-preset-angular`.
 
 One now can use [window.getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
-to check styling of DOM elements. The styles which are returned by `window.getComputedStyle` come from styling files.
+to check styling of DOM elements. The styles which are returned by `window.getComputedStyle` come from `styles` property.
 
 ## Example