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元素上实际上都没有禁用标签。

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

更改css选择器以找到内部按钮。
将本机元素类型更改为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();
        });
    });

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

1 个答案: