禁用按钮的单元测试答案

【问题标题】：Unit test for Button with disable禁用按钮的单元测试
【发布时间】：2018-12-07 23:21:42
【问题描述】：

我正在尝试为已禁用分配给布尔值的按钮编写单元测试。

html 看起来像：

<button *ngIf="!data" id="createBtn" mat-button color="primary" (click)="submitNewCase()" [disabled]="disableCreate">{{ 'ACTIONS.create' | translate }}</button>

我的单元测试：

beforeEach(() => {
 fixture = TestBed.createComponent(CaseComponent);
 component = fixture.componentInstance;
 fixture.detectChanges();
 submitEl = fixture.debugElement.query(By.css('button'));
});


  it('DisableCreate set to true disables the submit button', () => {
   component.disableCreate = true;
   fixture.detectChanges();
   expect(submitEl.nativeElement.disabled).toBeTruthy();
  });

  it('DisableCreate set to false enables the submit button', () => {
   component.disableCreate = false;
   fixture.detectChanges();
   expect(submitEl.nativeElement.disabled).toBeFalsy();
  });

我的第二个单元测试成功了，而我的第一个没有。我得到了一个“预期虚假是真实的。”。我找不到失败的地方和原因。

任何帮助将不胜感激。

【问题讨论】：

数据怎么样，我看到 *ngIf="!data" 你必须将数据设置为 false，可能是按钮元素没有创建
我通过在 fixture.detectChanges() 之前添加“component.data = null”来试一试，但第一次测试仍然出现相同的错误
你能显示 configureTestingModule 部分吗，因为我在 Karma 测试中的 [disabled] 属性有问题 => 无法绑定到 'disabled'，因为它不是 'th' 的已知属性
@Deunz 这很可能是准确的，因为您使用的是 th 元素。这是针对具有对 disabled 属性的本机支持的按钮元素。 ===>w3schools.com/tags/att_disabled.asp
感谢输入，我只是缺少 MatSortModule，导入它解决了问题 :) MatTableModule 还不够，你必须导入 SortModule。

标签： angular unit-testing jasmine karma-jasmine

【解决方案1】：

所以在我的头在桌子上敲了一会儿之后，看起来我选择了错误的按钮。对按钮使用 querySelector 使我的测试成功。对于@Fateh Mohamed 的评论，还需要将 component.data 设置为 null，因为按钮上有一个用于数据的 ngIf。

    beforeEach(() => {
     fixture = TestBed.createComponent(CaseComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
     submitEl = fixture.debugElement
    });

    it('DisableCreate set to true disables the submit button', () => {
     component.disableCreate = true;
     component.data = null;
     fixture.detectChanges();
     expect(submitEl.nativeElement.querySelector('button').disabled).toBeTruthy();
    });

    it('DisableCreate set to false enables the submit button', () => {
     component.disableCreate = false;
     component.data = null;
     fixture.detectChanges();
     expect(submitEl.nativeElement.querySelector('button').disabled).toBeFalsy();
    });

【讨论】：

必须在 beforeEach() 内部定义 submitEl = fixture.debugElement 还是在 it() 内部定义它是否安全？如果不是，那有什么区别。
我理解在 beforeEach() 中定义 submitEl 意味着我不必在每个使用 submitEl 的 it() 中定义 submitEl。

【解决方案2】：

找到另一种方式，

在您的 HTML 中将 id 添加到按钮，即

<button id="myButtonId" [disabled]="someCondition">/<button>

在测试文件中获取按钮（通过 id 或任何其他方式）并通过 ng-reflect-disabled 属性检查禁用状态

const addButton = fixture.debugElement.nativeElement.querySelector('#myButtonId');
expect(addButton.attributes.getNamedItem('ng-reflect-disabled').value).toBeTruthy();

【讨论】：

这似乎是迄今为止我能找到的最好的方法来测试材料复选框的禁用状态。还有其他人吗？

【解决方案3】：

在 Angular 11 上没有一个对我有用的答案，所以把我的 2 美分留在这里：

模板：

<div class="actions">
    <button [disabled]="loading">
        Submit
    </button>
</div>

类（简体）：

export class SubmitComponent {
    loading = false;
}

测试：

import { By } from '@angular/platform-browser';
...
let component: SubmitComponent;
let fixture: ComponentFixture<SubmitComponent>;

beforeEach(() => {
    fixture = TestBed.createComponent(SubmitComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

it('should disable on load', () => {
    fixture.componentInstance.loading = true;
    fixture.detectChanges();
    const button: HTMLButtonElement = fixture.debugElement.query(By.css('.actions > button')).nativeElement;
    expect(button.attributes.getNamedItem('ng-reflect-is-disabled')?.value).toEqual('true');
    // or 
    expect(button.attributes.getNamedItem('ng-reflect-is-disabled')?.value).toBeTruthy();
});

【讨论】：