Files
ihasmail-inbuxa/web/src/lib/__tests__/dropUpload.test.ts
T
jcoffey-dev f70eb184c2 A folder tree, and dragging things into it
Files had a breadcrumb and a Move to… dialog. Moving anything meant
opening a dialog and walking down the folder you wanted, which is a lot
of ceremony for something every file manager does by dragging, and there
was nowhere to see the shape of the account at all.

There is now a folder tree in the sidebar, beside the mailbox tree it
borrows its look from. Rows in the list and folders in the tree can be
dragged onto any folder in either, and folders dropped from outside are
uploaded with their structure intact.

The tree arrives in a single query. `filter: { nodeType: "directory" }`
returns every folder in the account -- checked against 0.16.19 on
2026-08-27 -- so nothing waits on an expand, and a drag knows every
folder it could land on including ones nobody has opened. It is
deliberately its own request: a filter Stalwart refuses fails with a
request-level 400 that takes every method call in the request with it,
which `{ parentId: null }` does, so a per-level query batched alongside
the listing would blank the whole view rather than just the sidebar.

Two things the writing of this turned up.

The mock ignored the `nodeType` filter the live server applies, so the
tree asked for directories, was handed files as well, and drew them as
folders you could open into nothing. The mock now filters the way 0.16.19
does. The store also filters again on the way in, because a tree that
believes whatever a server sends is a tree that draws files as folders on
the next server that gets this wrong.

And the drag state was per-pane, which cannot work: a drag that starts in
the list has to be recognised by the tree, and the pane that did not
start it never lit up or accepted the drop. Dropping still worked, since
the drop handler re-checks from the drag itself -- which is why this
would have shipped looking fine and been unusable. It lives in the store
now, with the reason written down.

Dropping a folder in goes through `webkitGetAsEntry`, which is
non-standard in name and universal in practice. Its `readEntries` returns
*up to* some entries per call and signals the end with an empty array, so
a single read loses everything past the first batch. Both bounds in there
-- depth, and entries per directory -- exist because a directory tree
from outside the app is not something to take on trust; the test that
covers the second one found the version without it looping for ever.

Verified against the mock: a row dragged onto a folder in the tree lights
the target, is accepted, and moves it on the server; a top-level folder
dragged to All files is refused as the no-op it is; the tree's own menu
creates, renames, shares and deletes; and the tree lists folders only.
2026-08-27 09:19:54 -07:00

103 lines
3.6 KiB
TypeScript

import { describe, expect, it } from "vitest";
import { foldersNeeded, hasDirectory, planUpload } from "@/lib/dropUpload";
/**
* Dropping a folder in, reduced to the two things the DataTransfer entry API
* gets wrong if you take it at face value.
*
* `readEntries` answers with *up to* some number of entries and signals the end
* of a directory with an empty array, so a single call quietly loses everything
* past the first batch — a real folder of a few hundred files would upload the
* first hundred and look like it had finished. And a directory tree that cycles
* has to stop somewhere the tab is still alive.
*/
const file = (name: string) => new File([name], name);
/** A directory whose contents arrive a batch at a time, as a real one does. */
const dir = (name: string, children: unknown[], batch = 2) => {
let at = 0;
return {
isFile: false,
isDirectory: true,
name,
createReader: () => ({
readEntries: (cb: (e: never[]) => void) => {
const slice = children.slice(at, at + batch);
at += slice.length;
cb(slice as never[]);
},
}),
};
};
const leaf = (name: string) => ({
isFile: true,
isDirectory: false,
name,
file: (cb: (f: File) => void) => cb(file(name)),
});
describe("walking a dropped folder", () => {
it("reads a directory across as many batches as it takes", async () => {
// Five children, two per readEntries call: a single read would find two.
const plan = await planUpload([dir("docs", ["a", "b", "c", "d", "e"].map(leaf))] as never[]);
expect(plan.map((p) => p.file.name)).toEqual(["a", "b", "c", "d", "e"]);
expect(plan.every((p) => p.path.join("/") === "docs")).toBe(true);
});
it("keeps the folder each file came from", async () => {
const plan = await planUpload([dir("outer", [leaf("top"), dir("inner", [leaf("deep")])])] as never[]);
expect(plan.map((p) => [p.path.join("/"), p.file.name])).toEqual([
["outer", "top"],
["outer/inner", "deep"],
]);
});
it("puts a loose file at the drop itself", async () => {
const plan = await planUpload([leaf("loose")] as never[]);
expect(plan).toEqual([expect.objectContaining({ path: [] })]);
});
it("stops rather than following a cycle for ever", async () => {
const loop: Record<string, unknown> = {};
Object.assign(loop, dir("loop", []));
(loop as { createReader: () => unknown }).createReader = () => ({
readEntries: (cb: (e: unknown[]) => void) => cb([loop]),
});
// Terminating at all is the assertion; the caps decide where. Both are set
// low so the test does not have to read twenty thousand phantom entries.
const plan = await planUpload([loop] as never[], { maxDepth: 4, maxEntries: 50 });
expect(plan).toEqual([]);
});
});
describe("the folders a plan needs", () => {
it("lists parents before their children", () => {
const needed = foldersNeeded([
{ file: file("x"), path: ["a", "b", "c"] },
{ file: file("y"), path: ["a"] },
]);
expect(needed).toEqual([["a"], ["a", "b"], ["a", "b", "c"]]);
});
it("names each folder once, however many files are in it", () => {
const needed = foldersNeeded([
{ file: file("x"), path: ["a"] },
{ file: file("y"), path: ["a"] },
]);
expect(needed).toEqual([["a"]]);
});
it("asks for nothing when everything lands at the drop", () => {
expect(foldersNeeded([{ file: file("x"), path: [] }])).toEqual([]);
});
});
describe("spotting a folder in the drop", () => {
it("is true when any entry is a directory", () => {
expect(hasDirectory([leaf("a"), dir("d", [])] as never[])).toBe(true);
expect(hasDirectory([leaf("a")] as never[])).toBe(false);
});
});