Angular单元测试spec.ts配置全解：从路由验证到CI/CD实践
describe('ComponentName', () => { beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ComponentName]
}).compileComponents();
});
it('should create', () => {
const fixture = TestBed.createComponent(ComponentName);
expect(fixture.componentInstance).toBeTruthy();
}); });
browsers: ['Chrome'], customLaunchers: { ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: ['--no-sandbox', '--disable-gpu']
} }
it('应该加载默认主题配置', () => { const themeService = TestBed.inject(ThemeService); spyOn(themeService, 'getCurrentTheme').and.returnValue('dark'); fixture.detectChanges(); expect(fixture.debugElement.classes['dark-theme']).toBeTrue(); });
it('应正确处理空数组', () => { const mathService = new MathService(); expect(mathService.calculateAverage([])).toBeNaN(); });
it('应计算带小数点数值', () => { const mathService = new MathService(); expect(mathService.calculateAverage([1.5, 2.5])).toBeCloseTo(2.0); });
// 重构前 it('应显示用户名称', () => { const userService = { currentUser: { name: '测试用户' } }; const component = new UserComponent(userService); component.ngOnInit(); expect(component.displayName).toContain('测试用户'); });
// 重构后 describe('用户组件功能', () => { let component: UserComponent;
const createComponent = (userData: User) => {
const userService = { currentUser: userData };
return new UserComponent(userService);
};
beforeEach(() => {
component = createComponent({ name: '默认用户' });
component.ngOnInit();
});
it('应显示用户名称', () => {
expect(component.displayName).toContain('默认用户');
}); });
6. 高级测试场景如何处理？
面对复杂业务场景的测试需求，就像要在迷宫般的代码逻辑中找到可靠的验证路径。在电商项目中处理支付流程测试时，发现需要同时验证路由跳转、表单校验和第三方支付接口的集成，这种多维度验证需求推动着我们去探索更高级的测试方法。
6.1 路由测试的特殊配置
测试带参数的路由跳转时，会使用RouterTestingModule.withRoutes配置模拟路由。最近在开发用户管理系统时，遇到需要验证用户详情页根据ID加载对应数据的情况。通过创建包含:id参数的测试路由配置，成功模拟了导航到不同用户页面的场景。
路由守卫的测试需要特殊处理方式。测试权限验证守卫时，会构造不同权限状态的用户对象传入ActivatedRouteSnapshot。使用fakeAsync配合tick模拟时间流逝，可以完整测试包含异步权限检查的路由守卫逻辑。
6.2 表单验证测试模式
处理模板驱动表单验证时，发现需要模拟用户输入序列。在注册表单测试中，通过调用input元素的dispatchEvent方法触发input事件，配合detectChanges同步视图变化，能够准确验证表单控件的脏状态和错误提示。
针对响应式表单的自定义验证器，创建了专门的测试套件。测试跨字段验证规则时，通过修改表单组的值并手动调用validator函数，可以直接获取验证结果。使用这种白盒测试方法，能快速定位复杂验证逻辑中的边界条件问题。
6.3 第三方库集成测试
处理图表库集成测试时，摸索出组件适配测试法。为ECharts组件创建测试时，使用ComponentFixture的debugElement.query获取图表容器元素，验证其data-options属性是否包含预期的配置参数。这种间接验证方式避免了对第三方库内部实现的依赖。
测试NgRx状态管理时，采用效果测试隔离策略。通过创建冷观察者(cold observable)模拟Action流，配合Marble Testing语法，能够精确验证副作用的时间序列和输出结果。这种测试方式在验证购物车同步逻辑时表现出色，成功捕捉到竞态条件问题。
6.4 CI/CD中的测试实践
在GitHub Actions中配置测试流水线时，建立了分层测试策略。将核心业务逻辑的测试放在必选阶段，而将可视化组件的快照测试放在可选阶段。通过--testPathPattern参数分割测试任务，实现并行执行加速，使整体测试时间减少40%。
环境变量处理采用dotenv-override方案。在流水线中注入API_MOCK环境变量，使测试运行时自动切换到模拟服务器模式。这种配置方式既保证本地开发灵活性，又确保线上测试环境的安全性，避免意外调用真实支付接口。
6.5 快照测试实施方法
采用Jest进行组件快照测试时，发现动态内容处理是关键。为包含时间戳的组件添加属性选择器忽略功能，使用jest-date-mock固定系统时间，确保生成的快照稳定可靠。在可视化仪表盘组件中使用该方法，成功避免了每日构建时的快照失败。
管理大型快照文件时，建立版本关联策略。每次UI改版时创建新的快照目录，保留最近三个版本的参考快照。这种管理方式在商品详情页重构过程中发挥重要作用，帮助快速识别出未更新的边缘案例快照。