Create spec for dropzone_input and refactor for testability

1 files changed, 68 insertions, 0 deletions

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);
+  });
+});