From 8ba68709a9b02130b511b6658b99107233d341d2 Mon Sep 17 00:00:00 2001 From: Netanel Basal Date: Thu, 5 Apr 2018 10:59:17 +0300 Subject: [PATCH] feat(components): add support for entry components you can now pass entryComponents to spectator #6 --- package.json | 1 - src/app/app.component.html | 21 +--------- src/app/app.module.ts | 7 +++- .../consume-dynamic.component.spec.ts | 26 +++++++++++++ .../consume-dynamic.component.ts | 28 ++++++++++++++ src/app/dynamic/dynamic.component.ts | 16 ++++++++ src/index.ts | 2 - src/lib/src/config.ts | 12 ++++-- src/lib/src/host.ts | 38 +++++++++++++++++++ src/lib/tsconfig.json | 1 - src/tsconfig.app.json | 3 +- tsconfig.json | 1 + 12 files changed, 125 insertions(+), 31 deletions(-) create mode 100644 src/app/consum-dynamic/consume-dynamic.component.spec.ts create mode 100644 src/app/consum-dynamic/consume-dynamic.component.ts create mode 100644 src/app/dynamic/dynamic.component.ts delete mode 100644 src/index.ts diff --git a/package.json b/package.json index 41bb51ec..ec3cd96d 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ "@commitlint/config-angular": "^6.1.3", "@commitlint/config-conventional": "^6.1.3", "@types/jasmine": "^2.8.6", - "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "all-contributors-cli": "^4.11.1", "codelyzer": "^4.0.1", diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a4..ccf86ed7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- - + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e8bfe910..8188c4b0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,8 @@ import { ButtonComponent } from "./button/button.component"; import { HttpClientModule } from "@angular/common/http"; import { HighlightDirective } from "./highlight.directive"; import { CalcComponent } from "./calc/calc.component"; +import { DynamicComponent } from "./dynamic/dynamic.component"; +import { ConsumeDynamicComponent } from "./consum-dynamic/consume-dynamic.component"; @NgModule({ declarations: [ @@ -14,8 +16,11 @@ import { CalcComponent } from "./calc/calc.component"; ZippyComponent, ButtonComponent, HighlightDirective, - CalcComponent + CalcComponent, + DynamicComponent, + ConsumeDynamicComponent ], + entryComponents: [DynamicComponent], imports: [BrowserModule, HttpClientModule], providers: [], bootstrap: [AppComponent] diff --git a/src/app/consum-dynamic/consume-dynamic.component.spec.ts b/src/app/consum-dynamic/consume-dynamic.component.spec.ts new file mode 100644 index 00000000..35bf6481 --- /dev/null +++ b/src/app/consum-dynamic/consume-dynamic.component.spec.ts @@ -0,0 +1,26 @@ +import { + createHostComponentFactory, + SpectatorWithHost +} from "../../lib/src/host"; +import { ConsumeDynamicComponent } from "./consume-dynamic.component"; +import { DynamicComponent } from "../dynamic/dynamic.component"; + +fdescribe("ConsumeDynamicComponent", () => { + let host: SpectatorWithHost; + + const createHost = createHostComponentFactory({ + declarations: [DynamicComponent], + entryComponents: [DynamicComponent], + component: ConsumeDynamicComponent + }); + + it("should work", () => { + host = createHost(``); + expect(host.component).toBeDefined(); + }); + + it("should render the dynamic component", function() { + host = createHost(``); + expect(host.queryHost(".dynamic")).toHaveText("dynamic works!"); + }); +}); diff --git a/src/app/consum-dynamic/consume-dynamic.component.ts b/src/app/consum-dynamic/consume-dynamic.component.ts new file mode 100644 index 00000000..a8395253 --- /dev/null +++ b/src/app/consum-dynamic/consume-dynamic.component.ts @@ -0,0 +1,28 @@ +import { + Component, + ComponentFactoryResolver, + OnInit, + ViewContainerRef +} from "@angular/core"; +import { DynamicComponent } from "../dynamic/dynamic.component"; + +@Component({ + selector: "app-consume-dynamic", + template: ` +

+ consume-dynamic works! +

+ `, + styles: [] +}) +export class ConsumeDynamicComponent implements OnInit { + constructor( + private resolver: ComponentFactoryResolver, + private ref: ViewContainerRef + ) {} + + ngOnInit() { + const factory = this.resolver.resolveComponentFactory(DynamicComponent); + this.ref.createComponent(factory); + } +} diff --git a/src/app/dynamic/dynamic.component.ts b/src/app/dynamic/dynamic.component.ts new file mode 100644 index 00000000..83fb3214 --- /dev/null +++ b/src/app/dynamic/dynamic.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from "@angular/core"; + +@Component({ + selector: "app-dynamic", + template: ` +

+ dynamic works! +

+ `, + styles: [] +}) +export class DynamicComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/src/index.ts b/src/index.ts deleted file mode 100644 index 6ceb873a..00000000 --- a/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -export * from "./easy-test"; diff --git a/src/lib/src/config.ts b/src/lib/src/config.ts index df533015..442113e8 100644 --- a/src/lib/src/config.ts +++ b/src/lib/src/config.ts @@ -20,17 +20,19 @@ export type SpectatorOptions = TestModuleMetadata & shallow?: boolean; disableAnimations?: boolean; host?: Type; + entryComponents?: any[]; }; const defaultOptions: SpectatorOptions = { disableAnimations: true, shallow: false, - host: HostComponent + host: HostComponent, + entryComponents: [] }; export function initialModule(options: SpectatorOptions | Type, withHost = false) { const merged = Object.assign({}, defaultOptions, options); - let moduleMetadata: TestModuleMetadata; + let moduleMetadata: TestModuleMetadata & { entryComponents: any[] }; let component; let host; @@ -41,7 +43,8 @@ export function initialModule(options: SpectatorOptions(options: SpectatorOptions extends Spectator { hostComponent: H; @@ -28,6 +30,37 @@ export class SpectatorWithHost extends Spectator { byDirective(directive: Type): DebugElement { return this.hostDebugElement.query(By.directive(directive)); } + + /** + * + * @param {string} selector + * @param {true} debugElement + * @returns {DebugElement} + */ + queryHost(selector: string, debugElement: true): DebugElement; + queryHost(selector: string, debugElement?: false): Element; + queryHost(selector: string, debugElement = false): Element | DebugElement { + if (debugElement) { + return this.hostDebugElement.query(By.css(selector)); + } + + return this.hostElement.querySelector(selector); + } + + /** + * Query a DOM elements from the tested element + * @param selector + * @returns {any} + */ + queryAllHost(selector: string, debugElement: true): DebugElement[]; + queryAllHost(selector: string, debugElement?: false): NodeListOf; + queryAllHost(selector: string, debugElement = false): NodeListOf | DebugElement[] { + if (debugElement) { + return this.debugElement.queryAll(By.css(selector)); + } + + return this.element.querySelectorAll(selector); + } } export function createHostComponentFactory(component: Type): (template: string, detectChanges?: boolean, complexInputs?: Partial) => SpectatorWithHost; @@ -45,6 +78,11 @@ export function createHostComponentFactory(options: Specta return (template: string, detectChanges = true, complexInputs: Partial = {}) => { TestBed.overrideComponent(host, { set: { template: template } }); + TestBed.overrideModule(BrowserDynamicTestingModule, { + set: { + entryComponents: moduleMetadata.entryComponents + } + }); const spectatorWithHost = new SpectatorWithHost(); spectatorWithHost.hostFixture = TestBed.createComponent(host); diff --git a/src/lib/tsconfig.json b/src/lib/tsconfig.json index 6922fb77..d2aaf712 100644 --- a/src/lib/tsconfig.json +++ b/src/lib/tsconfig.json @@ -8,7 +8,6 @@ ], "declaration": true, "outDir": "./dist", - "noEmitOnError": false, "typeRoots": [ "./node_modules/@types", "src" diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json index 39ba8dba..b3e42825 100644 --- a/src/tsconfig.app.json +++ b/src/tsconfig.app.json @@ -3,8 +3,7 @@ "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", - "module": "es2015", - "types": [] + "module": "es2015" }, "exclude": [ "test.ts", diff --git a/tsconfig.json b/tsconfig.json index a6c016bf..ea7c56c8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,6 +5,7 @@ "sourceMap": true, "declaration": false, "moduleResolution": "node", + "noEmitOnError": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5",