Question

有一个简单的html文本输入：

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

希望能够在此文本输入中发生的每个按键上运行unittest并针对特定键进行检查。 Javascript文件是：

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

我的测试文件的一部分，关于我已经获得的部分：

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

        });

现在，按键和键盘似乎不会持续到输入框，（我可以使用以下方法轻松设置值： document.getElementById('inputstring').value = 'A'通过测试的其他部分，但没有通过按键）虽然我可以看到事件正在触发：

值的测试：

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

不确定如何：（1）在Jasmine中发布按键/键盘事件（2）将这些事件应用于特定的html element.value 所以我可以测试这些值。我希望每个按键/键盘都能进行测试。

Answer 1

我找到了你可以尝试的东西，将element \ eventName替换为你的元素和事件（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;
}
});
});

可能会帮助你。

Answer 2

我认为你应该使用Jquery Simulate模块

jQuery.simulate（） - 模拟事件以帮助单元测试用户交互。

Karma中的单元测试：文本输入中的Keypress

2 个答案: