Unit-Test Klickereignis in Angular

Mein Ziel ist es, zu überprüfen, ob die 'onEditButtonClick' wird immer aufgerufen, wenn der Benutzer auf die Schaltfläche Bearbeiten und die überprüfung nicht nur die Konsole.melden Sie gedruckt werden.

Müssen Sie zuerst den test mit dem Kantigen TestBed. Auf diese Weise können Sie tatsächlich greifen die Schaltfläche und klicken Sie darauf. Was Sie tun müssen ist, konfigurieren Sie ein Modul, wie würden Sie eine @NgModule nur für die Testumgebung

import { TestBed, async, ComponentFixture } from '@angular/core/testing';

describe('', () => {
  let fixture: ComponentFixture<TestComponent>;
  let component: TestComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ],
      declarations: [ TestComponent ],
      providers[  ]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
    });
  }));
});

Dann müssen Sie Spion auf die onEditButtonClick - Methode, klicken Sie auf die Schaltfläche, und überprüfen Sie, dass die Methode aufgerufen wurde

it('should', async(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();

  fixture.whenStable().then(() => {
    expect(component.onEditButtonClick).toHaveBeenCalled();
  })
}));

Hier müssen wir laufen ein async test klicken Sie auf die Schaltfläche enthält eine asynchrone Ereignisbehandlung und müssen warten, bis die Ereignis-Prozess durch den Aufruf fixture.whenStable

Siehe Auch:

• - Testing-Dokumentation

InformationsquelleAutor der Antwort Paul Samsotha

Ich hatte ein ähnliches problem (ausführliche Erklärung weiter unten), und ich löste es (in jasmine-core: 2.52) durch die Verwendung der tick Funktion mit dem gleichen (oder höheren) Betrag von Millisekunden wie im original setTimeout nennen.

Zum Beispiel, wenn ich ein setTimeout(() => {...}, 2500); (so wird es auslösen nach 2500 ms), würde ich tick(2500)und das würde das problem lösen.

Was hatte ich in meiner Komponente, als Reaktion auf eine Löschen - Schaltfläche klicken Sie auf:

delete() {
    this.myService.delete(this.id)
      .subscribe(
        response => {
          this.message = 'Successfully deleted! Redirecting...';
          setTimeout(() => {
            this.router.navigate(['/home']);
          }, 2500); //I wait for 2.5 seconds before redirect
        });
  }

Ihr ist mein arbeiten test:

it('should delete the entity', fakeAsync(() => {
    component.id = 1; //preparations..
    component.getEntity(); //this one loads up the entity to my component
    tick(); //make sure that everything that is async is resolved/completed
    expect(myService.getMyThing).toHaveBeenCalledWith(1);
    //more expects here..
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const deleteButton = fixture.debugElement.query(By.css('.btn-danger')).nativeElement;
    deleteButton.click(); //I've clicked the button, and now the delete function is called...

    tick(2501); //timeout for redirect is 2500 ms :)  <-- solution

    expect(myService.delete).toHaveBeenCalledWith(1);
    //more expects here..
  }));

P. S. Tolle Erklärung auf fakeAsync und Allgemeine asyncs im Test kann hier gefunden werden: ein video-on-Test-Strategien mit den Eckigen 2 - Julie Ralph, ab 8:10, von 4 Minuten 🙂

InformationsquelleAutor der Antwort Casper