Mocking File Inputs in JavaScript and Ember.js

components.x-file-input.js

// app/components/x-file-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  type: 'file',
  attributeBindings: ['type', 'value'],

  addChangeListenerToElement: Ember.on('didInsertElement', function() {
    let input = this.$()[0];

    input.onchange = (event) => {
      let file = event.target.files[0];
      let reader = new FileReader();
      let fileName = file.name;

      reader.onload = (event) => {
        this.sendAction('handleFileAsDataURL', fileName, event.target.result);
      };

      reader.readAsDataURL(file);
    };
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.integration.components.x-file-input-test.js

// tests/integration/components/x-file-input-test.js

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import jQuery from 'jquery';

moduleForComponent('x-file-input', 'Integration | Component | x-file-input', {
  integration: true
});

function fillInFileInput(selector, file) {
  // Get the input
  let input = jQuery(selector);

  // Get out file options
  let { name, type, content } = file;

  // Create a custom event for change and inject target
  let event = jQuery.Event('change', {
    target: {
      files: [{
        name: name, type: type
      }]
    }
  });

  // Stub readAsDataURL function
  let stub = sinon.stub(FileReader.prototype, 'readAsDataURL', function() {
    this.onload({ target: { result: content }});
  });

  // Trigger event
  input.trigger(event);

  // We don't want FileReader to be stubbed for all eternity
  stub.restore();
}


test('correcly mocks file input values', function(assert) {
  let handleFile = sinon.spy();

  let fileName = 'surprise.png';
  let content = 'data:image/png;base64,no-surprises-here';

  this.set('handleFile', handleFile);
  this.render(hbs`
   {{x-file-input id="file-input" handleFileAsDataURL=(action handleFile)}}
  `);

  fillInFileInput('#file-input', { name: fileName, content: content });

  assert.ok(handleFile.calledOnce, 'Action `handleFile` should be called once.');
  assert.ok(handleFile.calledWithExactly(fileName, content), 'Action `handleFile` should be called with exact arguments');
});

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1",
    "sinon": "https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"
  }
}