测试一个简单的指令答案

【问题标题】：Testing a simple directive测试一个简单的指令
【发布时间】：2016-07-29 18:00:09
【问题描述】：

我写了这个指令（效果很好）但我在测试它时遇到了麻烦：

module.exports = /*@ngInject*/ function($filter) {
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          ngModel.$parsers.push(function(value) {
            var phoneNumber;

        if (scope.country === 'US' && value.length >= 10) {
          phoneNumber = value.replace(/[ &()-.]+/g, '');
          ngModel.$setViewValue(phoneNumber);
          ngModel.$render();
        } else {
          phoneNumber = value;
        }
        return phoneNumber;
      });
    }
  };
};

在阅读了 200 篇文章并失败后，我基本上处于第一方：

var factory = require('./us-phone.directive.js');
describe('US Phone Number directive', function() {
  it('should remove dashes, parantheses, and spaces' , function() {
    var value = '(555)555-5555';
    var phoneNumber = '';

    phoneNumber.should.equal('5555555555');
  });
});

【问题讨论】：

你想做什么？错误在哪里？
测试失败，很抱歉没有更清楚

标签： javascript angularjs unit-testing directive phone-number

【解决方案1】：

有几件事要做：

创建测试范围。
编译你的指令，否则你不能测试它。
您使用 ngModel.$parsers.push，因此您需要在您的元素上触发一个模拟交互的事件。您可以使用triggerHandler('input') 触发它。

您需要手动启动摘要循环。

describe('myApp', function () {
  var element;
  beforeEach(function () {
    module('myApp');
  });

  it('should replace special characters', function () {
    element = angular.element('<input phone ng-model="value"/>');
    inject(function ($rootScope, $compile) {
      var scope = $rootScope.$new();
      scope.value = '(555)-55 5555';
      var compiled = $compile(element)(scope);
      compiled.val(scope.value);
      compiled.triggerHandler('input');
      scope.$digest();

      expect(scope.value).toBe('555555555');
    });
  });
});

我为你创建了一个小提琴：http://jsfiddle.net/trollr/q1vd1hqs/

【讨论】：