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

example-3.js

// React
// file-upload/common/Upload.js
import React from 'react';

class UploadComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {fileContent: ''};

    this.handleFileInput = this.handleFileInput.bind(this);
    this.startUpload = this.startUpload.bind(this);
  }

  handleFileInput(event) {
    const reader = new FileReader();
    reader.onload = (e) => {
      this.setState({ fileContent: e.target.result });
      document
        .querySelector('#text-field')
        .dispatchEvent(new Event('input'))
    };

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

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

  render() {
    return (
	<section className="my-file-upload-component">
	  <h2>{this.props.title}</h2>
	  <p>{this.props.description}</p>

	  <button type="button" onClick={this.startUpload}>
	    Browse file
	  </button>

	  <label htmlFor="text-field">{this.props.label}</label>
	  <textarea
	    id="text-field"
	    data-testid="text-field"
	    value={this.state.fileContent}
	    placeholder="Paste the content of your file here"
	    readOnly
	   />
	  <input
	    type="file"
	    id="file-upload-field"
	    data-testid="file-upload-field"
	    onChange={this.handleFileInput}
	   />
	</section>
	);
    }
}

export default UploadComponent;