Angular 单元测试包含ngbTypeahead的组件

我有一个组件，它包含一个有3个输入文本的表单。两个输入是纯文本框，一个是带有ng引导的ngbTypeahead diretive的文本框。 我的表单是使用FormBuilder（被动表单）构建的

this.form=fb.group({
部门：['']，
名称：[''，验证器。必需]，
位置：[''，验证器。必需]
});

我的模板看起来像：

...
...

该组件包含用于ngbTypeahead的函数

autocompleteDepartments（text$：可观察）：可观察{
....
}
部门（部门：部门）{
退货部门名称；
}

因此this.form.department.value不是字符串，而是如下所示的对象：

接口部门{
id：编号；
名称：字符串；
foo：布尔；
条：数字；
...
}

一切正常

现在我想对我的组件进行单元测试，为此我需要为三个输入中的每一个设置一个值。 对于两个纯输入，没有问题：

const namethlel=fixture.debugElement.query（By.css（'[formControlName=“name”]'））.nativeElement；
nameHtmlEl.value=“Toto”；
nameHtmlEl.dispatchEvent（新事件（'input'））；

但是对于使用ngbTypeahead指令的输入，我不知道如何设置值（需要是Department对象而不是字符串）： 我试过了，但不起作用：

const departmentHtmlEl=/**/fixture.debugElement.query（By.css（'[formControlName=“department”]'））.nativeElement；
departmentHtmlEl.value={id:10，名称：“Foo”，…}；
部门Htmlel.dispatchEvent（新事件（“输入”）；

我相信您正在尝试模拟为Typeahead选择一个过滤项

我的方法是仍然设置要搜索的键字符串：

departmentHtmlEl.value='Foo'；

假设您正在搜索名称

然后，我将模拟选择。这是你可以做的

getWindowLinks（fixture.debugElement）[0].triggerEventHandler（'click'，{}）；

其中getWindowLinks是：

函数getWindowLinks（元素：DebugElement）：DebugElement[]{ 返回Array.from（element.queryAll（By.css（'button.dropdown item'））； } 此外，您还必须使用fakeAsync来实现这一点。样本测试将如下所示：

it（'sample test'，fakeAsync（（）=>{
const departmentHtmlEl=/**/fixture.debugElement.query（By.css（'[formControlName=“department”]'））.nativeElement；
departmentHtmlEl.value='Foo'；
fixture.detectChanges（）；
勾选（300）；
//这应该大于您用于搜索的debounceTime上的数字
getWindowLinks（fixture.debugElement）[0].triggerEventHandler（'click'，{}）；
fixture.detectChanges（）；
勾选（300）；
//您的期望代码在这里。
}));

---

希望这有帮助。

这对我不起作用。在更改值、检测到更改并执行足够长的

勾选（）

后，那些

按钮。下拉项

选项仍不在DOMHi@JacobStamm中，如果在更改值后添加以下选项，则应能正常工作<代码>部门Htmlel.dispatchEvent（新事件（“输入”）不要忘记在

勾选

后调用

flush（）

，以刷新调度程序的队列。