Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: use angular compiler api to transform codes (#562)
Closes #108 Closes #288 Closes #322 Closes #353 Closes #622 BREAKING CHANGE: With the new jest transformer, `jest-preset-angular` now switches to default to use this new transformer and no longer uses `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.
- Loading branch information
Showing
16 changed files
with
339 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
e2e/test-app-v10/projects/my-lib/src/lib/disableable.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { Directive, ElementRef, Input } from '@angular/core'; | ||
|
|
||
| /** | ||
| * A base class for components that can be disabled, and that store their disabled | ||
| * state in the HTML element. This prevents the HTML element from being focused or clicked, | ||
| * and can be used for CSS selectors. | ||
| */ | ||
| @Directive() | ||
| export abstract class DisableableDirective { | ||
|
|
||
| /** Binds to the HTML disabled property OR disabled attribute, if present. */ | ||
| @Input() | ||
| public set disabled(v: boolean) { | ||
| const elt = this.elementRef.nativeElement; | ||
| const disabledProp = (elt as any).disabled; | ||
| if (typeof (disabledProp) === 'boolean') { | ||
| // Set disabled property | ||
| (elt as any).disabled = v; | ||
| return; | ||
| } | ||
|
|
||
| // Set disabled attribute | ||
| elt.setAttribute('disabled', v.toString()); | ||
| } | ||
| public get disabled(): boolean { | ||
| const elt = this.elementRef.nativeElement; | ||
| const disabledProp = (elt as any).disabled; | ||
| if (typeof (disabledProp) === 'boolean') { | ||
| return disabledProp; | ||
| } | ||
| const disabledAttr = elt.getAttribute('disabled'); | ||
| return disabledAttr === 'true'; | ||
| } | ||
|
|
||
| constructor(public elementRef: ElementRef<HTMLElement>) { } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { forwardRef, Inject, Injector } 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 = Injector.create({providers: [{provide: Lock, deps: []}, {provide: Door, deps: [Lock]}]}); | ||
|
|
||
| expect(injector.get(Door) instanceof Door).toBe(true); | ||
| expect(injector.get(Door).lock instanceof Lock).toBe(true); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
e2e/test-app-v9/src/app/ngc-compiled-lib/ngc-compiled-lib.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
64 changes: 64 additions & 0 deletions
64
e2e/test-app-v9/src/app/ngc-compiled-lib/ngc-compiled-lib.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| ], | ||
| }); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.