SuperAPI AI 工具集

angular-testing

测试与质量

查看项目

更新于 10-19 16:18

技能介绍

用途:该技能面向 Angular v21+ 应用,提供编写单元测试与集成测试的实践指引,聚焦 signal-based 组件与现代测试模式,可选择 Vitest(推荐)或 Jasmine。

主要能力:

  • 测试框架支持:介绍 Angular v20+ 通过 @angular/build 包原生支持 Vitest,以及 Jasmine 的 spy 用法。
  • 组件测试:使用 TestBed.configureTestingModule 与 compileComponents 配置测试模块,覆盖 standalone 组件创建、模板渲染断言、OnPush 组件通过 fixture.componentRef.setInput 更新 signal 输入。
  • Signal 测试:直接测试 signal 与 computed 的变化,以及组件内 signal、computed 计算逻辑与模板渲染。
  • 服务测试:通过 TestBed.inject 注入服务,测试基于 signal 的状态服务及带 HttpClient 依赖的服务。
  • HTTP 测试:使用 provideHttpClient、provideHttpClientTesting 与 HttpTestingController,断言请求方法,并用 req.flush 返回模拟数据,afterEach 中调用 httpMock.verify()。
  • 模拟依赖:Vitest 使用 vi.fn()(含 mockReturnValue、clearAllMocks),Jasmine 使用 jasmine.createSpyObj,并展示模拟 signal-based 服务的方式。
  • 输入输出:对 input.required 与 output 使用 setInput 赋值、订阅 output 并触发点击验证事件。
  • 异步测试:使用 fakeAsync、tick、flush 测试防抖,使用 waitForAsync 与 whenStable 等待异步完成。
  • httpResource 测试:对加载中状态与返回数据后的渲染进行断言。
  • 框架对比与迁移:给出 Vitest 与 Jasmine/Karma 在速度、watch 模式、模拟、断言、UI、配置上的对比,以及 spy 迁移示例。

使用方式:

  1. 安装依赖:npm install -D vitest jsdom。
  2. 在 angular.json 的 test architect 中配置 builder 为 @angular/build:unit-test,并指定 tsConfig 与 buildTarget。
  3. 在 tsconfig.spec.json 中设置 types 为 vitest/globals,include 匹配 src/**/*.spec.ts。
  4. 运行测试:ng test;watch 模式 ng test --watch;覆盖率 ng test --code-coverage。
  5. 按资料中的示例编写 TestBed 测试、signal 测试、HTTP 测试与异步测试。

适用场景:为 Angular v21+ 应用编写组件、服务与 HTTP 相关单元及集成测试;迁移现有 Jasmine 测试到 Vitest;测试 signal、computed、OnPush 与 httpResource 等现代 Angular 特性。

限制:资料未提供 Vitest 与 Jasmine 在特定项目中的完整迁移步骤;未说明除 @angular/build 外其它构建工具的兼容性;未提供性能基准、版本要求细节及测试覆盖率的配置详解;更高级的测试模式仅指向 references/testing-patterns.md,正文未展开。产品定价、平台支持等信息暂未提供。