Initial commit

spec/javascript/active_storage_dropzone.spec.js

@@ -0,0 +1,40 @@
+import ActiveStorageDropzone from "active_storage_dropzone";
+const $ = require('jquery');
+
+describe("ActiveStorageDropzone", () => {
+  class FakeDropzone {
+    constructor(element, options) {
+      this.element = element
+      this.options = options
+    }
+    emit() {}
+    createThumbnailFromUrl() {}
+  }
+
+  class FakeUploader {
+    constructor(file, url, delegate) {
+      this.file = file
+      this.url = url
+      this.delegate = delegate
+    }
+  }
+
+  describe("init", () => {
+    it("creates a dropzone with custom settings", () => {
+      const data = [{"name":"filename","size":123,"type":"image/jpg","dataURL":"url-to-asset"}]
+
+      document.body.innerHTML =
+        `<div class="test" data-existing-files='${JSON.stringify(data)}'>` +
+        '</div>';
+
+      const dropzone = new ActiveStorageDropzone(FakeDropzone, FakeUploader)
+      dropzone.init($(".test"))
+
+      expect(dropzone.myDropzone.options.url).toBe("/")
+      expect(dropzone.myDropzone.options.autoQueue).toBe(true)
+      expect(dropzone.myDropzone.options.acceptedFiles).toBe("image/*")
+      expect(dropzone.myDropzone.options.parallelUploads).toBe(30)
+      expect(dropzone.myDropzone.options.dictDefaultMessage).toBe("Drop files here")
+    })
+  })
+})

spec/javascript/file_info_dropzone.spec.js

@@ -0,0 +1,153 @@
+import FileInfoDropzone from "file_info_dropzone";
+
+const $ = require('jquery');
+
+describe("FileInfoDropzone", () => {
+  class FakeXhr {
+    constructor() {
+      this.abort = jest.fn().mockImplementation(() => {})
+    }
+    addEventListener(eventName, callback) {
+      callback()
+    }
+  }
+  class FakeDropzone {
+    constructor(element, options) {
+      this.element = element
+      this.options = options
+      this.emitCallEventNames = []
+      this.eventCallbacks = {}
+
+      options.init.call(this)
+    }
+
+    emit(eventName, file) {
+      this.emitCallEventNames.push(eventName)
+    }
+
+    on(eventName, callback) {
+      this.eventCallbacks[eventName] = callback
+    }
+
+    trigger(eventName, file) {
+      const myFile = file || new File([], "filename")
+      this.xhr = new FakeXhr()
+
+      this.eventCallbacks[eventName](myFile, this.xhr, null)
+    }
+  }
+
+  describe("new", () => {
+    it("creates a dropzone with custom settings", () => {
+      document.body.innerHTML =
+        `<form>` +
+        `<div class="test" data-accepted-files="*">` +
+        '</div>';
+      '</form>';
+
+      const dropzone = new FileInfoDropzone($(".test"), FakeDropzone);
+
+      expect(dropzone.myDropzone.options.url).toBe("/")
+      expect(dropzone.myDropzone.options.autoQueue).toBe(true)
+      expect(dropzone.myDropzone.options.parallelUploads).toBe(30)
+      expect(dropzone.myDropzone.options.dictDefaultMessage).toBe("Drop files here")
+      expect(dropzone.myDropzone.options.acceptedFiles).toBe("*")
+      expect(dropzone.myDropzone.options.maxFilesize).toBe(null)
+    })
+  })
+
+  describe("when sending event triggered", () => {
+    it("generates hidden fields from dropped file", () => {
+      jest.spyOn(Date, 'now').mockImplementationOnce(() => 1562098199162)
+
+      document.body.innerHTML =
+        `<form>` +
+        `<div class="test" data-input-name-prefix="some_model[some_associations_attributes]">` +
+        '</div>';
+      '</form>';
+
+      const file = new File(["123"], "filename", {type: "image/jpg"})
+
+      const dropzone = new FileInfoDropzone($(".test"), FakeDropzone);
+      dropzone.myDropzone.trigger("sending", file)
+
+      const generatedFilenameInput = $("input")[0];
+      expect(generatedFilenameInput.type).toBe("hidden")
+      expect(generatedFilenameInput.name).toBe("some_model[some_associations_attributes][1562098199162][filename]")
+      expect(generatedFilenameInput.value).toBe("filename")
+      const generatedContentTypeInput = $("input")[1];
+      expect(generatedContentTypeInput.type).toBe("hidden")
+      expect(generatedContentTypeInput.name).toBe("some_model[some_associations_attributes][1562098199162][content_type]")
+      expect(generatedContentTypeInput.value).toBe("image/jpg")
+      const generatedByteSizeInput = $("input")[2];
+      expect(generatedByteSizeInput.type).toBe("hidden")
+      expect(generatedByteSizeInput.name).toBe("some_model[some_associations_attributes][1562098199162][byte_size]")
+      expect(generatedByteSizeInput.value).toBe("3")
+    })
+
+    it("generates hidden fields whose name attributes don't collide", () => {
+      jest.spyOn(Date, 'now')
+        .mockImplementationOnce(() => 1562098199162)
+        .mockImplementationOnce(() => 1562098199169)
+
+      document.body.innerHTML =
+        `<form>` +
+        `<div class="test" data-input-name-prefix="some_model[some_associations_attributes]">` +
+        '</div>';
+      '</form>';
+
+      const dropzone1 = new FileInfoDropzone($(".test"), FakeDropzone);
+      const dropzone2 = new FileInfoDropzone($(".test"), FakeDropzone);
+      dropzone1.myDropzone.trigger("sending")
+      dropzone2.myDropzone.trigger("sending")
+
+      const firstGeneratedInput = $("input[name*='filename']")[0];
+      const secondGeneratedInput = $("input[name*='filename']")[1];
+
+      expect(firstGeneratedInput.name).toEqual("some_model[some_associations_attributes][1562098199162][filename]")
+      expect(secondGeneratedInput.name).toEqual("some_model[some_associations_attributes][1562098199169][filename]")
+    })
+
+    it("cancels dropzone remote request", () => {
+      document.body.innerHTML =
+        `<form>` +
+        `<div class="test">` +
+        '</div>';
+      '</form>';
+
+      const dropzone = new FileInfoDropzone($(".test"), FakeDropzone);
+      dropzone.myDropzone.trigger("sending")
+
+      expect(dropzone.myDropzone.xhr.abort).toHaveBeenCalled()
+    })
+
+    it("emits success and complete events to dropzone", () => {
+      document.body.innerHTML =
+        `<form>` +
+        `<div class="test">` +
+        '</div>';
+      '</form>';
+
+      const dropzone = new FileInfoDropzone($(".test"), FakeDropzone);
+      dropzone.myDropzone.trigger("sending")
+
+      expect(dropzone.myDropzone.emitCallEventNames).toEqual(["success", "complete"])
+    })
+  })
+
+  describe("when adding existing files", () => {
+    it("emits addedfile and complete events for each existing file", () => {
+      const data = [{"name":"filename","size":123,"type":"image/jpg"}]
+
+      document.body.innerHTML =
+        `<form>` +
+        `<div class="test" data-existing-files='${JSON.stringify(data)}'>` +
+        '</div>' +
+      '</form>';
+
+      const dropzone = new FileInfoDropzone($(".test"), FakeDropzone);
+
+      expect(dropzone.myDropzone.emitCallEventNames).toEqual(["addedfile", "complete"])
+    })
+  })
+})

spec/javascript/fillable_fields.spec.js

@@ -0,0 +1,27 @@
+import FillableFields from "fillable_fields"
+
+describe("FillableFields", () => {
+  describe("fill", () => {
+    it("fills the fields with data from the associated trigger element", () => {
+      document.body.innerHTML = `
+        <div data-behavior="fillable-fields" data-target="#fields">
+          <span data-fillable-field="field1">Foo</span>
+          <span data-fillable-field="field2">Bar</span>
+        </div>
+        <div id="fields">
+          <input name="field1">
+          <input name="field2">
+        </div>
+      </form>`
+
+      const element = document.querySelector("[data-behavior=fillable-fields]")
+      const field1 = document.querySelector("input[name=field1]")
+      const field2 = document.querySelector("input[name=field2]")
+
+      new FillableFields(element).fill()
+
+      expect(field1.value).toBe("Foo")
+      expect(field2.value).toBe("Bar")
+    })
+  })
+})

spec/javascript/upload_file.spec.js

@@ -0,0 +1,61 @@
+import uploadFile from "upload_file";
+const $ = require('jquery');
+
+describe('uploadFile', () => {
+  class FakeBlobRecord {
+    constructor(file, checksum, url) {
+      this.file = file
+      this.checksum = checksum
+      this.url = url
+
+      this.attributes = {
+        filename: "file_name",
+        content_type: "file_type",
+        byte_size: 123,
+        checksum: checksum
+      }
+    }
+
+    create(callback) {
+      callback(null, "checksum")
+    }
+  }
+
+  class FakeFileChecksum {
+    static create(file, callback) {
+      callback()
+    }
+  }
+
+  class FakeEvaporate {
+    constructor(callback) {
+      this.addCalledCount = 0
+      this.callback = callback
+    }
+
+    add(inputs) {
+      this.addCalledCount += 1
+      this.callback()
+    }
+  }
+
+  it('calls evaporate add after blob created', (done) => {
+    document.body.innerHTML =
+      '<div class="test">' +
+      '<form>' +
+      '<input class="test-input" data-direct-upload-url="http://some-awesome-url.com"/>' +
+      '</form>' +
+      '</div>';
+
+    const file = jest.fn()
+    const input = $(".test-input")
+    const callback = () => {
+      expect(evaporate.addCalledCount).toBe(1)
+      done()
+    }
+    const evaporate = new FakeEvaporate(callback)
+    const uploader = Promise.resolve(evaporate)
+
+    uploadFile(file, uploader, input, callback, FakeBlobRecord, FakeFileChecksum)
+  })
+})