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?

Solution

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.