Question

我创建了一个自定义指令来解决应用程序中与焦点相关的一些问题。

指令代码：

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

如何在模板中使用使用InT模板

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

注意： 使用focus-next指令，具有“ idOfElementC” id的元素将位于div上方。

该指令如何工作？

当我们在具有“ idOfElementC” id的元素上按Tab键（此处为按钮）时，焦点将使用focus-next指令转到div。 div将在以下情况下将焦点重定向到其他元素：

a）首先它将检查是否存在任何ID为“ idOfElementA”的元素。如果元素存在，则该元素将获得焦点。

b）如果id为“ idOfElementA”的元素不存在，则“ idOfElementB”将获得焦点。

c）如果ID为“ idOfElementB”的元素也不存在，那么最终“ idOfElementA”（按下了选项卡）将获得焦点。

该指令可以正常工作，并且可以解决我的所有问题。但是，我需要为此指令编写茉莉花测试用例。

有人可以指导我如何编写 Jasmine 测试用例以作为重点吗？

更新：根据@PetrAveryanov的评论，该指令看起来太可怕了，我完全同意。

更新的指令：

(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

最后，了解了如何为指令编写测试用例。

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

Angular JS中的下一个自定义指令的测试用例

1 个答案: