How do I trigger a click event in a unit test for an Angular directive

Question

I have an Angular app (running from an ASP.NET MVC project.)

In this app, I have a directive with the following link function:

    link: function (scope, element, attrs, formCtrl) {
        element.bind('click', function (event) {
            formCtrl.$setPristine();
        });

    }

I wrote this test:

var $compile,
        $rootScope,
        form;

    beforeEach(module('points'));

    beforeEach(inject(function(_$compile_, _$rootScope_, testHelper){
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        testHelper.expectBaseRoute();
    }));

    it('Should set form to pristine when clicked', function () {
        var scope = $rootScope;

        form = $compile('<form name="testForm" unsaved-warning-clear><input name="test" ng-model="value"/></form>')(scope);
        scope.value = "abc";
        scope.$digest();

        scope.testForm.test.$setViewValue('def');

        expect(scope.testForm.$pristine).toBe(false);

        $(form).trigger('click');

        expect(scope.testForm.$pristine).toBe(true);
    });

If I run that in the browser using Jasmine, the test passes.

If I run it with chutzpah inside the ide, it fails. It never fires the click event.

Is there something I'm missing?

Answer 1

For my case, it was an incident of stupid user error.

My Jasmine test runner file being run from the browser had jquery, then angular referenced.

My chutzpah.json file had it the inverse order.

I moved the jquery reference up and it started working.