如何以编程方式更改 dx-select-box 的值以便触发 valueChange？

Question

我正在使用 Angular9、Jasmine 和 Devextreme。

我的目标是编写一个测试来更改 dx-select-box 的值，以便引发 valueChange 事件然后断言结果效果。

<dx-select-box
               [items]="filters"
               [value]="selectedFilterId"
               valueExpr="id"
               displayExpr="name"
              (valueChange)="filterChanged($event)">
</dx-select-box>

我面临的问题是 dx-select-box 呈现为多个 div，因此我看不到任何可以操纵的 <select> 和 <option>。

测试看起来像：

fixture = TestBed.createComponent(PageComponent);
component = fixture.componentInstance;
fixture.detectChanges();

// this line retrieve the initial value successfully
const firstSelectedFilterId = component.selectedFilterId;

// I tried a lot of unsuccessful code
// I did not find a way to trigger valueChange
...

// this retrieve the value after valueChange have been raised
const secondSelectedFilterId = component.selectedFilterId;

expect(firstSelectedFilterId).not.toEqual(secondSelectedFilterId);

有人知道如何在 Jasmine 测试中从 dx-select-box 引发 valueChange 事件吗？

这里是dx-select-box的演示：https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxSelectBox/

感谢您的任何提示！

编辑： 刚刚发现：

const e1 = fixture.debugElement.query(By.directive(DxSelectBoxComponent));
const c1 = e1.componentInstance as DxSelectBoxComponent;
c1.valueChange.emit(newValue);
fixture.detectChanges();

Answer 1

const e1 = fixture.debugElement.query(By.directive(DxSelectBoxComponent));
const c1 = e1.componentInstance as DxSelectBoxComponent;
c1.valueChange.emit(newValue);
fixture.detectChanges();

如何以编程方式更改 dx-select-box 的值以便触发 valueChange？

How can I change programmatically a value of dx-select-box so valueChange is triggered?

jasmine

angular

devextreme-angular