#46: Way to pass Component to MockRender instead of template.

README.md

@@ -374,6 +374,7 @@ Providers simple way to render anything, change `@Inputs` and `@Outputs` of test
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MockModule, MockRender } from 'ng-mocks';
+
 import { DependencyModule } from './dependency.module';
 import { TestedComponent } from './tested.component';
 
@@ -390,7 +391,7 @@ describe('MockRender', () => {
     });
   });
 
-  it('renders ', () => {
+  it('renders template', () => {
     const spy = jasmine.createSpy();
     const fixture = MockRender(
       `
@@ -410,10 +411,29 @@ describe('MockRender', () => {
     // assert on some side effect
     const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))
       .componentInstance as TestedComponent;
-    componentInstance.trigger.emit('foo');
+    componentInstance.trigger.emit('foo1');
     expect(componentInstance.value1).toEqual('something1');
     expect(componentInstance.value2).toEqual('check');
-    expect(spy).toHaveBeenCalledWith('foo');
+    expect(spy).toHaveBeenCalledWith('foo1');
+  });
+
+  it('renders component', () => {
+    const spy = jasmine.createSpy();
+    // generates template like:
+    // <tested [value1]="value1" [value2]="value2" (trigger)="trigger"></tested>
+    // and returns fixture with a component with properties value1, value2 and empty callback trigger.
+    const fixture = MockRender(TestedComponent, {
+      trigger: spy,
+      value1: 'something2',
+    });
+
+    // assert on some side effect
+    const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))
+      .componentInstance as TestedComponent;
+    componentInstance.trigger.emit('foo2');
+    expect(componentInstance.value1).toEqual('something2');
+    expect(componentInstance.value2).toBeUndefined();
+    expect(spy).toHaveBeenCalledWith('foo2');
   });
 });
 ```

e2e/on-push/on-push.spec.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, DebugElement, Input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MockRender } from '../../lib/mock-render';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'item-list',
+  template: '{{items.length}}',
+})
+export class ItemListComponent {
+  @Input() items: string[];
+}
+
+/* tslint:disable:max-classes-per-file */
+@Component({
+  selector: 'item-list-wrapper',
+  template: '<item-list [items]="items"></item-list>',
+})
+export class ItemListWrapperComponent {
+  @Input() items: string[];
+}
+/* tslint:enable:max-classes-per-file */
+
+describe('ChangeDetectionStrategy.OnPush:real', () => {
+  let wrapper: ComponentFixture<ItemListWrapperComponent>;
+  let component: DebugElement;
+
+  beforeEach(() => {
+    // const wrapperType = WrapComponent(ItemListComponent);
+    TestBed.configureTestingModule({
+      declarations: [
+        ItemListComponent,
+        ItemListWrapperComponent,
+        // wrapperType,
+      ],
+    });
+
+    wrapper = TestBed.createComponent(ItemListWrapperComponent);
+    wrapper.componentInstance.items = [];
+    wrapper.detectChanges();
+
+    component = wrapper.debugElement.query(By.directive(ItemListComponent));
+  });
+
+  it('should show 0 if no items', () => {
+    expect(component.nativeElement.innerText).toEqual('0');
+  });
+
+  it('should show 0 if items pushed to array but not changed reference', () => {
+    wrapper.componentInstance.items.push('demo');
+    wrapper.detectChanges();
+
+    expect(component.nativeElement.innerText).toEqual('0');
+  });
+
+  it('should show 1 if items array changed reference', () => {
+    wrapper.componentInstance.items = ['demo'];
+    wrapper.detectChanges();
+
+    expect(component.nativeElement.innerText).toEqual('1');
+  });
+});
+
+describe('ChangeDetectionStrategy.OnPush:mock', () => {
+  let fixture: ComponentFixture<ItemListComponent>;
+  let component: ItemListComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        ItemListComponent,
+      ],
+    });
+
+    fixture = MockRender(ItemListComponent, {
+      items: [],
+    });
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should show 0 if no items', () => {
+    expect(fixture.nativeElement.innerText).toEqual('0');
+  });
+
+  it('should show 0 if items pushed to array but not changed reference', () => {
+    component.items.push('demo');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerText).toEqual('0');
+  });
+
+  it('should show 1 if items array changed reference', () => {
+    component.items = ['demo'];
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerText).toEqual('1');
+  });
+});

examples/MockRender/MockRender.spec.ts

@@ -1,6 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MockModule, MockRender } from 'ng-mocks';
+
 import { DependencyModule } from './dependency.module';
 import { TestedComponent } from './tested.component';
 
@@ -17,7 +18,7 @@ describe('MockRender', () => {
     });
   });
 
-  it('renders ', () => {
+  it('renders template', () => {
     const spy = jasmine.createSpy();
     const fixture = MockRender(
       `
@@ -37,9 +38,28 @@ describe('MockRender', () => {
     // assert on some side effect
     const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))
       .componentInstance as TestedComponent;
-    componentInstance.trigger.emit('foo');
+    componentInstance.trigger.emit('foo1');
     expect(componentInstance.value1).toEqual('something1');
     expect(componentInstance.value2).toEqual('check');
-    expect(spy).toHaveBeenCalledWith('foo');
+    expect(spy).toHaveBeenCalledWith('foo1');
+  });
+
+  it('renders component', () => {
+    const spy = jasmine.createSpy();
+    // generates template like:
+    // <tested [value1]="value1" [value2]="value2" (trigger)="trigger"></tested>
+    // and returns fixture with a component with properties value1, value2 and empty callback trigger.
+    const fixture = MockRender(TestedComponent, {
+      trigger: spy,
+      value1: 'something2',
+    });
+
+    // assert on some side effect
+    const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))
+      .componentInstance as TestedComponent;
+    componentInstance.trigger.emit('foo2');
+    expect(componentInstance.value1).toEqual('something2');
+    expect(componentInstance.value2).toBeUndefined();
+    expect(spy).toHaveBeenCalledWith('foo2');
   });
 });

lib/common/reflect.ts

@@ -1,4 +1,5 @@
 import { MockDirectiveResolver, MockNgModuleResolver, MockPipeResolver } from '@angular/compiler/testing';
+
 import { JitReflector } from './jit-reflector';
 
 export const jitReflector = new JitReflector();

lib/mock-component/mock-component.spec.ts

@@ -2,6 +2,7 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+
 import { MockComponent, MockComponents, MockedComponent } from './mock-component';
 import { ChildComponent } from './test-components/child-component.component';
 import { CustomFormControlComponent } from './test-components/custom-form-control.component';

lib/mock-component/mock-component.ts

@@ -10,6 +10,7 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
 import { MockOf } from '../common';
 import { directiveResolver } from '../common/reflect';
 

lib/mock-declaration/mock-declaration.ts

@@ -1,4 +1,5 @@
 import { Type } from '@angular/core';
+
 import { jitReflector, pipeResolver } from '../common/reflect';
 import { MockComponent } from '../mock-component';
 import { MockDirective } from '../mock-directive';

lib/mock-directive/mock-directive.spec.ts

@@ -3,6 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormControlDirective } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockedDirective, MockHelper } from 'ng-mocks';
+
 import { MockDirective } from './mock-directive';
 
 // tslint:disable:max-classes-per-file

lib/mock-directive/mock-directive.ts

@@ -8,6 +8,7 @@ import {
   Type,
   ViewContainerRef
 } from '@angular/core';
+
 import { MockOf } from '../common';
 import { directiveResolver } from '../common/reflect';
 

lib/mock-helper/mock-helper.spec.ts

@@ -3,8 +3,10 @@
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
 import { async, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+
 import { MockDirective, MockedDirective } from '../mock-directive';
 import { MockRender } from '../mock-render';
+
 import { MockHelper } from './mock-helper';
 
 @Directive({

lib/mock-module/mock-module.spec.ts

@@ -5,7 +5,9 @@ import { Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 import { MockComponent } from '../mock-component';
+
 import { MockModule } from './mock-module';
 import {
   AppRoutingModule,

lib/mock-module/mock-module.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule, Provider, Type } from '@angular/core';
+
 import { MockOf } from '../common';
 import { jitReflector, ngModuleResolver } from '../common/reflect';
 import { MockDeclaration } from '../mock-declaration';

lib/mock-pipe/mock-pipe.spec.ts

@@ -1,6 +1,7 @@
 import { Component, Pipe, PipeTransform } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+
 import { MockPipe } from './mock-pipe';
 
 @Pipe({ name: 'mockedPipe' })

lib/mock-pipe/mock-pipe.ts

@@ -1,4 +1,5 @@
 import { Pipe, PipeTransform, Type } from '@angular/core';
+
 import { MockOf } from '../common';
 import { pipeResolver } from '../common/reflect';
 

lib/mock-render/mock-render.spec.ts

@@ -1,6 +1,7 @@
 import createSpy = jasmine.createSpy;
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+
 import { MockRender } from './mock-render';
 import { RenderRealComponent } from './mock-render.fixtures';
 

lib/mock-render/mock-render.ts

@@ -1,10 +1,43 @@
 import { Component, Type } from '@angular/core';
 import { ComponentFixture, getTestBed, TestBed } from '@angular/core/testing';
 
-export function MockRender<TComponent>(template: string, params?: TComponent): ComponentFixture<TComponent> {
+import { directiveResolver } from '../common/reflect';
+
+function MockRender<MComponent, TComponent extends {[key: string]: any}>(
+  template: string | Type<MComponent>,
+  params?: TComponent
+): ComponentFixture<TComponent> {
+  let mockedTemplate = '';
+  if (typeof template === 'string') {
+    mockedTemplate = template;
+  } else {
+    const {inputs, outputs, selector} = directiveResolver.resolve(template);
+    mockedTemplate += `<${selector}`;
+    if (inputs) {
+      inputs.forEach((definition: string) => {
+        const [property, alias] = definition.split(': ');
+        if (alias && params && typeof params[alias]) {
+          mockedTemplate += ` [${alias}]="${alias}"`;
+        } else if (property && params && typeof params[property]) {
+          mockedTemplate += ` [${property}]="${property}"`;
+        }
+      });
+    }
+    if (outputs) {
+      outputs.forEach((definition: string) => {
+        const [property, alias] = definition.split(': ');
+        if (alias && params && typeof params[alias]) {
+          mockedTemplate += ` (${alias})="${alias}($event)"`;
+        } else if (property && params && typeof params[property]) {
+          mockedTemplate += ` (${property})="${property}($event)"`;
+        }
+      });
+    }
+    mockedTemplate += `></${selector}>`;
+  }
   const options: Component = {
     selector: 'mock-render',
-    template
+    template: mockedTemplate,
   };
 
   // tslint:disable-next-line:no-angle-bracket-type-assertion
@@ -27,3 +60,5 @@ export function MockRender<TComponent>(template: string, params?: TComponent): C
   fixture.detectChanges();
   return fixture;
 }
+
+export { MockRender };