2016-09-16 18 views
7

Có một đầu vào văn bản html đơn giản:Unittesting trong Karma: bấm phím bên trong một Input text

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

có muốn để có thể chạy một unittest trên mỗi phím nhấn xảy ra bên trong đầu vào văn bản này và kiểm tra xem nó chống lại một đặc biệt Chìa khóa. Javascript tệp là:

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

Một phần của tập tin thử nghiệm của tôi, liên quan đến phần này tôi đã có:

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

     }); 

Ngay bây giờ, bấm phím và KeyUp dường như không tồn tại đến inputbox, (tôi có thể dễ dàng thiết lập giá trị sử dụng: document.getElementById('inputstring').value = 'A' mà vượt qua các phần khác của các bài kiểm tra, nhưng không phải là bấm phím) mặc dù tôi có thể thấy rằng các sự kiện được bắn:

kiểm tra các giá trị:

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

Không chắc làm thế nào để: (1) bắn ra các sự kiện bấm phím/KeyUp trong Jasmine (2) áp dụng những sự kiện vào element.value html cụ Vì vậy, tôi có thể kiểm tra những giá trị đó. Tôi muốn mỗi keypress/keyup được kiểm tra.

Trả lời

0

Tôi nghĩ rằng bạn nên sử dụng mô-đun Jquery Simulate

jQuery.simulate() - Mô phỏng các sự kiện để giúp đơn vị tương tác người dùng thử nghiệm.

2

tôi thấy somthing mà bạn có thể cố gắng, thay thế yếu tố \ EventName với các yếu tố và sự kiện của bạn (bấm phím/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; 
} 
}); 
}); 

có thể có thể điều này giúp bạn.

Các vấn đề liên quan