Question

我有以下指令可以正常工作，现在我需要进行单元测试，

(() => {
  angular
    .module('app.utilities')
    .directive('allowPattern', allowPatternDirective);

  function allowPatternDirective () {
    return {
      restrict: 'A',
      compile () {
        return (scope, element, attrs) => {
          element.bind('keypress', (event) => {
            const keyCode = event.which || event.keyCode; // get the keyCode pressed from the event.
            const keyCodeChar = String.fromCharCode(keyCode); // determine the char from the keyCode.
            // keyCode char does not match the allowed Regex Pattern, then don't allow the input into the field.
            if (!keyCodeChar.match(new RegExp(attrs.allowPattern, 'i'))) {
              event.preventDefault();
              return false;
            }
            return true;
          });
        };
      },
    };
  }
})();

现在，以下是我正在运行的单元测试，它失败了，

ngDescribe({
  name: 'allow-pattern',
  modules: ['app.utilities'],
  inject: ['$compile'],
  tests (deps) {
    let scope;
    let element;
    function compileDirective () {
      scope = deps.$rootScope.$new();
      element = deps.$compile('<input allow-pattern="[0-9]">')(scope);
      scope.$digest();
      return element;
    }
    function triggerhandler (eventCode) {
      element.triggerHandler({ type: 'keypress', which: eventCode });
    }
    it.only('sets value if it matches the pattern', () => {
      compileDirective();
      triggerhandler(57); // keycode for 5
      scope.$digest();
      console.log(element.val());
    });
  },
});

现在每当我运行此测试时，我都希望element.val()的值应为5，而是返回空字符串。我无法理解出了什么问题。任何人都可以指出这个问题吗？

我正在使用karma和phantomjs。

提前致谢。

Answer 1

我认为我正在测试错误的测试用例。我想测试的是，如果我的正则表达式匹配，那么应该调用event.preventDefault（）。我做了什么，它完美地通过了。我使用sinon.spy来监视防止默认并且它有效。

测试属性的angularjs指令

1 个答案: