MatCheckbox - 角材 - ユニットテスト - すべてのラインを選択/選択解除する方法

Question

MatCheckboxModule角度材質を角度5のアプリケーションで使用します。

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

構成部品がのSelectAllブールプロパティで構成され、selectedData配列プロパティ：

のI /選択テーブルからすべての行の選択を解除するために、複数の行チェックボックスを持つテーブルを持っています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 = []; 
    } 
    } 
} 

この機能は動作します。しかし、私は選択されたデータ配列を埋めるクリックをテストする方法を知っていないので、それを空にします。selectAllプロパティは2回目のクリックで変更されないので、次のコードでは、 ：

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); 
     }); 
    }); 
})); 

あなたがこの問題を解決するためにどのようなアイデアを持っていますか

ありがとう

Answer 1

私は（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); 
     }); 
    }); 
}));