如何测试Angular Material中matTooltip的禁用属性是否正确生效？

问题根因 #

你之前尝试查询指令实例时返回宿主元素，是因为debugElement.queryAll(By.directive(MatTooltip))的返回值是挂载了目标指令的宿主元素对应的DebugElement，而非指令本身的实例，全程不需要为tooltip单独创建独立测试fixture。

推荐测试路径（黑盒行为校验） #

不直接读取组件内部状态，而是通过用户可感知的行为校验绑定逻辑是否生效——这也是和你现有Harness测试逻辑完全兼容的方式：

• 处于disabled状态的Tooltip，调用show()方法时不会实际弹出tooltip，调用getTooltipText()会抛出错误
• 未被禁用的Tooltip，调用show()后可以正常获取到绑定的提示文本
  这种方式完全不需要接触Tooltip的内部实现，就算Angular Material后续调整了Tooltip的内部存储结构，测试也不会失效。

可选白盒校验路径（直接读取指令状态） #

如果确实需要直接校验matTooltipDisabled的绑定值是否正确，只需要修正之前的查询逻辑即可：

1. 通过fixture.debugElement.queryAll(By.directive(MatTooltip))拿到所有挂载了Tooltip指令的宿主DebugElement
2. 对每个DebugElement，通过debugEl.injector.get(MatTooltip)从节点注入器中获取真正的MatTooltip指令实例
3. 直接读取实例上的disabled属性值，和预期结果做断言

修正后的完整测试代码 #

it('should display tooltip only on past events', async () => {
  const tooltips = await loader.getAllHarnesses(MatTooltipHarness);
  expect(tooltips.length).toBe(2);

  // 校验活动卡片的置灰类绑定正确
  const pastEventCardHost = await tooltips[0].host();
  expect(await pastEventCardHost.hasClass('past-event')).toBeTrue();
  
  const upcomingEventCardHost = await tooltips[1].host();
  expect(await upcomingEventCardHost.hasClass('past-event')).toBeFalse();

  // 校验已结束活动的Tooltip正常弹出
  await tooltips[0].show();
  expect(await tooltips[0].getTooltipText()).toEqual('This event has already happened');

  // 校验未结束活动的Tooltip被禁用，无法弹出
  await tooltips[1].show();
  await expectAsync(tooltips[1].getTooltipText()).toBeRejected();
});

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