web-dev-qa-db-ja.com

無効化されたボタンの単体テスト

ブール値に割り当てられた無効化されたボタンの単体テストを作成しようとしています。

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

2番目の単体テストは成功し、最初の単体テストは失敗します。私は「真実であると思われる偽」を取り戻しています。これがどこで失敗しているか、そしてその理由を見つけることができません。

どんな助けも大歓迎です。

angularunit-testingjasminekarma-jasmine
6
Brian Stanley

そのため、もう少しテーブルに頭をぶつけた後、ボタンを間違って選択していたように見えます。ボタンにquerySelectorを使用すると、テストが成功します。また、@ Fateh Mohamedのコメントには、ボタン上のデータにngIfがあるため、component.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();
});
7
Brian Stanley