Question

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

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

我的第二次单元测试成功，而我的第一个单元测试未成功。我正在返回“预期为真实的错误”。我找不到失败的地方和原因。

任何帮助将不胜感激。

Answer 1

因此，在将我的头撞到桌子上再晃动一会儿之后，我好像选择了错误的按钮。对按钮使用querySelector可以使我的测试成功。同样，对于@Fateh Mohamed的注释设置组件。由于按钮上存在数据ngIf，因此data必须为null。

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

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

禁用按钮的单元测试

2 个答案: