test angular directives dom events

by ronapelbaum

HTML

<script src="https://jasmine.github.io/2.4/lib/jasmine.js"></script>
<script src="https://jasmine.github.io/2.4/lib/jasmine-html.js"></script>
<script src="https://jasmine.github.io/2.4/lib/boot.js"></script>
<link rel="stylesheet" href="https://jasmine.github.io/2.4/lib/jasmine.css">
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-mocks.js"></script>

JavaScript

//--------------BL------------
angular.module('utils', []).directive('hover', function() {
    return {
        restrict: 'E',
        template: '<div ng-mouseover="ctrl.over()">HOVER</div>',
        controllerAs: 'ctrl',
        controller: function() {
            this.over = function() {
                console.log('over');
            };
        }
    };
});

//--------------Helper------------
function dispatchEvent(el, eventType) {
    var event = document.createEvent('MouseEvents');
    event.initEvent(eventType, true, true);
    el.dispatchEvent(event)
}

//--------------specs------------
describe('greet directive spec', function() {
    var element;
    beforeEach(module('utils'));

    beforeEach(inject(function($compile, $rootScope) {
        element = angular.element('<hover></hover>');
        $compile(element)($rootScope.$new());
    }));

    it('should call console log on mouseover', function() {
        spyOn(console, 'log');
        dispatchEvent(element.find('div')[0], 'mouseover');
        expect(console.log).toHaveBeenCalledWith('over');
    });
});