feat(components): add support for entry components

you can now pass entryComponents to spectator

#6

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",

src/app/app.component.html

@@ -1,20 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<app-consume-dynamic></app-consume-dynamic>

src/app/app.module.ts

@@ -7,15 +7,20 @@ 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: [
     AppComponent,
     ZippyComponent,
     ButtonComponent,
     HighlightDirective,
-    CalcComponent
+    CalcComponent,
+    DynamicComponent,
+    ConsumeDynamicComponent
   ],
+  entryComponents: [DynamicComponent],
   imports: [BrowserModule, HttpClientModule],
   providers: [],
   bootstrap: [AppComponent]

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<ConsumeDynamicComponent>;
+
+  const createHost = createHostComponentFactory({
+    declarations: [DynamicComponent],
+    entryComponents: [DynamicComponent],
+    component: ConsumeDynamicComponent
+  });
+
+  it("should work", () => {
+    host = createHost(`<app-consume-dynamic></app-consume-dynamic>`);
+    expect(host.component).toBeDefined();
+  });
+
+  it("should render the dynamic component", function() {
+    host = createHost(`<app-consume-dynamic></app-consume-dynamic>`);
+    expect(host.queryHost(".dynamic")).toHaveText("dynamic works!");
+  });
+});

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: `
+    <p>
+      consume-dynamic works!
+    </p>
+  `,
+  styles: []
+})
+export class ConsumeDynamicComponent implements OnInit {
+  constructor(
+    private resolver: ComponentFactoryResolver,
+    private ref: ViewContainerRef
+  ) {}
+
+  ngOnInit() {
+    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
+    this.ref.createComponent(factory);
+  }
+}

src/app/dynamic/dynamic.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-dynamic",
+  template: `
+    <p class="dynamic">
+      dynamic works!
+    </p>
+  `,
+  styles: []
+})
+export class DynamicComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/lib/src/config.ts

@@ -20,17 +20,19 @@ export type SpectatorOptions<T = any, H = HostComponent> = TestModuleMetadata &
   shallow?: boolean;
   disableAnimations?: boolean;
   host?: Type<H>;
+  entryComponents?: any[];
 };
 
 const defaultOptions: SpectatorOptions<any, any> = {
   disableAnimations: true,
   shallow: false,
-  host: HostComponent
+  host: HostComponent,
+  entryComponents: []
 };
 
 export function initialModule<T, C = HostComponent>(options: SpectatorOptions<T, C> | Type<T>, 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<T, C = HostComponent>(options: SpectatorOptions<T,
       declarations: [component, withHost ? host : []],
       imports: [NoopAnimationsModule],
       schemas: [],
-      providers: []
+      providers: [],
+      entryComponents: []
     };
   } else {
     component = merged.component;
@@ -51,7 +54,8 @@ export function initialModule<T, C = HostComponent>(options: SpectatorOptions<T,
       declarations: [component, withHost ? host : [], ...(merged.declarations || [])],
       imports: [merged.disableAnimations ? NoopAnimationsModule : [], ...(merged.imports || [])],
       schemas: [merged.shallow ? NO_ERRORS_SCHEMA : []],
-      providers: [...(merged.providers || [])]
+      providers: [...(merged.providers || [])],
+      entryComponents: [options.entryComponents]
     };
   }
 

src/lib/src/host.ts

@@ -12,6 +12,8 @@ import { Spectator } from './internals';
 import * as customMatchers from './matchers';
 import { By } from '@angular/platform-browser';
 import { HostComponent, initialModule, SpectatorOptions } from './config';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import { DynamicComponent } from '../../app/dynamic/dynamic.component';
 
 export class SpectatorWithHost<C, H = HostComponent> extends Spectator<C> {
   hostComponent: H;
@@ -28,6 +30,37 @@ export class SpectatorWithHost<C, H = HostComponent> extends Spectator<C> {
   byDirective<T>(directive: Type<any>): 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<Element>;
+  queryAllHost(selector: string, debugElement = false): NodeListOf<Element> | DebugElement[] {
+    if (debugElement) {
+      return this.debugElement.queryAll(By.css(selector));
+    }
+
+    return this.element.querySelectorAll(selector);
+  }
 }
 
 export function createHostComponentFactory<C, H = HostComponent>(component: Type<C>): (template: string, detectChanges?: boolean, complexInputs?: Partial<C>) => SpectatorWithHost<C, H>;
@@ -45,6 +78,11 @@ export function createHostComponentFactory<C, H = HostComponent>(options: Specta
 
   return (template: string, detectChanges = true, complexInputs: Partial<C> = {}) => {
     TestBed.overrideComponent(host, { set: { template: template } });
+    TestBed.overrideModule(BrowserDynamicTestingModule, {
+      set: {
+        entryComponents: moduleMetadata.entryComponents
+      }
+    });
     const spectatorWithHost = new SpectatorWithHost<C, H>();
     spectatorWithHost.hostFixture = TestBed.createComponent(host);
 

src/lib/tsconfig.json

@@ -8,7 +8,6 @@
     ],
     "declaration": true,
     "outDir": "./dist",
-    "noEmitOnError": false,
     "typeRoots": [
       "./node_modules/@types",
       "src"

src/tsconfig.app.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "module": "es2015",
-    "types": []
+    "module": "es2015"
   },
   "exclude": [
     "test.ts",

tsconfig.json

@@ -5,6 +5,7 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
+    "noEmitOnError": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",