Initial tests for the DocumentUpload component

Refactors `$page.data` state into props passed from `+page.svelte` for greater isolation and data decoupling.

src/lib/components/common/Flex.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { AriaRole } from "svelte/elements";
+
   /* Based on https://github.com/himynameisdave/svelte-flex */
 
   type Align = "center" | "end" | "start" | "stretch" | "baseline";
@@ -11,6 +13,7 @@
   export let reverse = false;
   export let gap: number = 0.5;
   export let wrap: boolean = false;
+  export let role: AriaRole = null;
 
   const alignMap: Record<Align, string> = {
     start: "flex-start",
@@ -41,6 +44,7 @@
   style:justify-content={justifyMap[justify]}
   style:gap={`${gap}rem`}
   class={$$restProps.class}
+  {role}
 >
   <slot />
 </div>

src/lib/components/forms/DocumentUpload.svelte

@@ -130,11 +130,7 @@
   import Text from "../inputs/Text.svelte";
 
   import * as documents from "$lib/api/documents";
-  import {
-    DOCUMENT_SIZE_LIMIT,
-    DOCUMENT_TYPES,
-    PDF_SIZE_LIMIT,
-  } from "@/config/config.js";
+  import { DOCUMENT_TYPES } from "@/config/config.js";
   import {
     filenameToTitle,
     getFileExtension,
@@ -143,8 +139,9 @@
   } from "@/lib/utils/files";
   import Tooltip from "@/common/Tooltip.svelte";
 
+  export let csrf_token = "";
   export let files: File[] = [];
-  let projects: Project[] = [];
+  export let projects: Project[] = [];
 
   let loading = false;
   let uploader: HTMLInputElement;
@@ -166,9 +163,6 @@
 
   let ocrEngine = ocrEngineOptions[0];
 
-  $: csrf_token = $page.data.csrf_token;
-  $: projects = $page.data.projects?.results;
-
   $: total = files.reduce((t, file) => {
     return t + file.size;
   }, 0);
@@ -226,7 +220,7 @@
 
       <div class="fileList" class:empty={files.length === 0}>
         {#each files as file, index}
-          <Flex align="center" gap={1}>
+          <Flex align="center" gap={1} role="listitem">
             <p class="fileInfo" class:error={!isWithinSizeLimit(file)}>
               <span class="uppercase"
                 >{getFileExtension(file)} / {filesize(file.size)}</span

src/lib/components/forms/tests/DocumentUpload.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  createEvent,
+} from "@testing-library/svelte";
+
+import DocumentUploadForm from "../DocumentUpload.svelte";
+import { PDF_SIZE_LIMIT } from "@/config/config";
+
+describe("DocumentUpload form", () => {
+  it("lists files selected for upload", async () => {
+    render(DocumentUploadForm);
+    const dropElement = screen.getByText("Drag and drop files here");
+    const dropEvent = createEvent.drop(dropElement);
+    const fileList = [new File([new ArrayBuffer(128000)], "file.pdf")];
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: fileList,
+      },
+    });
+    await act(() => fireEvent(dropElement, dropEvent));
+    const fileListItem = screen.getByRole("listitem");
+    expect(fileListItem).toContainHTML("128 kB");
+  });
+  it("provides feedback when a file is too large", async () => {
+    render(DocumentUploadForm);
+    const dropElement = screen.getByText("Drag and drop files here");
+    const dropEvent = createEvent.drop(dropElement);
+    const fileList = [
+      new File([new ArrayBuffer(PDF_SIZE_LIMIT + 1)], "file.pdf"),
+    ];
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: fileList,
+      },
+    });
+    await act(() => fireEvent(dropElement, dropEvent));
+    const fileListItem = screen.getByRole("listitem");
+    expect(fileListItem).toContainHTML("The maximum size for a PDF is 500MB");
+  });
+});

src/routes/app/upload/+page.svelte

@@ -6,13 +6,15 @@
 
   // using $page.form captures the correct type from applyAction
   $: form = $page.form;
+  $: csrf_token = $page.data.csrf_token;
+  $: projects = $page.data.projects.result;
 </script>
 
 <svelte:head>
   <title>Upload | DocumentCloud</title>
 </svelte:head>
 
-<DocumentUpload>
+<DocumentUpload {csrf_token} {projects}>
   <Flex direction="column">
     <h1>Upload documents</h1>