Create spec for dropzone_input and refactor for testability

app/assets/javascripts/dropzone_input.js

@@ -55,7 +55,7 @@ export default function dropzoneInput(form) {
   if (!uploadsPath) {
     $formDropzone.addClass('js-invalid-dropzone');
-    return;
+    return null;
   }
   const dropzone = $formDropzone.dropzone({
@@ -285,4 +285,6 @@ export default function dropzoneInput(form) {
     $(this).closest('.gfm-form').find('.div-dropzone').click();
     formTextarea.focus();
   });
+
+  return Dropzone.forElement($formDropzone.get(0));
 }

spec/javascripts/dropzone_input_spec.js

+import $ from 'jquery';
+import dropzoneInput from '~/dropzone_input';
+import { TEST_HOST } from 'spec/test_constants';
+
+const TEST_FILE = {
+  upload: {},
+};
+const TEST_UPLOAD_PATH = `${TEST_HOST}/upload/file`;
+const TEST_ERROR_MESSAGE = 'A big error occurred!';
+const TEMPLATE = (
+`<form class="gfm-form" data-uploads-path="${TEST_UPLOAD_PATH}">
+  <textarea class="js-gfm-input"></textarea>
+  <div class="uploading-error-message"></div>
+</form>`
+);
+
+describe('dropzone_input', () => {
+  let form;
+  let dropzone;
+  let xhr;
+  let oldXMLHttpRequest;
+
+  beforeEach(() => {
+    form = $(TEMPLATE);
+
+    dropzone = dropzoneInput(form);
+
+    xhr = jasmine.createSpyObj(Object.keys(XMLHttpRequest.prototype));
+    oldXMLHttpRequest = window.XMLHttpRequest;
+    window.XMLHttpRequest = () => xhr;
+  });
+
+  afterEach(() => {
+    window.XMLHttpRequest = oldXMLHttpRequest;
+  });
+
+  it('shows error message, when AJAX fails with json', () => {
+    xhr = {
+      ...xhr,
+      statusCode: 400,
+      readyState: 4,
+      responseText: JSON.stringify({ message: TEST_ERROR_MESSAGE }),
+      getResponseHeader: () => 'application/json',
+    };
+
+    dropzone.processFile(TEST_FILE);
+
+    xhr.onload();
+
+    expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+  });
+
+  it('shows error message, when AJAX fails with text', () => {
+    xhr = {
+      ...xhr,
+      statusCode: 400,
+      readyState: 4,
+      responseText: TEST_ERROR_MESSAGE,
+      getResponseHeader: () => 'text/plain',
+    };
+
+    dropzone.processFile(TEST_FILE);
+
+    xhr.onload();
+
+    expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+  });
+});