javascript - 用于 ui-mask 的 Angular js 指令的单元测试

Question

我有一个指令叫做 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);
        }
    };
});

我如何开始为该指令编写单元测试

我开始喜欢

'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 () {
    });

});

我也想在这个测试中测试这些鼠标事件。我如何涵盖这些..如果有人可以提供帮助。谢谢你

Answer 1

不要认为你实际上需要这个指令的模板......

无论如何要在单元测试中触发事件你可以这样做:

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

//function you wanna test after mouseover be triggered