Jasmin Angular：复选框选择取消选择未按预期工作答案

【问题标题】：Jasmin Angular : Checkbox select unselect not working as expectedJasmin Angular：复选框选择取消选择未按预期工作
【发布时间】：2020-07-14 04:57:12
【问题描述】：

    it('Reset filter works properly', () => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
        const hostElement = fixture.nativeElement;
        const checkBox: HTMLInputElement = hostElement.querySelector('#filter ion-item:first-child ion-checkbox');
        console.log('checkBox', checkBox);
        expect(checkBox.checked).toBe(false);
        checkBox.click();
        fixture.detectChanges();
        expect(checkBox.checked).toBe(true);

尝试在 Angular 9，Jasim 框架中对基本复选框功能进行单元测试

这里最初的复选框将被取消选中，然后单击选择它，但没有按预期工作。

console.log 打印复选框元素

<ion-checkbox _ngcontent-a-c154="" color="selection" mode="md" slot="start" class="ion-margin-start"></ion-checkbox>

错误信息 错误：预期未定义为假。

【问题讨论】：

标签： angular jasmine karma-jasmine ionic4

【解决方案1】：

您应该使用 debugElement 访问复选框。它包含与调查元素或组件相关的各种参考资料和方法。 DebugElement vs NativeElement

const checkBox = fixture.debugElement.query(By.css('#filter ion-item:first-child ion-checkbox')).nativeElement;

布尔测试复选框

expect(checkBox.checked).toBeFalsy();

checkBox.click();
fixture.detectChanges();

expect(checkBox.checked).toBeTruthy();

【讨论】：