angularjs测试指令修改用户输入

Question

我的指令看起来像这样（去除输入非数字）：

'use strict'; 

angular.module('fooApp') 
    .directive('percent', function() { 
    return { 
    require: 'ngModel', 
    link: function (scope, element, attr, ngModelCtrl) { 
     function fromUser(text) { 

     // get rid of non-number data 
     var transformedInput = text.replace(/[^0-9]/g, ''); 

     if(transformedInput !== text) { 
      ngModelCtrl.$setViewValue(transformedInput); 
      ngModelCtrl.$render(); 
     } 
     return transformedInput; 
     } 

     ngModelCtrl.$parsers.push(fromUser); 
    } 
    }; 
    } 

我的测试是这样的：

'use strict'; 

describe('Directive: percent', function() { 

    var $compile; 
    var $rootScope; 

    beforeEach(module('fooApp')); 

    beforeEach(inject(function(_$compile_, _$rootScope_){ 
    $rootScope = _$rootScope_; 
    $compile = _$compile_; 
    })); 

    it('Removes non-digits', function() { 
    $compile('<input percent ng-model="someModel.Property" value="1a2b3"></input>')($rootScope); 
    $rootScope.$digest(); 
    console.log($rootScope.someModel); 
    expect($rootScope.someModel.Property).toEqual('123'); 
    }); 
}); 

不过，我可以在日志中看到：

LOG: undefined 

所以它听起来像someModel未设置=>测试失败。

不知道我的指令有什么问题。如果我手动测试：在HTML页面输入非数字，这些不会显示（被忽略）。

什么是正确的方法来测试？

我怀疑，一旦数据不是来自用户，而是通过值来设置，我的指令不会修改内容。不知道如何改变这一点。

Answer 1

你应该做的是使用modelController $setViewValue(value)来触发你的解析器管道。要获得modelcontroller的保持，你就必须包装哑HTML在form：

$compile('<form name="form1"><input percent ng-model="someModel.Property" name='data'></input></form>')($rootScope); 
    $rootScope.form1.data.$setViewValue('1a2b3') 
    $rootScope.$digest(); 
    console.log($rootScope.someModel); 
    expect($rootScope.someModel.Property).toEqual('123'); 

你可以给它一个尝试。