feat(compiler): introduce NgJestCompiler for code compilation

Closes #288
Closes #322
Closes #353

BREAKING CHANGE:
With the new jest transformer, `jest-preset-angular` now switches to default to use this new transformer and no longer use `ts-jest` to transform codes.

Users who are currently doing in jest config
```
// jest.config.js
module.exports = {
    // [...]
    transform: {
      '^.+\\.(ts|js|html)$': 'ts-jest',
    },
}
```

should change to
```
// jest.config.js
module.exports = {
    // [...]
    transform: {
      '^.+\\.(ts|js|html)$': 'jest-preset-angular',
    },
}
```

`isolatedModule: true` will still use `ts-jest` to compile `ts` to `js` but you won't get full compatibility with Ivy.

e2e/test-app-v10-zone-v11/src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent

e2e/test-app-v10/src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent

e2e/test-app-v10/src/app/dynamic-component/dynamic-button.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dynamic-button',
+  template: `
+    <button (click)="onClick()">
+      Hello
+    </button>
+  `,
+})
+export class DynamicButtonComponent {
+  onClick() {
+    console.log('Click!');
+  }
+}

e2e/test-app-v10/src/app/dynamic-component/dynamic-host.component.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DynamicHostComponent } from './dynamic-host.component';
+import { DynamicHostModule } from './dynamic-host.module';
+
+describe('Dynamic components', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DynamicHostModule],
+    });
+  });
+
+  it('dynamically renders a button', async () => {
+    const fixture = TestBed.createComponent(DynamicHostComponent);
+    fixture.detectChanges();
+    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
+    expect(button.textContent).toContain('Hello');
+  });
+});

e2e/test-app-v10/src/app/dynamic-component/dynamic-host.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { DynamicButtonComponent } from './dynamic-button.component';
+
+@Component({
+  selector: 'app-dynamic-host',
+  template: `
+    <ng-container [ngComponentOutlet]="dynamicComponentType"></ng-container>
+  `,
+})
+export class DynamicHostComponent {
+  dynamicComponentType = DynamicButtonComponent;
+}

e2e/test-app-v10/src/app/dynamic-component/dynamic-host.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DynamicHostComponent } from './dynamic-host.component';
+
+@NgModule({
+  declarations: [DynamicHostComponent],
+  exports: [DynamicHostComponent],
+  imports: [CommonModule],
+})
+export class DynamicHostModule {}

e2e/test-app-v10/src/app/forward-ref/forward-ref.spec.ts

@@ -0,0 +1,21 @@
+import { forwardRef, Inject, ReflectiveInjector } from '@angular/core';
+
+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.
+class Lock {}
+
+test('should work', () => {
+  const injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);
+  const door = injector.get(Door);
+  expect(door instanceof Door).toBeTruthy();
+  expect(door.lock instanceof Lock).toBeTruthy();
+});

e2e/test-app-v9/package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~9.1.12",
     "@angular/platform-browser-dynamic": "~9.1.12",
     "@angular/router": "~9.1.12",
+    "ng2-google-charts": "^6.1.0",
     "rxjs": "^6.6.3",
     "tslib": "^1.14.1",
     "zone.js": "~0.10.3"

e2e/test-app-v9/src/app/app.module.ts

@@ -12,11 +12,14 @@ import { SimpleWithStylesComponent } from './simple-with-styles/simple-with-styl
 import { ChildComponent } from './medium/child.component';
 import { MediumComponent } from './medium/medium.component';
 import { NgReflectAsTextComponent } from './ng-reflect-as-text/ng-reflect-as-text.component';
+import { GeoChartComponent } from './ngc-compiled-lib/ngc-compiled-lib.component';
+import { Ng2GoogleChartsModule } from 'ng2-google-charts';
 
 @NgModule({
   declarations: [
     AppComponent,
     CalcComponent,
+    GeoChartComponent,
     SimpleComponent,
     OnPushComponent,
     HeroesComponent,
@@ -30,6 +33,7 @@ import { NgReflectAsTextComponent } from './ng-reflect-as-text/ng-reflect-as-tex
     BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,
+    Ng2GoogleChartsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

e2e/test-app-v9/src/app/ngc-compiled-lib/ngc-compiled-lib.component.spec.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Ng2GoogleChartsModule } from 'ng2-google-charts';
+import { GeoChartComponent } from './ngc-compiled-lib.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('GeoChartComponent', () => {
+  let component: GeoChartComponent;
+  let fixture: ComponentFixture<GeoChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        Ng2GoogleChartsModule,
+      ],
+      providers: [],
+      declarations: [ GeoChartComponent ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA,
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeoChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

e2e/test-app-v9/src/app/ngc-compiled-lib/ngc-compiled-lib.component.ts

@@ -0,0 +1,64 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { GoogleChartInterface } from 'ng2-google-charts';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'influo-geo-chart',
+  template: `
+      <google-chart
+              *ngIf="googleChartConfig$ | async as googleChartConfig; else loader"
+              [data]="googleChartConfig">
+      </google-chart>
+      <ng-template #loader>
+          <mat-spinner color="accent" diameter="80" strokeWidth="8"></mat-spinner>
+      </ng-template>
+  `,
+})
+export class GeoChartComponent implements OnInit, OnChanges {
+  @Input() columns: any;
+  @Input() config: GoogleChartInterface;
+  @Input() data: Array<Array<string | number>>;
+
+  private defaultConfig: GoogleChartInterface = {
+    chartType: 'GeoChart',
+    dataTable: [],
+    options: {
+      legend: false,
+      region: 155,
+      enableRegionInteractivity: true,
+      displayMode: 'region',
+      colors: [ '#e6e6e6', '#1672AD' ],
+      datalessRegionColor: '#e6e6e6',
+    },
+  };
+
+  constructor() {
+  }
+
+  _googleChartConfig = new BehaviorSubject<GoogleChartInterface | null>(null);
+
+  set googleChartConfig(config: GoogleChartInterface) {
+    const value = this._googleChartConfig.getValue() || {};
+
+    this._googleChartConfig.next(Object.assign({}, value, config));
+  }
+
+  get googleChartConfig$() {
+    return this._googleChartConfig.asObservable();
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.columns && this.data) {
+      this.googleChartConfig = Object.assign({}, this.defaultConfig, this.config, {
+        dataTable: [
+          this.columns,
+          ...this.data,
+        ],
+      });
+    }
+  }
+}

e2e/test-app-v9/src/app/on-push/on-push.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture } from '@angular/core/testing';
 import { ChangeDetectionStrategy } from '@angular/core';
 
 import { ConfigureFn, configureTests } from '@lib/testing';

e2e/test-app-v9/yarn.lock

@@ -6115,6 +6115,13 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+ng2-google-charts@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ng2-google-charts/-/ng2-google-charts-6.1.0.tgz#50a28d358d0e9cc5733f500f0ee325f67a213eda"
+  integrity sha512-nbxG4QdXVM8/ZsbMeMuETHYDQ8JfGDcNYBw8GjeAyZTykVjQykrjUgY+KRGIquhLJIoGMY7myCjlR4YZeKBNcQ==
+  dependencies:
+    tslib "^1.9.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"

jest-preset.js

@@ -12,7 +12,7 @@ module.exports = {
     },
   },
   transform: {
-    '^.+\\.(ts|js|html)$': 'ts-jest',
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
   },
   moduleFileExtensions: ['ts', 'html', 'js', 'json'],
   moduleNameMapper: {

jest.config.js

@@ -7,5 +7,5 @@ module.exports = {
       tsconfig: 'tsconfig.spec.json',
     },
   },
-  testPathIgnorePatterns: ['/e2e/'],
+  testPathIgnorePatterns: ['/e2e/', '/src/__tests__/__mocks__/'],
 };

package.json

@@ -29,15 +29,17 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1"
   },
   "dependencies": {
-    "@jest/create-cache-key-function": "^26.5.0",
     "pretty-format": "26.x",
-    "ts-jest": "^26.2.0"
+    "ts-jest": "^26.4.3"
   },
   "peerDependencies": {
     "@angular/core": ">=8.0.0",
     "@angular/platform-browser-dynamic": ">=8.0.0",
     "jest": "^26.0.0"
   },
+  "optionalDependencies": {
+    "webpack": "^4.0.0"
+  },
   "devDependencies": {
     "@angular/compiler": "^10.1.4",
     "@angular/compiler-cli": "^10.1.4",
@@ -46,6 +48,7 @@
     "@commitlint/config-angular": "11.x",
     "@jest/transform": "26.x",
     "@jest/types": "26.x",
+    "@ngtools/webpack": "^10.1.4",
     "@types/jest": "26.x",
     "@types/node": "14.x",
     "@typescript-eslint/eslint-plugin": "4.x",

scripts/e2e.js

@@ -37,6 +37,7 @@ const executeTest = (projectRealPath) => {
   }
   copySync(join(cwd, 'jest-preset.js'), `${presetDir}/jest-preset.js`);
   copySync(join(cwd, 'setup-jest.js'), `${presetDir}/setup-jest.js`);
+  copySync(join(cwd, 'package.json'), `${presetDir}/package.json`);
   copySync(join(cwd, 'build'), `${presetDir}/build`);
 
   // then we can run the tests

src/__tests__/__mocks__/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+  title = 'test-app-v10';
+}

src/__tests__/__mocks__/foo.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'foo-root',
+  template: `<h1>Hello World !!</h1>`,
+})
+export class FooComponent {
+  title: number = 'test-app-v10';
+}

src/__tests__/__mocks__/foo.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+export class ClassInject {}
+
+@Injectable()
+export class MyService {
+  // eslint-disable-next-line
+  constructor(_v: ClassInject) {}
+}

src/__tests__/__mocks__/foo.spec.ts

@@ -0,0 +1,5 @@
+import { getFoo } from './foo';
+
+jest.mock('./foo');
+
+console.log(getFoo());

src/__tests__/__mocks__/foo.ts

@@ -0,0 +1,3 @@
+export function getFoo(): string {
+  return 'foo';
+}