Я пытаюсь протестировать выбранный элемент ...

  <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?

1
Alex 29 Ноя 2019 в 15:31

2 ответа

Вы можете проверить, изменив в 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))
}
1
Swapnil Patil 29 Ноя 2019 в 16:01

Вы можете подписаться на этот код, чтобы решить вашу проблему. Надеюсь это поможет! Спасибо.

0
Aman Gojariya 30 Ноя 2019 в 08:09