test-user-interactions-in-js-apps-accurately-with-emulated-events-example-4

example4.js

// Ember & QUnit
// file-upload/tests/integration/components/upload-test.js
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click,  find, render, triggerEvent } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Component | mox/upload', function (hooks) {
  setupRenderingTest(hooks);

	test('it allows uploading files', async function (assert) {
    await render(hbs`
      <Upload
        @title="Update Mokedexx"
        @description="Add your new companions here 🇫🇷"
        @label="Télécharger Mokémon français"
      />
    `);

    // the text field is empty initially
    assert
      .dom('#text-field')
      .hasValue('');

    await click('[data-test-mox-upload-file-upload]');

    // emulate file upload
    let fileInput = await find(
      '#file-upload-field'
    );
    let mockFile = { files: [new Blob(['Carapuce'])] };
    await triggerEvent(fileInput, 'change', mockFile);

    assert
      .dom('#text-field')
      .hasValue('Carapuce');
  });
});