单元测试Angular Attribute Directive

时间:2017-06-26 23:52:02

标签: javascript angularjs unit-testing angularjs-directive jasmine

我在测试AngularJS(1.5)属性限制指令时遇到了一些问题。请参阅以下示例指令和以下单元测试,其中会生成一个损坏的单元测试。

指令

(function (angular) {
  'use strict';

  function SomethingCtrl($filter) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        var exampleFilter = $filter('exampleFilter');
        ngModelController.$parsers.push(function(value) {
          ngModelController.$setViewValue(value);
          ngModelController.$render();
          return value;
        });
      }
    };
  }

  SomethingCtrl.$inject = ['$filter'];

  angular.module('something.formatter', [
    'filters'
  ]).directive('somethingFormatter', SomethingCtrl);
}(window.angular));

指令单元测试

fdescribe('something.formatter spec', function () {
  'use strict';
  var scope,
      element,
      testValue,
      compile,
      ngModelCtrl;

  beforeEach(function () {
    module('something.formatter');

    compile = function () {
      inject([
        '$compile',
        '$rootScope',
        function ($compile, $rootScope) {
          scope = $rootScope.$new();
          scope.testValue = testValue;
          element = angular.element('<input something-formatter ng-model="testValue"');
          $compile(element)(scope);
          ngModelCtrl = element.controller('ngModel');
          scope.$digest();
        }
      ]);
    };
  });
  describe('initialization', function () {
    beforeEach(function () {
      testValue = 'Yay!';
      compile();
      ngModelCtrl.$setViewValue('Nay?');
    });
    it('should be defined', function () {
      expect(scope.testValue).toEqual('Nay?');
    });
  });
});

我尝试按照以下说明操作:http://jsfiddle.net/mazan_robert/hdsjbm9n/

能够在ngModelController上调用方法,比如; $ setViewValue。

然而,Jasmine继续对我尖叫,并告诉我$ setViewValue不是构造函数,甚至在实际指令中也没有命中console.logs。

TypeError: undefined is not an object (evaluating 'ngModelCtrl.$setViewValue')

思想?

非常感谢你的帮助!

1 个答案:

答案 0 :(得分:2)

如果您关闭输入标记,它将起作用:

element = angular.element('<input something-formatter ng-model="testValue" />');