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

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();