CODEWITHSUNDEEP
javascriptangularjsunit-testingangularjs-directivekarma-jasmine
Nakul
Nakul

Reputation: 35

Unit tests for Angular js directive for ui-mask

I have a directive called maskUI

.directive('uiMask', function () {
    return {
        template: '<input ui-mask="{{maskPattern}}"/>',
        replace: true,
        scope: true,
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            var maskPattern = attrs.uiMaskPattern;
            scope.maskPattern = maskPattern;

            function eventHandler(e) {
                scope.$apply(function () {
                    var isFocused = (document.activeElement.id === element.context.id);
                    if (e.type === 'mouseover') {
                        scope.maskPattern = maskPattern;
                    }
                    else if (e.type === 'mouseleave' || e.type === 'blur') {
                        if (!isFocused && ngModelCtrl.$modelValue === '') {
                            scope.maskPattern = '';
                        }
                    }
                });
            }

            if (!ngModelCtrl.$viewValue) {
                scope.maskPattern = '';
            }

            element.on('mouseover mouseleave blur', eventHandler);
        }
    };
});

How do i start writing unit tests for this directive

I started like 

'use strict';

describe('DIRECTIVES: MASK', function () {

    beforeEach(module('app'));

    var $compile, $rootScope, $scope;

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

    it('should mask the element', function () {
    });

});

I want to test these mouse events also in this test. How do i cover these..If anyone can help on this. Thank You

Upvotes: 2

Views: 585

Answers (1)

copia li
copia li

Reputation: 318

Don't think you need template for this directive actually....

Anyway to trigger events in unit test you can do:

var template = '<input ui-mask="xxx">',
    element = $compile(template)($scope);
//Trigger mouseover
element.triggerHandler('mouseover');

//function you wanna test after mouseover be triggered

Upvotes: 2

Related Questions