Angularjs 如何测试角度形状验证指令

我找了很长时间，没有找到解决办法。我对karma/jasmine测试还不熟悉，但到目前为止，它扼杀了我的工作效率。我试图用TDD的方式编写测试，但我无法让测试正常工作，即使代码符合我的要求

我有一个指令，用于验证输入并在模糊上显示错误：

angular.module('myApp')
.directive('formValidate', function() {
    var message = {
        error: '',
        warning: '',
        notification: ''
    };

    return {
        link: function(scope, element, attrs) {
            scope.message = message;
            var formElements = element.find('input');
            for (var i = 0; i < formElements.length; i++) {
                switch (formElements[i].getAttribute('type')) {
                    case 'email':
                        validateEmail(scope, formElements[i]);
                        break;
                    case 'password':
                        validatePassword(scope, formElements[i]);
                    default:
                        break;
                }
            }
        }
    };

    function promptUser(scope, text) {
        scope.$apply(function() {
            scope.message.error = text;
        });
    }

    function validateEmail(scope, element) {
        var element = angular.element(element);
        element.bind('blur', function() {
            if (element.hasClass('ng-invalid-email')) {
                promptUser(scope, 'Invalid email format');
            } else {
                promptUser(scope, '');
            }
        });
    }

    function validatePassword (scope, element) {
        var element = angular.element(element);
        element.bind('blur', function() {
            if (element.hasClass('ng-invalid-minlength')) {
                promptUser(scope, 'Password must be at least 6 characters');
            } else {
                promptUser(scope, '');
            }
        });
    }
});

angular.module（'myApp'）
.directive（'formValidate'，function（）{
var消息={
错误：“”，
警告：“”，
通知：“”
};
返回{
链接：函数（范围、元素、属性）{
scope.message=消息；
var formElements=element.find（'input'）；
对于（var i=0；i

我正在尝试用以下方法进行测试：

'use strict';

describe('formValidation directive', function() {
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50;

beforeEach(module('myApp'));
beforeEach(module('ui.router'));

var $compile, $scope;

beforeEach(module('myApp'));
beforeEach(module('ui.router'));

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

describe('register', function() {
    var $element, $controller, testForm, form;

    beforeEach(function() {
        testForm = angular.element('<form name="form" form-validate>' + '<p class="form-error">{{ message.error }}</p>' + '<input type="email" ng-model="register.email" name="email" placeholder="email">' + '<input type="password" ng-model="register.password" name="register-password" placeholder="password" ng-minlength="6">' + '<input type="password" ng-model="register.passwordVerify" name="password-verify" placeholder="password verify" ng-minlength="6">' + '<input type="submit" id="login-btn" value="Submit" >' + '</form>');

        $element = $compile(testForm)($scope);
        $scope.$digest();

    });


    describe('individual field', function() {
        it('adds correct content to error message', function() {
            //How can I set the value of an input here
            //And then trigger a blur event to run the directive
            var input = testForm.find('input')[0];
            var angInput = angular.element(input);
            angInput.val('test'); // I console.log'd this and it doesn't seem to do anything
            expect($scope.message.error === 'Invalid email format').toEqual(true);
        });
        it('does not add error if format is valid', function() {

        });
        it('unhides error element when valid', function() {

        });
    });

    describe('all fields', function() {

    });
});

“严格使用”；
描述（'formValidation指令'，函数（）{
jasmine.DEFAULT\u TIMEOUT\u INTERVAL=50；
在每个模块之前（模块（‘myApp’）；
在每个（模块（'ui.router'）之前；
var$compile$scope；
在每个模块之前（模块（‘myApp’）；
在每个（模块（'ui.router'）之前；
beforeach（注入（函数（$rootScope，$compile）{
$compile=\$compile；
$scope=\$rootScope\$new（）；
}));
描述（'寄存器'，函数（）{
var$element、$controller、testForm、form；
beforeach（函数（）{
testForm=angular.element（''+'
{{message.error}}
'+'+'+'+'+'+'+'+'>；
$element=$compile（testForm）（$scope）；
$scope.$digest（）；
});
描述（'单个字段'，函数（）{
它（'将正确的内容添加到错误消息'，函数（）{
//如何在此处设置输入值
//然后触发模糊事件以运行该指令
var input=testForm.find（'input'）[0]；
var angInput=角度元素（输入）；
angInput.val（'test'）；//我将此记录在console.log中，但它似乎没有任何作用
expect（$scope.message.error==“无效电子邮件格式”）.toEqual（true）；
});
它（'如果格式有效，则不添加错误'，函数（）{
});
它（'有效时取消隐藏错误元素'，函数（）{
});
});
描述（'所有字段'，函数（）{
});
});

---

我真的很想开始使用角度TDD，但这花费的时间太长了。

您所追求的重点是：

angular.element(dirElementInput).val('Some text').trigger('input');

---

（摘自）

您所追求的重要路线是：

angular.element(dirElementInput).val('Some text').trigger('input');

---

（来自）

这些测试有什么问题吗？它们会给您带来任何类型的错误吗？“将正确的内容添加到…”测试失败。expect（）无法工作，因为当我调用angInput.val（）时，它不会改变任何东西。输入仍然是原始的和未被触及的。我想这里真正的问题是，我不能更改输入值，使其变脏或无效。这些测试有什么问题吗？它们会给您任何类型的错误吗？“向…添加正确内容”测试失败。expect（）这是行不通的，因为当我调用angInput.val（）时，它不会改变任何东西。输入仍然是原始的、未经处理的。我想这里真正的问题是，我无法更改输入值并使其变脏或无效。