Angular 垫板的角度测试

我想知道什么是正确的方法来测试复选框和绑定值是否被更改

这是我的HTML

     <div>
      <mat-checkbox class="col-md-9 text-right" id="checkid" name="checkid"
                    [checked]="this.isChecked"
                    (change)="this.isChecked = !isChecked">
        CheckBoxLabel
      </mat-checkbox>
    </div>

第二个expect总是失败，因为checkboxElem.checked始终为false。我搜索了大约5篇关于这个问题的帖子，并尝试了以下方法，但都没有成功：

使此测试异步并添加whenStable（），结果相同

按id使用查询，结果相同

将文本放入label中，并通过fixture.debugElement.query（by.css（'mat-checkbox label'））.nativeElement定义元素，结果相同

---

在调试模式下，我看不到复选框，只有标签。我不确定jasmine是如何准确地单击该元素的。

您是否在

导入的
测试床的
数组中导入了
MatCheckboxModule
？我会导入它来呈现复选框，这样你就不会只看到标签。一个人做这件事可能会解决问题

如果这不能解决问题，我仍然会在
imports
数组中导入，然后执行
triggerEventHandler

const checkboxElem = fixture.debugElement.query(By.css('mat-checkbox'));
expect(checkboxElem.checked).toBeFalsy(); //pass
expect(comp.isChecked).toBeFalsy(); //pass
checkboxElem.triggerEventHandler('change', { }); // change this line
fixture.detectChanges();
// this bottom line will always fail because checkboxElem is now stale, 
// you need to grab a new reference
// expect(checkboxElem.checked).toBeTruthy(); //fail
const newCheckboxElem = fixture.debugElement.query(By.css('mat-checkbox')).nativeElement;
expect(newCheckboxElem.checked).toBeTruthy();
expect(comp.isChecked).toBeTruthy(); //fail

了解更多关于triggerEventHandler的信息。最后，我尝试了这个方法，效果很好。使用dispatchEvent允许单击复选框，选中状态变为true。这是@AliF50的
triggerEventHandler
链接中的建议之一

const checkboxElem=fixture.debugElement.query（By.css（'mat-checkbox'））.nativeElement；
expect（checkboxElem.checked）.toBeFalsy（）；
checkboxElem.dispatchEvent（新事件（“更改”））；
fixture.detectChanges（）；
expect（checkboxElem.checked）.toBeTruthy（）；
感谢您的快速回复，您的链接非常有用！但是我导入了MatCheckModule并尝试使用
triggerEventHandler
，但得到了错误：TypeError:checkboxElem.triggerEventHandler不是一个函数。哦，我想它应该是
fixture.debugElement.query（By.css（'mat-checkbox'））
（没有nativeElement，第一行已更改）。我已经编辑了我的答案。
const checkboxElem = fixture.debugElement.query(By.css('mat-checkbox'));
expect(checkboxElem.checked).toBeFalsy(); //pass
expect(comp.isChecked).toBeFalsy(); //pass
checkboxElem.triggerEventHandler('change', { }); // change this line
fixture.detectChanges();
// this bottom line will always fail because checkboxElem is now stale, 
// you need to grab a new reference
// expect(checkboxElem.checked).toBeTruthy(); //fail
const newCheckboxElem = fixture.debugElement.query(By.css('mat-checkbox')).nativeElement;
expect(newCheckboxElem.checked).toBeTruthy();
expect(comp.isChecked).toBeTruthy(); //fail