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

Question

我正在使用Angular9,Jasmine和Devextreme.

我的目标是编写一个测试来改变一个dx-select-boxsovalueChange事件的值，然后断言产生的效果。

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

我面临的问题dx-select-box被呈现为 multiple ，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 测试中引发valueChange事件吗？dx-select-box

这里是 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();