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

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

I am using Angular9, Jasmine and Devextreme.

My goal is to program a test that change the value of a dx-select-box so valueChange event is raised then assert the resulting effect.

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

The issue that I am facing is dx-select-box is rendered as multiple div, so I do not see any <select> and <option> that I could manipulate.

The test look like:

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);

Does someone have an idea how to raise a valueChange event from a dx-select-box in a Jasmine test?

Here a demo of dx-select-box: https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxSelectBox/

Thank you for any hint!

EDIT: Just discovered:

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

Solution

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