如何对PrimeNg p按钮禁用进行单元测试

Question

我正在编写一个封装(一些(PrimeNg按钮的组件。我正在尝试编写一个单元测试，根据外部组件上的一些设置来检查按钮是否被禁用。

但是，禁用字段总是未定义的？我可以在Karma/Jasmine屏幕上看到它确实被禁用了，所以我很困惑为什么我不能让测试工作。

html模板包括：

<p-button id="submit" label="Submit" [disabled]="!enableSubmit"">
</p-button>

测试是：

fit('should disable submit button', done => {
component.enableSubmit = false;
fixture.detectChanges();
fixture.whenStable().then(() => {
const elem = fixture.debugElement.query(By.css('#submit'));
const button = elem.nativeElement as Button;
expect(button.disabled).toEqual(true);
done();
});
});

结果是：

Expected undefined to equal true.
Error: Expected undefined to equal true.

Answer 1

无论出于何种设计原因，禁用的标记实际上并不存在于Html中的外部PrimeNg p-button元素上。

相反，有一个内部按钮，它保存着实际的禁用标志，测试可以稍微修改如下：

1. 更改css选择器以查找内部按钮
2. 将本机元素类型更改为HtmlButtonElement

fit('should disable submit button', done => {
component.enableSubmit = false;
fixture.detectChanges();
fixture.whenStable().then(() => {
const elem = fixture.debugElement.query(By.css('#submit > button'));
const button = elem.nativeElement as HTMLButtonElement;
expect(button.disabled).toEqual(true);
done();
});
});