2016-09-16 5 views
7

Avoir simple saisie de texte html:UnitTesting dans Karma: Keypress l'intérieur d'un texte d'entrée

<html> 
<body> 
    <input id="inputstring" type="text" onkeypress="testcharacter" onKeyUp="testcharacter "> 
    <div id ="result"></div> 
    <script type="text/javascript" src="javascriptfile.js"></script> 
    <script>testcharacter .init();</script> 
</body> 
</html> 

aimerait être en mesure d'exécuter un unittest sur chaque pression de touche qui se produit à l'intérieur de cette entrée de texte et vérifier contre un particulier clé. Javascript fichier est:

'use strict'; 

window.testcharacter = window.testcharacter || {}; 
    (function() { 
    var testcharacter = function(k){ 
     var s = document.getElementById('inputstring').value 
     if(s!=null||s.trim()!=""){ 
      if(k==65){ 
       document.getElementById('result').innerHTML = 'You pressed A' 
      } 
      if(s.length==0) 
      { document.getElementById('result').innerHTML = ''} 
     } 
    } 
window.testcharacter.init = function(){ 
    document.getElementById('inputstring').addEventListener('keyup', testcharacter); 
    document.getElementById('inputstring').addEventListener('keypress', testcharacter); 
}; 
    })(); 

Une partie de mon dossier de test, en ce qui concerne cette partie que j'ai:

 it('should display character count with each keypress', function(){ 

      var triggerKeyDown = function(element,keycode){ 

       var e = jQuery.Event("testcharacter"); 
       e.which = keycode; 
       $(element).trigger(e) 
       var ee = jQuery.Event("keyup") 
       ee.which = keycode + 1; 
       $(element).trigger(ee) 

       r = document.getElementById('inputstring').value 

expect(document.getElementById('result').innerHTML).toBe(expected); 
expect(document.getElementById('inputstring').innerHTML).toBe(expected); 
      }; 
      triggerKeyDown('inputstring','65') 

     }); 

En ce moment, la pression de touche et keyup ne semblent pas persister à l'inputbox, (je peux facilement régler la valeur à l'aide: document.getElementById('inputstring').value = 'A' qui passe d'autres parties des tests, mais pas les pressions sur les touches) bien que je peux voir que les événements sont de tir:

Test des valeurs:

ALERT: <input id="inputstring" type="text"> // captured 'inputstring' 
ALERT: '' // captured value of 'inputstring'.value and 'result'.innerHTML 
ALERT: 65 // e.which value 
ALERT: {type: 'keypress', timeStamp: 1474058737895, jQuery31006431827041498093: true, which: 65} // event created 

Je ne sais pas comment: (1) de déclencher des événements keypress/KeyUp à Jasmine (2) appliquent ces événements à la element.value html spécifique donc je peux tester ces valeurs. Je voudrais que chaque touche/keyup soit testé.

Répondre

0

Je pense que vous devriez utiliser le module Jquery Simulate

jQuery.simulate() - Simuler événements pour aider les interactions des utilisateurs de test unitaires.

2

J'ai trouvé somthing que vous pouvez essayer, remplacer l'élément \ eventName avec vos éléments et événements (keypress/KeyUp): -

var jasmineExtensions = { 
jQuerySpies: {}, 
spyOnEvent: function(element, eventName) { 
var control = { 
    triggered: false 
}; 
element.bind(eventName, function() { 
    control.triggered = true; 
}); 
jasmineExtensions.jQuerySpies[element[eventName]] = control; 
}; 
}; 

var spyOnEvent = jasmineExtensions.spyOnEvent; 

beforeEach(function() { 
this.addMatchers({ 
toHaveBeenTriggered: function() { 
    var control = jasmineExtensions.jQuerySpies[this.actual]; 
    return control.triggered; 
} 
}); 
}); 

peut être cela peut vous aider.