如何测试这个指令？答案

【问题标题】：How to test this directive?如何测试这个指令？
【发布时间】：2014-07-02 14:12:40
【问题描述】：

如何测试这个指令？

angular.module('uiApp')
.directive('uppercase', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            var uppercase = function (value) {
                var uppercase = value.toUpperCase();
                if (uppercase !== value) {
                    ngModelCtrl.$setViewValue(uppercase);
                    ngModelCtrl.$render();
                }
                return uppercase;
            };
            ngModelCtrl.$parsers.push(uppercase);
        }
    };
});

我已经尝试过这种方法，但它不起作用：

it('should transform to uppercase', inject(function ($compile) {
    element = angular.element('<input type="text" ng-model="test" ng-init="test=\'test\'" uppercase>');
    element = $compile(element)(scope);
    expect(element.text()).toBe('TEST');
}));

【问题讨论】：

标签： angularjs angularjs-directive jasmine karma-runner jasmine-jquery

【解决方案1】：

您需要在链接函数中将uppercase 附加到$formatters，而不是$parsers：

ngModelCtrl.$formatters.push(uppercase);

然后像这样测试它：

it('should transform to uppercase', inject(function ($compile, $rootScope, $timeout) {
    $rootScope.test = 'test';
    element = angular.element('<input type="text" ng-model="test" uppercase>');
    element = $compile(element)($rootScope);
    $rootScope.$apply();
    expect(element.val()).toBe('TEST');
}));

【讨论】：

不，我仍然收到错误Expected '' to be 'TEST'.
同样的错误。如果我在$rootScope.$apply(...) 之前添加$rootScope.$digest()，至少我有错误Expected 'test' to be 'TEST'
@amb 我发现你的实现不太正确，我更新了我的答案来解决这个问题。
我觉得在实现上还是有不足的地方。我相信它应该能够与 ng-init 一起工作。但是，如果您查看此plunker，您还可以看到页面首次加载时视图值未更新为大写
@amb 我创建了一个plunk 来向您展示$parsers 和$formatters 之间的区别。 $parsers 负责获取对模型的 dom 更改，$formatters 负责将模型值格式化为 dom。如果你想双向转换文本，你需要在 $parsers 和 $formatters 后面加上大写。

【解决方案2】：

我知道了：

it('should transform to uppercase', inject(function ($compile) {
    scope.test = '';
    element = angular.element('<input type="text" ng-model="test" uppercase>');
    element = $compile(element)(scope);
    element.val('test').triggerHandler('input');
    expect(element.val()).toBe('TEST');
    expect(scope.test).toBe('TEST');
}));

而且它有效。显然trigger('input') 是关键。

【讨论】：