加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

单元测试 – 在angularjs中测试指令时如何模拟模糊?

发布时间:2020-12-17 17:19:36 所属栏目:安全 来源:网络整理
导读:问题 我正在尝试测试一些指令(下面的代码).其中之一是“电子邮件”(在代码(挪威语))指令中称为“epost”.解决这个问题应该适用于所有这些解决方案,所以我暂时保留这个解决方案. 技术:Angularjs,Jasmine,Requirejs,(在Chrome中运行的grunt业力) 该指令以两种
问题

我正在尝试测试一些指令(下面的代码).其中之一是“电子邮件”(在代码(挪威语))指令中称为“epost”.解决这个问题应该适用于所有这些解决方案,所以我暂时保留这个解决方案.

技术:Angularjs,Jasmine,Requirejs,(在Chrome中运行的grunt&业力)

该指令以两种方式验证电子邮件地址;在升档和模糊.我可以毫无问题地测试升档,你可以在下面的测试中看到,但我无法弄清楚如何模拟模糊,因此指令中的bind(‘blur’)运行.

我做了什么

我试图捕获这样的编译元素:

elem    = angular.element(html);
element = $compile(elem)($scope);

然后在测试中,我尝试了几种排列,以便在指令中的bind函数内部使用控制台日志来触发模糊.以下都不适用.它不会触发.

elem.trigger('blur');           
element.trigger('blur');
elem.triggerHandler('blur');
element.triggerHandler('blur');
element.blur();
elem.blur();

我的注射和设置基于:To test a custom validation angularjs directive

angularjs中的email指令包含在requirejs中

define(function() {

var Directive = function() {

return {
  require: 'ngModel',link: function(scope,elem,attrs,ctrl) {
    var pattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/;

    elem.bind('blur',function() {
      scope.$apply(function () {
        if (!elem.val() || pattern.test(elem.val())) {
          ctrl.$setValidity('epost',true);
        } else {
          ctrl.$setValidity('epost',false);
        }
      });
    });

    ctrl.$parsers.unshift(function(viewValue) {
      if (pattern.test(viewValue)) {
        ctrl.$setValidity('epost',true);
        return viewValue;
      } else {
        return undefined;
      }
      });
    }
  };
};

return Directive;

});

测试(使用jasmine和requirejs)

define([
'Angular','AngularMocks',],function () {

describe('Directives',function () {

    var $scope;
    var form;

    beforeEach(module('common'));
    beforeEach(function () {

        var html = '<form name="form">';
        html += '<input type="text" id="epost" name="epost" epost="" ng-model="model.epost"/>';
        html += '</form>';

        inject(function ($compile,$rootScope) {
            $scope = $rootScope.$new();

            $scope.model = { 
                epost: null
            };

            // Compile the element,run digest cycle
            var elem = angular.element(html);
            $compile(elem)($scope);
            $scope.$digest();

            form = $scope.form;

        });
    }); 

    describe('(epost) Given an input field hooked up with the email directive',function () {

        var validEmail = 'a@b.no';
        var invalidEmail = 'asdf@asdf';

        it('should bind data to model and be valid when email is valid on upshift',function () {
            form.epost.$setViewValue(validEmail);
            expect($scope.model.epost).toBe(validEmail);
            expect(form.epost.$valid).toBe(true);
        });
        });
    });
});

解决方法

经过一些断点调试后,我能够找出出错的地方.

我使用问题顶部描述的方法得出的“元素”项实际上并不是它自己的指令.它是一个包装表单和指令的对象.

像这样

{ 0:   // The form
  { 0: // The directive (input element)
    {  
    }
  }
}

为了实际模拟指令的模糊,我做了类似的事情

var directiveElement = $(element[0][0]);
directiveElement.blur();

在获得我想要的元素并将其包装在jQuery对象(可能是可选的)之后,它就像一个魅力.然后,我使用$setViewValue的问题中的测试方法,并像这样检查模型值.

form.epost.$setViewValue('a@b.no');
directiveElement.blur();
expect($scope.model.epost).toBe('a@b.no');
expect($scope.form.epost.$valid).toBeTruthy();

希望这对试图确定指令测试的其他人有所帮助.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读