Test case for focus-next custom directive in Angular JS

Question

I created a custom directive to resolve some focus related issues in my application.

Directive Code:

(function() {
    angular.module("FocusNextModule", []).directive("focusNext", function() {
        return {
            restrict: "A",
            link: function($scope, elem, attrs) {
                elem.bind("focus", function(e) {
                    var code = e.which || e.keyCode;

                    var nextElem = document.getElementById(attrs.focusNext);
                    if (nextElem === null || nextElem === undefined) {
                        var altElem = document.getElementById(attrs.focusNextAlt);
                        if (angular.element(altElem).hasClass('ng-hide') === false) {
                            altElem.focus();
                        } else {
                            var selfElem = document.getElementById(attrs.focusSelf);
                            selfElem.focus();
                        }
                        e.preventDefault();
                    } else {
                        nextElem.focus();
                        e.preventDefault();
                    }
                });
            }
        };
    });
})();

How to use in template Use InT emplate

<md-button id="idOfElementC">MyButton</md-button>    
<div tabindex="0" focus-next="idOfElementA" focus-next-alt="idOfElementB" focus-self="idOfElementC"></div>

Note: Element with "idOfElementC" id will be just above the div using focus-next directive.

How does the directive work?

When we press tab on element with "idOfElementC" id (here button), focus will go to div using focus-next directive. The div will redirect the focus to other elements using following cases:

a) First it will check if there is any element with id "idOfElementA". If element exists, then that element will receive focus.

b) If element with id "idOfElementA" do not exist, then "idOfElementB" will receive focus.

c) If element with id "idOfElementB" do not exist as well, then finally "idOfElementA" (on which tab was pressed) will receive focus.

The directive is working fine and fixing all my issues. But, I need to write jasmine test cases for this directive.

Can anyone guide me how to write Jasmine test cases for focus?

UPDATE: As per comment of @PetrAveryanov the directive was looking horrible and I completely agree.

Updated Directive:

(function() {
    angular.module("FocusNextModule", []).directive("focusNext", function() {
        return {
            restrict: "A",
            link: function($scope, elem, attrs) {
                elem.bind("focus", function(e) {
                    var elemToFocus = document.getElementById(attrs.focusNext) || document.getElementById(attrs.focusNextAlt);
                    /*jshint -W030 */
                    angular.element(elemToFocus).hasClass('ng-hide') === false ? elemToFocus.focus() : document.getElementById(attrs.focusSelf).focus();
                    e.preventDefault();
                });
            }
        };
    });
})();

Answer 1

Finally, got it how to write test cases for the directive.

describe('focus-next-directive test', function() {
    var compile, scope;

    beforeEach(module(FocusNextModule));

    beforeEach(inject(function($compile, $rootScope) {
        compile = $compile;
        scope = $rootScope.$new();
    }));

    it('should focus the next element', function() {
        var div = compile('<div tabindex="0" focus-next="idTestNext"/>')(scope);
        var nextElem = compile('<input id="idTestNext" type="text" />')(scope);
        angular.element(document.body).append(div);
        angular.element(document.body).append(nextElem);
        div.focus();
        expect(nextElem).toEqual(angular.element(document.activeElement));
        div.remove();
        nextElem.remove();
    });

    it('should focus the next alternative element', function() {
        var div = compile('<div tabindex="0" focus-next="idTestNext" focus-next-alt="idTestNextAlt"/>')(scope);
        var nextAltElem = compile('<input id="idTestNextAlt" type="text" />')(scope);
        angular.element(document.body).append(div);
        angular.element(document.body).append(nextAltElem);
        div.focus();
        expect(nextAltElem).toEqual(angular.element(document.activeElement));
        div.remove();
        nextAltElem.remove();
    });

    it('should focus the Self element', function() {
        var selfElem = compile('<input id="idTestSelf" type="text" ng-class="ng-hide"/>')(scope);
        var div = compile('<div tabindex="0" focus-next="idTestNext" focus-next-alt="idTestNextAlt" focus-self="idTestSelf"/>')(scope);
        var nextAltElem = compile('<input id="idTestNextAlt" type="text" class="ng-hide"/>')(scope);
        angular.element(document.body).append(selfElem);
        angular.element(document.body).append(div);
        angular.element(document.body).append(nextAltElem);
        div.focus();
        expect(selfElem).toEqual(angular.element(document.activeElement));
        div.remove();
        selfElem.remove();
        nextAltElem.remove();
    });
});