Javascript 如何使用文件上载和onchange事件测试Angular JS指令

我就要放弃了。我已经尝试了各种方法来访问测试中的指令范围

'use strict';

angular.module('cmsModuleApp')
  .directive('fileUpload', function () {
    return {
      scope: {},  
      template: '<input type="file" >',
      restrict: 'E',
      controller: function fileUploadCtrl (scope) {
         //also tried scope.uploadFile here... 
         this.uploadFile = function (files) {console.log("please work...")};
      },
      link: function postLink(scope, element, attrs, Ctrl) {
          element.uploadFile = function (files) {console.log("pleaseeeee")};
      }
    };
  });

“严格使用”；
角度.module（'cmsModuleApp'）
.directive（'fileUpload'，函数（）{
返回{
作用域：{}，
模板：“”，
限制：'E'，
控制器：函数fileUploadCtrl（作用域）{
//还在此处尝试scope.uploadFile。。。
this.uploadFile=函数（文件）{console.log（“请工作…”）}；
},
链接：函数postLink（范围、元素、属性、Ctrl）{
element.uploadFile=函数（文件）{console.log（“plesseeee”）}；
}
};
});

测试：：

'use strict';

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

  beforeEach(module('cmsModuleApp'));

  var element;
  var scope;
  var files;

  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new();
  }));

  it('should call a file upload method onchange event', inject(function ($compile) {

    element = angular.element('<file-upload></file-upload>');
    element = $compile(element)(scope);

    //tried moving this around thinking maybe it had to render or update
    scope.$digest();

    //Im loggin the element's scope to explore the object a bit
    console.log(element.scope()); 

    spyOn(element.scope(), 'uploadFile') 
    element.triggerHandler('onchange');

    expect(element.scope().uploadFile()).toHaveBeenCalled();

  }));
});

“严格使用”；
描述（'指令：fileUpload'，函数（）{
在每个模块之前（模块（'cmsModuleApp'）；
var元素；
var范围；
var文件；
beforeach（注入（函数（$rootScope）{
scope=$rootScope.$new（）；
}));
它（'should call a file upload method onchange event'，inject（函数（$compile）{
元素=角度。元素（“”）；
元素=$compile（元素）（范围）；
//尝试将其移动，认为可能需要渲染或更新
范围。$digest（）；
//我会记录元素的作用域来稍微探索一下对象
log（element.scope（））；
spyOn（element.scope（），“uploadFile”）
元素triggerHandler（'onchange'）；
expect（element.scope（）.uploadFile（））.tohavebeencall（）；
}));
});

我试图测试的是，当此文件输入发生更改（单击并加载文件）时，它将在指令的作用域上执行

uploadFile（）

方法。一旦我开始工作，我将实现一个

$http

服务

---

但是，该方法不存在或未定义。。不管我怎么努力

您可以尝试这样修改您的测试文件吗

我将变量声明移动到

descripe

中，并将测试初始化移动到

beforeach

中。然后我在

scope.uploadFile

上创建了一个间谍

文件上传\u测试：

'use strict';

describe('Directive: fileUpload', function () {
  var element;
  var scope;
  var files;

  beforeEach(module('cmsModuleApp'));

  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new();
    element = angular.element('<file-upload></file-upload>');
    element = $compile(element)(scope);
    scope.$digest();
  }));

  afterEach(function() {
    scope.$destroy();
  });

  it('should call a file upload method onchange event', function() {
    scope.uploadFile = jasmine.createSpy();

    element.triggerHandler('change');

    expect(scope.uploadFile).toHaveBeenCalled();
  }));
});

“严格使用”；
描述（'指令：fileUpload'，函数（）{
var元素；
var范围；
var文件；
在每个模块之前（模块（'cmsModuleApp'）；
beforeach（注入（函数（$rootScope）{
scope=$rootScope.$new（）；
元素=角度。元素（“”）；
元素=$compile（元素）（范围）；
范围。$digest（）；
}));
之后（函数（）{
作用域：$destroy（）；
});
它（'应该在更改事件上调用文件上载方法'，函数（）{
scope.uploadFile=jasmine.createSpy（）；
元素triggerHandler（'change'）；
expect（scope.uploadFile）.toHaveBeenCalled（）；
}));
});

我认为问题可能是您使用的是隔离作用域

作用域：{}

。下面是我如何完成类似任务的示例：

describe('File Input Directive', function() {
  var scope, element, isolateScope;

  beforeEach(function() {
    bard.appModule('appName');
    bard.inject(this, '$compile', '$rootScope');
    scope = $rootScope.$new();

    var html = '<form><my-file-input /></form>';
    var form = angular.element(html);
    element = form.find('my-file-input');
    var formElement = $compile(form)(scope);
    scope.$digest();

    isolateScope = element.isolateScope();
  });

  afterEach(function() {
    scope.$destroy();
  });

  bard.verifyNoOutstandingHttpRequests();

  describe('selectFile', function() {
    it('triggers a click on the file input', function() {
      var fileInput = $(element).find('.none')[0];
      var mockClick = sinon.spy(fileInput, 'click');

      isolateScope.selectFile();
      scope.$digest();

      expect(mockClick).calledOnce;
    });
  });

descripe（'File Input Directive'，function（））{
变量范围、元素、隔离范围；
beforeach（函数（）{
bard.appModule（'appName'）；
inject（这是“$compile”，“$rootScope”）；
scope=$rootScope.$new（）；
var html=''；
var form=angular.element（html）；
元素=form.find（'my-file-input'）；
var formElement=$compile（form）（范围）；
范围。$digest（）；
isolateScope=元素。isolateScope（）；
});
之后（函数（）{
作用域：$destroy（）；
});
巴德。验证无超越前传（）；
描述（'selectFile'，function（））{
它（'触发对文件输入的单击'，函数（）{
var fileInput=$（元素）.find（'.none'）[0]；
var mockClick=sinon.spy（fileInput，'click'）；
selectFile（）；
范围。$digest（）；
expect（mockClick）.calledOnce；
});
});

---

您可以忽略所有bard引用-它是一个帮助程序库，可以减少一些样板文件。重要的部分是在每个之前的

中创建
isolateScope
，并引用指令的方法（在本例中，选择文件）在测试本身的
isolateScope
上。另外，请注意
scope.$digest（）
调用该方法后。希望能有所帮助！
感谢您尝试一下，但它仍然无法识别fileUpload是一个函数。我不完全确定我是否理解指令作用域。我正在阅读我现在能找到的所有文档。如果我找到一个解决方案，我会发布。@Davey我认为如果您使用scope.uploadFile而不是this.uplo，它会起作用adFile（指令的控制器声明）或element.uploadFile（在link函数中）。测试可以访问该范围，因此您需要在其中公开您的函数。