feat(compiler): use replace-resources transformer from Angular (#708)

BREAKING CHANGE
- `isolatedModules: true` will use `inline-files` and `strip-styles` transformers as default transformers.
- `isolatedModules: false` will use `replace-resources` transformer from `@ngtools/webpack` (besides the existing `downlevel-ctor` transformer). This will make `jest-preset-angular` become closer to what Angular CLI does with Karma + Jasmine.

Author: ahnpnl

e2e/__tests__/calc/calc.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { Observable } from 'rxjs';
-
-const image = require('e2e/test-app-v10/src/assets/its_something.png');
+import * as image from 'e2e/test-app-v10/src/assets/its_something.png';
 
 @Component({
   selector: 'app-calc',
@@ -23,7 +21,6 @@ export class CalcComponent implements OnInit {
   @Input() hasAClass = false;
   prop1: number;
   image: string;
-  observable$: Observable<string>;
 
   constructor() {
     this.init();

e2e/__tests__/forward-ref/forward-ref.spec.ts

@@ -1,6 +1,6 @@
 import { forwardRef, Inject, Injector } from '@angular/core';
 
-const shouldSkipTest = process.env.NG_VERSION === 'v9' || process.env.SKIP_TEST === 'true';
+const shouldSkipTest = process.env.NG_VERSION === 'v9' || process.env.ISOLATED_MODULES === 'true';
 const skipTest = shouldSkipTest ? test.skip : test
 
 if (shouldSkipTest) {

e2e/__tests__/simple-with-styles/simple-with-styles.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-simple-with-styles',
   templateUrl: './simple-with-styles.component.html',
+  styleUrls: ['./simple-with-styles.scss'],
   // we have to setup styles this way, since simple styles/styleUrs properties will be removed (jest does not unit test styles)
   styles: [`
     .some-class { color: red }

e2e/__tests__/simple-with-styles/simple-with-styles.scss

@@ -0,0 +1,3 @@
+h1 {
+  font-size: 1.6rem;
+}

e2e/test-app-v10/src/typings.d.ts

@@ -3,3 +3,4 @@ declare var module: NodeModule;
 interface NodeModule {
   id: string;
 }
+declare module '*.png';

e2e/test-app-v11/src/typings.d.ts

@@ -3,3 +3,4 @@ declare var module: NodeModule;
 interface NodeModule {
   id: string;
 }
+declare module '*.png';

e2e/test-app-v9/src/typings.d.ts

@@ -3,3 +3,4 @@ declare var module: NodeModule;
 interface NodeModule {
   id: string;
 }
+declare module '*.png';

scripts/e2e.js

@@ -25,15 +25,18 @@ const executeTest = (projectRealPath) => {
   logger.log();
 
   logger.log('setting NG_VERSION environment variable');
+  logger.log();
   const projectName = projectRealPath.match(/([^\\/]*)\/*$/)[1];
   process.env.NG_VERSION = projectName.substring(projectName.lastIndexOf('-') + 1);
 
   // then we install it in the repo
   logger.log('ensuring all dependencies of target project are installed');
+  logger.log();
 
   execa.sync('yarn', ['install'], { cwd: projectRealPath });
 
   logger.log('cleaning old assets in target project');
+  logger.log();
 
   const testCasesDest = join(projectRealPath, 'src', '__tests__');
   const presetDir = join(projectRealPath, 'node_modules', 'jest-preset-angular');
@@ -42,6 +45,7 @@ const executeTest = (projectRealPath) => {
   mkdirSync(presetDir);
 
   logger.log('copying distributed assets to target project');
+  logger.log();
 
   copySync(join(cwd, 'jest-preset.js'), `${presetDir}/jest-preset.js`);
   copySync(join(cwd, 'ngcc-jest-processor.js'), `${presetDir}/ngcc-jest-processor.js`);
@@ -50,6 +54,7 @@ const executeTest = (projectRealPath) => {
   copySync(join(cwd, 'build'), `${presetDir}/build`);
 
   logger.log('copying test cases to target project');
+  logger.log();
 
   copySync(join(cwd, 'e2e', '__tests__'), testCasesDest);
 
@@ -66,7 +71,7 @@ const executeTest = (projectRealPath) => {
     // cmdESMIso.push(...jestArgs);
   }
 
-  logger.log('starting non isolatedModules tests');
+  logger.log('STARTING NONE ISOLATED MODULES TESTS');
   logger.log();
   logger.log('starting the CJS tests using:', ...cmdCjsUnIso);
   logger.log();
@@ -77,11 +82,13 @@ const executeTest = (projectRealPath) => {
     env: process.env,
   });
 
-  logger.log('starting isolatedModules tests');
   logger.log();
-  logger.log('setting SKIP_TEST environment variable for isolatedModules true');
-  process.env.SKIP_TEST = 'true';
+  logger.log('STARTING ISOLATED MODULES TESTS');
+  logger.log();
+  logger.log('setting ISOLATED_MODULES environment variable for isolatedModules true');
+  process.env.ISOLATED_MODULES = 'true';
 
+  logger.log();
   logger.log('starting the CommonJS tests using:', ...cmdCjsIso);
   logger.log();
 
@@ -104,7 +111,7 @@ const executeTest = (projectRealPath) => {
 
   execa.sync('rimraf', [testCasesDest]);
   delete process.env.NG_VERSION;
-  delete process.env.SKIP_TEST;
+  delete process.env.ISOLATED_MODULES;
 };
 
 const cwd = process.cwd();

src/__tests__/__helpers__/test-helpers.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

src/__tests__/__mocks__/app.component.html

@@ -0,0 +1 @@
+<h1>App works</h1>