如何测试使用MatSideNav的Angular组件的侧边栏开闭状态

你的测试存在三个核心问题，按以下方案修改即可正常运行： #

错误原因 #

• MatDrawerHarness提供的isOpen是异步方法，不是静态属性，直接拿方法引用和布尔值对比必然不相等，需要调用后等待返回结果。
• 手动构造SimpleChange时第三个参数传值错误，该参数为标识是否是首次变更的布尔值，首次变更场景应该传true而非null。
• 手动调用ngOnChanges不符合组件真实运行逻辑，正常场景下ngOnChanges是Angular在输入属性变化后自动触发的，测试时直接修改输入属性再触发变更检测更合理。

修复后的测试代码 #

describe('ngOnChanges', () => {
    it('should show side draw when showAction is true', async () => {
        const expected = true;
        const [sideDraw] = await loader.getAllHarnesses(MatDrawerHarness);
        // 直接修改输入属性，由Angular自动触发ngOnChanges
        fixture.componentInstance.showActions = expected;
        fixture.detectChanges();
        // 调用异步方法获取抽屉实际状态
        expect(await sideDraw.isOpen()).toBe(expected);
    });
});

如果你坚持要手动调用ngOnChanges，修改对应部分即可：

fixture.componentInstance.ngOnChanges({
    showActions: new SimpleChange(null, expected, true)
});
fixture.detectChanges();
expect(await sideDraw.isOpen()).toBe(expected);

内容的提问来源于stack exchange，提问作者tony09uk