Jasmine test simulate tab keydown and detect newly focused element

Question

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.net/G2Qz3/1/

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

After some investigation – https://code.google.com/p/chromium/issues/detail?id=52408 there is bug in Chrome – „initKeyboardEvent fires successfully but doesn't do anything.” — Krzysztof Safjanowski, Jul 30 '14 at 12:06
@KrzysztofSafjanowski thanks your comment. 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, Jul 30 '14 at 12:55
It doesnt work in the first example. http://jsfiddle.net/krzysztof_safjanowski/G2Qz3/3/ — Krzysztof Safjanowski, Jul 30 '14 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, Jul 30 '14 at 13:18
I’ve spend almost one hour on trying to execute custom event. This is the source of my first comments after investigation about it. I will cross the fingers for your solution. — Krzysztof Safjanowski, Jul 30 '14 at 13:46

score 5 · Answer 1 · edited May 23 '17 at 12:08

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.

Jasmine test simulate tab keydown and detect newly focused element

1 Answers1

Linked