[英]Unit Testing Custom File Input Directive
I am having a huge problem with getting a unit test to work for a custom file directive for angular 1.5.0 and Jasmine 2.4, I have looked at我在让单元测试适用于 angular 1.5.0 和 Jasmine 2.4 的自定义文件指令时遇到了一个大问题,我看过
How to provide mock files to change event of <input type='file'> for unit testing 如何提供模拟文件来更改 <input type='file'> 的事件以进行单元测试
However this only seems to work for a raw input file field and not a custom directive.但是,这似乎只适用于原始输入文件字段,而不适用于自定义指令。
First the directive, pretty straight forward model assignment.首先是指令,非常直接的模型分配。 I also trigger a outside function on the scope which I make sure is in the unit test and don't get any errors from that.
我还在范围上触发了一个外部函数,我确保它在单元测试中并且不会从中得到任何错误。 I just for the life of me can't force a change event to happen on the file input.
我只是为了我的生活不能强制更改事件发生在文件输入上。
app.directive('fileModel', fileModel);
fileModel.$inject = ['$parse', '$log'];
function fileModel ($parse, $log) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files);
scope.parseFolder(scope.myFolder);
});
});
}
};
}
Here is the unit test, right now I am trying to trigger and event via a button because I couldn't get a manual event trigger to happen but that isn't working either.这是单元测试,现在我正在尝试通过按钮触发和事件,因为我无法手动触发事件,但这也不起作用。
describe('fileModel', function () {
var $compile, $rootScope, directiveElem;
beforeEach(module("LocalModule"));
beforeEach(function(){
inject(function(_$compile_, _$rootScope_){
$compile = _$compile_;
$rootScope = _$rootScope_;
});
directiveElem = getCompiledElement();
});
function getCompiledElement(){
var element = angular.element('<div ng-controller="UploadCtrl as upload"><input id ="upload" type="file" file-model="myFolder"/><button type="button" id="button" ng-click="clickUpload()">Upload</button></div>');
var compiledElement = $compile(element)($rootScope);
$rootScope.clickUpload = function(){
angular.element('#upload').trigger('click');
};
$rootScope.$digest();
return compiledElement;
}
it('should have input element', function () {
var inputElement = directiveElem.find('input');
expect(inputElement).toBeDefined();
});
it('watched the change function', function () {
var file = {
name: "test.png",
size: 500001,
type: "image/png"
};
var fileList = {
0: file,
length: 1,
item: function (index) { return file; }
};
var inputElement = directiveElem.find('input');
var buttonElement = directiveElem.find('#button');
inputElement.files = fileList;
directiveElem.triggerHandler({
type: 'change',
target: {
files: fileList
}
});
$rootScope.$digest();
buttonElement.triggerHandler('click');
});
});
I was having a similar issue and ran across this.我遇到了类似的问题并遇到了这个问题。 I was able to get this to work by calling
$rootScope.$apply();
我能够通过调用
$rootScope.$apply();
工作$rootScope.$apply();
after the triggerHandler
method instead of $rootScope.$digest();
在
triggerHandler
方法之后而不是$rootScope.$digest();
. .
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.