5

I am using mocha, chai, karma along with PhantomJS and related addons. How can we create a client side File object to pass it to FileReader API ? I have to upload a test jpeg file, create a file object and pass it to FileReader api to continue testing.

Deepan Prabhu Babu
  • 862
  • 11
  • 18
  • @guest271314: I don't think this is a duplicate. That question is about reading/writing local files. This question is about stubbing or mocking the `File` object for testing purposes. I'm voting to reopen. – Greg Burghardt Dec 15 '16 at 13:10
  • @GregBurghardt OP is asking how to create a `File` object. See also [Chrome: Create file input from blob with Javascript?](http://stackoverflow.com/questions/11739946/chrome-create-file-input-from-blob-with-javascript) – guest271314 Dec 15 '16 at 13:11
  • I agree with Greg Burghardt, This question is indeed about stubbing but with a valid file instead of some arrays containing values. I want to create a File object for a valid image. – Deepan Prabhu Babu Dec 15 '16 at 13:12
  • @DeepanPrabhuBabu _"I want to create a File object"_ You can create a `File` object using `new File()` constructor, as described at Answer at linked Question; or `FormData,prototype.append()` [How to create a modified copy of a File object in JavaScript?](http://stackoverflow.com/questions/41008024/how-to-create-a-modified-copy-of-a-file-object-in-javascript/) – guest271314 Dec 15 '16 at 13:13
  • @DeepanPrabhuBabu [JavaScript - New File() not working](http://stackoverflow.com/questions/41116513/javascript-new-file-not-working/) – guest271314 Dec 15 '16 at 13:20
  • @guest271314: Again, the answers you keep posting in comments show how to **create** the File object, and not how they should or could be used in the context unit testing. Just creating the object isn't enough. It must act the same way as a real `File` when passing it to the code under test. Those other questions don't address those concerns. – Greg Burghardt Dec 15 '16 at 13:22
  • @GregBurghardt Voted to reopen. Though not entirely sure what expected result is? The Question is still "How to create File Object in client side Javascript for unit testing?". The linked Questions provide Answers directly related to how to create `File` object client side. Am curious now as to in which ways the present Question will explore `File` object other than approaches present in linked Questions. – guest271314 Dec 15 '16 at 14:20
  • @DeepanPrabhuBabu Not certain what issue you are having? What problems are you encountering creating a `File` object at client side `javascript` Can you include the `javascript` which you have tried to resolve the issues you are encountering at Question? – guest271314 Dec 15 '16 at 14:27
  • @DeepanPrabhuBabu: Can you post the code you are already using to create this mock or stub? – Greg Burghardt Dec 15 '16 at 15:09

1 Answers1

2

I'm not sure why you need a File instance, A Blob should be enough. You need to show us some more context on what you are trying to achieve.
What are your code doing and what is the test expected to yield?

If you have access to DOM and canvas just simply create one with js

document.createElement('canvas').toBlob(function(blob) {
  // FileReader will be happy with just a blob
  // But if you really want a file you need to construct it also
  // var file = new File([blob], 'canvas.jpg', {type: blob.type})
  
  var fr = new FileReader
  fr.onload = function(){
    console.log(fr.result.byteLength)
  }
  fr.readAsArrayBuffer(blob)
}, 'image/jpeg')
Endless
  • 34,080
  • 13
  • 108
  • 131
  • Dev code I am writing is going to validate files using javascript FileReader on a client's browser, once he selects a file for upload in a form, before uploading though. Basically, my setup consists of npm, karma, mocha, chai, browserify, phantomjs, and javascript code to validate a file, once a file object is passed. The code is working if I use a vanilla browser and select a file manually. I want to convert this into an automated test, where i can parameterize the file and pass different test files to test the code flow. Please tell me if you need more context. – Deepan Prabhu Babu Dec 16 '16 at 08:09
  • I am unable to test using phantomjs completely, because it doesn't fire most of the onload methods, and moreover, blob object i created using your above code ( Thank you !! ) is empty. I used a polyfill as phantomjs did not support natively. – Deepan Prabhu Babu Dec 16 '16 at 08:12
  • @DeepanPrabhuBabu _"and javascript code to validate a file, once a file object is passed.The code is working if I use a vanilla browser and select a file manually. I want to convert this into an automated test, where i can parameterize the file and pass different test files to test the code flow."_ Are you trying to populate the `.files` object of an `` element using `javascript`? Can you include the `javascript` that both is, and is not returning expected result at Question? See http://stackoverflow.com/help/mcve, http://stackoverflow.com/help/how-to-ask – guest271314 Dec 16 '16 at 17:17