Respect of @ContentChild in mocked template

help-me-mom · Nov 1, 2018 · 9cee247 · 9cee247
1 parent 2de4691
commit 9cee247
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 3 deletions.
diff --git a/lib/mock-component/mock-component.spec.ts b/lib/mock-component/mock-component.spec.ts
@@ -7,6 +7,7 @@ import { ChildComponent } from './test-components/child-component.component';
 import { CustomFormControlComponent } from './test-components/custom-form-control.component';
 import { EmptyComponent } from './test-components/empty-component.component';
 import { SimpleComponent } from './test-components/simple-component.component';
+import { TemplateOutletComponent } from './test-components/template-outlet.component';
 
 @Component({
   selector: 'example-component-container',
@@ -23,6 +24,12 @@ import { SimpleComponent } from './test-components/simple-component.component';
     <empty-component id="ng-content-component">doh</empty-component>
     <empty-component id="ngmodel-component" [(ngModel)]="someOutputHasEmitted"></empty-component>
     <child-component></child-component>
+    <template-outlet-component>
+      ng-content body header
+      <ng-template #block1><div>block 1 body</div></ng-template>
+      <ng-template #block2><span>block 2 body</span></ng-template>
+      ng-content body footer
+    </template-outlet-component>
   `
 })
 export class ExampleComponentContainer {
@@ -45,6 +52,7 @@ describe('MockComponent', () => {
         ExampleComponentContainer,
         MockComponents(EmptyComponent,
                        SimpleComponent,
+                       TemplateOutletComponent,
                        ChildComponent,
                        CustomFormControlComponent),
       ],
@@ -159,4 +167,27 @@ describe('MockComponent', () => {
       expect(component.formControl.value).toBe('foo');
     });
   });
+
+  describe('NgTemplateOutlet', () => {
+    it('renders all @ContentChild properties and ngContent too', () => {
+      fixture.detectChanges();
+      const templateOutlet = fixture.debugElement.query(By.directive(MockComponent(TemplateOutletComponent)));
+      expect(templateOutlet).toBeDefined();
+
+      // looking for ng-content.
+      const ngContent = templateOutlet.query(By.css('[data-key="ng-content"]'));
+      expect(ngContent).toBeTruthy();
+      expect(ngContent.nativeElement.innerText).toEqual('ng-content body header ng-content body footer');
+
+      // looking for 1st templateRef.
+      const block1 = templateOutlet.query(By.css('[data-key="block1"]'));
+      expect(block1).toBeTruthy();
+      expect(block1.nativeElement.innerText).toEqual('block 1 body');
+
+      // looking for 2nd templateRef.
+      const block2 = templateOutlet.query(By.css('[data-key="block2"]'));
+      expect(block2).toBeTruthy();
+      expect(block2.nativeElement.innerText).toEqual('block 2 body');
+    });
+  });
 });
diff --git a/lib/mock-component/mock-component.ts b/lib/mock-component/mock-component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Type } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Query, Type } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MockOf } from '../common';
 import { directiveResolver } from '../common/reflect';
@@ -21,7 +21,16 @@ export function MockComponent<TComponent>(component: Type<TComponent>): Type<TCo
     return cacheHit as Type<TComponent>;
   }
 
-  const { exportAs, inputs, outputs, selector } = directiveResolver.resolve(component);
+  const { exportAs, inputs, outputs, queries, selector } = directiveResolver.resolve(component);
+
+  let template = '<div data-key="ng-content"><ng-content></ng-content></div>';
+  if (queries) {
+    template += Object.keys(queries)
+      .map((key: string) => {
+        const query: Query = queries[key];
+        return `<div data-key="${query.selector}"><template [ngTemplateOutlet]="${key}"></template></div>`;
+      }).join('');
+  }
 
   const options: Component = {
     exportAs,
@@ -36,8 +45,9 @@ export function MockComponent<TComponent>(component: Type<TComponent>): Type<TCo
       provide: component,
       useExisting: forwardRef(() => ComponentMock)
     }],
+    queries,
     selector,
-    template: '<ng-content></ng-content>'
+    template,
   };
 
   @MockOf(component)

diff --git a/lib/mock-component/test-components/template-outlet.component.ts b/lib/mock-component/test-components/template-outlet.component.ts
@@ -0,0 +1,14 @@
+import { Component, ContentChild, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'template-outlet-component',
+  template: `
+    <h1><template [ngTemplateOutlet]="injectedBlock1"></template></h1>
+    <h2><template [ngTemplateOutlet]="injectedBlock2"></template></h2>
+    <h3><ng-content></ng-content></h3>
+  `,
+})
+export class TemplateOutletComponent {
+  @ContentChild('block1') injectedBlock1: TemplateRef<any>;
+  @ContentChild('block2') injectedBlock2: TemplateRef<any>;
+}