web-dev-qa-db-de.com

Wie teste ich, ob ein Element sichtbar ist, wenn die Direktive * ngIf mit Jasmine in verwendet wird? Angular

Ich habe eine Angular 6-App und schreibe einige Komponententests, um festzustellen, ob ein Element sichtbar ist oder nicht, basierend ausschließlich auf dem booleschen Ergebnis einer *ngIf-Direktive.

Markup:

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

spezifikationsdatei:

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

Ich kann das Attribut hidden nicht vom div abrufen. Verwendet Angle einen anderen Ansatz, um das Element mithilfe der *ngIf-Direktive vor dem DOM zu verbergen? Muss ich eine andere Eigenschaft aus der nativeElement erhalten?

Vielen Dank!

2
J-man

Wenn das Element ausgeblendet ist, wird es nicht im Dom gerendert.

Du kannst nachschauen

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

Außerdem ist beim Abrufen des Schaltflächenelements ein Syntaxfehler aufgetreten. nativeElement ist keine Funktion.

Ändere es so:

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

Bei Verwendung von ngIf wird der Knoten durch angle vollständig aus dem Markup entfernt. Sie müssen also überprüfen, ob dieses Element nicht vorhanden ist.

Dokumentation sagt:

ngIf wertet den Ausdruck aus und rendert dann die Vorlage then oder else an ihrer Stelle, wenn der Ausdruck wahr oder falsch ist.

Genauer gesagt, es wird einfach nicht gerendert

1
Drag13

Beim Testen, ob eine Komponente mit ngIf angezeigt wird oder nicht, versuche ich, das Element abzurufen (in diesem Fall verwenden Sie, d. H. debugElement.query(By.css('.header')).nativeElement), und wenn es angezeigt werden sollte, erwarte ich, dass es wahr oder falsch ist.

Etwas wie das:

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

Bedenken Sie auch, dass Sie manchmal ComponentFixture#whenStable verwenden müssen, um festzustellen, wann das Gerät stabil ist:

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

In diesemArbeitstestfinden Sie eine Komponente , die diesem Szenario ähnelt .

Siehe [GitHub-Repository]

1
lealceldeiro

Wenn Sie einen Testfall für eine *ngIf-Bedingung schreiben, verwenden Sie eine toBeNull-Bedingung.

Versuchen Sie es mit dem folgenden Code, es funktioniert für mich.

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