wake-up-neo.com

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.

unit-testingangularjsjasmine
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
pkozlowski.opensource

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
Maciej Dzikowicki

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();
});
0
Seyed Jalal Hosseini

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