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

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

在我的测试中，我想检查是否触发了点击事件以及是否选择了元素。正如您在下面看到的，我在测试中触发了一个点击事件运行 $scope.$digest()，但是 范围变量既没有递增也没有触发点击事件。 有什么想法吗？

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');

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

Angular - trigger click event in test not working

unit-testing

jasmine

angularjs

karma-jasmine