如何在 Angular 中对 mat-autocomplete 过滤搜索结果的值更改进行单元测试?

Question

我使用mat-autocomplete功能在项目中搜索，并想测试输入在项目列表中找不到的搜索字符串是否会导致零结果。

它在浏览器中工作正常，但我无法让测试工作。

模板：

<div class="sidebar__header--count" data-test-sidebar-project-count>
<span>Projects</span> ({{ (filteredProjects | async).length }})
</div>
...
<div class="searchbar">
<mat-form-field class="searchbar__input">
<input
matInput
data-test-search-input
[formControl]="searchControl" />
</mat-form-field>
</div>
<div class="nav__list" *ngIf="(filteredProjects | async).length !== 0">
<mat-nav-list>...output...</mat-nav-list>
</div>

元件：

...
export class SidebarComponent {
@Input() projects: ProjectData[];
searchControl: FormControl = new FormControl();
filteredProjects: Observable<ProjectData[]>;
constructor() {
this.filteredProjects = this.searchControl.valueChanges.pipe(
startWith(''),
map(project =>
project ? this.filterProjects(project) : this.projects.slice()
)
);
}
private filterProjects(value: string): ProjectData[] {
return this.projects.filter(project =>
[project.key, project.name].some(
str => str?.toLowerCase().indexOf(value?.toLowerCase().trim()) >= 0
)
);
}
}

测试：

...
it('should reduce initial project list based on search criteria', done => {
/* given */
component.projects = [
{
name: 'FooProject1',
key: 'FOO1'
},
{
name: 'FooProject2',
key: 'FOO2'
}
] as any;
fixture.detectChanges();
/* when */
component.searchControl.setValue('bla');
fixture.detectChanges();
/* then */
component.filteredProjects.subscribe(result => {
expect(result.length).toBe(0);
done();
});

在测试中，filteredProjects不会减少到零，而是保持在 2 的长度。

我还尝试了一种不同的方法来检查 HTML 中的字符串，如下所示：

/* then */
const sidebarProjectCountElement = fixture.debugElement.nativeElement.querySelector('[data-test-sidebar-project-count]');
expect(sidebarProjectCountElement).toContainText('(0)');

但这也行不通。

Answer 1

您无法获取筛选项目的原因是您在设置searchControl的值之后设置订阅。

我也面临着类似的挑战，以下是我如何解决它。

it('should reduce initial project list based on search criteria', () => {
/* given */
component.projects = [
{ name: 'FooProject1', key: 'FOO1' },
{ name: 'FooProject2', key: 'FOO2' }
] as any;
fixture.detectChanges();
let output;
/* first of all, set the subscription in test */
component.filteredProjects.subscribe(result => {
output = result;
});
component.searchControl.setValue('bla');
fixture.detectChanges();
/* then */
expect(output.length).toEqual(0);
});