add js tests

Author: JohananOppongAmoateng

src/django_unicorn/static/unicorn/js/messageSender.js

@@ -53,7 +53,7 @@ export function send(component, callback) {
 
       if (value instanceof File) {
         formData.append(key, value);
-      } else if (value instanceof FileList && value.length > 0) {
+      } else if (typeof FileList !== "undefined" && value instanceof FileList && value.length > 0) {
         Array.from(value).forEach((file, index) => {
           formData.append(`${key}[${index}]`, file);
         });
@@ -68,7 +68,7 @@ export function send(component, callback) {
       const value = action.payload.value;
       if (value instanceof File) {
         formData.append(fieldName, value);
-      } else if (value instanceof FileList && value.length > 0) {
+      } else if (typeof FileList !== "undefined" && value instanceof FileList && value.length > 0) {
         Array.from(value).forEach((file, index) => {
           formData.append(`${fieldName}[${index}]`, file);
         });
@@ -362,7 +362,7 @@ function hasFiles(component) {
   for (const key in component.data) {
     const value = component.data[key];
 
-    if (value instanceof File || (value instanceof FileList && value.length > 0)) {
+    if (value instanceof File || (typeof FileList !== "undefined" && value instanceof FileList && value.length > 0)) {
       return true;
     }
 
@@ -380,7 +380,7 @@ function hasFiles(component) {
     if (!action.payload) return false;
 
     return Object.values(action.payload).some(
-      (v) => (v instanceof File) || (v instanceof FileList && v.length > 0)
+      (v) => (v instanceof File) || (typeof FileList !== "undefined" && v instanceof FileList && v.length > 0)
     );
   });
 }

src/django_unicorn/static/unicorn/js/unicorn.min.js

@@ -0,0 +1,205 @@
+import test from "ava";
+import { getComponent } from "../utils.js";
+import { send } from "../../../src/django_unicorn/static/unicorn/js/messageSender.js";
+
+function makeResponse() {
+  return {
+    ok: true,
+    json: async () => ({
+      id: "",
+      dom: "",
+      data: {},
+      errors: {},
+      redirect: {},
+      return: {},
+    }),
+  };
+}
+
+test("send uses JSON body when no files are present", async (t) => {
+  const component = getComponent();
+  component.actionQueue.push({
+    type: "callMethod",
+    payload: { name: "save" },
+  });
+
+  let capturedOptions = null;
+  global.fetch = async (_url, options) => {
+    capturedOptions = options;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  t.false(capturedOptions.body instanceof FormData);
+  t.is(capturedOptions.headers["Content-Type"], "application/json");
+});
+
+test("send uses FormData when component.data contains a File", async (t) => {
+  const file = new File(["content"], "photo.jpg", { type: "image/jpeg" });
+  const component = getComponent(undefined, undefined, undefined, {
+    photo: file,
+  });
+  component.actionQueue.push({
+    type: "callMethod",
+    payload: { name: "save" },
+  });
+
+  let capturedOptions = null;
+  global.fetch = async (_url, options) => {
+    capturedOptions = options;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  t.true(capturedOptions.body instanceof FormData);
+});
+
+test("send omits Content-Type header when using FormData", async (t) => {
+  const file = new File(["content"], "photo.jpg", { type: "image/jpeg" });
+  const component = getComponent(undefined, undefined, undefined, {
+    photo: file,
+  });
+  component.actionQueue.push({
+    type: "callMethod",
+    payload: { name: "save" },
+  });
+
+  let capturedOptions = null;
+  global.fetch = async (_url, options) => {
+    capturedOptions = options;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  t.false("Content-Type" in capturedOptions.headers);
+});
+
+test("send uses FormData when a syncInput action payload contains a File", async (t) => {
+  const file = new File(["content"], "photo.jpg", { type: "image/jpeg" });
+  const component = getComponent();
+  component.actionQueue.push({
+    type: "syncInput",
+    payload: { name: "photo", value: file },
+  });
+
+  let capturedOptions = null;
+  global.fetch = async (_url, options) => {
+    capturedOptions = options;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  t.true(capturedOptions.body instanceof FormData);
+  t.false("Content-Type" in capturedOptions.headers);
+});
+
+test("send FormData includes body field as JSON-stringified payload", async (t) => {
+  const file = new File(["content"], "photo.jpg", { type: "image/jpeg" });
+  const component = getComponent(undefined, undefined, undefined, {
+    photo: file,
+  });
+  component.actionQueue.push({
+    type: "callMethod",
+    payload: { name: "save" },
+  });
+
+  let capturedBody = null;
+  global.fetch = async (_url, options) => {
+    capturedBody = options.body;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  const bodyJson = capturedBody.get("body");
+  t.is(typeof bodyJson, "string");
+
+  const parsed = JSON.parse(bodyJson);
+  t.is(parsed.id, component.id);
+  t.truthy(parsed.actionQueue);
+});
+
+test("send FormData appends File from component.data", async (t) => {
+  const file = new File(["hello"], "photo.jpg", { type: "image/jpeg" });
+  const component = getComponent(undefined, undefined, undefined, {
+    photo: file,
+  });
+  component.actionQueue.push({
+    type: "callMethod",
+    payload: { name: "save" },
+  });
+
+  let capturedBody = null;
+  global.fetch = async (_url, options) => {
+    capturedBody = options.body;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  const uploadedFile = capturedBody.get("photo");
+  t.true(uploadedFile instanceof File);
+  t.is(uploadedFile.name, "photo.jpg");
+});
+
+test("send FormData appends File from syncInput action payload", async (t) => {
+  const file = new File(["content"], "upload.pdf", { type: "application/pdf" });
+  const component = getComponent();
+  component.actionQueue.push({
+    type: "syncInput",
+    payload: { name: "document", value: file },
+  });
+
+  let capturedBody = null;
+  global.fetch = async (_url, options) => {
+    capturedBody = options.body;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  const uploadedFile = capturedBody.get("document");
+  t.true(uploadedFile instanceof File);
+  t.is(uploadedFile.name, "upload.pdf");
+});
+
+test("send does not call fetch when action queue is empty", async (t) => {
+  const component = getComponent();
+
+  let fetchCalled = false;
+  global.fetch = async () => {
+    fetchCalled = true;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  t.false(fetchCalled);
+});
+
+test("send uses JSON body when only callMethod actions with no files", async (t) => {
+  const component = getComponent();
+  component.actionQueue.push({
+    type: "callMethod",
+    payload: { name: "processData" },
+  });
+  component.actionQueue.push({
+    type: "syncInput",
+    payload: { name: "name", value: "hello" },
+  });
+
+  let capturedOptions = null;
+  global.fetch = async (_url, options) => {
+    capturedOptions = options;
+    return makeResponse();
+  };
+
+  await send(component);
+
+  t.false(capturedOptions.body instanceof FormData);
+  t.is(capturedOptions.headers["Content-Type"], "application/json");
+});

tests/js/component/messageSender.file.test.js

@@ -0,0 +1,61 @@
+import test from "ava";
+import { getElement } from "../utils.js";
+
+test("file input captures accept attribute in file property", (t) => {
+  const html = "<input unicorn:model='photo' type='file' accept='image/*'></input>";
+  const element = getElement(html);
+
+  t.is(element.file.accept, "image/*");
+});
+
+test("file input captures multiple=true when multiple attribute is present", (t) => {
+  const html = "<input unicorn:model='photo' type='file' multiple></input>";
+  const element = getElement(html);
+
+  t.true(element.file.multiple);
+});
+
+test("file input captures multiple=false when multiple attribute is absent", (t) => {
+  const html = "<input unicorn:model='photo' type='file'></input>";
+  const element = getElement(html);
+
+  t.false(element.file.multiple);
+});
+
+test("file input accept defaults to empty string when accept attribute is absent", (t) => {
+  const html = "<input unicorn:model='photo' type='file'></input>";
+  const element = getElement(html);
+
+  t.is(element.file.accept, "");
+});
+
+test("file input sets both accept and multiple from attributes", (t) => {
+  const html =
+    "<input unicorn:model='docs' type='file' accept='.pdf,.doc' multiple></input>";
+  const element = getElement(html);
+
+  t.is(element.file.accept, ".pdf,.doc");
+  t.true(element.file.multiple);
+});
+
+test("text input has empty file property", (t) => {
+  const html = "<input unicorn:model='name' type='text'></input>";
+  const element = getElement(html);
+
+  t.deepEqual(element.file, {});
+});
+
+test("file input without unicorn model has empty file property", (t) => {
+  const html = "<input type='file' accept='image/*'></input>";
+  const element = getElement(html);
+
+  t.deepEqual(element.file, {});
+});
+
+test("file input getValue() returns the el.files property", (t) => {
+  const html = "<input unicorn:model='photo' type='file'></input>";
+  const element = getElement(html);
+
+  // In JSDOM, el.files is an empty FileList (not null)
+  t.is(element.getValue(), element.el.files);
+});