3

我在 Angular 5 应用程序中使用来自Angular Material的MatCheckboxModule 。

我有一个包含多行的表格和一个用于选择/取消选择表格中所有行的复选框：

<mat-checkbox [(ngModel)]="selectAll" (change)="toggleAll()">Toggle</mat-checkbox>

组件部分由一个selectAll布尔属性、一个selectedData数组属性和一个toggleAll函数组成。如果selectAll为真，则此函数用所有行填充selectedData数组，否则将selectedData设置为空。

下面，一个组件代码摘录：

export class BookingComponent implements OnInit {

  booking: Booking;
  selectedData: Line[];
  private _selectAll: boolean;

  ngOnInit() {
    this._selectAll = false;
    this.selectedData = [];
    this.getBooking();
  }

  get selectAll(): boolean {
    return this._selectAll;
  }

  set selectAll(newValue: boolean) {
    this._selectAll = newValue;
  }

  toggleAll() {
    for (const line of this.booking.lines) {
      this.selectAll ? this.selectedData.push(line) : this.selectedData = [];
    }
  }
}

此功能有效。但是，我不知道如何测试将填充 selectedData 数组然后将其清空的单击。事实上，在我的以下代码中，数据总是推送到我的数组中，因为selectAll属性在第二次单击时没有更改：

it(`should toggle all lines`, async(() => {
    component.ngOnInit();
    const checkbox = fixture.debugElement.nativeElement.querySelector('.select-all-container mat-checkbox label');
    checkbox.click();
    fixture.whenStable().then(() => {
        expect(component.selectedData.length).toEqual(component.booking.briefLines.length);
        checkbox.click();
        fixture.whenStable().then(() => {
            expect(component.selectedData.length).toEqual(0);
        });
    });
}));

你知道如何解决这个问题吗？

谢谢！

4

2 回答 2

2

我认为一个fixture.detectChanges(); 应该更新 selectAll 属性。尝试这个：

it(`should toggle all lines`, async(() => {
  component.ngOnInit();
  const checkbox = fixture.debugElement.nativeElement.querySelector('.select-all-container mat-checkbox label');
  checkbox.click();
  fixture.detectChanges();
  fixture.whenStable().then(() => {
      expect(component.selectedData.length).toEqual(component.booking.briefLines.length);
      checkbox.click();
      fixture.whenStable().then(() => {
          expect(component.selectedData.length).toEqual(0);
      });
  });
}));
于 2017-12-06T14:36:23.577 回答
1

至少在 Angular 版本 8（可能更早）中，您需要针对内部隐藏的复选框控件：

const checkbox = fixture.nativeElement.querySelector('.mat-checkbox-input');
checkbox.click();
于 2020-02-06T21:17:23.687 回答