组件测试中的角单击选择选项

Question

我已经尝试了以下尝试在选择下拉列表中单击一个选项，但这些都不起作用。

selectEl = fixture.debugElement.query(By.css('#dropdown'));
selectEl.nativeElement.options[3].nativeElement.dispatchEvent(new Event('click'));
selectEl.queryAll(By.css('option'))[3].nativeElement.click();
selectEl.nativeElement.options[3].nativeElement.click();

[每次运行fixture.detectChanges();之后，我都会运行更改检测，但是当我检查元素值时，它并没有更改。 expect(selectEl.nativeElement.options[selectEl.nativeElement.selectedIndex].textContent).toBe('name2');

我是否缺少一些简单的方法来使它正常工作？

Answer 1

更改下拉菜单的所选选项的方法是设置下拉菜单值，然后分派change事件。

您可以使用此答案作为参考：Angular unit test select onChange spy on empty value

在您的情况下，您应该执行以下操作：

  const select: HTMLSelectElement = fixture.debugElement.query(By.css('#dropdown')).nativeElement;
  select.value = select.options[3].value;  // <-- select a new value
  select.dispatchEvent(new Event('change'));
  fixture.detectChanges();

Answer 2

您不必调度更改事件。首先，您需要单击下拉菜单中的触发器，我假设这是您的selectElselectEl = fixture.debugElement.query(By.css('#dropdown'))。

selectEl.click();
fixture.detectChanges();

detectChanges之后，您的下拉列表应打开。只有在此之后，您才可以从灯具中获取选项，因为在它们未出现在灯具中之前。

我获得选项的唯一方法是执行const selectOptions = fixture.debugElement.queryAll(By.css('.select-option'));，其中“ select-option”是我放置在选项上的类。我在项目中使用了mat-select，所以可能是由于这个原因。

您可以通过执行selectOptions[0].nativeElement.click();单击第一个选项。之后，您需要再次调用fixture.detectChanges()。现在您已经选择了一个选项！

我能够通过执行selectEl.innerText.trim()获得现在选择的值。不知道这是否是最好的方法，但是它有效。修剪用于删除空格。

Answer 3

我稍微扩大了艾美奖的答案。这是一种用于选择物料下拉菜单的有效“助手”方法。

import { By } from '@angular/platform-browser';

export default class TestUtils {
  static selectDropdown(id: string, fixture: any): void {
    const select = fixture.debugElement.query(By.css(`#${id}`)).nativeElement;
    select.click();
    fixture.detectChanges();
    const selectOptions = fixture.debugElement.queryAll(By.css(`.${id}Option`));
    selectOptions[5].nativeElement.click();
    fixture.detectChanges();
  }
}

这可让您指定要选择的下拉列表（按ID）和要选择的索引。此方法的唯一警告是您必须在下拉菜单中向mat-option元素添加一个类。例如：

<mat-option *ngFor="let trim of trims" value="{{trim}}" class="trimDropdownOption">{{trim}}</mat-option>

只需确保mat-option的类包含ID，并加上'Option'。

这解决了艾美奖的一个问题，即如果您在一个表单上有多个下拉菜单，则可以指定要单击的mat选项。

您可以通过在测试中像这样引用上述扩展方法来使用它：

TestUtils.selectDropdown('yearDropdown', 1, fixture);
expect(fixture.componentInstance.onYearChange).toHaveBeenCalled();