javascript - 使用 Jasmine 和 angularjs 对 FileReader.onload fn 进行单元测试

Question

我有一个自定义指令，用于上传/导入二进制文件。该指令监听 <input type="file"../> 上的更改事件元素。

所以现在我有一个触发更改事件的测试，它工作正常并且除了 reader.onload() 的主体之外确实具有代码覆盖率fn。那么，有人可以指导我如何做吗 ...onload() fn 是通过单元测试触发的。

这是指令中的监听器:

element.bind('change', function(changeEvt){
  var reader = new FileReader();
  var result = {
    filename: changeEvt.target.files[0].name
  };

  reader.onload = function (loadEvent) {
    scope.$apply(function () {
      result.data = loadEvent.target.result;
      scope.fileSelected({content: result});
    });
  };

  reader.readAsArrayBuffer(changeEvt.target.files[0]);
});

测试我到目前为止:

describe('file import', function () {
beforeEach(inject(function ($compile) {
  scope.testOnFileSelected = jasmine.createSpy('testOnFileSelected');
  eventListener = jasmine.createSpy();
  spyOn(windowMock, 'FileReader').and.returnValue({
    addEventListener: eventListener,
    readAsArrayBuffer : function() {
      //return console.log(file);
    }
  });
  elm = angular.element('<div id="testImportBtn"><my-file-select-button id="testFileSelect" caption="buttonText" file-selected="testOnFileSelected(content)" ng-disabled="testDisabled"></my-file-select-button></div>');
  $compile(elm)(scope);
  scope.$digest();
}));

fit('should render the button and be visible', function () {
  var button = elm.find('#testFileSelect');
  button .triggerHandler({type: 'change', target: {files: [{name: 'some.tar.gz'}]}});
  expect(windowMock.FileReader).toHaveBeenCalled();
  //expect(eventListener).toHaveBeenCalled(); Fails 
  //expect(scope.testOnFileSelected).toHaveBeenCalledWith({data: {}, fileName: 'some.tar.gz'}); fails
});
});

这是代码覆盖率的 View :

Answer 1

您可以在 spy 中添加 onload 函数，并在调用 fileReader 后直接调用。

      spyOn(window, 'FileReader').and.returnValue({
        onload: function() {
        },
        readAsArrayBuffer : function() {
          //return console.log(file);
        }
      });

和“它”阻止你可以调用 onload 函数，比如，

      var mockedLoadEvent = { //eventdetails }
      expect(window.FileReader).toHaveBeenCalled();
      window.FileReader().onload(mockedLoadEvent);

这将在 Controller /服务中调用您的自定义 onload 函数。

完整代码如下:

describe('file import', function () {
  beforeEach(inject(function ($compile) {
     scope.testOnFileSelected = jasmine.createSpy('testOnFileSelected');
     eventListener = jasmine.createSpy();
     spyOn(window, 'FileReader').and.returnValue({
        onload: function() {
        },
        readAsArrayBuffer : function() {
          //return console.log(file);
        }
      });
      elm = angular.element('<div id="testImportBtn"><my-file-select-button id="testFileSelect" caption="buttonText" file-selected="testOnFileSelected(content)" ng-disabled="testDisabled"></my-file-select-button></div>');
      $compile(elm)(scope);
      scope.$digest();
   }));

   it('should render the button and be visible', function () {
      var button = elm.find('#testFileSelect');
      button .triggerHandler({type: 'change', target: {files: [{name: 'some.tar.gz'}]}});
      var mockedLoadEvent = { //eventdetails }
      expect(window.FileReader).toHaveBeenCalled();
      window.FileReader().onload(mockedLoadEvent);
   });
});