I have a jasmine test where I have 2 input fields. I am focusing on an first input, then simulating a keydown on the 'tab' key, and expecting focus to be on the second input. Unfortunately this is not the case. The focus does not change from the first and my test is failing. How can this be fixed so the failing test passes?

Fiddle of what I'm trying to test: /

Fiddle of the failing Jasmine test: /

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

I have a jasmine test where I have 2 input fields. I am focusing on an first input, then simulating a keydown on the 'tab' key, and expecting focus to be on the second input. Unfortunately this is not the case. The focus does not change from the first and my test is failing. How can this be fixed so the failing test passes?

Fiddle of what I'm trying to test: http://jsfiddle/G2Qz3/1/

Fiddle of the failing Jasmine test: http://jsfiddle/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');   
    });
});

• javascript
• html
• jasmine

• After some investigation – code.google./p/chromium/issues/detail?id=52408 there is bug in Chrome – „initKeyboardEvent fires successfully but doesn't do anything.” – Krzysztof Safjanowski Commented Jul 30, 2014 at 12:06
• @KrzysztofSafjanowski thanks your ment. The event fires fine across all browsers (including Chrome) in my first JSFiddle. It's when I try and test this in Jasmine (second JSFiddle) I'm running into trouble. – Andrew Commented Jul 30, 2014 at 12:55
• It doesnt work in the first example. jsfiddle/krzysztof_safjanowski/G2Qz3/3 – Krzysztof Safjanowski Commented Jul 30, 2014 at 13:05
• My bad, just realised I was performing a focus() on the second input rather than running the tab method... It's been a long day. Will fix the fiddle. – Andrew Commented Jul 30, 2014 at 13:18
• I’ve spend almost one hour on trying to execute custom event. This is the source of my first ments after investigation about it. I will cross the fingers for your solution. – Krzysztof Safjanowski Commented Jul 30, 2014 at 13:46

1 Answer 1

This cannot be done. See this SO question, which is based on this tutorial which says:

Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a focus event does not cause the element to receive focus (you must use its focus method for that), manually firing a submit event does not submit a form (use the submit method), manually firing a key event does not cause that letter to appear in a focused text input, and manually firing a click event on a link does not cause the link to be activated, etc. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.