Jasmine测试模拟选项卡keydown并检测新聚焦的元素

时间:2014-07-30 08:40:56

标签: javascript html jasmine

我有一个茉莉花测试,我有2个输入字段。我专注于第一个输入,然后在'标签上模拟一个keydown'键,并期望重点放在第二个输入上。不幸的是,这种情况并非如此。焦点不会从第一次改变,我的测试失败。如何解决这个失败的测试?

我试图测试的内容:http://jsfiddle.net/G2Qz3/1/

失败的茉莉花测试的小提琴:http://jsfiddle.net/mFUhK/4/

HTML:

<input id="first"></input>
<input id="second"></input>

JavaScript的:

function simulateTab() {
    var TAB_KEY = 9;
    var keyboardEvent = document.createEvent("KeyboardEvent");
    var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
    keyboardEvent[initMethod]("keydown", true, true, window, 0, 0, 0, 0, 0, TAB_KEY);
    document.dispatchEvent(keyboardEvent);
}

describe('input tabbing test', function() {    
    beforeEach(function() {
        document.getElementById('first').focus();
    });

    //this passes
    it('input with id "first" should be focussed', function() {
        expect(document.activeElement.getAttribute('id')).toBe('first');
    });

    //this fails
    it('input with id "second" should be focussed after tabbing', function() {
        simulateTab(); 
        expect(document.activeElement.getAttribute('id')).toBe('second');   
    });
});

1 个答案:

答案 0 :(得分:5)

这不可能。请参阅this SO question,该this tutorial基于{{3}},其中包含:

  

请注意,手动触发事件不会生成与该事件关联的默认操作。例如,手动触发焦点事件不会导致元素获得焦点(必须使用其焦点方法),手动触发提交事件不提交表单(使用submit方法),手动触发键事件确实不会导致该字母出现在焦点文本输入中,并且在链接上手动触发单击事件不会导致链接被激活等。在UI事件的情况下,出于安全原因这很重要,因为它会阻止脚本模拟与浏览器本身交互的用户操作。