web-dev-qa-db-fra.com

Comment puis-je tester si un élément est visible lorsque la directive * ngIf est utilisée à l'aide de Jasmine dans Angular

J'ai une application Angular 6 et écrit des tests unitaires qui tentent de déterminer si un élément est visible ou non en se basant uniquement sur le résultat booléen d'un *ngIf directive.

Balisage:

<div class="header" *ngIf="show">
    <div>...</div>
</div>

fichier de spécification:

it('should hide contents if show is false', () => {
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
});

Je n'arrive pas à obtenir l'attribut hidden de la div. Est-ce que angular utilise une autre approche pour cacher l'élément au DOM en utilisant le *ngIf directive? Dois-je obtenir une autre propriété du nativeElement?

Merci!

javascriptangularjasminekarma-jasmineangular-test
12
J-man

Si l'élément est caché, il ne sera pas rendu à l'intérieur du dom.

Tu peux vérifier

expect(fixture.debugElement.query(By.css('.header'))).toBeUndefined();

EDIT : toBeNull() fonctionne mieux dans le cas ci-dessus

expect(fixture.debugElement.query(By.css('.header'))).toBeNull();

Et vous avez également une erreur de syntaxe lors de l'extraction de l'élément button. nativeElement n'est pas une fonction.

Changez-le de cette façon:

const button = fixture.debugElement.query(By.css('button')).nativeElement;
18
Amit Chigadani

Lorsque je teste si un composant est affiché ou n'utilise pas ngIf, j'essaie d'obtenir l'élément (dans ce cas, vous utilisez, c'est-à-dire debugElement.query(By.css('.header')).nativeElement) et s'il doit être affiché, je m'attends à ce qu'il le soit soyez la vérité, sinon la fausseté.

Quelque chose comme ça:

it('should hide contents if show is false', () => {
    // should be rendered initially
    expect(debugElement.query(By.css('.header')).nativeElement).toBeTruthy();
    //trigger change
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    // should not be rendered
    expect(debugElement.query(By.css('.header')).nativeElement).toBeFalsy();
});

De plus, gardez à l’esprit que vous devez parfois utiliser ComponentFixture#whenStable pour détecter quand le projecteur est stable comme ceci:

  it('should hide contents if show is false', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.whenStable().then(() => {
      // same test code here
    });
  });

Voir ceci test de travail pour un composant qui ressemble à ce scénario .

Voir [référentiel GitHub]

5
lealceldeiro

Écrire un cas de test pour *ngIf condition utilise toBeNull condition.

Essayez avec le code ci-dessous, cela fonctionne pour moi.

expect(fixture.debugElement.query(By.css('.header'))).toBeNull();
1
Dharma Raju

Lorsque vous utilisez ngIf, angular supprime complètement le nœud du balisage. Vous devez donc vérifier que cet élément n'existe pas.

La documentation dit:

ngIf évalue l'expression, puis restitue le modèle then ou else à sa place lorsque expression est respectivement vérité et fausseté.

Pour être plus précis, il n'est tout simplement pas rendu

1
Drag13