Karma unit test 'undefined' is not a function error

Question

I have a custom directive for checking if values in two input fields are equal to each other (repeat password) which I want to test. It works fine but test fails with this error:

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

The directive is very simple and straightforward:

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);
          });
        });
   }
 };

});

And here is the spec:

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);
 }));
});

So apparently add() is undefined, right? But why?

Answer 1

I believe in case of your unit test, Angular is loading jqLite instead of jQuery, which does not have add function.

Either use one of the jqlite compatible function described here https://code.angularjs.org/1.2.9/docs/api/angular.element

Or include jQuery too in your tests, in karma config.