javascript - unit test FileReader.onload fn with Jasmine and angularjs - Stack Overflow

admin管理员组

文章数量:1335380

I've a custom directive which is used to upload/import a binary file. The directive listens for a change event on an <input type="file"../> element.

So now I've a test which triggers a change event, which works fine and do have code coverage apart from the body of reader.onload() fn. So, can someone guide me on what to do so that ...onload() fn is trigger via unit test.

here is the listener within directive:

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]);
});

test I've so far:

describe('file import', function () {
beforeEach(inject(function ($pile) {
  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>');
  $pile(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
});
});

Here is a view of code coverage:

I've a custom directive which is used to upload/import a binary file. The directive listens for a change event on an <input type="file"../> element.

So now I've a test which triggers a change event, which works fine and do have code coverage apart from the body of reader.onload() fn. So, can someone guide me on what to do so that ...onload() fn is trigger via unit test.

here is the listener within directive:

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]);
});

test I've so far:

describe('file import', function () {
beforeEach(inject(function ($pile) {
  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>');
  $pile(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
});
});

Here is a view of code coverage:

• javascript
• angularjs
• unit-testing
• jasmine

Share Improve this question Follow asked Jun 13, 2016 at 12:58 Simple-SolutionSimple-Solution 4,2891212 gold badges5050 silver badges6666 bronze badges 2

• hi, @Simple-Solution did you get any solution for this? If yes, please update here. I am facing the same issue. – aditya Commented Sep 20, 2016 at 10:06
• @aditya I could not get it to work. – Simple-Solution Commented Sep 21, 2016 at 10:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You could have add onload function in spy and call directly after fileReader invoked.

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

and "it" block you can call onload function like,

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

This will call your custom onload function in controller/Service.

plete code below:

describe('file import', function () {
  beforeEach(inject(function ($pile) {
     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>');
      $pile(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);
   });
});

本文标签： javascriptunit test FileReaderonload fn with Jasmine and angularjsStack Overflow