我如何检查我的元素是否已经集中在单元测试中?

Question

我有以下指令来自动对焦字段:

.directive('ngAutofocus', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, elm) {
                $timeout(function () {
                elm[0].focus();
            });
        }
    };
}

我该如何进行单元测试呢?我尝试了以下选择器，但它们都返回错误或false:

console.log($(elm[0]).is(':focus'));

我的单元测试设置如下:

elm = angular.element('<input type="text"  name="textfield1" ng-autofocus>');
$scope.$digest();
$compile(elm)($scope);

Answer 1

我想明白了，这其实很明显;

it('should set the focus on timeout', function () {
    spyOn(elm[0],'focus');
    $timeout.flush();
    expect(elm[0].focus).toHaveBeenCalled();
})

我的问题是双重的:

1. 我没有调用超时刷新函数，所以超时没有发生，
2. 我试图查看元素的焦点属性，而只是查看focus()函数的调用更像是单元测试。focus属性是真正属于端到端测试领域的东西。

Answer 2

您可以使用document.activeElement检查焦点。唯一的缺点是需要将HTML添加到文档主体中才能正常工作。

https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement

Answer 3

下面是一个更详细的解决方案，它允许测试(监视)立即运行的焦点(即没有$timeout或其他事件)。关键是在$compile运行之前先渲染一个DOM element:

'use strict';
describe('Testing the focus call from the link function', function () {
    var $compile;
    var $rootScope;
    beforeEach(angular.mock.module('auto-focus-module'));
    beforeEach(inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));
    it('should automatically focus when calling the link function', function () {
        var $scope = $rootScope.$new();
        // create an uncompiled DOM element so we can bind the focus spy
        var rawEl = angular.element('<input auto-focus-directive>');
        // set the spy
        spyOn(rawEl[0], 'focus');
        // compile the rawEl so that compile and link functions run
        $compile(rawEl)($scope);
        expect(rawEl[0].focus).toHaveBeenCalled();
    });
});

使用directive和link函数，如下所示:

(function () {
    'use strict';
    angular.module('auto-focus-module')
        .directive('autoFocusDirective', autoFocusDirective);
    function autoFocusDirective () {
        return {
            link: link
        };
        function link (scope, elem) {
            elem[0].focus();
        }
    }
})();

Answer 4

你应该使用angular。元素api - jQuery lite -并使用triggerHandler()方法。

it('should have focus', function() {
    elm.triggerHandler('focus');
    expect(elm).toBeInFocus() //PSEUDO CODE - you will need to see how this can be tested
}

http://docs.angularjs.org/api/ng/function/angular.element

http://api.jquery.com/triggerhandler/

一些测试焦点知识的潜在领域:

https://shanetomlinson.com/2014/test-element-focus-javascript

还涉及到单元测试—您不需要将元素附加到主体，可以不这样进行测试。