Question

我正在使用directive这只是正常工作：

(function () {
    'use strict';
    angular
    .module('app.core')
    .directive('selectOnClick', selectOnClick);

    // @ngInject
    function selectOnClick() {
        return {
            restrict : 'A',
            link : function (scope, element) {
                element.on('click', function () {
                    this.select();
                    scope.testValue++; // only to test if it is triggered
                });
            }
        };
    }
})();

在我的测试中，我想检查是否触发了click事件以及是否选中了该元素。就像你在下面看到的那样，我在测试中触发了一个click事件并运行$scope.$digest()，但没有增加scope范围变量，也没有触发click事件。 有什么想法吗？

describe('test selectOnClickDirective', function () {
    'use strict';
    var $scope,
    $compile,
    element;
    beforeEach(module('app.core'));
    beforeEach(inject(function (_$rootScope_, _$compile_) {
            $scope = _$rootScope_.$new();
            $compile = _$compile_;
            element = $compile('<input select-on-click type="text">')($scope);
            $scope.$digest();
        }));

    it('should trigger an click event', function () {
        $scope.testValue = 10;
        var input = element.find('input');
        input.trigger('click');
        $scope.$digest();

        expect('click').toHaveBeenTriggeredOn(input);
        expect($scope.testValue).toEqual(11);
    });

    it('should select the element when clicked on it', function () {
        //expect(element.find('input').is(':selected')).toBe(true);
    });
});

Answer 1

尝试

input.triggerHandler('click');

代替你的

input.trigger('click');

Answer 2

问题是，element.find在此元素中搜索子元素。所以我不得不使用element。解决方案将是：

  it('should trigger an click event', function () {
    $scope.testValue = 10;
    element.trigger('click');
    $scope.$digest();

    expect('click').toHaveBeenTriggeredOn(element);
    expect($scope.testValue).toEqual(11);
});

Answer 3

您可以使用已编译的element，并使用triggerHandler将伪事件对象传递给处理程序。

从Angular Docs：triggerHandler() - 将虚拟事件对象传递给处理程序。

所以你需要写：

element.triggerHandler('click');

角度 - 在测试中触发点击事件不起作用

3 个答案: