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

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