webentwicklung-frage-antwort-db.com.de

Wie löse ich ein Keyup/Keydown-Ereignis in einem anglejs-Unit-Test aus?

Ich möchte eine Direktive testen, die einen Platzhalter emuliert, wobei der Eingabewert nur bei Keyup/Down-Ereignissen gelöscht wird.

32
Chandra

Sie müssen ein Ereignis programmatisch erstellen und auslösen. Es ist sehr hilfreich, jQuery für Komponententests zu verwenden. Beispielsweise könnten Sie ein einfaches Dienstprogramm wie folgt schreiben:

  var triggerKeyDown = function (element, keyCode) {
    var e = $.Event("keydown");
    e.which = keyCode;
    element.trigger(e);
  };

und verwenden Sie es dann in Ihrem Gerätetest wie folgt:

triggerKeyDown(element, 13);

Sie können diese Technik in Aktion im http://angular-ui.github.io/bootstrap/ project hier sehen: https://github.com/angular-ui/bootstrap/blob/master/ src/typeahead/test/typeahead.spec.js

Disclaimer: Lassen Sie uns hier genau sagen: Ich befürworte nicht die Verwendung von jQuery mit AngularJS! Ich sage nur, dass es ein nützliches DOM-Manipulationsdienstprogramm ist, um Tests zu schreiben, die mit dem DOM interagieren.

Damit der obige Code without jQuery funktioniert, ändern Sie:

$.Event('keydown')

zu:

angular.element.Event('keydown')
32

Ich hatte Probleme mit der akzeptierten Antwort. Ich habe andere Lösung gefunden.

var e = new window.KeyboardEvent('keydown', {
  bubbles: true,
  cancelable: true,
  shiftKey: true
});

delete e.keyCode;
Object.defineProperty(e, 'keyCode', {'value': 27});

$document[0].dispatchEvent(e);

Arbeitsbeispiel finden Sie hier

14

Ich habe so etwas in der Arbeit. 

element.triggerHandler({type:"keydown", which:keyCode});
8
kevswanberg

wenn Sie angle2 verwenden, können Sie jedes Ereignis auslösen, indem Sie dispatchEvent(new Event('mousedown')) für die Variable HTMLElement aufrufen. Zum Beispiel: Getestet mit Winkel 2.rc1

it('should ...', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<any>) => {
  fixture.detectChanges();

  let com = fixture.componentInstance;

  /* query your component to select element*/
  let div:HTMLElement = fixture.nativeElement.querySelector('div');

 /* If you want to test @output you can subscribe to its event*/
  com.resizeTest.subscribe((x:any)=>{
    expect(x).toBe('someValue');
  });
  /* If you want to test some component internal you can register an event listener*/
  div.addEventListener('click',(x)=>{
    expect(x).toBe('someOtherValue');
  });
  /* if you want to trigger an event on selected HTMLElement*/
  div.dispatchEvent(new Event('mousedown'));
  /* For click events you can use this short form*/
  div.click();

  fixture.detectChanges();
});

Ich wollte diesen HostListener kürzlich an einer Komponente testen (Angular 2):

  @HostListener('keydown.esc') onEsc() {
    this.componentCloseFn();
  };

Und nach einiger Zeit funktioniert das:

..
nativeElement.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'}));
...
0
akcasoy