ngModelChange dispatchEvent

问题描述 投票:1回答:2

我正在尝试测试选择元素...

  <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[],这会在代码中引发错误。”>

有人知道如何执行此操作,或者如何测试所选的select元素吗?

我正在尝试测试选择元素...

angular typescript jasmine
2个回答
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>

[或


0
投票

您可以按照this代码解决您的问题。希望这可以帮助!谢谢。

© www.soinside.com 2019 - 2024. All rights reserved.