Jasmine测试模拟tab键按下并检测新焦点元素

Question

我有一个Jasmine测试，其中有两个输入字段。我正在关注第一个输入，然后模拟按下“tab”键，并期望焦点在第二个输入上。不幸的是，情况并非如此。焦点没有从第一个改变，我的测试失败了。如何修复这个问题，使失败的测试通过？

试图测试的Fiddle链接: http://jsfiddle.net/G2Qz3/1/ 失败的Jasmine测试的Fiddle链接: 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');   
    });
});

- Andrew

---

经过一些调查 - https://code.google.com/p/chromium/issues/detail?id=52408，发现Chrome中存在一个bug - “initKeyboardEvent成功触发但是没有任何作用。” - Krzysztof Safjanowski

@KrzysztofSafjanowski 感谢您的评论。在我的第一个JSFiddle中，事件可以在所有浏览器（包括Chrome）上正常触发。但是当我在Jasmine中尝试测试时（第二个JSFiddle），遇到了问题。 - Andrew

第一个示例无法正常工作。http://jsfiddle.net/krzysztof_safjanowski/G2Qz3/3/ - Krzysztof Safjanowski

我的错，刚刚意识到我在第二个输入框上执行了focus()而不是运行tab方法...今天真的很长。我会修复这个问题。 - Andrew

我花了将近一个小时来尝试执行自定义事件。这是我在调查后的第一条评论来源。我会为你的解决方案祈祷。 - Krzysztof Safjanowski

Answer 1

这是不可能的。请参见此SO问题，该问题基于此教程，其中提到：

注意，手动触发事件不会生成与该事件相关联的默认操作。例如，手动触发焦点事件不会导致元素获得焦点（必须使用其focus方法），手动触发提交事件不会提交表单（使用submit方法），手动触发键事件不会导致该字母出现在聚焦的文本输入中，手动触发链接上的单击事件不会激活该链接等。在UI事件的情况下，这对于安全原因非常重要，因为它可以防止脚本模拟与浏览器本身交互的用户操作。

- Izhaki