Angular Material 组件测试工具（Component Harnesses）使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01048/article/details/148361472

Angular Material 组件测试工具（Component Harnesses）使用指南

components angular: 是一个基于 JavaScript 的开源前端框架，提供了丰富的组件和工具用于构建动态的单页面应用和多页面应用。适合前端开发者使用 Angular 构建现代化的 Web 应用程序。项目地址: https://gitcode.com/gh_mirrors/co/components

前言

在 Angular 应用开发中，测试是保证代码质量的重要环节。Angular Material 作为 Angular 的官方 UI 组件库，提供了强大的组件测试工具（Component Harnesses），帮助开发者编写更健壮、更易维护的测试代码。本文将深入探讨如何有效使用这些测试工具。

什么是组件测试工具？

组件测试工具是一种抽象层，它允许测试代码通过定义良好的 API 与组件交互，而不是直接操作 DOM。这种模式源自测试领域的 PageObject 模式，具有以下核心优势：

提高可读性：测试代码更接近自然语言描述
增强稳定性：减少对组件内部实现的依赖
简化维护：当组件内部实现变化时，只需更新测试工具而不需修改大量测试用例

测试环境支持

Angular Material 的测试工具支持多种测试环境：

单元测试环境：基于 Angular 的 TestBed 和 Karma
端到端测试环境：基于 Selenium WebDriver
自定义环境：通过扩展基础类实现

基础使用步骤

1. 初始化测试环境

首先需要设置测试环境并创建 HarnessLoader：

import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';

describe('组件测试', () => {
  let loader: HarnessLoader;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [MyModule]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    loader = TestbedHarnessEnvironment.loader(fixture);
  });
});

2. 加载组件测试工具

HarnessLoader 提供两种加载方式：

// 加载第一个匹配的组件测试工具
const harness = await loader.getHarness(MatButtonHarness);

// 加载所有匹配的组件测试工具
const allHarnesses = await loader.getAllHarnesses(MatButtonHarness);

3. 使用筛选条件

测试工具支持多种筛选方式：

// 通过选择器筛选
const button = await loader.getHarness(
  MatButtonHarness.with({selector: '.confirm'})
);

// 通过文本内容筛选
const cancelButton = await loader.getHarness(
  MatButtonHarness.with({text: 'Cancel'})
);

// 组合条件筛选
const okButton = await loader.getHarness(
  MatButtonHarness.with({
    selector: '.primary',
    text: /^(Ok|Okay)$/
  })
);

实际应用示例

基本交互测试

it('应该正确响应按钮点击', async () => {
  const button = await loader.getHarness(MatButtonHarness);
  await button.click();
  expect(componentInstance.someProperty).toBe(true);
});

复杂组件测试（以 MatSelect 为例）

it('应该正确选择选项', async () => {
  const select = await loader.getHarness(MatSelectHarness);
  await select.open();
  const option = await select.getOption({text: '选项1'});
  await option.click();
  expect(await select.getValueText()).toBe('选项1');
});