Jasmine test, cause mat-select to emit selectionChange event?

Question

In my Angular5 app, I have a mat-select for a list of dates. When the user selects a new date from the options, my selectionChange processor kicks off a request for data.

I'm trying to write a Jasmine test to simulate the user interaction to verify that the processing is done correctly. I don't know how to get the mat-select to select a value and emit selectionChange as if the user made the selection.

I've seen an issue on the Angular Material2 GitHub (issue 5082) that references the tests for mat-select - I tried to create an down-arrow keydown event to trigger selection of the next item:

let selCtrl = fixture.nativeElement.querySelector('mat-select');
selCtrl.dispatchEvent(new KeyboardEvent({key: 'ArrowDown', code: 'ArrowDown'});

However, this doesn't appear to be working - checking the event I create and the mat-select code it appears that keyCode isn't being created, and it's required by mat-select.

I've tried setting the value of the control programmatically, but this doesn't trigger emitting of selectionChanged.

Any suggestions of how to trigger changes to mat-select from a Jasmine test?

Answer 1

What i did to trigger the (selectionChange) event on the mat-select is to do as following:

   fixture.debugElement.query(By.css('mat-select')).triggerEventHandler('selectionChange', { value: { id: 1 } });

This works, the selectionChange catch function I use gets the 'value' object. SelectionChange is a little bit different and the $event you pass has everything so you need to $event.value in the selectionChange=function($event.value);

Hope this answers your question.