Testing select input change in Angular2/Jasmine

Question

I'm having trouble figuring out how to simulate a change in the value of a dropdown list in my jasmine unit test.

When the dropdown list value is changed, it emits an event.

My current test looks like:

spyOn(component.varChange, 'emit');

let selectEl: DebugElement = fixture.debugElement.query(By.css("#selectBox"));
selectEl.nativeElement.selectedIndex = 0;
selectEl.nativeElement.dispatchEvent(new Event("input"));
fixture.detectChanges();
expect(component.varChange.emit).toHaveBeenCalledWith(testData[0]);

The error I receive is:Expected spy emit to have been called with [ Object({ ... }) ] but it was never called.

Julia Passynkova · Accepted Answer · 2017-06-29 17:41:08Z

2

This the way how I test a similar component with select box:

fit('should emit event when option is selected', async(() => {
  component.pageSelected.subscribe(() => {
     expect(true).toBeTruthy();
  });
  component.pages = [{id: 1, name: 'julia'}, {id: 2, name: 'xxx'}];
  fixture.detectChanges();

  const options = debugElement.queryAll(By.css('option'));
  dispatchFakeEvent(options[0].nativeElement, 'change');
  fixture.detectChanges();
}));

===

pageSelected is an output of the component. Basically I have to test when an select option got changed the component fires event.

  @Output() pageSelected = new EventEmitter<number>();

====

here is dispatchFakeEvent

// from angular materail
export function createFakeEvent(type: string) {
 const event = document.createEvent('Event');
 event.initEvent(type, true, true);
 return event;
}

export function dispatchFakeEvent(node: Node | Window, type: string) 
{
  node.dispatchEvent(createFakeEvent(type));
}

edited Jun 29, 2017 at 17:41

answered Jun 28, 2017 at 15:41

Julia Passynkova

18k6 gold badges36 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maia Over a year ago

Forgive my ignorance, but I'm getting the error "Property 'pageSelected' does not exist on type 'myComponent'"...?

Julia Passynkova Over a year ago

this is an output of the component. basically i have to test when an select option got changed the component fires event. @Output() pageSelected = new EventEmitter<number>();

maia Over a year ago

And "dispatchFakeEvent" is also an event emitter?

Collectives™ on Stack Overflow

Testing select input change in Angular2/Jasmine

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related