Question

Angular2-单选按钮测试

2017-04-10

3760

angular karma-jasmine angular2-testing

我尝试在 Angular 2 中使用 Karma-Jasmine 测试 HTML 单选按钮。我的 HTML 代码如下

<label class="color-dark display-block" *ngFor="let userGroup of userGroups">
    <input type="radio" id="stateRadio" name="statusRadio(click)="selectedGroup(seGrp = statusLabel.value)" [checked]="statusLabel.value === selectionStatus">{{statusLabel.value}}
</label>

规范

it('should have defined number of userGroup radio buttons', () => {
    el = fixture.debugElement.query(By.css('#stateRadio')).nativeElement
    expect(el.click()).toBeTruthy();
});

我收到错误 - TypeError：null 不是对象（正在评估“fixture.debugElement.query(platform_browser_1.By.css('#stateRadio')).nativeElement”）

在规范中，el 类型是 HTMLElement，我的 id 为 By.css()，因为 css class-color-dark display-block 也适用于其他输入类型。我该如何解决这个问题？

Answer 1

id 属性确实需要唯一。要使 for 循环中的 id 唯一：

将：

*ngFor="let userGroup of userGroups"

更改为：

*ngFor="let userGroup of userGroups; let i = index;"

同时将：

id="stateRadio"

更改为如下内容：

id="stateRadio[{{i}}]"

Answer 2

如果没有看到组件的逻辑，我不得不猜测 userGroups 数组是空的或未定义的，所以没有呈现任何内容，因此：

fixture.debugElement.query(By.css('#stateRadio'))

返回 null。