Change default container in MzInjectionService for document.body + se…

…tRootViewContainer parameter to Element (#242)
sherweb · Nov 20, 2017 · 9f40996 · 9f40996
1 parent 7887729
commit 9f40996
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 77 deletions.
diff --git a/src/app/modal/services/modal.service.ts b/src/app/modal/services/modal.service.ts
@@ -17,12 +17,10 @@ export class MzModalService {
   /**
    * Open modal component.
    *
-   * @template T
    * @param {Type<MzBaseModal>} componentClass
    * @param {*} [options={}]
    * @returns {ComponentRef<MzBaseModal>}
-   *
-   * @memberOf MzModalService
+   * @memberof MzModalService
    */
   open(componentClass: Type<MzBaseModal>, options: any = {}): ComponentRef<MzBaseModal> {
     const componentRef = this.injectionService.appendComponent(componentClass, options);

diff --git a/src/app/modal/services/modal.service.view.spec.ts b/src/app/modal/services/modal.service.view.spec.ts
@@ -59,7 +59,7 @@ describe('MzModalService:view', () => {
         // expect not be in the DOM
         expect(modal()).toBeNull();
 
-        injectionService.setRootViewContainer(fixture.componentRef);
+        injectionService.setRootViewContainer(nativeElement);
         modalService.open(MzTestModalComponent, options);
 
         expect(injectionService.appendComponent).toHaveBeenCalledWith(MzTestModalComponent, options);
@@ -78,7 +78,7 @@ describe('MzModalService:view', () => {
         const injectionService: MzInjectionService = TestBed.get(MzInjectionService);
         const modalService: MzModalService = TestBed.get(MzModalService);
 
-        injectionService.setRootViewContainer(fixture.componentRef);
+        injectionService.setRootViewContainer(nativeElement);
 
         const componentRef = modalService.open(MzTestModalComponent);
 

diff --git a/src/app/shared/injection/injection.service.ts b/src/app/shared/injection/injection.service.ts
@@ -10,7 +10,7 @@ import {
 
 @Injectable()
 export class MzInjectionService {
-  private container: ComponentRef<any>;
+  private container: Element;
 
   constructor(
     private applicationRef: ApplicationRef,
@@ -24,17 +24,15 @@ export class MzInjectionService {
    * @template T
    * @param {Type<T>} componentClass
    * @param {*} [options={}]
-   * @param {Element} [location=this.getRootViewContainerNode()]
+   * @param {Element} [location=this.getContainerElement()]
    * @returns {ComponentRef<T>}
-   *
-   * @memberOf MzInjectionService
+   * @memberof MzInjectionService
    */
   appendComponent<T>(
     componentClass: Type<T>,
     options: any = {},
-    location: Element = this.getRootViewContainerNode(),
+    location: Element = this.getContainerElement(),
   ): ComponentRef<T> {
-
     // instantiate component to load
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
     const componentRef = componentFactory.create(this.injector);
@@ -58,69 +56,47 @@ export class MzInjectionService {
   }
 
   /**
-   * Overrides the default root view container.
-   *
-   * @param {any} container
+   * Overrides the default container element.
    *
-   * @memberOf MzInjectionService
+   * @param {Element} container
+   * @memberof MzInjectionService
    */
-  setRootViewContainer(container: any): void {
+  setRootViewContainer(container: Element): void {
     this.container = container;
   }
 
-  /**
-   * Gets the root view container to inject the component to.
-   *
-   * @template T
-   * @returns {ComponentRef<T>}
-   *
-   * @memberOf MzInjectionService
-   */
-  private getRootViewContainer<T>(): ComponentRef<T> {
-    if (this.container) {
-      return this.container;
-    }
-
-    const rootComponents = this.applicationRef['_rootComponents'];
-    if (rootComponents.length) {
-      return rootComponents[0];
-    }
-
-    throw Error('View Container not found! It needs to be manually set via setRootViewContainer.');
-  }
-
   /**
    * Gets the html element for a component ref.
    *
+   * @private
    * @param {ComponentRef<any>} componentRef
-   * @returns {HTMLElement}
-   *
-   * @memberOf MzInjectionService
+   * @returns {Element}
+   * @memberof MzInjectionService
    */
-  private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement {
-    return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+  private getComponentRootNode(componentRef: ComponentRef<any>): Element {
+    return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as Element;
   }
 
   /**
-   * Gets the root component container html element.
-   *
-   * @returns {HTMLElement}
+   * Gets the container element.
    *
-   * @memberOf MzInjectionService
+   * @private
+   * @returns {Element}
+   * @memberof MzInjectionService
    */
-  private getRootViewContainerNode(): HTMLElement {
-    const rootViewContainer = this.getRootViewContainer();
-    return this.getComponentRootNode(rootViewContainer);
+  private getContainerElement(): Element {
+    return this.container || document.body;
   }
 
   /**
    * Projects the inputs onto the component.
    *
-   * @param {ComponentRef<any>} component
+   * @private
+   * @template T
+   * @param {ComponentRef<T>} component
    * @param {*} options
-   * @returns {ComponentRef<any>}
-   *
-   * @memberOf MzInjectionService
+   * @returns {ComponentRef<T>}
+   * @memberof MzInjectionService
    */
   private projectComponentInputs<T>(component: ComponentRef<T>, options: any): ComponentRef<T> {
     if (options) {

diff --git a/src/app/shared/injection/injection.service.view.spec.ts b/src/app/shared/injection/injection.service.view.spec.ts
@@ -37,7 +37,7 @@ describe('MzInjectionService:view', () => {
     let nativeElement: any;
 
     function testComponent(): HTMLElement {
-      return nativeElement.querySelector('mz-test');
+      return <HTMLElement>document.querySelector('mz-test');
     }
 
     it('should inject component in the DOM', async(() => {
@@ -51,7 +51,7 @@ describe('MzInjectionService:view', () => {
         // expect not be in the DOM
         expect(testComponent()).toBeNull();
 
-        injectionService.setRootViewContainer(fixture.componentRef);
+        injectionService.setRootViewContainer(nativeElement);
         injectionService.appendComponent(MzTestComponent);
 
         // expect to be in the DOM
@@ -68,7 +68,7 @@ describe('MzInjectionService:view', () => {
 
         const injectionService: MzInjectionService = TestBed.get(MzInjectionService);
 
-        injectionService.setRootViewContainer(fixture.componentRef);
+        injectionService.setRootViewContainer(nativeElement);
         const componentRef = injectionService.appendComponent(MzTestComponent, { inputProperty: 'input-property-x' });
 
         expect(componentRef.instance.inputProperty).toBe('input-property-x');
@@ -84,7 +84,7 @@ describe('MzInjectionService:view', () => {
         const applicationRef: ApplicationRef = TestBed.get(ApplicationRef);
         const injectionService: MzInjectionService = TestBed.get(MzInjectionService);
 
-        injectionService.setRootViewContainer(fixture.componentRef);
+        injectionService.setRootViewContainer(nativeElement);
         const componentRef = injectionService.appendComponent(MzTestComponent);
 
         // expect to be in the DOM
@@ -116,34 +116,17 @@ describe('MzInjectionService:view', () => {
       });
     }));
 
-    it('should append component to application root component in the DOM when location not provided', async(() => {
+    it('should append component to document.body in the DOM when location not provided', async(() => {
 
       buildComponent(``).then(fixture => {
         nativeElement = fixture.nativeElement;
         fixture.detectChanges();
 
-        const applicationRef: ApplicationRef = TestBed.get(ApplicationRef);
         const injectionService: MzInjectionService = TestBed.get(MzInjectionService);
 
-        // mock _rootComponents as this does not exists in the context of TestBed
-        applicationRef['_rootComponents'] = [fixture.componentRef];
-
         injectionService.appendComponent(MzTestComponent);
 
-        expect(testComponent().parentElement).toBe(fixture.nativeElement);
-      });
-    }));
-
-    it('should throw an error when applicationRef does not have _rootComponents and no default location is set', async(() => {
-
-      buildComponent(``).then(fixture => {
-        nativeElement = fixture.nativeElement;
-        fixture.detectChanges();
-
-        const injectionService: MzInjectionService = TestBed.get(MzInjectionService);
-
-        expect(() => injectionService.appendComponent(MzTestComponent))
-          .toThrowError('View Container not found! It needs to be manually set via setRootViewContainer.');
+        expect(testComponent().parentElement).toBe(document.body);
       });
     }));
   });
@@ -163,7 +146,7 @@ describe('MzInjectionService:view', () => {
 
         const injectionService: MzInjectionService = TestBed.get(MzInjectionService);
 
-        injectionService.setRootViewContainer(fixture.componentRef);
+        injectionService.setRootViewContainer(nativeElement);
         injectionService.appendComponent(MzTestComponent);
 
         expect(testComponent().parentElement).toBe(fixture.nativeElement);