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

example2.js

// file-upload/app/components/upload.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { next } from '@ember/runloop';

export default class UploadComponent extends Component {
  @tracked
  fileContent = '';

  @action
  handleFileInput(event) {
    const reader = new FileReader();
    reader.onload = (e) => {
      this.fileContent = e.target.result;

      next(() =>
        document
          .querySelector('#text-field')
          .dispatchEvent(new Event('input'))
      );
    };

    reader.readAsText(event.target.files[0]);
  }

  @action
  startUpload() {
    document.querySelector(`#file-upload-field`).click();
  }
}