如何测试 html 输入类型的收音机是否被选中

Question

我的 component.html 中有这个 HTML:

<input type="radio" [checked]="selected" (change)="select()" />

我如何进行旁观者查询并期望测试此输入元素是否被选中？

我试过：

expect(spectator.query('input')).toHaveAttribute('checked');

但是我得到错误：

Error: Expected element to have attribute 'checked', but had 'undefined'

我试过：

expect(spectator.query('input')).toBeChecked();

但是我得到了错误：

Error: Expected element to be checked

如何测试这个简单的 HTML 输入元素？

谢谢
索伦

Answer 1

expect(spectator.query('input')).toBeChecked();是正确的用法。

看起来 selected 属性是错误的，因为没有选择单选按钮，您会收到此错误。简单 修复您在测试中绑定 （通过将 selected 设置为 true）或 更新断言 以检查是否未选择单选按钮：

expect(spectator.query("input[type=radio]")).not.toBeChecked();

查看 this stackblitz 代码示例，其中我有 2 个绑定的单选按钮，一个被选中，另一个未被选中，我对其进行了测试。

it("should be checked", () => {
  spectator = createComponent();
  expect(spectator.query("#r1[type=radio]")).not.toBeChecked();
});

it("should not be checked", () => {
  spectator = createComponent();
  expect(spectator.query("#r2[type=radio]")).toBeChecked();
});

此外，请查看 this guide 以查看可用的自定义匹配器。

如何测试 html 输入类型的收音机是否被选中

How can I test if a html input type radio is checked

angular-spectator