angular - 对包含 ngbTypeahead 的组件进行单元测试

Question

我有一个组件，其中包含一个带有 3 个输入文本的表单。两个输入是纯文本框，一个是带有 ng-bootstrap 的 ngbTypeahead 指令的文本框。我的表单是使用 FormBuilder(响应式(Reactive)表单)构建的。

 this.form = fb.group({
  department: [''],
  name: ['', Validators.required],
  location: ['', Validators.required]
});

我的模板看起来像:

<input type="text" class="form-control" formControlName="name"/>
...
<input type="text" class="form-control" formControlName="location"/>
...
<input
    type="text"
    class="form-control"
    formControlName="department"
    [ngbTypeahead]="autocompleteDepartments"
    [resultFormatter]="formatDepartment"
    [inputFormatter]="formatDepartment"/>

该组件包含 ngbTypeahead 的函数

autocompleteDepartments(text$: Observable<string>): Observable<Department> {
    ....
}
formatDepartment(department: Department) {
    return department.name;
}

所以 this.form.department.value 不是一个字符串，而是一个像这样的对象:

interface Department {
  id: number;
  name: string;
  foo: boolean;
  bar: number;
  ...
}

一切正常。

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

const nameHtmlEl = <HTMLInputElement>fixture.debugElement.query(By.css('[formControlName="name"]')).nativeElement;
nameHtmlEl.value = "Toto";
nameHtmlEl.dispatchEvent(new Event('input'));

但是对于使用 ngbTypeahead 指令的输入，我不知道如何设置该值(需要是 Department 对象而不是字符串):我尝试过，但不起作用:

const departmentHtmlEl = /*<HTMLInputElement>*/ fixture.debugElement.query(By.css('[formControlName="department"]')).nativeElement;
departmentHtmlEl.value = <Department>{id: 10, name: "Foo", ...};
departmentHtmlEl.dispatchEvent(new Event('input'));

Answer 1

我相信您正在尝试模拟选择 Typeahead 的已过滤项目之一。

我的方法是仍然设置您正在搜索的关键字符串:

departmentHtmlEl.value = 'Foo';

假设您正在搜索名称。

然后，我会模拟选择。您可以通过以下方式做到这一点

getWindowLinks(fixture.debugElement)[0].triggerEventHandler('click', {});

getWindowLinks 的位置是:

function getWindowLinks(element: DebugElement): DebugElement[] {
  return Array.from(element.queryAll(By.css('button.dropdown-item')));
}

此外，您还必须使用 fakeAsync 才能完成这项工作。示例测试将如下所示:

 it('sample test', fakeAsync(() => {
    const departmentHtmlEl = /*<HTMLInputElement>*/ fixture.debugElement.query(By.css('[formControlName="department"]')).nativeElement;
    departmentHtmlEl.value = 'Foo';
    fixture.detectChanges();

    tick(300);
    // this should be more than the number on debounceTime you are using for the search

    getWindowLinks(fixture.debugElement)[0].triggerEventHandler('click', {});
    fixture.detectChanges();

    tick(300);

    // your expectation code here.
  }));

希望这有帮助。