Winkel-2+: Prüfung form mit matt-Folie-toggle - change-Ereignis wird nicht ausgelöst

Ich bin nicht sicher, warum die das change-Ereignis nicht auslösen und daher nicht auslösen die Funktion habe ich registriert für das change-Ereignis.

Ich weiß, das funktioniert, wenn ich es ausführen, aber ich kann es nicht in der spec.

Hier ist eine demo von was ich spreche... Wie Sie sehen können aus den Protokollen, die toggle nie aufgerufen wird:
https://stackblitz.com/edit/angular-material-slide-toggle-test-utmbmy?file=app%2Fhello.component.spec.ts

Rund, das ist mein code hier...

component.html:

<mat-slide-toggle [checked]="useDefault" (change)="toggle($event)"></mat-slide-toggle>

Komponente.ts:

...
toggle(event: MatSlideToggleChange) {
  console.log('Toggle fired');
  this.useDefault = event.checked;
}

In meinem spec.ts:

it('should trigger toggle...', () => {
  const componentDebug = fixture.debugElement;
  const slider: MatSlideToggle = 
     componentDebug.query(By.css('form mat-slide-toggle')).componentInstance;

  console.log('before ' + slider.checked);
  slider.toggle();

  fixture.detectChanges();

  console.log('after ' + slider.checked);
  console.log('useDefault ' + component.useDefault);
});

Den after Protokollierung nicht drucken slider.checked zu den entgegengesetzten Wert von before. Jedoch, die component.useDefault bleibt die gleiche, und die logging-Anweisung in der toggle Funktion nie aufgerufen wird, was bedeutet, dass es nie Eintritt.

Warum ist das passiert und wie kann ich dieses Problem beheben?

Habe ich habe versucht, indem Sie die ganze Sache in fakeAsync mit tick können, indem die 'nach' - code in fixture.whenStable() und fixture.whenRenderingDone().

Ich habe eine NoopAnimationsModule im TestBed's import.

Was ist die useDefault? Ist etwas aus der mat-slide-toggle? Ist eine Richtlinie, die Sie erstellt haben?
stackblitz.com/edit/angular-material-slide-toggle-test?file=app/...
Ok, ich aktualisiert meine Frage code. useDefault war nur ein Tippfehler, es sollte [checked]="useDefault". Allerdings habe ich modifizierte Komponente ein bisschen mehr im Einklang mit dem, was ich habe, also, beginnen mit useDefault = true. Ich habe nur Hinzugefügt, einige logging-Anweisungen. Nun, aus Gründen, die ich nicht verstehen kann, die toggle log nicht angezeigt, bis nicht mehr:stackblitz.com/edit/...
Versuchen Sie auslösen des change-Ereignisses direkt: componentDebug.query(By.css('mat-slide-toggle')).nativeElement.dispatchEvent(new Event('change')); werden Sie wahrscheinlich haben, zu verhöhnen, die MatSlideToggleChange Objekt somhow als gut.

InformationsquelleAutor user1902183 | 2018-06-06

angular angular-material

7

Bei der Verwendung von Drittanbieter-Komponenten, sollte man zutrauen, dass Sie das Ereignis behandeln. Allerdings könnte man das Ereignis auszulösen, mit dem triggereventhandler, während Sie spyOn die Methode, die Sie wollen, aufgerufen werden.

Komponente
```
import { Component } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material';

@Component({
    selector: 'hello',
    template: `
        <mat-slide-toggle
            [checked]="useDefault" (change)="toggle($event)"
        ></mat-slide-toggle>`
})
export class HelloComponent  {
    public useDefault = false;

    public toggle(event: MatSlideToggleChange) {
        console.log('toggle', event.checked);
        this.useDefault = event.checked;
    }
}
```
Test
```
it('should call change method on slide change', () => {
    const componentDebug = fixture.debugElement;
    const slider = componentDebug.query(By.directive(MatSlideToggle));
    spyOn(component, 'toggle'); //set your spy

    slider.triggerEventHandler('change', null); //triggerEventHandler

    expect(component.toggle).toHaveBeenCalled(); //event has been called
});
```
Finden Sie in der test-Weitergabe stackblitz: https://stackblitz.com/edit/angular-material-slide-toggle-test-spy-trigger-event?file=app/hello.component.spec.ts
- Ich bin nicht sicher, dass Sie korrekt sind, in Ihrem Vertrauen 3rd-party-Komponenten für die Ereignisbehandlung.... Ich kann Ihnen Vertrauen, dass Sie emittieren, der Veranstaltung, aber ich brauche, um zu testen, ob meine Bindungen in der Vorlage korrekt sind. So, meine Berufung gebunden-Funktion direkt wird sicherlich testen Sie die Funktion. Jedoch, sagen, dass jemand später kommt und bearbeitet die Vorlage meiner Komponenten und löscht den (change)="onToggle()". Die tests werden immer noch passieren, weil ich die Prüfung onToggle direkt, aber die app wird nicht funktionieren, weil die Veranstaltung verbindlich ist, fehlt jetzt. Ich poste meine Lösung bald...
- Kurz gesagt, die Lösung (für jetzt) zu tun const slider: HtmlElement = componentDebug.query(By.css('form mat-slide-toggle input')).nativeElement; tun, und dann slider.click(). Das macht eigentlich die MatSlideToggle emittieren die change Veranstaltung. Ich glaube tatsächlich, es ist ein Fehler in MatSlideToggle Komponente. Seine toggle() Funktion kippt die this.checked = !this.checked aber NICHT emittieren ein change-Ereignis. Ich denke, dass ist ein bug. Es sein sollte.
- eigentlich, wenn Sie löschen die (change)="onToggle()" Ihr test fehl schlägt. (siehe stackblitz.com/edit/...). IMO, sollten Sie einen unit-test für den Logik-innen wechseln und ein anderes zu nennen, auf das Ereignis zu ändern (wie im Beispiel)
- Hier der gleiche test, aber jetzt mit mat-slide-toggle input als Selektor. Alles funktioniert einwandfrei, wenngleich ich denke, Umschalten sollte emittieren das change-Ereignis und diese "Art " hack" wäre nicht erforderlich. stackblitz.com/edit/...
InformationsquelleAutor Leo Caseiro

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.