Testing KeyPress on inputbox in an Angular directive is undefined

Question

This is the directive I am testing:

'use strict';

angular.module('vsnap.emailInput', [
  'services.emailCollection'
])

  .directive('vsEmailInput', function() {
    return {
      restrict: 'A',
      replace: true,
      templateUrl: 'common/directives/emailInput/emailInput.html',
      scope: {
        EmailCollection: '=emails',
        ErrorMessage: '=message',
        listLimit: '=limit'
      },
      controller: [
        '$element',
        '$document',
        '$scope',
        function(
          $element,
          $document,
          $scope) {

          $scope.newEmail = '';

          // sets focus on the email input
          $scope.setInputFocus = function() {
            document.getElementById('emailInput').focus();
          };

          // watches for key inputs and edits emails accordingly
          $scope.keyDown = function(event) {
            var keyCode = event.keyCode;

            // comma & tab
            if ((keyCode === 188) || (keyCode === 9)) {
              event.preventDefault();
              $scope.addEmail($scope.newEmail);
              $scope.newEmail = '';
            }
          };
        }
      ]
    };
  }
);

Which is called from:

<input type="text" ng-model="newEmail" placeholder="Enter an email" ng-change="checkSuggestions()" ng-keydown="keyDown($event)" id="emailInput">

This works well, and the problem I am having is trying to trigger this action while testing with Karma and Jasmine.

This is what I have in the test:

describe('email input directive', function() {
  var elm, scope, httpBackend, apiUrl, ctrl;

  beforeEach(module('vsnap', 'templates'));

  beforeEach(inject(function($rootScope, $compile, $httpBackend,
    _apiUrl_, $controller) {
      httpBackend = $httpBackend;
      apiUrl  =_apiUrl_;

      // create element that will load our directive
      elm = angular.element(
        '<div vs-email-input emails="EmailCollection" ' +
        'message="emailError" limit="3"></div>');

      $scope = $rootScope.$new();

      $rootScope.newEmail = '';

      ctrl = $controller('DefaultCtrl', {$scope:$scope});

      $compile(elm)($scope);
      $scope.$digest();
      $rootScope.$apply();
    }
  ));

  afterEach(function() {
    httpBackend.verifyNoOutstandingExpectation();
    httpBackend.verifyNoOutstandingRequest();
  });

  it('should check if email is valid', function() {
    $("#emailInput").focus();
    var e = jQuery.Event("keydown");
    e.which = 77; // # Some key code value
    $("#emailInput").val(String.fromCharCode(e.which));
    $("#emailInput").trigger(e);
  });
});

After many attempts... I got the 'should check if email is valid' idea from here. It doesn't seem to fail, but the value of the $('input') is not changing.

Console.log of $('#emailInput').val() comes back undefined.

Ultimately, what I am trying to do is type in 3 characters into this text box and then expect an API call when it kits the keyDown() function.

This is my first question on Stackoverflow, so sorry for anything I may have missed.

Testing KeyPress on inputbox in an Angular directive is undefined

0 Answers0