Angular - trigger click event in test not working

Question

I'm having this directive which is just working fine:

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

In my test, I want to check if the click event is triggered and if the element is selected. Like you can see below, I trigger a click event in the test and run $scope.$digest(), but neither the scope variable is incremented nor the click event is triggered. Any ideas why?

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

first add scope.$apply in order to have angular loop checking changes and apply them in your event callback or it won't work — Walfrat
– Walfrat, Commented Apr 13, 2016 at 13:03

rrd · Accepted Answer · 2016-04-13 10:16:13Z

1

Try

input.triggerHandler('click');

instead of your

input.trigger('click');

answered Apr 13, 2016 at 10:16

rrd

5,9873 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kinske · Accepted Answer · 2016-04-13 13:00:53Z

1

The Problem was, that element.find searches for child elements in this element. So I had to just use element. Solution will be this:

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

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

answered Apr 13, 2016 at 13:00

kinske

6071 gold badge10 silver badges24 bronze badges

Comments

dinkydani · Accepted Answer · 2016-04-18 08:40:55Z

0

You can use element that you've compiled, and use triggerHandler which passes a dummy event object to the handlers.

From the Angular Docs: triggerHandler() - Passes a dummy event object to handlers.

So you need to write:

element.triggerHandler('click');

answered Apr 18, 2016 at 8:40

dinkydani

1519 bronze badges

Collectives™ on Stack Overflow

Angular - trigger click event in test not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related