Question

尝试使用jasmine测试我的指令，但由于错误的日期（.demo）而没有失败的地方：

describe("Unit: Testing Directives - ", function() {
  var $compile, $rootScope;
  beforeEach(module('app'));
  beforeEach(inject(function(_$compile_, _$rootScope_){
      $compile = _$compile_;
      $rootScope = _$rootScope_;
  }));

  describe("Date Validation Directive - ", function(){
    it('should show an date as valid', function(){
      $rootScope.demo = '10/01/881';
      var templateHTML = angular.element('<input class="blah" type="tel" ng-model="demo" my-date />');
      var element = $compile(templateHTML)($rootScope);
      $rootScope.$digest();
      expect(element.hasClass('ng-valid')).toBe(true);
      expect(element.hasClass('ng-invalid')).toBe(false);

    });
  });
});

这是我的指令：

var app = angular.module('app', []);

app.directive("myDate", function () {
  return {
    restrict: "A", //only activate on element attribute
    require: "ngModel", //get hold of NgModelController
    link: function (scope, elm, attrs, ctrl) {

        ctrl.$parsers.unshift(function (viewValue) {
            var date_regexp = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
            if (date_regexp.test(viewValue)) {
                // it is valid
                ctrl.$setValidity("myDate", true);
                return viewValue;
            } else {
                // it is invalid, return undefined (no model update)
                ctrl.$setValidity("myDate", false);
                return undefined;
            }
        });
    }
  };
});

我怎样才能让它发挥作用？ plunkr：http://plnkr.co/edit/GYBvynRqdTTqXxnk7thN?p=preview

Answer 1

这是因为模型值的编程分配。 $parsers在通过DOM修改值时运行。以编程方式更改模型值时，运行$formatters。因此，如果您将$parsers更改为$formatters，则在您的指令中，它将无法按预期进行测试。

<强> Plnkr

但是你可能需要在你的指令中同时使用它们，你真正的测试应该是测试解析器/格式化程序中的逻辑，而不是它是如何运行的（它已经通过角度测试）或者如何添加类角。如果你的验证是通过验证服务，或者甚至是指令的控制器来提供验证的，那么它将是一个很好的测试目标。

茉莉花测试不适用于角度指令？

1 个答案: