title: How to test child component @output
body: <p>I would like to test a child component @output in angular2. I want to use this mock child component @output to activate a parent component function and test it.</p>
  
  <p>Mock the component and test all the async method.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;wizard-quick-search-page *ngIf="initSearchPanel" [createUserAttributes]="createUserAttributes" [existingUserAttributes]="existingUserAttributes" (edit)="showEditUserPanel($event)"
    (create)="showCreateUserPanel($event)"&gt;
  &lt;/wizard-quick-search-page&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'wizard-quick-search-page',
    template: '&lt;button class="quick-search-page-submit" (click)="onClick()"&gt;Create&lt;/button&gt;'
  })
  class MockQuickSearchPageComponent {
    @Output() public create: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
    public onClick(): void {
      console.log('call create');
      this.create.emit(true);
    }
  }
  
  fdescribe('AddUserComponent', () =&gt; {
    let component: AddUserComponent;
    let fixture: ComponentFixture&lt;AddUserComponent&gt;;
    let mockQuickSearchComponent: MockQuickSearchPageComponent;
    let mockQuickSearchComponentFixture: ComponentFixture&lt;MockQuickSearchPageComponent&gt;;
    let createButton: DebugElement;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        providers: [
          { provide: Language, useClass: MockLanguage }
        ],
        declarations: [
          AddUserComponent,
          MockQuickSearchPageComponent
        ],
        schemas: [NO_ERRORS_SCHEMA]
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(AddUserComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    describe('quickSearchComponent', () =&gt; {
      beforeEach(() =&gt; {
        mockQuickSearchComponentFixture = TestBed.createComponent(MockQuickSearchPageComponent);
        mockQuickSearchComponent = mockQuickSearchComponentFixture.componentInstance;
        mockQuickSearchComponentFixture.detectChanges();
  
        createButton = mockQuickSearchComponentFixture.debugElement.query(By.css('button.quick-search-page-submit'));
      });
  
      it('should create', () =&gt; {
        expect(mockQuickSearchComponent).toBeTruthy();
      });
  
      it('should open create a new user panel', fakeAsync(() =&gt; {
        spyOn(component, 'showCreateUserPanel');
        createButton.triggerEventHandler('click', null);
        tick();
        mockQuickSearchComponentFixture.detectChanges();
        expect(component.showCreateUserPanel).toHaveBeenCalled();
      }));
    });
  });
  </code></pre>
  
  <p>Parent component function component.showCreateUserPanel not been called</p>