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

Je veux unité de test d'une directive qui émule un espace réservé, où la valeur d'entrée est désactivée uniquement sur keyup/les événements.

InformationsquelleAutor Chandra | 2013-08-01

33

Vous devez créer un événement en programmant et déclencher. Pour ce faire, y compris jQuery pour les tests unitaires est tout à fait 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);
  };
```
et ensuite l'utiliser dans votre unité de test comme suit:
```
triggerKeyDown(element, 13);
```
Vous pouvez le voir, cette technique dans le http://angular-ui.github.io/bootstrap/ projet ici: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/test/typeahead.spec.js

Avertissement: soyons précis ici: je ne préconise pas l'utilisation de jQuery avec AngularJS! Je dis juste qu'il est utile de manipulation du DOM utilitaire pour écrire des tests en interaction avec le DOM.

Pour rendre le code ci-dessus travail sans jQuery, changement:
```
$.Event('keydown')
```
à:
```
angular.element.Event('keydown')
```
- L'inconvénient est que jQuery pourrait facilement remplacer le jQueryLite venir angulaire. Comme il y a des différences fonctionnelles, vous êtes essentiellement en tester un (légèrement) différent du système en l'incluant dans vos tests unitaires.
- Est angulaire.de l'élément.Événement encore disponible? Je suis dans le vague et je ne vois rien à ce sujet dans la documentation. docs.angularjs.org/api/ng/function/angular.element
- Je pense que cela ne fonctionne plus.
InformationsquelleAutor pkozlowski.opensource
14

J'ai eu des problèmes avec l'utilisation de accepté de répondre. J'ai trouvé d'autres soultion.
```
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);
```
De travail exemple peut être trouvé ici
- J'ai utilisé ce approache donc +1 mais il semble qu'il ne fonctionne pas à l'intérieur de PhantomJS.
- Je suis en utilisant google Chrome dans mon karma de configuration, car PhantomJS ne prend pas en charge bind
- Ce serait de travailler avec PhantomJS?
InformationsquelleAutor Maciej Dzikowicki
8

J'ai eu quelque chose de ce genre de travail.
```
element.triggerHandler({type:"keydown", which:keyCode});
```
- Cela fonctionne parfaitement!
- Fonctionne pour moi aussi
InformationsquelleAutor Kevan Swanberg

si vous utilisez angular2, vous pouvez déclencher un événement en appelant dispatchEvent(new Event('mousedown')) sur HTMLElement instance. par exemple: Testé angulaire 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();
});

et comment est-ce répondre à la question? Comment pouvez-vous déclencher le keyup/les événements keydown avec dispatchEvent? nouvel Événement('keydown.esc") ne fonctionne pas

InformationsquelleAutor Seyed Jalal Hosseini

0

Récemment, j'ai voulu tester cette HostListener sur un composant (Angulaire 2):
```
  @HostListener('keydown.esc') onEsc() {
    this.componentCloseFn();
  };
```
Et après avoir cherché pendant un certain temps, ce travail est:
```
..
nativeElement.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'}));
...
```
InformationsquelleAutor akcasoy

Vous devez vous connecter pour publier un commentaire.