Question

我正在尝试为一个下拉列表编写单元测试，并在其顶部与搜索框相关联。问题是valueChanges没有被解雇，并且我看不到filteredValues施加断言。我看到搜索框已更新为值“ S2”，但没有看到调用组件的valueChanges。非常感谢我在这里做错什么。

单元测试：

it('should search for stores', fakeAsync(() => {
        initTest('add');
        fixture.detectChanges();
        fixture.nativeElement.querySelector('#select').click();
        fixture.detectChanges();
        const d = overlayContainer.getContainerElement().querySelector('#search');
        d.textContent = 'S2';
        d.dispatchEvent(new Event('input'));
        flush();
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            component.filteredValues.subscribe(value => {
                console.log('Value :: ' + JSON.stringify(value));
            });
        });
    }));

内部组件：

this.search.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(searchText => {
            this.filteredValues = of(this.filterValue(searchText));
        });

Answer 1

您可以在测试中使用对<ngx-mat-select-search>组件的引用，如下所示：

component.matSelectSearch.onInputChange('c');

https://github.com/bithost-gmbh/ngx-mat-select-search/blob/d19c777ded98457cbdd4be476246ae96c52d7f02/src/app/mat-select-search/mat-select-search.component.spec.ts#L348-L349

或者，您需要触发一个事件，并将目标正确设置为输入字段并设置d.value = 'my search value'，另请参见 https://github.com/bithost-gmbh/ngx-mat-select-search/blob/d19c777ded98457cbdd4be476246ae96c52d7f02/src/app/mat-select-search/mat-select-search.component.html#L25

如何在下拉列表中的ngx-mat-select-search上对测试valueChanges方法进行单位化

1 个答案: