ngneat/spectator中Input信号转换函数的测试实践

背景介绍

在Angular 17+中，我们经常使用input()函数来声明组件的输入属性。当我们需要对输入值进行类型转换时，可以使用transform选项，例如将字符串转换为数字：

id = input(undefined, { transform: numberAttribute });

然而，在使用ngneat/spectator进行单元测试时，开发者发现必须显式地重复指定相同的转换函数：

spectator = createComponent({
  props: {
    id: input(5, { transform: numberAttribute })
  }
});

问题分析

问题的根源在于spectator的类型推断系统无法自动识别组件中已定义的转换函数。当前InferInputSignal类型定义只能推断出输入信号的基本类型，而忽略了转换函数的存在。

解决方案探索

经过社区讨论，提出了几种可能的解决方案：

1. 修改类型推断逻辑：通过扩展InferInputSignal类型，使其能够识别InputSignalWithTransform类型：

type InferInputSignal<T> = T extends InputSignalWithTransform<infer K, any> ? K : T;

2. 考虑转换方向：需要决定是推断转换前的类型(WriteT)还是转换后的类型(ReadT)。前者更适合测试转换函数本身，后者则提供更好的开发体验。

3. 与Angular内部机制保持一致：解决方案应与componentRef.setInput的预期行为保持一致，确保测试环境与实际运行环境行为一致。

最佳实践建议

基于讨论结果，建议采用以下实践：

1. 优先推断转换后类型：在大多数情况下，我们更关心组件内部接收到的最终值，因此应推断ReadT类型。

2. 分离转换逻辑测试：对于自定义转换函数，建议单独测试，而不是在组件测试中重复验证。

3. 保持测试简洁：理想情况下，测试代码应该尽可能简洁：

spectator = createComponent({ props: { id: 5 }});

实现细节

要实现这一改进，需要对spectator的类型系统进行以下调整：

type InferInputSignal<T> = T extends InputSignalWithTransform<infer K, any> ? K : T;

type InferInputSignals<C> = {
  [P in keyof C]+?: InferInputSignal<C[P]>;
};

export interface CustomSpectatorOverrides<C> {
  whenStable?: boolean;
  props?: InferInputSignals<C>;
}

这种修改使得spectator能够自动识别组件中定义的转换函数，大大简化了测试代码的编写。

总结

ngneat/spectator作为Angular测试工具库，在处理输入信号转换函数时存在类型推断不足的问题。通过合理调整类型系统，可以实现更简洁、更符合直觉的测试API。这一改进不仅提升了开发体验，也保持了与Angular核心机制的一致性，是测试工具库演进的重要一步。