title: MatCheckbox - Angular Material - Unit tests - How to click to select/deselect all lines
body: <p>I use <strong>MatCheckboxModule</strong> from <strong>Angular Material</strong> in my Angular 5 application.</p>
  
  <p>I have a table with multiple lines and a checkbox to select/deselect all lines from the table :</p>
  
  <pre><code>&lt;mat-checkbox [(ngModel)]="selectAll" (change)="toggleAll()"&gt;Toggle&lt;/mat-checkbox&gt;
  </code></pre>
  
  <p>The component part is composed of a <em>selectAll</em> boolean property, a <em>selectedData</em> array property and a <em>toggleAll</em> function.
  This function fills the <em>selectedData</em> array with all the lines if <em>selectAll</em> is true, otherwise, set the <em>selectedData</em> to empty.</p>
  
  <p>Below, a component code extract:</p>
  
  <pre><code>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 = [];
      }
    }
  }
  </code></pre>
  
  <p>This feature works. However, I don"t know how to test a click which will fill the selectedData array then will empty it. Indeed, in my following code, data are always push in my array because the <em>selectAll</em> property is not changed at the second click :</p>
  
  <pre><code>it(`should toggle all lines`, async(() =&gt; {
      component.ngOnInit();
      const checkbox = fixture.debugElement.nativeElement.querySelector('.select-all-container mat-checkbox label');
      checkbox.click();
      fixture.whenStable().then(() =&gt; {
          expect(component.selectedData.length).toEqual(component.booking.briefLines.length);
          checkbox.click();
          fixture.whenStable().then(() =&gt; {
              expect(component.selectedData.length).toEqual(0);
          });
      });
  }));
  </code></pre>
  
  <p>Do you have an idea how to solve this issue?</p>
  
  <p>Thank you!</p>