unit testing file upload in angular

Question

I am using the nf-file-upload module to upload a file to my backend. The code for the file upload is as follows:

    $scope.upload = function (file) {
            console.log(file)

            Upload.upload({
                url: 'http://localhost:3000/fileupload',
                data: {file: file[0]},
            }).then(function (resp) {
                console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data);
}

The file uploading works great. however, when I create my unit test:

  it('should send file to backend for processing', function(){
    var mockFile = {file:[{"name":"file.bin", "size":1018, "type":"application/binary"}]};
    httpBackend.when('POST', 'http://localhost:3000/fileupload').respond(200, {"filePath":"http://localhost:3000/uploads/file.txt"});
    scope.upload(mockFile);
    httpBackend.flush();
  });

I get an error:

TypeError: undefined is not an object (evaluating 'resp.config.data.file.name')

What am I doing wrong?

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-04-08 02:22:29Z

2

The then method using the resp argument. In the normal conditions, you'll receive a object that have the structure: { config:{ data: { file:{ name: 'a name'} } } }

but in your test you don't respond with the same structure.

EDIT: Ok. I got this. the way that ng-file-uploader returns the data it's not mockable. You don't get the name of the file in the resp.data.config.file.name, Instead, saves the filename in a variable before upload the file. Like this:

   $scope.upload = function (file) {

      var fileName = file.name;

      Upload.upload({
        url: 'http://localhost:3000/fileupload',
        data: {file: file[0]},
      })
      .then(function (resp) {

        console.log('Success ' + fileName + ' uploaded. Response: ' + resp.data);
    });

  };

Check this codepen codepen.io/gpincheiraa/pen/MyrvQK Good luck!

edited Apr 8, 2016 at 2:22

answered Apr 7, 2016 at 20:12

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

machinebit Over a year ago

adding a mock object like this as per the example below still results in a syntax error.

Gonzalo Pincheira Arancibia Over a year ago

because your console.log also use resp.data, add data in your object. {config: {data: {file:{name: 'a name'}}}, data: {}}

machinebit Over a year ago

httpBackend.when('POST', 'localhost:3000/fileupload') .respond(200, { "config": { "data" : "file": {"name": "localhost:3000/uploads/file.txt" } } }, "data": {}); adding that still results in many 'unrecoverable syntax errors'

Gonzalo Pincheira Arancibia Over a year ago

Ok. I got this. the way that ng-file-uploader returns the data it's not mockeable. You don't get name of the resp.data.config.file.name, Instead, saves the filename in a variable before upload the file. Check this codepen codepen.io/gpincheiraa/pen/MyrvQK Good luck!

MBielski · Accepted Answer · 2016-04-07 20:10:12Z

You need to run a digest cycle.

  it('should send file to backend for processing', function(){
    var mockFile = {file:[{"name":"file.bin", "size":1018, "type":"application/binary"}]};
    httpBackend.when('POST', 'http://localhost:3000/fileupload').respond(200, {"filePath":"http://localhost:3000/uploads/file.txt"});
    scope.upload(mockFile);
    httpBackend.flush();
    scope.$digest();
  });

This will resolve the promise and trigger the return data.

Collectives™ on Stack Overflow

unit testing file upload in angular

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related