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

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事件.

您可以使用此答案作为参考: 角度单位测试选择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

您不必调度变更事件。首先，您需要单击下拉菜单中的触发器，我假设它是您的selectEl selectEl = 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”即可。

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

您可以通过在测试中引用上面的扩展方法来使用它，如下所示：

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