Geek Answers Handbook

Unittesting in Karma: pressing a key inside text input

Have simple HTML text input:

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

I would like to be able to run unittest for every keystroke that occurs inside this text entry and check it for a specific key. Javascript File:

 '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 ); }; })();

Part of my test file regarding this part:

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

Right now, keystrokes and keyboards don't seem to be saved in the input field (I can easily set the value using: document.getElementById('inputstring').value = 'A' , which passes the other parts of the tests, but not the keystrokes), although I see that events fire:

Testing Values:

 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

I don’t know how: (1) disabling keypress / keypress events in Jasmine (2) apply these events to a specific html element.value element Therefore, I can check these values. I would like every keypress / keyup to be tested.

+7
javascript unit-testing karma-runner keypress keydown
source share
2 answers

I found something you can try, replace the \ eventName element with your elements and events (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; } }); });

Perhaps this will help you.

+2
source share

I think you should use the jquery simulate module

jQuery.simulate () . Simulate events that aid user interaction unit test.

0
source share

More articles:


All Articles