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

Question

如何在单元测试中以编程方式触发对垫自动完成列表选项的选择？

我正在尝试为包含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'。