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 = 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

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

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

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

获取选项的唯一方法是执行const selectOptions = fixture.debugElement.queryAll(By.css('.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”即可。

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

您可以通过在测试中引用上述扩展方法，如下所示：

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

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

3 个答案: