Split browser workflows from presentation

web/test/components.test.mjs

@@ -0,0 +1,90 @@
+import assert from 'node:assert/strict';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import test from 'node:test';
+import { createServer } from 'vite';
+
+test('components render root, browse, upload, delete, resume, notice, and error states', async () => {
+  const server = await createServer({
+    appType: 'custom',
+    configFile: false,
+    plugins: [svelte()],
+    server: { hmr: false, middlewareMode: true }
+  });
+  try {
+    const { render } = await server.ssrLoadModule('svelte/server');
+    const WorkspaceHeader = await component(server, 'WorkspaceHeader');
+    const workspace = render(WorkspaceHeader, {
+      props: { root: 'shared', busy: false, onselect: async () => {} }
+    }).body;
+    assert.match(workspace, /Shared files/);
+    assert.match(workspace, /Shared root/);
+    assert.match(workspace, /Personal/);
+
+    const UploadPanel = await component(server, 'UploadPanel');
+    assert.match(
+      render(UploadPanel, {
+        props: { busy: false, onfile: async () => {} }
+      }).body,
+      /Drop a file here/
+    );
+
+    const ObjectBrowser = await component(server, 'ObjectBrowser');
+    const browser = render(ObjectBrowser, {
+      props: {
+        root: 'shared',
+        entries: [
+          { name: 'folder', is_prefix: true, size: null, path: 'folder' }
+        ],
+        continuation: 'next',
+        partial: true,
+        busy: false,
+        query: 'fold',
+        onquery: () => {},
+        onbrowse: async () => {},
+        onopen: async () => {},
+        ondelete: async () => {}
+      }
+    }).body;
+    assert.match(browser, /Search this root/);
+    assert.match(browser, /Partial search results/);
+    assert.match(browser, /folder\//);
+    assert.match(browser, /Delete/);
+    assert.match(browser, /Clear/);
+
+    const ResumeDelete = await component(server, 'ResumeDelete');
+    assert.match(
+      render(ResumeDelete, {
+        props: {
+          pending: { root: 'personal', prefix: 'tree', items: [] },
+          busy: false,
+          onresume: async () => {}
+        }
+      }).body,
+      /Resume deletion/
+    );
+
+    const Feedback = await component(server, 'Feedback');
+    const feedback = render(Feedback, {
+      props: {
+        notice: 'Uploaded file.txt',
+        error: 'Delete is pending',
+        uploadPending: true,
+        uploadFollowup: 'replay',
+        deletePending: true,
+        deleteFollowup: 'restart',
+        onuploadretry: async () => {},
+        ondeleteretry: async () => {}
+      }
+    }).body;
+    assert.match(feedback, /Uploaded file\.txt/);
+    assert.match(feedback, /Retry same upload/);
+    assert.match(feedback, /Start new delete operation/);
+  } finally {
+    await server.close();
+  }
+});
+
+async function component(server, name) {
+  const loaded = await server.ssrLoadModule(`/src/components/${name}.svelte`);
+  return loaded.default;
+}