如何对 mat-autocomplete 选项的选择进行单元测试？

Question

如何在单元测试中以编程方式触发对 mat-autocomplete 列表选项的选择？

我正在尝试为包含 mat-autocomplete 的组件编写单元测试。该组件在使用 ngModel、displayWith 时有些复杂......所以我想以编程方式触发 mat-autocomplete 列表中一个选项的选择并测试由此产生的效果。

我正在寻找这样的东西（不幸的是MatAutocomplete API 没有有这样的方法）：

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

我怎样才能实现类似的目标？

Answer 1

Angular Material 团队已经测试了@Output() optionSelected 事件，所以在你的情况下，只测试这个事件的处理程序就足够了。

但是，如果你真的需要这样做，你可以像 Angular Material 团队在他们的单元测试中那样做到这一点：

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

更多详情here，线路615，单元测试：'should update control value when option is selected with option value'。