如何测试是否选中了html输入类型的单选按钮

Question

我的组件中有这个HTML。HTML:

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

如何进行Spectator查询并期望测试是否检查了此输入元素？

我尝试过：

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输入元素？

谢谢
Søren

Answer 1

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

由于未选择单选按钮，selected属性似乎为false，您将收到此错误。简单的修复您在测试中绑定(通过将selected设置为true(或更新断言以检查是否未选择单选按钮：

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

看看这个stackblitz代码示例，我有两个绑定的单选按钮，一个被选中，另一个没有被选中，我对它进行了测试

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();
});

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