Angular组件单元测试：matTooltip与color属性获取异常排查

核心本质：Angular输入属性≠DOM原生属性 #

• [matTooltip]和[color]都是Angular组件/指令的输入属性绑定，这类属性挂载在组件/指令的实例对象上，不会被渲染成DOM元素的原生HTML属性。而getAttribute()只能读取DOM上的原生属性，所以用它自然拿不到值，返回null是正常行为。
• 改用[attr.matToolTip]时，是强制把值渲染成DOM原生属性，所以测试里getAttribute能读到，但matTooltip是MatTooltip指令的输入属性，指令只会读取组件实例上的绑定值，不会识别DOM属性，导致实际tooltip功能失效。

正确的测试姿势 #

不要用DOM的getAttribute来验证Angular输入属性，直接从组件/指令实例上取值：

• 如果你封装的组件把matTooltip绑定到了自身的输入属性（比如@Input() tooltip），测试时通过fixture.componentInstance.tooltip就能拿到绑定的值。
• 要验证MatTooltip指令是否正确接收值，通过fixture.debugElement.injector.get(MatTooltip)获取指令实例，读取它的message属性即可。
• color属性同理，直接从MatIcon组件实例或者指令实例上读取，而非操作DOM属性。

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