Angular2-单选按钮测试

Question

我试图在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不是一个对象（评估＆＃39; fixture.debugElement.query（platform_browser_1.By.css（＆＃39;＃stateRadio＆＃39;））。nativeElement＆＃ 39）

在spec 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。