lundi 26 septembre 2016

Angular directives: It's possible testing that certain characters are rejected in a keypress event?

I've been building a directive that restrict that an user press certain invalid characters, in this case, using the "keypress" event binding to the input element that use my directive. I've been trying to test this funcionality, but i don't understand how achieve this.

My directive

angular
    .module('gp.rutValidator')
    .directive('gpRutValidator', directive);

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

  function directive($filter){
    var ddo = {
      restrict: 'A',
      require: 'ngModel',
      link: linkFn
    };
    return ddo;

    function linkFn(scope, element, attrs, ngModel){

      //valid characters are digits, dash and letter k
      var regexValidKeys = (/[\d\.\-k]/i);

      element.bind('keypress', function(e){

        var key = e.key || String.fromCharCode(e.keyCode);

        if (!regexValidKeys.test(key)) {
          e.preventDefault();
          return false;
        }

      });

    }
  }

My test

describe('Angular Rut Validator Directive',validatorDirectiveSpec);

  function validatorDirectiveSpec(){

    //////////////  GLOBALS   ////////////////////////////////
    var scope, element, evt;
    //////////////  BEFORE EACH ////////////////////////////////
    beforeEach(module('gp.rutValidator'));
    beforeEach(inject(eachSpec));

    function eachSpec($rootScope, $compile){
      element = angular.element('<input ng-model="rut" gp-rut-validator>');
      scope = $rootScope.$new();
      $compile(element)(scope);
      scope.$digest();
    }

    ////////////////// HELPERS ///////////////////////////////////
    function pressKey(keyCode) {
      try {
        // Chrome, Safari, Firefox
        evt = new KeyboardEvent('keypress');
        delete evt.keyCode;
        Object.defineProperty(evt, 'keyCode', {'value': keyCode});
      }
      catch (e) {
        // PhantomJS 
        evt = document.createEvent('Events');
        evt.initEvent('keypress', true, true);
        evt.keyCode = keyCode;
      }
      element[0].dispatchEvent(evt);
    }
    //////////////////   SPECS //////////////////////////////////
    it('1. Should be reject no valid characters', spec1);

    function spec1(){
      var ngModelCtrl = element.controller('ngModel'),
          invalidCharacterKeys = [
                                    'a'.charCodeAt(0),
                                    'z'.charCodeAt(0),
                                    'b'.charCodeAt(0),
                                    '#'.charCodeAt(0)
                                  ];

      invalidCharacterKeys.forEach(function(keyCode){
        pressKey(keyCode);
        scope.$digest();
        expect(scope.rut).toBe('');
      });

    }

  }

But I get the error Expected undefined to be ''.

What I've doing wrong?

Example in Codepen => http://ift.tt/2dfn3C2

Aucun commentaire:

Enregistrer un commentaire