CODEWITHSUNDEEP
javascriptangularjsunit-testingjasmine
Simple-Solution
Simple-Solution

Reputation: 4289

unit test FileReader.onload fn with Jasmine and angularjs

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 ($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
});
});

Here is a view of code coverage:

enter image description here

Upvotes: 3

Views: 7163

Answers (1)

Rameshkumar Arumugam
Rameshkumar Arumugam

Reputation: 151

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.

complete code below:

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

Upvotes: 6

Related Questions