业力单元测试'undefined'不是函数错误

Question

我有一个自定义指令，用于检查我要测试的两个输入字段中的值是否彼此相等（重复密码）。它工作正常但测试失败并出现此错误：

TypeError: 'undefined' is not a function (evaluating 'element.add(tween)')

指令非常简单明了：

angular.module('fmAppApp')
.directive('valueMatch', function () {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function postLink(scope, element, attrs, ctrl) {
        var tween = '#' + attrs.valueMatch;
        element.add(tween).on('keyup', function () {
          scope.$apply(function () {
            var v = element.val() === $(tween).val();
            ctrl.$setValidity('valueMatch', v);
          });
        });
   }
 };

});

这是规范：

describe('Directive: valueMatch', function () {

  // load the directive's module
  beforeEach(module('fmAppApp'));

  var element, origElement,
    scope;

  beforeEach(inject(function ($rootScope) {
   scope = $rootScope.$new();
  }));

  it('should set change validity state of element depending on value of another element',
    inject(function ($compile) {
      origElement = $compile('<input id="orig">')(scope);
      element = $compile('<input value-match="orig" ng-model="repeat">')(scope);
      scope.$digest();
      expect(element.$valid).toBe(true);
      origElement.val('12345');
      scope.$digest();
      expect(element.$valid).toBe(false);
      element.val('12345');
      expect(element.$valid).toBe(true);
 }));
});

显然 add() 是未定义的，对吧？但为什么？

Answer 1

我相信在你的单元测试中，Angular 正在加载 jqLite 而不是 jQuery，它没有 add 功能。

要么使用此处描述的 jqlite 兼容函数之一 https://code.angularjs.org/1.2.9/docs/api/angular.element

或者在您的测试中也包括 jQuery，在 karma 配置中。

业力单元测试'undefined'不是函数错误

Karma unit test 'undefined' is not a function error

javascript

unit-testing

angularjs

karma-runner