Create spec for dropzone_input and refactor for testability

2 files changed, 71 insertions, 1 deletions

diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 07a25bc62eb..ff969bb94a4 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/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));
 }
diff --git a/spec/javascripts/dropzone_input_spec.js b/spec/javascripts/dropzone_input_spec.js
new file mode 100644
index 00000000000..0c6b1a8946d
--- /dev/null
+++ b/spec/javascripts/dropzone_input_spec.js
@@ -0,0 +1,68 @@
+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);
+  });
+});