Angular test .spec.ts 如何选择多个选项答案

【问题标题】：Angular test .spec.ts How to select multiple optionsAngular test .spec.ts 如何选择多个选项
【发布时间】：2021-10-12 11:53:30
【问题描述】：

我有一个要测试的多重选择列表，基本上，当您选择 n 个项目时，然后单击一个按钮，该按钮将从一个列表中复制项目。我在尝试选择多个值时遇到问题。这是一个多选，所以我希望能够选择 n 个项目。

我可以用这一行选择一个项目，但是如何在测试中选择多个项目？

select.value = select.options[0].value;

这里是测试selector.component.spec.ts

 it('When assign button is clicked expect to be displayed in assigned list', () => {

    let unassignedItems = [
      { id:1, name: 'Rob' },
      { id:2, name: 'Dave' },
      { id:3, name: 'Steve' }      
    ] as Person[];
    component.unassignedItems = unassignedItems;
    fixture.detectChanges();

    let select: HTMLSelectElement = unassignedItemsSelect.nativeElement;    
    select.value = select.options[0].value;
    select.dispatchEvent(new Event('change'));
    fixture.detectChanges();

    assignedItemButton.triggerEventHandler('click', null);

    expect(component.assignedItems[0].id).toBe(1)
    
  })

组件看起来像这样 selector.component.ts

import { Component, Input, OnInit} from '@angular/core';
import { Person } from '../Person';

@Component({
  selector: 'app-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.scss']
})
export class SelectorComponent implements OnInit {

  constructor() { }

  unassignedSelectedItems: Person[] = [];
  assignedSelectedItems: Person[] = [];

  @Input() unassignedItems : Person[] = [];
  @Input() assignedItems: Person[] = [];

  ngOnInit(): void {
  }

  assignSelections(): void {
    this.assignedItems.push(...this.unassignedSelectedItems);
    // remove the item from the unassigned list
    this.unassignedSelectedItems.forEach(selectedItem => {
      let index = this.unassignedItems.findIndex(x => x.id == selectedItem.id);
      this.unassignedItems.splice(index, 1); // removes the item at that index  
    });
    // clear the selected item for the next ones
    this.unassignedSelectedItems = [];
  }

  unassignSelections(): void {
    this.unassignedItems.push(...this.assignedSelectedItems);
    // remove the item from the assigned list
    this.assignedSelectedItems.forEach(selectedItem => {
      let index = this.assignedItems.findIndex(x => x.id == selectedItem.id);
      this.assignedItems.splice(index, 1); // removes the item at that index
    });
    // clear the selected item for the next ones
    this.assignedSelectedItems = [];
  }

}

模板看起来像这样selector.component.html

<div class="container">
    <div class="row">

        <div class="col-3">
            <select id="unassignedItems" class="form-select" multiple [(ngModel)]="unassignedSelectedItems">
                <option *ngFor="let item of unassignedItems" [ngValue]="item">{{item.name}}</option>
            </select>
        </div>

        <div class="col-1 align-middle" >
            <button id="assignedItemButton" [disabled]="unassignedItems.length==0" class="btn btn-primary m-1" type="button" (click)="assignSelections()">&gt;</button>
            <button id="unassignedItemButton" [disabled]="assignedItems.length==0" class="btn btn-primary m-1" type="button" (click)="unassignSelections()">&lt;</button>
        </div>

        <div class="col-3">
            <select id="assignedItems" class="form-select" multiple [(ngModel)]="assignedSelectedItems">
                <option *ngFor="let item of assignedItems" [ngValue]="item">{{item.name}}</option>
            </select>
        </div>

    </div>
</div>

【问题讨论】：

标签： angular angular-test angular-unit-test

【解决方案1】：

棘手的一个，测试原生多选。问题是，<select> 并没有反映 value 中的所有选定值，只是其中一个。因此将其设置为多个值不会有任何效果。考虑到extract multiple selected values from a select 的笨拙方式，以及测试本机行为和ngModel 可能不是（也不应该是）您的目标，我宁愿手动设置unassignedItems 和assignedItems。

但是，如果您真的想在测试中以“本机”方式模拟这一点，请设置您要选择的选项，例如

options[0].selected = true;

然后发出change 事件。这将更新<select> 的selectedOptions 属性，该属性由angular 的SelectMultipleControlValueAccessor 在内部使用。如果您觉得有趣，请查看其code。该代码将在change 事件上执行，获取selectedOptions' 值，并将它们传播到与[(ngModel)] 关联的变量中。

【讨论】：