Question

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

 state = {
        myLocation: null,
        places: [{
        id: 1,
        title: "foo",
        latitude: 40.283937,
        longitude: -97.742144
      }],
        errorMessage: null
      };

renderMarkers() {
return this.state.places.map(place => (
      <Marker
        key={place.id}
        title={place.title}
        coordinate={{ latitude: place.latitude, longitude: place.longitude }}
        onCalloutPress={e => Actions.details({ text: place.title })}
      />
    ));
}

方法如下：

  <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"] })，这会在代码中引发错误。

有人知道如何执行此操作，或者我如何测试正在选择的选择元素？

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页面中一样进行操作，只需按照以下说明更改组件代码

在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代码来解决您的问题。希望这可以帮助！谢谢。

ngModelChange dispatchEvent

2 个答案: