时间戳

首页 > 解决方案 > 使用 Jest 进行 Angular 9 测试 - 为什么这个 mat-checkbox 测试失败？

angular - 使用 Jest 进行 Angular 9 测试 - 为什么这个 mat-checkbox 测试失败？

问题描述

我的组件中有一个重置功能，可以重置所有子复选框：

  @ViewChildren('checkBoxes') checkBoxes: QueryList<MatCheckbox>;

  /**
   * Mark all checkboxes as unchecked
   */
  reset() {
    this.checkBoxes.forEach((checkbox: MatCheckbox) => {
      console.log('i am being called' + checkbox.checked);
      checkbox.checked = false;
    });
  }

这是测试：

  it('should uncheck all checkboxes when reset is called', fakeAsync(() => {
    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);
  }));

我可以从console.log调用重置函数并且复选框为真。但是在期望运行时，当它应该为假时它仍然是真的。

我尝试tick()在reset()通话后添加一个，但没有任何区别。

更新

我发现了这个问题，除了它们直接更改测试内组件上的复选框绑定属性外，几乎相同。但无论如何我试过这个：

  it('should uncheck all checkboxes when reset is called', async(() => {
    const checkboxInput = fixture.debugElement.query(
      By.css('.mat-checkbox-input')
    );
    const el = checkboxInput.nativeElement;
    el.click();
    component.reset();
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(el.checked).toBe(false);
    });
  }));

但这也失败了。

标签： angulartestingjestjs

解决方案

问题是时间问题之一，因此测试需要detectChanges两次。

所以这有效：

  it('should uncheck all checkboxes when reset is called', () => {
    const checkboxInput = fixture.debugElement.query(
      By.css('.mat-checkbox-input')
    );
    const el = checkboxInput.nativeElement;
    el.click();
    fixture.detectChanges();
    component.reset();
    fixture.detectChanges();
    expect(el.checked).toBe(false);
  });

就像这样：

  it('should uncheck all checkboxes when reset is called', async(() => {
    const checkboxInput = fixture.debugElement.query(
      By.css('.mat-checkbox-input')
    );
    const el = checkboxInput.nativeElement;
    el.click();
    fixture.detectChanges();
    component.reset();
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(el.checked).toBe(false);
    });
  }));

推荐阅读