v3: the frontend gets a test suite, and the bugs it turned up are fixed — deno task test:web runs 612 tests over src/ in about 11s: Vitest on jsdom with Testing Library, built on the app's own Vite config so the SWC/Lingui transform and the .po loader are what ship. src/test/ holds the harness: a routing fetch stub (queued once-responses, fallback defaults), a FakeWebSocket the tests open, feed and drop, jsdom polyfills, fixtures, and two render helpers — one over hand-set context values, one over the real provider tree (auth, socket, player, follows, categories, chat). It covers every util and hook, every provider (the socket protocol end to end: votes and likes with ack/timeout/error rollback, chat sends/echoes/retries/read markers/reconcile, reconnect backfill), the components (header and search history, cards, Markdown, thumbnails, media and global player, the text editor's mentions/emoji/uploads, comments, the new-dump modal, the chat), and every page.

Fixed along the way. Dumps: clearing a dump's note sent `comment: undefined`, which JSON drops, so the server kept the old one; it's sent as null now. Replacing a file dropped a visibility change made in the same save (the file endpoint doesn't read it); it follows as a separate update. Renaming a dump onto a new slug kept showing the old title until reload. The thumbnail picker and delete on the edit page failed without a word, the latter as an unhandled rejection. Playlists: an edit that kept the slug waited on the socket's echo to show, and a new cover never appeared (the upload's answer was ignored, a refused one said nothing); covers were also served stale for an hour, since `max-age=3600` met an unversioned URL — setPlaylistImage now bumps updated_at and every cover URL carries `?v=` (playlistImageUrl). Removing a dump, reordering, and deleting a playlist ignored non-OK answers, leaving page and server apart; they restore, reload or report. Profile: clearing "Who am I?" sent undefined and came back on reload; your own upvoted list (and the upvoted page) was empty until the socket's welcome, and forever without one; "View all" under Following linked to a route that doesn't exist and is a Load more now. Chat: Escape on "Delete this message?" closed the whole chat — ConfirmModal takes Escape first, in the capture phase. Player: a pause or play from a media key, headset or the OS wasn't reflected (MediaPlayer follows the element's own play/pause events), and the seek bar tracked dragging with mouse events only, so on touch the thumb fought timeupdate. Feeds: a guest on /~/followed got a blank page; a server error in the followed feed read as "Could not connect". Search: a failed later page threw away the results shown. Notifications: a failed mark-read replaced a loaded list with an error. Silent failures now say so: deleting a comment, the voters/likers "Load more" (stuck on "Loading…"), and the password-reset request, which said "sent" whatever happened.

Notifications also stop hiding what was new: the bell still clears on opening the page, but the dots and the "N new" count stay for the visit instead of vanishing the moment the mark-read lands, and one arriving while the page is open is marked read too, so the bell doesn't count it.

Accessibility: Modal and ConfirmModal are dialogs (role, aria-modal, labelled/described); playlist membership rows are checkboxes that work from the keyboard; a dump's title, and the profile's email and description, can be opened for editing from the keyboard (the pencil shows on focus); the category editor's ✓ and the global player's video button have names. Player, rich-content and download labels were hard-coded English and are translated, with the new French strings. Lint: fast-refresh and render-purity rules are off for src/test/ only, where probes hand their context out on purpose.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/test/pages/UserSubpages.test.tsx

@@ -0,0 +1,117 @@
+import { describe, expect, test, vi } from "vitest";
+import { act, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UserDumps } from "../../pages/UserDumps.tsx";
+import { UserUpvoted } from "../../pages/UserUpvoted.tsx";
+import { fail, route } from "../fetch.ts";
+import { makeDump, makeSession, makeUser, page, wire } from "../fixtures.ts";
+import { renderApp } from "../render.tsx";
+import { FakeWebSocket } from "../ws.ts";
+
+const ann = makeUser({ id: "ann", username: "ann" });
+const annSession = makeSession({ id: "ann", username: "ann" });
+
+function openDumps(session: ReturnType<typeof makeSession> | null = null) {
+  const user = userEvent.setup();
+  renderApp(<UserDumps />, { route: "/users/ann/dumps", path: "/users/:username/dumps", session });
+  return { user, socket: FakeWebSocket.last };
+}
+
+describe("UserDumps", () => {
+  test("lists a user's dumps under a header back to the profile", async () => {
+    route("GET /api/users/:u", () => wire(ann));
+    route("GET /api/users/:u/dumps", () => page([makeDump({ title: "Hers", userId: "ann" })]));
+    openDumps();
+    expect(await screen.findByText("Hers")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Dumps" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "← ann" })).toHaveAttribute("href", "/users/ann");
+    expect(screen.queryByRole("button", { name: /New dump/ })).not.toBeInTheDocument();
+  });
+
+  test("an unknown user", async () => {
+    route("GET /api/users/:u", () => fail("User not found", 404));
+    route("GET /api/users/:u/dumps", () => page([]));
+    openDumps();
+    expect(await screen.findByRole("alert")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "← Back to profile" })).toBeInTheDocument();
+  });
+
+  test("on your own page: a new-dump button, and your dumps going private stay", async () => {
+    route("GET /api/users/:u", () => wire(ann));
+    const mine = makeDump({ id: "m", title: "Mine", userId: "ann" });
+    route("GET /api/users/:u/dumps", () => page([mine]));
+    const { user, socket } = openDumps(annSession);
+    await screen.findByText("Mine");
+    socket.welcome();
+    socket.receive({ type: "dump_updated", dump: wire({ ...mine, isPrivate: true }) });
+    expect(screen.getByText("Mine")).toBeInTheDocument();
+    route("GET /api/preview", () => ({ reached: false, richContent: null }));
+    await user.click(screen.getByRole("button", { name: /New dump/ }));
+    expect(screen.getByRole("dialog", { name: "New dump" })).toBeInTheDocument();
+  });
+
+  test("a visitor loses a dump that goes private, and gets it back where it was", async () => {
+    route("GET /api/users/:u", () => wire(ann));
+    const list = ["x", "y", "z"].map((id) => makeDump({ id, title: `T-${id}`, userId: "ann" }));
+    route("GET /api/users/:u/dumps", () => page(list));
+    const { socket } = openDumps();
+    await screen.findByText("T-z");
+    socket.welcome();
+    socket.receive({ type: "dump_updated", dump: wire({ ...list[1], isPrivate: true }) });
+    expect(screen.queryByText("T-y")).not.toBeInTheDocument();
+    socket.receive({ type: "dump_updated", dump: wire({ ...list[1], isPrivate: false }) });
+    const titles = Array.from(document.querySelectorAll(".dump-card-title")).map((a) => a.textContent);
+    expect(titles).toEqual(["T-x", "T-y", "T-z"]);
+  });
+});
+
+describe("UserUpvoted", () => {
+  const voted = () => [makeDump({ id: "v1", title: "Liked one" }), makeDump({ id: "v2", title: "Liked two" })];
+
+  function openVotes(session: ReturnType<typeof makeSession> | null = null) {
+    route("GET /api/users/:u", () => wire(ann));
+    route("GET /api/users/:u/votes", () => page(voted()));
+    const user = userEvent.setup();
+    renderApp(<UserUpvoted />, { route: "/users/ann/upvoted", path: "/users/:username/upvoted", session });
+    return { user, socket: FakeWebSocket.last };
+  }
+
+  test("lists what they upvoted", async () => {
+    openVotes();
+    expect(await screen.findByText("Liked one")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Upvoted" })).toBeInTheDocument();
+  });
+
+  test("your own list shows even before the live connection says what you voted", async () => {
+    openVotes(annSession);
+    // The socket is never opened: no welcome, no myVotes.
+    expect(await screen.findByText("Liked one")).toBeInTheDocument();
+    expect(screen.getByText("Liked two")).toBeInTheDocument();
+  });
+
+  test("unvoting on your own list fades the dump out", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      const { socket } = openVotes(annSession);
+      await screen.findByText("Liked one");
+      socket.welcome({ myVotes: ["v1", "v2"] });
+      socket.receive({ type: "votes_update", dumpId: "v1", voteCount: 0, voterId: "ann", action: "remove" });
+      expect(screen.getByText("Liked one").closest(".dump-card")).toHaveClass("dump-card--fading");
+      act(() => vi.advanceTimersByTime(2_400));
+      expect(screen.queryByText("Liked one")).not.toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  test("their new upvote appears at the top", async () => {
+    route("GET /api/dumps/:id", () => wire(makeDump({ id: "v3", title: "Fresh like" })));
+    const { socket } = openVotes();
+    await screen.findByText("Liked one");
+    socket.welcome();
+    socket.receive({ type: "votes_update", dumpId: "v3", voteCount: 1, voterId: "ann", action: "cast" });
+    await waitFor(() =>
+      expect(document.querySelector(".dump-card-title")).toHaveTextContent("Fresh like")
+    );
+  });
+});