ngModelChange dispatchEvent

Question

我正在试着测试一个选择元素...

  <select [ngModel]="selectedRouters" name="routerName" class="form-control" id="routersSelect" size="12" (ngModelChange)="selectRouters($event)" multiple>
    <option [value]="router.name" *ngFor="let router of routers$ | orderBy : 'name'">
      {{router.name}}
    </option>
  </select>

该方法如下所示：

selectRouters(routers) {
    this.routers$
        .filter(router => routers.includes(router.name))
        .forEach(router => router.setSelected(true))

    this.routers$
        .filter(router => !routers.includes(router.name))
        .forEach(router => router.setSelected(false))
}

该方法需要string[]，但我不知道如何测试它...

//before
component = fixture.componentInstance

//it
component.selectedRouters = Array.of(r.name);

let evt = document.createEvent('Event');
evt.initEvent('ngModelChange');

selector.dispatchEvent(evt);

// also tried

selector.dispatchEvent(new CustomEvent('ngModelChange') {
  detail: ["arg1"]
})

但是参数是使用事件类型调用的，而不是string[]，这会在代码中抛出错误。

有没有人知道怎么做，或者如何测试被选中的选择元素？

Answer 1

您可以通过更改HTML [(ngModel)]="selectedRouters和(ngModelChange)="selectRouters(selectedRouters)"来进行检查，如下所示

<select [(ngModel)]="selectedRouters" name="routerName" class="form-control" id="routersSelect" size="12" (ngModelChange)="selectRouters(selectedRouters)" multiple>
    <option [value]="router.name" *ngFor="let router of routers$ | orderBy : 'name'">
      {{router.name}}
    </option>
  </select>

或您可以像在HTML Page中那样做，只需更改组件代码，如下所示

HTML页面中的

  <select [ngModel]="selectedRouters" name="routerName" class="form-control" id="routersSelect" size="12" (ngModelChange)="selectRouters($event)" multiple>
    <option [value]="router.name" *ngFor="let router of routers$ | orderBy : 'name'">
      {{router.name}}
    </option>
  </select>

组件页中的

    selectRouters(event) {
    this.routers$
        .filter(router => routers.includes(event.target.value.toString()))
        .forEach(router => router.setSelected(true))

    this.routers$
        .filter(router => !routers.includes(event.target.value.toString()))
        .forEach(router => router.setSelected(false))
}

Answer 2

您可以遵循this代码来解决您的问题。希望这能有所帮助！谢谢。