Angular 测试：Karma 与 Jasmine

在 Angular 开发中，测试是保证代码质量的关键环节。要掌握 Angular 测试，首先需要理解两个核心工具的分工：Jasmine 是测试框架，负责提供编写测试用例的语法和断言库（即“怎么写测试”）；Karma 是测试运行器，负责启动浏览器、执行测试代码并输出结果（即“怎么跑测试”）。默认情况下，Angular CLI 创建的项目已经集成了这两者。

以下步骤将指导你从零开始编写并运行第一个 Angular 单元测试。

准备工作

确保你的开发环境已经安装了 Node.js 和 Angular CLI。如果尚未创建项目，请先新建一个。

1. 打开 终端（命令行工具）。
2. 运行 以下命令创建一个新的 Angular 项目（如果已有项目可跳过此步）：

ng new my-test-app

3. 在创建过程中，当 CLI 询问 Would you like to add Angular routing? 时，根据需求输入 y 或 n。
4. 当询问 Which stylesheet format would you like to use? 时，选择 CSS 或其他你熟悉的格式。
5. 进入 项目目录：

cd my-test-app

理解测试文件结构

Angular 使用 .spec.ts 后缀来命名测试文件。当你使用 CLI 生成组件或服务时，会自动生成对应的测试文件。

1. 打开 项目中的 src/app/app.component.spec.ts 文件。这是默认的主组件测试文件。
2. 观察 文件顶部的导入语句。我们会看到 TestBed，它是 Angular 测试工具的核心，用于创建测试模块。

Jasmine 的核心语法主要由以下几个部分组成，下表总结了它们的功能：

编写基础单元测试

我们将修改 app.component.spec.ts，编写一个简单的测试来验证组件标题的显示。

1. 定位 到 describe('AppComponent') 代码块。
2. 找到 第一个 it 测试用例，通常名为 should create the app。
3. 保留 beforeEach 中的 fixture = TestBed.createComponent(AppComponent) 和 component = fixture.componentInstance 代码，这是初始化组件的标准写法。
4. 编写 或 修改 一个测试用例，用于验证组件的 title 属性：

it('should have as title "my-test-app"', () => {
  expect(component.title).toEqual('my-test-app');
});

5. 编写 一个测试用例，验证页面元素是否正确渲染了标题。这里需要用到 debugElement 和 nativeElement 来查询 DOM：

it('should render title in a h1 tag', () => {
  fixture.detectChanges(); // 触发变更检测，更新视图
  const compiled = fixture.nativeElement as HTMLElement;
  expect(compiled.querySelector('h1')?.textContent).toContain('my-test-app');
});

注意：fixture.detectChanges() 至关重要，它模拟了 Angular 的变更检测周期，将数据绑定到 HTML 模板上。如果不调用它，模板可能还是空的。

运行测试

测试编写完成后，通过 Karma 运行器来执行它们。

1. 确保 你仍然位于项目根目录下。
2. 运行 以下命令启动测试：

ng test

3. 等待 浏览器自动弹出（通常是 Chrome）。Karma 会在该浏览器中运行测试代码。
4. 观察 终端或浏览器中的输出结果。如果所有测试通过，你会看到绿色的 SUCCESS 提示。
5. 检查 浏览器页面，它会显示详细的测试列表和执行状态。

测试工作流原理

为了更直观地理解 Karma 与 Jasmine 如何协同工作，请参考以下流程：

添加自定义测试逻辑

为了让测试更实用，我们模拟一个场景：组件中有一个方法返回两个数字的和。

1. 打开 src/app/app.component.ts。
2. 添加 一个简单的加法方法到类中：

sum(a: number, b: number): number {
  return a + b;
}

3. 回到 src/app/app.component.spec.ts 文件。
4. 添加 一个新的 it 测试用例来验证这个方法：

it('should calculate sum of two numbers', () => {
  const result = component.sum(5, 3);
  expect(result).toEqual(8);
});

5. 保存 所有文件。Karma 配置了监听模式，会自动检测文件变化并重新运行测试。
6. 查看 浏览器，新的测试用例应该会立即显示并通过。

调试失败的测试

如果测试失败，需要快速定位问题。

1. 故意 将上述测试中的预期值修改为错误的数字，例如 expect(result).toEqual(10);。
2. 观察 浏览器或终端，你会看到红色的失败信息，提示 Expected 8 to equal 10.。
3. 点击 浏览器列表中失败的测试用例行号。
4. 利用 浏览器的开发者工具（按 F12），在 Sources 面板中设置断点进行调试。
5. 修复 代码，将预期值改回 8，确认测试恢复通过。