web-dev-qa-db-fra.com

Comment déclencher un événement keyup/keydown dans un test unitaire angularjs?

Je veux tester à l'unité une directive qui émule un espace réservé, dans lequel la valeur d'entrée est effacée uniquement lors d'événements de majoration/désactivation.

unit-testingangularjsjasmine
32
Chandra

Vous devez créer un événement par programme et le déclencher. Faire cela avec jQuery pour les tests unitaires est très utile. Par exemple, vous pourriez écrire un utilitaire simple comme ceci:

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

puis utilisez-le dans votre test unitaire comme ceci:

triggerKeyDown(element, 13);

Vous pouvez voir cette technique en action dans le projet http://angular-ui.github.io/bootstrap/ ici: https://github.com/angular-ui/bootstrap/blob /master/src/typeahead/test/typeahead.spec.js

Disclaimer: soyons précis ici: je ne préconise pas l'utilisation de jQuery avec AngularJS! Je dis simplement que c’est un utilitaire de manipulation du DOM utile pour écrire des tests qui interagissent avec le DOM.

Pour que le code ci-dessus fonctionne sans jQuery, modifiez:

$.Event('keydown')

à:

angular.element.Event('keydown')
32
pkozlowski.opensource

J'ai eu des problèmes avec l'utilisation de la réponse acceptée. J'ai trouvé une autre âme.

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

Exemple de travail peut être trouvé ici

14
Maciej Dzikowicki

J'ai quelque chose comme ça qui marche. 

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

si vous utilisez angular2, vous pouvez déclencher n'importe quel événement en appelant dispatchEvent(new Event('mousedown')) en instance HTMLElement. par exemple: Testé avec angular 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

J'ai récemment voulu tester cette HostListener sur un composant (Angular 2):

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

Et après avoir cherché pendant un certain temps, cela fonctionne:

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