feat: mock directives now have event emitter bound outputs

help-me-mom · Mar 25, 2018 · bac1ca5 · bac1ca5
1 parent fee5a03
commit bac1ca5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/lib/mock-directive/mock-directive.spec.ts b/lib/mock-directive/mock-directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, Directive, Input } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, Output } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControlDirective } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -10,17 +10,20 @@ import { MockDirective } from './mock-directive';
 })
 export class ExampleDirective {
   @Input() exampleDirective: string;
+  @Output() someOutput = new EventEmitter<boolean>();
   @Input('bah') something: string;
 }
 
 @Component({
   selector: 'example-component-container',
   template: `
-    <div [exampleDirective]="'bye'" [bah]="'hi'" #f="foo"></div>
+    <div [exampleDirective]="'bye'" [bah]="'hi'" #f="foo" (someOutput)="emitted = $event"></div>
     <div exampleDirective></div>
   `
 })
-export class ExampleComponentContainer {} // tslint:disable-line:max-classes-per-file
+export class ExampleComponentContainer {
+  emitted = false;
+} // tslint:disable-line:max-classes-per-file
 
 describe('MockComponent', () => {
   let fixture: ComponentFixture<ExampleComponentContainer>;
@@ -52,6 +55,14 @@ describe('MockComponent', () => {
     expect(element.exampleDirective).toEqual('bye');
   });
 
+  it('triggers output bound behavior for extended outputs', () => {
+    const debugElement = fixture.debugElement.query(By.directive(MockDirective(ExampleDirective)));
+    const element = debugElement.injector.get(MockDirective(ExampleDirective));
+
+    element.someOutput.emit(true);
+    expect(fixture.componentInstance.emitted).toEqual(true);
+  });
+
   it('should memoize the return value by argument', () => {
     expect(MockDirective(ExampleDirective)).toEqual(MockDirective(ExampleDirective));
     expect(MockDirective(ExampleDirective)).not.toEqual(ExampleDirective);

diff --git a/lib/mock-directive/mock-directive.ts b/lib/mock-directive/mock-directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Type } from '@angular/core';
+import { Directive, EventEmitter, Type } from '@angular/core';
 import { getInputsOutputs } from '../common/reflect';
 
 const cache = new Map<Type<Directive>, Type<Directive>>();
@@ -31,7 +31,16 @@ export function MockDirective<TDirective>(directive: Type<TDirective>): Type<TDi
     selector: annotation.selector
   };
 
-  const mockedDirective =  Directive(options)(class DirectiveMock {} as Type<TDirective>);
+  // tslint:disable-next-line:no-unnecessary-class
+  class DirectiveMock {
+    constructor() {
+      (options.outputs || []).forEach((output) => {
+        (this as any)[output.split(':')[0]] = new EventEmitter<any>();
+      });
+    }
+  }
+
+  const mockedDirective =  Directive(options)(DirectiveMock as Type<TDirective>);
   cache.set(directive, mockedDirective);
 
   return mockedDirective;