How do I trigger a click event in a Jasmine unit test for an Angular Directive?

Question

In my directive's link function:

$document.on('click.sortColumnList', function () {
    viewToggleController.closeSortColumnList();
    scope.$apply();
});

In my Jasmine unit test:

describe('document click', function () {
    beforeEach(function () {
        this.$document.triggerHandler('click.sortColumnList');
    });

    it('should tell the controller to close the sort column list', function () {
        expect(this.ctrlMock.closeSortColumnList).toHaveBeenCalled();
    });

    it('should trigger a digest cycle', function () {
        expect(this.$scope.$apply).toHaveBeenCalled();
    });
});

This is not actually triggering the event listener. The tests are failing with:

 Expected spy closeSortColumnList to have been called.

The spies are set up correctly, the problem is that the event listener is not firing.

What do you have to do to trigger an event on $document in a Jasmine Angular unit test?

Jon · Accepted Answer · 2016-08-10 17:50:49Z

4

You may need to add jasmine-jquery to your project they have specific functions to accomplish what you need. Using this you can do something like the following:

var spyEvent = spyOnEvent('#some_element', 'click')
$('#some_element').click()
expect('click').toHaveBeenTriggeredOn('#some_element')

I hope this helps.

answered Aug 10, 2016 at 17:50

Jon

2,71123 silver badges28 bronze badges

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

3 Comments

CMA Over a year ago

how can you add jasmine-jquery to the project ?

Jon Over a year ago

@CMA I am not really sure of what your set up is, but if you are using the Karma test runner, just add the file location to the files section of the karma.conf.js file.

Jon Over a year ago

@CMA, I have never used Chutzpah before, but this link seems like it may be what you need. github.com/mmanela/chutzpah/wiki/Chutzpah-File-References. I think you would want to set jasmine-jquery up through the file references.

Collectives™ on Stack Overflow

How do I trigger a click event in a Jasmine unit test for an Angular Directive?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related