1. ホーム
  2. unit-testing

カスタムバリデーションのangularjsディレクティブをテストするには

2023-10-29 09:29:44

質問

このカスタム検証ディレクティブは、angularの公式サイトで紹介されている例です。 http://docs.angularjs.org/guide/forms テキスト入力が数値形式であるかどうかをチェックします。

var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          ctrl.$setValidity('integer', true);
          return viewValue;
        } else {
          // it is invalid, return undefined (no model update)
          ctrl.$setValidity('integer', false);
          return undefined;
        }
      });
    }
  };
});

このコードをユニットテストするために、こんなことを書きました。

describe('directives', function() {
  beforeEach(module('exampleDirective'));

  describe('integer', function() {
    it('should validate an integer', function() {
      inject(function($compile, $rootScope) {
        var element = angular.element(
          '<form name="form">' +
            '<input ng-model="someNum" name="someNum" integer>' +
          '</form>'
          );
        $compile(element)($rootScope);
        $rootScope.$digest();
        element.find('input').val(5);
        expect($rootScope.someNum).toEqual(5);
      });
    });
  });
});

すると、こんなエラーが出ます。

Expected undefined to equal 5.
Error: Expected undefined to equal 5.

何が起こっているかを見るために、いたるところに print 文を入れてみましたが、ディレクティブは決して呼び出されていないように見えます。 このような単純なディレクティブをテストする適切な方法は何でしょうか?

どのように解決するのですか?

他の解答のテストは、次のように書きます。

describe('directives', function() {
  var $scope, form;
  beforeEach(module('exampleDirective'));
  beforeEach(inject(function($compile, $rootScope) {
    $scope = $rootScope;
    var element = angular.element(
      '<form name="form">' +
      '<input ng-model="model.somenum" name="somenum" integer />' +
      '</form>'
    );
    $scope.model = { somenum: null }
    $compile(element)($scope);
    form = $scope.form;
  }));

  describe('integer', function() {
    it('should pass with integer', function() {
      form.somenum.$setViewValue('3');
      $scope.$digest();
      expect($scope.model.somenum).toEqual('3');
      expect(form.somenum.$valid).toBe(true);
    });
    it('should not pass with string', function() {
      form.somenum.$setViewValue('a');
      $scope.$digest();
      expect($scope.model.somenum).toBeUndefined();
      expect(form.somenum.$valid).toBe(false);
    });
  });
});

なお $scope.$digest() の後に呼び出されることに注意してください。 $setViewValue . これはフォームを「ダーティ」な状態にするもので、そうでなければ「プリミティブ」な状態のままとなり、おそらくあなたが望むものではありません。