refactor(presets): mark inline-files and strip-styles as internal transformersl (#709)

ahnpnl · web-flow · commit 68237fe677e4 · 2021-01-06T00:06:45.000+01:00
BREAKING CHANGE
- `jest-preset-angular` now uses internally the 2 transformers `inline-files` and `strip-styles` for code compilation. These 2 transformers are no longer exposed as public transformers. One currently uses in jest config should remove `astTransformers` option in`ts-jest` config.

- For users who migrate from **v8.3.2** to **9.0.0**, any references to `'jest-preset-angular/build/InlineFilesTransformer'` and `'jest-preset-angular/build/StripStylesTransformer'` should be removed from jest config.

- For users who migrate from **9.0.0-next.4**, any references to `jest-preset-angular/build/transformers/inline-files` and `jest-preset-angular/build/transformers/inline-files` should be removed from jest config.
diff --git a/e2e/test-app-v10/jest-cjs-iso.config.js b/e2e/test-app-v10/jest-cjs-iso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
       isolatedModules: true,
     }
   },
diff --git a/e2e/test-app-v10/jest-cjs-uniso.config.js b/e2e/test-app-v10/jest-cjs-uniso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
     }
   },
 };
diff --git a/e2e/test-app-v10/jest-esm-iso.config.js b/e2e/test-app-v10/jest-esm-iso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-esm.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
       useESM: true,
       isolatedModules: true,
     }
diff --git a/e2e/test-app-v11/jest-cjs-iso.config.js b/e2e/test-app-v11/jest-cjs-iso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
       isolatedModules: true,
     }
   },
diff --git a/e2e/test-app-v11/jest-cjs-uniso.config.js b/e2e/test-app-v11/jest-cjs-uniso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
     }
   },
 };
diff --git a/e2e/test-app-v11/jest-esm-iso.config.js b/e2e/test-app-v11/jest-esm-iso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-esm.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
       useESM: true,
       isolatedModules: true,
     }
diff --git a/e2e/test-app-v9/jest-cjs-iso.config.js b/e2e/test-app-v9/jest-cjs-iso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
       isolatedModules: true,
     }
   },
diff --git a/e2e/test-app-v9/jest-cjs-uniso.config.js b/e2e/test-app-v9/jest-cjs-uniso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
     }
   },
 };
diff --git a/e2e/test-app-v9/jest-esm-iso.config.js b/e2e/test-app-v9/jest-esm-iso.config.js
@@ -8,9 +8,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig-esm.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: require('jest-preset-angular/build/transformers'),
-      },
       useESM: true,
       isolatedModules: true,
     }
diff --git a/jest-preset.js b/jest-preset.js
@@ -1,14 +1,10 @@
-const customTransformers = require('./build/transformers');
 const snapshotSerializers = require('./build/serializers');
 
 module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: {
-        before: customTransformers,
-      },
     },
   },
   testEnvironment: 'jsdom',
diff --git a/jest.config.js b/jest.config.js
@@ -8,5 +8,5 @@ module.exports = {
       tsconfig: 'tsconfig.spec.json',
     },
   },
-  testPathIgnorePatterns: ['/e2e/', '/src/__tests__/__mocks__/'],
+  testPathIgnorePatterns: ['/e2e/', '/src/__tests__/__mocks__/', '/src/__tests__/__helpers__/'],
 };
diff --git a/src/__tests__/__helpers__/test-constants.ts b/src/__tests__/__helpers__/test-constants.ts
@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+export const jestCfgStub = {
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+  testRegex: ['(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.[jt]sx?$'],
+  globals: {
+    'ts-jest': {
+      diagnostics: {
+        pretty: false,
+      },
+    },
+  },
+} as any; // eslint-disable-line @typescript-eslint/no-explicit-any
diff --git a/src/__tests__/__mocks__/forward-ref.ts b/src/__tests__/__mocks__/forward-ref.ts
@@ -0,0 +1,14 @@
+import { forwardRef, Inject } from '@angular/core';
+
+export class Door {
+  lock: Lock;
+
+  // Door attempts to inject Lock, despite it not being defined yet.
+  // forwardRef makes this possible.
+  constructor(@Inject(forwardRef(() => Lock)) lock: Lock) {
+    this.lock = lock;
+  }
+}
+
+// Only at this point Lock is defined.
+export class Lock {}
diff --git a/src/__tests__/__snapshots__/downlevel-ctor.spec.ts.snap b/src/__tests__/__snapshots__/downlevel-ctor.spec.ts.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Downlevel ctor transformer should/should not use downlevel ctor transformer from Angular for isolatedModules false/true 1`] = `
+"\\"use strict\\";
+Object.defineProperty(exports, \\"__esModule\\", { value: true });
+exports.Lock = exports.Door = void 0;
+const tslib_1 = require(\\"tslib\\");
+const core_1 = require(\\"@angular/core\\");
+let Door = class Door {
+    // Door attempts to inject Lock, despite it not being defined yet.
+    // forwardRef makes this possible.
+    constructor(lock) {
+        this.lock = lock;
+    }
+};
+Door = tslib_1.__decorate([
+    tslib_1.__param(0, core_1.Inject(core_1.forwardRef(() => Lock)))
+], Door);
+exports.Door = Door;
+// Only at this point Lock is defined.
+class Lock {
+}
+exports.Lock = Lock;
+//# "
+`;
+
+exports[`Downlevel ctor transformer should/should not use downlevel ctor transformer from Angular for isolatedModules false/true 2`] = `
+"\\"use strict\\";
+Object.defineProperty(exports, \\"__esModule\\", { value: true });
+exports.Lock = exports.Door = void 0;
+const core_1 = require(\\"@angular/core\\");
+class Door {
+    // Door attempts to inject Lock, despite it not being defined yet.
+    // forwardRef makes this possible.
+    constructor(lock) {
+        this.lock = lock;
+    }
+}
+exports.Door = Door;
+Door.ctorParameters = () => [
+    { type: Lock, decorators: [{ type: core_1.Inject, args: [core_1.forwardRef(() => Lock),] }] }
+];
+// Only at this point Lock is defined.
+class Lock {
+}
+exports.Lock = Lock;
+//# "
+`;
diff --git a/src/__tests__/__snapshots__/hoisting.spec.ts.snap b/src/__tests__/__snapshots__/hoisting.spec.ts.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Hoisting should hoist correctly 1`] = `
+"\\"use strict\\";
+Object.defineProperty(exports, \\"__esModule\\", { value: true });
+jest.mock('./foo');
+const foo_1 = require(\\"./foo\\");
+console.log(foo_1.getFoo());
+//# "
+`;
diff --git a/src/__tests__/__snapshots__/ng-jest-compiler.spec.ts.snap b/src/__tests__/__snapshots__/ng-jest-compiler.spec.ts.snap
@@ -1,66 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NgJestCompiler with isolatedModule false should hoist correctly 1`] = `
-"\\"use strict\\";
-Object.defineProperty(exports, \\"__esModule\\", { value: true });
-jest.mock('./foo');
-const foo_1 = require(\\"./foo\\");
-console.log(foo_1.getFoo());
-//# "
-`;
+exports[`NgJestCompiler with isolatedModule false should throw diagnostics error for new file which is: known by Program 1`] = `"src/__tests__/__mocks__/foo.component.ts(8,3): error TS2322: Type '\\"test-app-v10\\"' is not assignable to type 'number'."`;
 
-exports[`NgJestCompiler with isolatedModule false should return compiled result for existing file which is known by Program 1`] = `
-"\\"use strict\\";
-Object.defineProperty(exports, \\"__esModule\\", { value: true });
-exports.AppComponent = void 0;
-const tslib_1 = require(\\"tslib\\");
-const core_1 = require(\\"@angular/core\\");
-let AppComponent = class AppComponent {
-    constructor() {
-        this.title = 'test-app-v10';
-    }
-};
-AppComponent = tslib_1.__decorate([
-    core_1.Component({
-        selector: 'app-root',
-        templateUrl: './app.component.html',
-        styleUrls: ['./app.component.scss'],
-    })
-], AppComponent);
-exports.AppComponent = AppComponent;
-//# "
-`;
-
-exports[`NgJestCompiler with isolatedModule false should return compiled result for new file which is not known by Program 1`] = `
-"\\"use strict\\";
-Object.defineProperty(exports, \\"__esModule\\", { value: true });
-exports.AppComponent = void 0;
-const tslib_1 = require(\\"tslib\\");
-const core_1 = require(\\"@angular/core\\");
-let AppComponent = class AppComponent {
-    constructor() {
-        this.title = 'test-app-v10';
-    }
-};
-AppComponent = tslib_1.__decorate([
-    core_1.Component({
-        selector: 'app-root',
-        templateUrl: './app.component.html',
-        styleUrls: ['./app.component.scss'],
-    })
-], AppComponent);
-exports.AppComponent = AppComponent;
-//# "
-`;
-
-exports[`NgJestCompiler with isolatedModule false should throw diagnostics error for existing file which is known by Program 1`] = `"src/__tests__/__mocks__/foo.component.ts(8,3): error TS2322: Type '\\"test-app-v10\\"' is not assignable to type 'number'."`;
-
-exports[`NgJestCompiler with isolatedModule false should throw diagnostics error for new file which is not known by Program 1`] = `"foo.ts(8,3): error TS2322: Type '\\"test-app-v10\\"' is not assignable to type 'number'."`;
-
-exports[`NgJestCompiler with isolatedModules true should use hoisting transformer from ts-jest 1`] = `
-Object {
-  "before": Array [
-    [Function],
-  ],
-}
-`;
+exports[`NgJestCompiler with isolatedModule false should throw diagnostics error for new file which is: not known by Program 1`] = `"src/__tests__/__mocks__/foo.component.ts(8,3): error TS2322: Type '\\"test-app-v10\\"' is not assignable to type 'number'."`;
diff --git a/src/__tests__/downlevel-ctor.spec.ts b/src/__tests__/downlevel-ctor.spec.ts
@@ -0,0 +1,35 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+import { SOURCE_MAPPING_PREFIX } from 'ts-jest/dist/compiler/compiler-utils';
+import { NgJestConfig } from '../config/ng-jest-config';
+import { jestCfgStub } from './__helpers__/test-constants';
+import { NgJestCompiler } from '../compiler/ng-jest-compiler';
+
+describe('Downlevel ctor transformer', () => {
+  const fileName = join(__dirname, '__mocks__', 'forward-ref.ts');
+  const fileContent = readFileSync(fileName, 'utf-8');
+
+  test.each([true, false])(
+    'should/should not use downlevel ctor transformer from Angular for isolatedModules false/true',
+    (isolatedModules) => {
+      const ngJestConfig = new NgJestConfig({
+        ...jestCfgStub,
+        globals: {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          'ts-jest': {
+            ...jestCfgStub.globals['ts-jest'],
+            isolatedModules,
+          },
+        },
+      });
+      const compiler = new NgJestCompiler(ngJestConfig, new Map());
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const emittedResult = compiler.getCompiledOutput(fileName, fileContent, false)!;
+
+      // Source map is different based on file location which can fail on CI, so we only compare snapshot for js
+      expect(emittedResult.substring(0, emittedResult.indexOf(SOURCE_MAPPING_PREFIX))).toMatchSnapshot();
+    },
+  );
+});
diff --git a/src/__tests__/hoisting.spec.ts b/src/__tests__/hoisting.spec.ts
@@ -0,0 +1,22 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { SOURCE_MAPPING_PREFIX } from 'ts-jest/dist/compiler/compiler-utils';
+
+import { NgJestCompiler } from '../compiler/ng-jest-compiler';
+import { NgJestConfig } from '../config/ng-jest-config';
+import { jestCfgStub } from './__helpers__/test-constants';
+
+describe('Hoisting', () => {
+  // Verify if we use `ts-jest` hoisting transformer
+  test('should hoist correctly', () => {
+    const ngJestConfig = new NgJestConfig(jestCfgStub);
+    const fileName = join(__dirname, '__mocks__', 'foo.spec.ts');
+    const compiler = new NgJestCompiler(ngJestConfig, new Map());
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const emittedResult = compiler.getCompiledOutput(fileName, readFileSync(fileName, 'utf-8'), false)!;
+
+    // Source map is different based on file location which can fail on CI, so we only compare snapshot for js
+    expect(emittedResult.substring(0, emittedResult.indexOf(SOURCE_MAPPING_PREFIX))).toMatchSnapshot();
+  });
+});
diff --git a/src/__tests__/ng-jest-compiler.spec.ts b/src/__tests__/ng-jest-compiler.spec.ts
diff --git a/src/compiler/ng-jest-compiler.ts b/src/compiler/ng-jest-compiler.ts
diff --git a/src/transformers/index.ts b/src/transformers/index.ts
