Exploring the testing of a child component's @output feature in Angular 2 is my current goal. My aim is to utilize a mock version of the child component's @output functionality to trigger a function within the parent component for testing purposes.
I plan to mock the component and thoroughly test all asynchronous methods involved.
<wizard-quick-search-page *ngIf="initSearchPanel" [createUserAttributes]="createUserAttributes" [existingUserAttributes]="existingUserAttributes" (edit)="showEditUserPanel($event)"
(create)="showCreateUserPanel($event)">
</wizard-quick-search-page>
@Component({
selector: 'wizard-quick-search-page',
template: '<button class="quick-search-page-submit" (click)="onClick()">Create</button>'
})
class MockQuickSearchPageComponent {
@Output() public create: EventEmitter<any> = new EventEmitter<any>();
public onClick(): void {
console.log('call create');
this.create.emit(true);
}
}
fdescribe('AddUserComponent', () => {
let component: AddUserComponent;
let fixture: ComponentFixture<AddUserComponent>;
let mockQuickSearchComponent: MockQuickSearchPageComponent;
let mockQuickSearchComponentFixture: ComponentFixture<MockQuickSearchPageComponent>;
let createButton: DebugElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
{ provide: Language, useClass: MockLanguage }
],
declarations: [
AddUserComponent,
MockQuickSearchPageComponent
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddUserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('quickSearchComponent', () => {
beforeEach(() => {
mockQuickSearchComponentFixture = TestBed.createComponent(MockQuickSearchPageComponent);
mockQuickSearchComponent = mockQuickSearchComponentFixture.componentInstance;
mockQuickSearchComponentFixture.detectChanges();
createButton = mockQuickSearchComponentFixture.debugElement.query(By.css('button.quick-search-page-submit'));
});
it('should create', () => {
expect(mockQuickSearchComponent).toBeTruthy();
});
it('should open create a new user panel', fakeAsync(() => {
spyOn(component, 'showCreateUserPanel');
createButton.triggerEventHandler('click', null);
tick();
mockQuickSearchComponentFixture.detectChanges();
expect(component.showCreateUserPanel).toHaveBeenCalled();
}));
});
});
The parent component's function 'component.showCreateUserPanel' has not been called as expected.