Add testing support to file-upload onchange action

[john-griffin]

Sending through the entire event to the action allows for fake files to
be injected when testing. See these links for more info:

emberjs/ember.js#13540 (comment)
https://medium.com/@chrisdmasters/acceptance-testing-file-uploads-in-ember-2-5-1c9c8dbe5368

[tim-evans]

There's an upload helper I made for this:

https://github.com/tim-evans/ember-file-upload/blob/master/test-support/helpers/upload.js

[tim-evans]

Which I need to document, come to think of it. There's a mirage helper that works in conjunction with this as well:

https://github.com/tim-evans/ember-file-upload/tree/master/addon/mirage

In mirage/config.js

import { upload } from 'ember-file-upload/mirage';

export default function () {
  this.post('/photos', upload(function (db, response) {
    return {
      filename: response.name,
      filesize: response.size,
      type: response.type,
      width: response.width,
      height: response.height
    };
  });
};

[john-griffin]

Thanks for the response. I was already using mirage helper to mock out the actual upload and that was working great. But there was no clear way to test adding a file to the form. How can I import that helper and how do I provide it a file in the correct format? I'm assuming it should be addon/file.js object but that doesn't seem to be importable right now.

[tim-evans]

Ahh, ok, you can import by:

import File from 'ember-file-upload/file';

[john-griffin]

Thanks I was able to get this working by importing:

import File from 'ember-file-upload/file';
import upload from 'app-name/tests/helpers/upload';

And then passing a blob rather than a file to the uploader, e.g.:

let file = File.fromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=');
upload('input[type=file]', file.blob, 'foo.png');

Just passing a file meant that the onfileadd action was not fired. I believe it's something to do with this line https://github.com/tim-evans/ember-file-upload/blob/727f1ed23ccf1d028971809b44f1cd871310d136/addon/queue.js#L63.

[tim-evans]

I'll try to unwrap a file in the test helper so you can pass a file or a blob.

[lifeinafolder]

When I do as @john-griffin mentioned in his comment, I get

findWithAssert is not defined

Is there a full working example somewhere? It would be really helpful.

This is my test code at the moment.

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import wait from 'ember-test-helpers/wait';
import File from 'ember-file-upload/file';
import upload from 'onboard-frontend/tests/helpers/upload';

moduleForComponent(image-uploader', 'Integration | Component | image uploader', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{image-uploader}}`);

  assert.exists(this.$('INPUT[type="file"]'));
});


test('it fires actions properly', function(assert) {
  assert.expect(2);

  this.set('onImageUpload', function() {
    assert.ok(true, 'onImageUpload invoked');
  });

  this.render(hbs`{{image-uploader onImageUpload=onImageUpload}}`);

  assert.exists(this.$('INPUT[type="file"]'));

  const file = File.fromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=');

  upload('input[type=file]', file.blob, 'foo.png');

  return wait();
});