I'm trying to write a unit test checking that I can handle a custom event and verify that I send back the same event
Seems that my event isn't triggered or handled, I can't say
here is the component :
@Component({
selector: 'sites',
templateUrl: './sites.component.html',
styleUrls: ['./sites.component.css'],
})
export class SitesComponent implements OnInit {
@Input()
sites : Site[];
@Output()
selectedSiteEvent = new EventEmitter();
constructor() {
}
ngOnInit() {
}
handleEvent(event: Event){
console.log("ici ici ici ");
this.selectedSiteEvent.emit(event);
}
}
The template :
<div layout="columns" class="sites">
sites
<site *ngFor='let occur of sites' [site]="occur" (selectedSiteEvent)="handleEvent($event)">
</site>
</div>
And the test case :
describe('SitesComponent', () => {
let component: SitesComponent;
let fixture: ComponentFixture<SitesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SitesComponent, MockSite ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SitesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should raise selectedSiteEvent event when child output this event', () => {
spyOn(component.selectedSiteEvent, 'emit');
let de: DebugElement = fixture.debugElement.query(By.css('.sites'));
de.triggerEventHandler('selectedSiteEvent', null);
fixture.detectChanges();
expect(component.selectedSiteEvent.emit).toHaveBeenCalled()
});
});