Как я могу проверить, что кнопка PrimeNg p отключена?

Question

Я пишу компонент, который оборачивает (некоторые) кнопки PrimeNg. Я пытаюсь написать модульный тест, который проверяет, отключена ли кнопка, на основании некоторых настроек внешнего компонента.

Но отключенное поле всегда не определено? На экране «Карма / Жасмин» я вижу, что он действительно отключен, поэтому я не понимаю, почему я не могу заставить тест работать.

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

По какой-либо причине дизайна, отключенный тег на самом деле отсутствует на внешнем элементе p-кнопки PrimeNg в Html.

Вместо этого есть внутренняя кнопка, которая содержит фактический флаг отключения, и тест можетслегка изменить следующим образом:

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