Angular中如何测试RadioButton？是否有类似MatButtonHarness的工具

首先说明：Angular Material 自9.x版本起已提供官方 MatRadioHarness，归属@angular/material/radio/testing测试子包，未检索到该组件通常是未引入对应测试依赖包，优先推荐使用官方实现，若版本受限无法使用可选择自定义方案。

方案1：使用官方 MatRadioHarness（优先推荐） #

• 第一步：引入对应测试类

  import { MatRadioHarness } from '@angular/material/radio/testing';
  

• 第二步：在测试用例中调用内置API完成操作，常用示例如下：

  // 获取当前页面所有单选按钮
  const allRadios = await loader.getAllHarnesses(MatRadioHarness);
  // 按value筛选目标单选按钮
  const targetRadio = await loader.getHarness(MatRadioHarness.with({ value: 'option1' }));
  // 按标签文本筛选目标单选按钮
  const labelRadio = await loader.getHarness(MatRadioHarness.with({ label: /选项1/ }));
  
  // 常用操作方法
  await targetRadio.check(); // 选中目标单选按钮
  const isChecked = await targetRadio.isChecked(); // 获取选中状态
  const labelText = await targetRadio.getLabelText(); // 获取单选按钮标签文本
  const disabledState = await targetRadio.isDisabled(); // 获取禁用状态
  

方案2：自定义单选按钮Harness（版本受限时使用） #

如果使用的Angular Material版本未提供官方Harness，可基于@angular/cdk/testing的ComponentHarness基类自定义测试工具：

• 第一步：定义自定义Harness类

  import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
  
  // 定义筛选条件接口
  interface CustomMatRadioHarnessFilters {
    value?: string;
    label?: string | RegExp;
  }
  
  export class CustomMatRadioHarness extends ComponentHarness {
    // 匹配mat-radio-button的宿主元素选择器
    static hostSelector = '.mat-radio-button';
  
    // 生成筛选谓词，支持按value、label筛选
    static with(options: CustomMatRadioHarnessFilters = {}): HarnessPredicate<CustomMatRadioHarness> {
      return new HarnessPredicate(CustomMatRadioHarness, options)
        .addOption('value', options.value, async (harness, val) => (await harness.getValue()) === val)
        .addOption('label', options.label, async (harness, label) => 
          HarnessPredicate.stringMatches(await harness.getLabelText(), label)
        );
    }
  
    // 定位内部input和标签元素
    private _inputEl = this.locatorFor('input[type="radio"]');
    private _labelEl = this.locatorFor('.mat-radio-label-content');
  
    // 选中单选按钮
    async check(): Promise<void> {
      if (!(await this.isChecked())) {
        await (await this.host()).click();
      }
    }
  
    // 获取选中状态
    async isChecked(): Promise<boolean> {
      return (await this._inputEl()).getProperty<boolean>('checked');
    }
  
    // 获取绑定的value值
    async getValue(): Promise<string | null> {
      return (await this._inputEl()).getProperty<string | null>('value');
    }
  
    // 获取标签文本
    async getLabelText(): Promise<string> {
      return (await this._labelEl()).text();
    }
  
    // 获取禁用状态
    async isDisabled(): Promise<boolean> {
      return (await this._inputEl()).getProperty<boolean>('disabled');
    }
  }
  

• 第二步：在测试用例中使用自定义Harness，用法和官方MatRadioHarness完全一致，替换引入的类即可。

临时快速方案：直接操作DOM（不推荐长期使用） #

如果仅需要快速实现少量测试逻辑，可直接通过CSS选择器定位DOM元素操作：

// Angular TestBed场景示例
const fixture = TestBed.createComponent(YourTestComponent);
fixture.detectChanges();
// 定位目标单选按钮的input元素
const radioInput = fixture.nativeElement.querySelector('mat-radio-button[value="option1"] input');
// 触发选中
radioInput.click();
fixture.detectChanges();
// 断言选中状态
expect(radioInput.checked).toBeTrue();

注意：该方案强依赖Angular Material的DOM结构实现，版本迭代可能导致选择器失效，仅适合临时验证使用。

内容的提问来源于stack exchange，提问作者Budda