angular-spectator - 如何测试是否检查了 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由于未选择哪个单选按钮并且您收到此错误，因此看起来属性为 false。简单地修复您在测试中绑定（通过设置selected为 true）或更新断言以检查是否未选择单选按钮：

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

看一下这个 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();
});

此外，请查看本指南以查看可用的自定义匹配器。