testen keydown-Ereignisse in Jasmin mit bestimmten keyCode

Schreibe ich tests für eine AngularJS-Direktive, die Brände, die die Ereignisse der <textarea> wenn bestimmte Tasten gedrückt werden. Hat alles Prima funktioniert meine pro manual testing. Ich will gut sein, und haben eine volle unit-test-suite auch, aber ich habe ein problem kann ich nicht lösen, aber auf meine eigene:

Will ich senden Sie eine spezifische keyCode in meinem triggerHandler() Anruf in meinem test, aber ich kann nicht einen Weg finden, geben Sie den Schlüssel , die tatsächlich funktioniert. Ich bin mir bewusst, eine viel Fragen und Antworten zum Thema Bau und senden von Ereignissen mit bestimmten Daten, aber keiner von Ihnen arbeiten auf meinem setup:

Mein setup

  • Karma test runner
  • - Browser PhantomJS der Ausführung der tests (aber auch versucht, Firefox und Chrome ohne Erfolg)
  • Ich bin nicht mit jQuery und ich hoffe, es gibt eine regelmäßige JS-Lösung. Es muss sein!

Test-code

var event = document.createEvent("Events");
event.initEvent("keydown", true, true);
event.keyCode = 40; //in debugging the test in Firefox, the event object can be seen to have no "keyCode" property even after this step
textarea.triggerHandler(event); //my keydown handler does not fire

Das merkwürdige ist, ich kann die ersten 3 Zeilen in der Konsole in Chrome und sehen, dass das Ereignis erstellt wird mit die keyCode Eigenschaft auf 40 gesetzt.
So wie es scheint, sollte es funktionieren.

Auch, wenn ich die Letzte Zeile wie diese textarea.triggerHandler("keydown"); es funktioniert und der event-handler ausgelöst wird. Es gibt jedoch keine keyCode mit zu arbeiten, so ist es sinnlos.

Ich vermute, es könnte etwas damit zu tun, mit der Art der test läuft gegen eine DOM, der anders ist, eine normale Seite im browser ausgeführt werden. Aber ich kann ' T es herausfinden!

  • Dies ist, was Sie scheinbar brauchen, stackoverflow.com/questions/832059/...
  • Hi, diese Diskussion ist insbesondere über jQuery, das ich nicht verwende. Ich hoffe, ich brauche nicht zu zählen jQuery in meine unit-tests, die nur für diese.
  • Ich glaube, ich habe schon beantwortet, diese für eine Reine JS, aber anscheinend, dass die Frage gelöscht wurde. Sie sollten in der Lage sein zu finden, mehr info auf MDN.
  • In anderen [thread][1] habe ich Hinzugefügt beantworten und beschrieben, wie um zu testen, keydown. [1]: stackoverflow.com/questions/18001169/...
InformationsquelleAutor Michael Bromley | 2014-03-22
  1. 10

    Habe ich die folgende Lösung, um es zu testen und es funktioniert in Chrome, FF, PhantomJS und IE9+, basierend auf dieser SO beantworten.
    Es funktioniert nicht in Safari versucht, Millionen andere Lösung ohne Erfolg...

    function jsKeydown(code){
  var oEvent = document.createEvent('KeyboardEvent');

  //Chromium Hack: filter this otherwise Safari will complain
  if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ){
    Object.defineProperty(oEvent, 'keyCode', {
      get : function() {
        return this.keyCodeVal;
      }
    });     
    Object.defineProperty(oEvent, 'which', {
      get : function() {
        return this.keyCodeVal;
      }
    });
  }

  if (oEvent.initKeyboardEvent) {
    oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, code, code);
  } else {
    oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, code, 0);
  }

  oEvent.keyCodeVal = code;

  if (oEvent.keyCode !== code) {
    console.log("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ") -> "+ code);
  }

  document.getElementById("idToUseHere").dispatchEvent(oEvent);
}

//press DEL key
jsKeydown(46);

    Hoffe es hilft

    Update

    Heute habe ich gefunden und getestet, diese Lösung bietet eine viel breitere Palette von Browsern (aktivieren des legacy-Unterstützung):

    https://gist.github.com/termi/4654819

    Alle der Kredit geht an den Autor dieses WESENTLICHE.
    Der code unterstützt Safari, PhantomJS und IE9 getestet für die ersten 2.

    • Ausgezeichnet, vielen Dank! Ich modifizierte ihn leicht auf die Rückkehr des event-Objekts, die ich dann innerhalb der Eckigen element.triggerHandler() Methode, und es funktioniert gut. Ich hatte bis auf diesen einen, ich bin jetzt beschäftigt, Garaus meine test-suite!
    • Sie sind mit PhantomJS? Ich erhalte eine Fehlermeldung, dass der Schlüsselcode nicht.
    • Hier gilt das gleiche. Eine Art dieses problem ?
    • Gerade aktualisiert, mit einer besseren Lösung für Safari-und PhantomJS.
    • Die verlinkten code funktioniert nicht in PhantomJS 1.9.8. TypeError: 'undefined' is not a function (evaluating 'Function.prototype.call.bind(Object.prototype.hasOwnProperty)')
    • binden ist nicht verfügbar in phantom, aber Sie können diese polyfill, um Ihre dev-Abhängigkeiten zu vermeiden, dass Fehler auf: github.com/kdimatteo/bind-polyfill
    • Dies funktioniert nicht PhantomJS 1.9.8, keyCode sind immer 0

    InformationsquelleAutor MarcoL
  2. 0

    Hinzufügen @MarcoL Antwort, möchte ich darauf hinweisen, für zukünftige Leser, die stolpern könnte, auf diese Frage, dass die Methoden initKeyboardEvent und initKeyEvent Methoden sind veraltet und sollten nicht mehr verwendet werden. Sehen hier und hier.

    Statt als MDN docs vorgeschlagen, Veranstaltungen geschaffen werden sollte, über deren Konstruktor.

    InformationsquelleAutor JeanPaul A.
Schreibe einen Kommentar