title: Angular 9 testing with Jest - why does this mat-checkbox test fail?
body: <p>I have a reset function in my component that resets all child checkboxes:</p>
  
  <pre><code>  @ViewChildren('checkBoxes') checkBoxes: QueryList&lt;MatCheckbox&gt;;
  
    /**
     * Mark all checkboxes as unchecked
     */
    reset() {
      this.checkBoxes.forEach((checkbox: MatCheckbox) =&gt; {
        console.log('i am being called' + checkbox.checked);
        checkbox.checked = false;
      });
    }
  </code></pre>
  
  <p>This is the test:</p>
  
  <pre><code>  it('should uncheck all checkboxes when reset is called', fakeAsync(() =&gt; {
      const checkboxInput = fixture.debugElement.query(
        By.css('.mat-checkbox-input')
      );
      const el = checkboxInput.nativeElement;
      el.click();
      component.reset();
      fixture.detectChanges();
      expect(el.checked).toBe(false);
    }));
  </code></pre>
  
  <p>I can see from the <code>console.log</code> that the reset function is called and the checkbox is true. But at the point the expect runs, it is still true when it should be false.</p>
  
  <p>I tried adding a <code>tick()</code> after the <code>reset()</code> call, but it made no difference.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I found <a href="https://stackoverflow.com/questions/58818537/why-checkbox-checked-property-doesnt-change-after-detectchanges">this</a> question, which is almost identical except they are changing the checkbox binding property on the component inside the test directly.  But anyway I tried this:</p>
  
  <pre><code>  it('should uncheck all checkboxes when reset is called', async(() =&gt; {
      const checkboxInput = fixture.debugElement.query(
        By.css('.mat-checkbox-input')
      );
      const el = checkboxInput.nativeElement;
      el.click();
      component.reset();
      fixture.detectChanges();
      fixture.whenStable().then(() =&gt; {
        expect(el.checked).toBe(false);
      });
    }));
  </code></pre>
  
  <p>but that also fails.</p>