Angular单元测试：服务与关联组件应联合还是分开测试？

联合测试 vs 分开测试的选择 #

你既可以选择联合测试，也可以分开测试，核心看你的测试目标：

• 联合测试：适合验证服务与组件的完整交互链路是否正常工作。比如要确认调用服务的open方法后，组件真的创建了动态组件、注入了正确的SLIDE_IN_DATA和IxSlideInRef。但这种测试耦合度高，组件内部实现变更时，测试可能需要同步修改，维护成本相对高。
• 分开测试：更推荐作为核心测试策略。服务本质是对外提供API的封装层，组件负责具体的视图渲染和动态组件创建逻辑，两者职责有明确边界。分开测试能让每个测试更聚焦，维护成本更低——测试服务时只需Mock掉slideIn2Component，不用关心组件内部怎么实现；测试组件时则专注验证它的动态组件创建、依赖注入等逻辑。

单独测试服务需要覆盖的内容 #

如果单独测试这个管理slideIn2Component的服务，重点要验证服务的API是否正确转发调用、传递参数，具体包括：

• open方法：
  • 确认调用了slideIn2Component.openSlideIn，且传入的component和params参数完全一致
  • 确认返回的是slideIn2Component.openSlideIn返回的IxSlideInRef实例
• closeAll方法：
  • 确认调用了slideIn2Component对应的closeAll方法（需根据组件实际暴露的方法调整）
• closeLast方法：
  • 确认调用了slideIn2Component对应的closeLast方法
• 参数边界情况：
  • 当params为undefined时，验证是否正确传递给组件的openSlideIn方法
  • 当params中只传wide或只传data时，参数是否正确传递
• 泛型参数传递：
  • 传入不同类型的组件和data，验证data是否正确传递给组件的createSlideInRef（可以通过Mock组件的方法，断言接收的data类型/值符合预期）

测试时的Mock示例 #

测试服务时，你可以这样MockslideIn2Component：

const mockSlideIn2Component = jasmine.createSpyObj('SlideIn2Component', ['openSlideIn', 'closeAll', 'closeLast']);
mockSlideIn2Component.openSlideIn.and.returnValue({} as IxSlideInRef<any, any>);

// 将mock注入到服务中
const service = new YourSlideInService(mockSlideIn2Component);

内容的提问来源于stack exchange，提问作者Raz-Dva