web-dev-qa-db-fra.com

Test unitaire pour le bouton avec désactiver

J'essaie d'écrire un test unitaire pour un bouton qui a désactivé affecté à un booléen.

html ressemble à:

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

mon test unitaire:

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

Mon deuxième test unitaire réussit et mon premier échoue. Je récupère un "faux attendu pour être vrai". Je ne peux pas trouver où cela échoue et pourquoi.

Toute aide serait très appréciée.

angularunit-testingjasminekarma-jasmine
6
Brian Stanley

Donc, après m'être cogné la tête contre la table un peu plus longtemps, il semble que je sélectionnais le bouton incorrectement. L'utilisation de querySelector pour le bouton a réussi mon test. Il est également nécessaire de mettre à zéro le paramètre de commentaire de @Fateh Mohamed, le composant.data, car il y a un ngIf pour les données sur le bouton.

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