如何对垫自动完成选项的选择进行单元测试？

Question

How can I programmaticaly trigger the selection of an option of the mat-autocomplete list in a unit test?

I am trying to write unit tests for a component that includes a mat-autocomplete. The component is somewhat complex with the use of ngModel, displayWith, ... so I would like to programmaticaly trigger the selection of an option of the mat-autocomplete list and test the effects this causes.

Something like this would be what I am looking for (unfortunately the MatAutocomplete API does not have such a method):

const autocompleteComponent = fixture.debugElement.query(By.css('mat-autocomplete')).componentInstance as MatAutocomplete;
const selectedOptionIndex = 0;
autocompleteComponent.selectOption(selectedOptionIndex);

How could I achieve something similar?

Answer 1

Angular Material team already tested @Output() optionSelected event, so in your case, it'll enough to test only handler of this event.

But, if you really need to do it, you can achieve that as Angular Material team done it in their unit tests:

const options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
options[1].click();
fixture.detectChanges();

More details here , line 615 , unit test: 'should update control value when option is selected with option value' .