v3: src/ gets one layout rule and keeps to it — each layer holds one kind of module, and every layer is split into the same domains — the previous pass sorted components into folders but left hooks, helpers and a barrel inside them, kept hooks/, utils/ and contexts/ flat, and still grouped most tests by theme. The rule: components/ holds only components (.tsx), contexts/ holds FooContext.ts + FooProvider.tsx pairs, hooks/ every hook, utils/ every non-React module, pages/ one component per route and nothing else. Each of components/, contexts/, hooks/ and utils/ is split into the same domains — auth, category, chat, comment, dump, editor, feed, form, layout, player, playlist, profile, social, theme, ws — plus shared/ for what belongs to no one domain, so the chat is components/chat, contexts/chat, hooks/chat and utils/chat. components/ui becomes components/shared to match. Out of components/: useApiForm goes to hooks/form, chat's message.ts and time.ts to utils/chat (with chatDraft and chatText, now draft.ts and text.ts), the emoji skin tone to utils/editor, the remembered volume to utils/player; player/icons.tsx is PlayerIcons.tsx. components/form/index.ts is gone: everything is imported from its own file, FormProvider straight from react-hook-form, and expectOk sits beside friendlyFetchError in utils/shared/api.ts (apiError.ts), since pages that have no form used it too. Out of pages/: the index's feed views, tab bar and presence row move to components/feed; HotFeed and NewFeed, identical but for the sort, are one DumpFeed with an order prop, which also takes over MainFeedProps from pages/index/types.ts. App is a named export like everything else. Tests mirror the tree one file per module — test/<layer>/<domain>/<Module>.test.tsx — so the themed files (hooks/misc, data, editor, sync; utils/misc, text, storage, remote, journal; contexts/providers; pages/auth and UserSubpages; layout/Fabs) are split by subject, the setup each piece needs kept and the rest dropped; the floating-button test becomes one test per button, 627 tests now. The README states the rule. No behaviour changes; the catalogues only move their source references.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
16
src/test/pages/NotFound.test.tsx
Normal file
16
src/test/pages/NotFound.test.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen, waitFor } from "@testing-library/react";
|
||||
import { NotFound } from "../../pages/NotFound.tsx";
|
||||
import { renderWithContexts } from "../render.tsx";
|
||||
|
||||
describe("NotFound", () => {
|
||||
test("NotFound", async () => {
|
||||
renderWithContexts(<NotFound />, { route: "/nope" });
|
||||
expect(screen.getByRole("heading", { name: "404" })).toBeInTheDocument();
|
||||
await waitFor(() => expect(document.title).toMatch(/^Page not found/));
|
||||
expect(screen.getByRole("link", { name: "Go home" })).toHaveAttribute(
|
||||
"href",
|
||||
"/",
|
||||
);
|
||||
});
|
||||
});
|
||||
75
src/test/pages/ResetPassword.test.tsx
Normal file
75
src/test/pages/ResetPassword.test.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { Route } from "react-router";
|
||||
import { ResetPassword } from "../../pages/ResetPassword.tsx";
|
||||
import { calls, fail, route } from "../fetch.ts";
|
||||
import { renderWithContexts } from "../render.tsx";
|
||||
|
||||
describe("ResetPassword", () => {
|
||||
function setup(search = "?token=rst") {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<ResetPassword />, {
|
||||
route: `/reset-password${search}`,
|
||||
path: "/reset-password",
|
||||
extraRoutes: <Route path="/login" element={<p>login page</p>} />,
|
||||
});
|
||||
return user;
|
||||
}
|
||||
|
||||
test("no token: an invalid link", () => {
|
||||
setup("");
|
||||
expect(screen.getByRole("heading", { name: "Invalid link" }))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.getByRole("link", { name: "Back to login" })).toHaveAttribute(
|
||||
"href",
|
||||
"/login",
|
||||
);
|
||||
});
|
||||
|
||||
test("the two passwords must match", async () => {
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("New password"), "longenough");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Confirm new password"),
|
||||
"different",
|
||||
);
|
||||
expect(await screen.findByText("Passwords do not match"))
|
||||
.toBeInTheDocument();
|
||||
await user.click(screen.getByRole("button", { name: "Set new password" }));
|
||||
expect(calls("POST /api/users/reset-password")).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("sets the password, then offers login", async () => {
|
||||
route("POST /api/users/reset-password", () => ({}));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("New password"), "longenough");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Confirm new password"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
await screen.findByRole("heading", { name: "Password updated" });
|
||||
expect(calls("POST /api/users/reset-password")[0].body).toEqual({
|
||||
token: "rst",
|
||||
newPassword: "longenough",
|
||||
});
|
||||
await user.click(screen.getByRole("button", { name: "Go to login" }));
|
||||
expect(screen.getByText("login page")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("an expired token is reported", async () => {
|
||||
route(
|
||||
"POST /api/users/reset-password",
|
||||
() => fail("Reset link expired", 400),
|
||||
);
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("New password"), "longenough");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Confirm new password"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
"Reset link expired",
|
||||
);
|
||||
});
|
||||
});
|
||||
25
src/test/pages/RestrictedGuest.test.tsx
Normal file
25
src/test/pages/RestrictedGuest.test.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import { Route } from "react-router";
|
||||
import { RestrictedGuest } from "../../pages/RestrictedGuest.tsx";
|
||||
import { makeSession } from "../fixtures.ts";
|
||||
import { renderWithContexts } from "../render.tsx";
|
||||
|
||||
const home = <Route path="/" element={<p>home page</p>} />;
|
||||
|
||||
describe("RestrictedGuest", () => {
|
||||
test("sends members home", () => {
|
||||
renderWithContexts(
|
||||
<RestrictedGuest>
|
||||
<p>form</p>
|
||||
</RestrictedGuest>,
|
||||
{
|
||||
session: makeSession(),
|
||||
route: "/login",
|
||||
path: "/login",
|
||||
extraRoutes: home,
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("home page")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
34
src/test/pages/RestrictedLoggedIn.test.tsx
Normal file
34
src/test/pages/RestrictedLoggedIn.test.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import { Route } from "react-router";
|
||||
import { RestrictedLoggedIn } from "../../pages/RestrictedLoggedIn.tsx";
|
||||
import { makeSession } from "../fixtures.ts";
|
||||
import { renderWithContexts } from "../render.tsx";
|
||||
|
||||
describe("RestrictedLoggedIn", () => {
|
||||
test("sends guests to login", () => {
|
||||
renderWithContexts(
|
||||
<RestrictedLoggedIn>
|
||||
<p>secret</p>
|
||||
</RestrictedLoggedIn>,
|
||||
{
|
||||
route: "/notifications",
|
||||
path: "/notifications",
|
||||
extraRoutes: <Route path="/login" element={<p>login page</p>} />,
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("login page")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("lets members through", () => {
|
||||
renderWithContexts(
|
||||
<RestrictedLoggedIn>
|
||||
<p>secret</p>
|
||||
</RestrictedLoggedIn>,
|
||||
{
|
||||
session: makeSession(),
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("secret")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,8 +1,7 @@
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import { act, screen, waitFor } from "@testing-library/react";
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen } 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";
|
||||
@@ -89,81 +88,3 @@ describe("UserDumps", () => {
|
||||
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",
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
123
src/test/pages/UserLogin.test.tsx
Normal file
123
src/test/pages/UserLogin.test.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { Route } from "react-router";
|
||||
import { UserLogin } from "../../pages/UserLogin.tsx";
|
||||
import { AUTH_STORAGE_KEY } from "../../utils/auth/storage.ts";
|
||||
import { calls, deferred, fail, route } from "../fetch.ts";
|
||||
import { makeSession, wire } from "../fixtures.ts";
|
||||
import { currentPath, renderWithContexts } from "../render.tsx";
|
||||
|
||||
const home = <Route path="/" element={<p>home page</p>} />;
|
||||
|
||||
describe("UserLogin", () => {
|
||||
function setup() {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<UserLogin />, {
|
||||
route: "/login",
|
||||
path: "/login",
|
||||
extraRoutes: home,
|
||||
});
|
||||
return user;
|
||||
}
|
||||
|
||||
test("logs in, stores the session and goes home", async () => {
|
||||
const session = makeSession({ username: "ann" });
|
||||
route("POST /api/users/login", () => wire(session));
|
||||
const user = setup();
|
||||
expect(document.title).toMatch(/^Log in · /);
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "hunter22{Enter}");
|
||||
await screen.findByText("home page");
|
||||
expect(calls("POST /api/users/login")[0].body).toEqual({
|
||||
username: "ann",
|
||||
password: "hunter22",
|
||||
});
|
||||
expect(JSON.parse(localStorage.getItem(AUTH_STORAGE_KEY)!).user.username)
|
||||
.toBe("ann");
|
||||
});
|
||||
|
||||
test("both fields are required", async () => {
|
||||
const user = setup();
|
||||
// The header has a "Log in" button too; this is the form's.
|
||||
await user.click(
|
||||
document.querySelector<HTMLButtonElement>(
|
||||
".auth-card button[type=submit]",
|
||||
)!,
|
||||
);
|
||||
expect(calls("POST /api/users/login")).toHaveLength(0);
|
||||
expect(screen.getByPlaceholderText("Username")).toHaveAttribute(
|
||||
"aria-invalid",
|
||||
"true",
|
||||
);
|
||||
});
|
||||
|
||||
test("shows the server's refusal", async () => {
|
||||
route("POST /api/users/login", () => fail("Invalid credentials", 401));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "nope{Enter}");
|
||||
const alert = await screen.findByRole("alert");
|
||||
expect(alert).toHaveTextContent("Login failed");
|
||||
expect(alert).toHaveTextContent("Invalid credentials");
|
||||
expect(currentPath()).toBe("/login");
|
||||
});
|
||||
|
||||
test("says when the server can't be reached", async () => {
|
||||
route("POST /api/users/login", () => new TypeError("Failed to fetch"));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
/Could not connect/,
|
||||
);
|
||||
});
|
||||
|
||||
test("the button says so while logging in", async () => {
|
||||
const pending = deferred();
|
||||
route("POST /api/users/login", () => pending.promise);
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
expect(await screen.findByRole("button", { name: "Logging in…" }))
|
||||
.toBeDisabled();
|
||||
pending.resolve(
|
||||
new Response(
|
||||
JSON.stringify({ success: true, data: wire(makeSession()) }),
|
||||
),
|
||||
);
|
||||
await screen.findByText("home page");
|
||||
});
|
||||
|
||||
test("password reset request", async () => {
|
||||
route("POST /api/users/request-password-reset", () => ({}));
|
||||
const user = setup();
|
||||
await user.click(screen.getByRole("button", { name: "Forgot password?" }));
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Your email address"),
|
||||
" a@b.c {Enter}",
|
||||
);
|
||||
await screen.findByText(/you'll receive a reset link/);
|
||||
expect(calls("POST /api/users/request-password-reset")[0].body).toEqual({
|
||||
email: "a@b.c",
|
||||
});
|
||||
});
|
||||
|
||||
test("a failed reset request is reported, not claimed as sent", async () => {
|
||||
route(
|
||||
"POST /api/users/request-password-reset",
|
||||
() => fail("Internal error", 500),
|
||||
);
|
||||
const user = setup();
|
||||
await user.click(screen.getByRole("button", { name: "Forgot password?" }));
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Your email address"),
|
||||
"a@b.c{Enter}",
|
||||
);
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
"Request failed",
|
||||
);
|
||||
expect(screen.queryByText(/you'll receive a reset link/)).not
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
} from "../fixtures.ts";
|
||||
import { currentPath, renderApp } from "../render.tsx";
|
||||
import { FakeWebSocket } from "../ws.ts";
|
||||
import { AUTH_STORAGE_KEY } from "../../utils/authStorage.ts";
|
||||
import { AUTH_STORAGE_KEY } from "../../utils/auth/storage.ts";
|
||||
|
||||
const ann = makeUser({
|
||||
id: "ann",
|
||||
|
||||
92
src/test/pages/UserRegister.test.tsx
Normal file
92
src/test/pages/UserRegister.test.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { Route } from "react-router";
|
||||
import { UserRegister } from "../../pages/UserRegister.tsx";
|
||||
import { calls, fail, route } from "../fetch.ts";
|
||||
import { makeSession, wire } from "../fixtures.ts";
|
||||
import { renderWithContexts } from "../render.tsx";
|
||||
|
||||
const home = <Route path="/" element={<p>home page</p>} />;
|
||||
|
||||
describe("UserRegister", () => {
|
||||
function setup(search = "?token=inv-1") {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<UserRegister />, {
|
||||
route: `/register${search}`,
|
||||
path: "/register",
|
||||
extraRoutes: home,
|
||||
});
|
||||
return user;
|
||||
}
|
||||
|
||||
test("no token: an invalid invite, no request", () => {
|
||||
setup("");
|
||||
expect(screen.getByRole("alert")).toHaveTextContent("Invalid invite");
|
||||
expect(calls("GET /api/invites/:t")).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("an unknown token is invalid", async () => {
|
||||
route("GET /api/invites/:t", () => fail("nope", 404));
|
||||
setup();
|
||||
expect(screen.getByText("Checking invite…")).toBeInTheDocument();
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent("already used");
|
||||
});
|
||||
|
||||
test("registers with a valid invite", async () => {
|
||||
route("GET /api/invites/:t", () => ({}));
|
||||
const session = makeSession({ username: "new_one" });
|
||||
route("POST /api/users/register", () => wire(session));
|
||||
const user = setup();
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "new_one");
|
||||
await user.type(screen.getByPlaceholderText("Email address"), "n@o.pe");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Password (min. 8 characters)"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
await screen.findByText("home page");
|
||||
expect(calls("POST /api/users/register")[0].body).toEqual({
|
||||
username: "new_one",
|
||||
password: "longenough",
|
||||
inviteToken: "inv-1",
|
||||
email: "n@o.pe",
|
||||
});
|
||||
expect(calls("GET /api/invites/:t")[0].params.t).toBe("inv-1");
|
||||
});
|
||||
|
||||
test("validates the username and password length", async () => {
|
||||
route("GET /api/invites/:t", () => ({}));
|
||||
const user = setup();
|
||||
await user.type(
|
||||
await screen.findByPlaceholderText("Username"),
|
||||
"bad name!",
|
||||
);
|
||||
await user.type(screen.getByPlaceholderText("Email address"), "n@o.pe");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Password (min. 8 characters)"),
|
||||
"short{Enter}",
|
||||
);
|
||||
expect(await screen.findByText(/letters, numbers, or underscores/))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.getByText("At least 8 characters")).toBeInTheDocument();
|
||||
expect(calls("POST /api/users/register")).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("shows a server refusal (username taken)", async () => {
|
||||
route("GET /api/invites/:t", () => ({}));
|
||||
route(
|
||||
"POST /api/users/register",
|
||||
() => fail("Username already taken", 409),
|
||||
);
|
||||
const user = setup();
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "taken");
|
||||
await user.type(screen.getByPlaceholderText("Email address"), "n@o.pe");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Password (min. 8 characters)"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
"Username already taken",
|
||||
);
|
||||
});
|
||||
});
|
||||
89
src/test/pages/UserUpvoted.test.tsx
Normal file
89
src/test/pages/UserUpvoted.test.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import { act, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { UserUpvoted } from "../../pages/UserUpvoted.tsx";
|
||||
import { 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" });
|
||||
|
||||
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",
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,331 +0,0 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { Route } from "react-router";
|
||||
import { UserLogin } from "../../pages/UserLogin.tsx";
|
||||
import { UserRegister } from "../../pages/UserRegister.tsx";
|
||||
import { ResetPassword } from "../../pages/ResetPassword.tsx";
|
||||
import { NotFound } from "../../pages/NotFound.tsx";
|
||||
import { RestrictedGuest } from "../../pages/RestrictedGuest.tsx";
|
||||
import { RestrictedLoggedIn } from "../../pages/RestrictedLoggedIn.tsx";
|
||||
import { AUTH_STORAGE_KEY } from "../../utils/authStorage.ts";
|
||||
import { calls, deferred, fail, route } from "../fetch.ts";
|
||||
import { makeSession, wire } from "../fixtures.ts";
|
||||
import { currentPath, renderWithContexts } from "../render.tsx";
|
||||
|
||||
const home = <Route path="/" element={<p>home page</p>} />;
|
||||
|
||||
describe("UserLogin", () => {
|
||||
function setup() {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<UserLogin />, {
|
||||
route: "/login",
|
||||
path: "/login",
|
||||
extraRoutes: home,
|
||||
});
|
||||
return user;
|
||||
}
|
||||
|
||||
test("logs in, stores the session and goes home", async () => {
|
||||
const session = makeSession({ username: "ann" });
|
||||
route("POST /api/users/login", () => wire(session));
|
||||
const user = setup();
|
||||
expect(document.title).toMatch(/^Log in · /);
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "hunter22{Enter}");
|
||||
await screen.findByText("home page");
|
||||
expect(calls("POST /api/users/login")[0].body).toEqual({
|
||||
username: "ann",
|
||||
password: "hunter22",
|
||||
});
|
||||
expect(JSON.parse(localStorage.getItem(AUTH_STORAGE_KEY)!).user.username)
|
||||
.toBe("ann");
|
||||
});
|
||||
|
||||
test("both fields are required", async () => {
|
||||
const user = setup();
|
||||
// The header has a "Log in" button too; this is the form's.
|
||||
await user.click(
|
||||
document.querySelector<HTMLButtonElement>(
|
||||
".auth-card button[type=submit]",
|
||||
)!,
|
||||
);
|
||||
expect(calls("POST /api/users/login")).toHaveLength(0);
|
||||
expect(screen.getByPlaceholderText("Username")).toHaveAttribute(
|
||||
"aria-invalid",
|
||||
"true",
|
||||
);
|
||||
});
|
||||
|
||||
test("shows the server's refusal", async () => {
|
||||
route("POST /api/users/login", () => fail("Invalid credentials", 401));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "nope{Enter}");
|
||||
const alert = await screen.findByRole("alert");
|
||||
expect(alert).toHaveTextContent("Login failed");
|
||||
expect(alert).toHaveTextContent("Invalid credentials");
|
||||
expect(currentPath()).toBe("/login");
|
||||
});
|
||||
|
||||
test("says when the server can't be reached", async () => {
|
||||
route("POST /api/users/login", () => new TypeError("Failed to fetch"));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
/Could not connect/,
|
||||
);
|
||||
});
|
||||
|
||||
test("the button says so while logging in", async () => {
|
||||
const pending = deferred();
|
||||
route("POST /api/users/login", () => pending.promise);
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
expect(await screen.findByRole("button", { name: "Logging in…" }))
|
||||
.toBeDisabled();
|
||||
pending.resolve(
|
||||
new Response(
|
||||
JSON.stringify({ success: true, data: wire(makeSession()) }),
|
||||
),
|
||||
);
|
||||
await screen.findByText("home page");
|
||||
});
|
||||
|
||||
test("password reset request", async () => {
|
||||
route("POST /api/users/request-password-reset", () => ({}));
|
||||
const user = setup();
|
||||
await user.click(screen.getByRole("button", { name: "Forgot password?" }));
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Your email address"),
|
||||
" a@b.c {Enter}",
|
||||
);
|
||||
await screen.findByText(/you'll receive a reset link/);
|
||||
expect(calls("POST /api/users/request-password-reset")[0].body).toEqual({
|
||||
email: "a@b.c",
|
||||
});
|
||||
});
|
||||
|
||||
test("a failed reset request is reported, not claimed as sent", async () => {
|
||||
route(
|
||||
"POST /api/users/request-password-reset",
|
||||
() => fail("Internal error", 500),
|
||||
);
|
||||
const user = setup();
|
||||
await user.click(screen.getByRole("button", { name: "Forgot password?" }));
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Your email address"),
|
||||
"a@b.c{Enter}",
|
||||
);
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
"Request failed",
|
||||
);
|
||||
expect(screen.queryByText(/you'll receive a reset link/)).not
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("UserRegister", () => {
|
||||
function setup(search = "?token=inv-1") {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<UserRegister />, {
|
||||
route: `/register${search}`,
|
||||
path: "/register",
|
||||
extraRoutes: home,
|
||||
});
|
||||
return user;
|
||||
}
|
||||
|
||||
test("no token: an invalid invite, no request", () => {
|
||||
setup("");
|
||||
expect(screen.getByRole("alert")).toHaveTextContent("Invalid invite");
|
||||
expect(calls("GET /api/invites/:t")).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("an unknown token is invalid", async () => {
|
||||
route("GET /api/invites/:t", () => fail("nope", 404));
|
||||
setup();
|
||||
expect(screen.getByText("Checking invite…")).toBeInTheDocument();
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent("already used");
|
||||
});
|
||||
|
||||
test("registers with a valid invite", async () => {
|
||||
route("GET /api/invites/:t", () => ({}));
|
||||
const session = makeSession({ username: "new_one" });
|
||||
route("POST /api/users/register", () => wire(session));
|
||||
const user = setup();
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "new_one");
|
||||
await user.type(screen.getByPlaceholderText("Email address"), "n@o.pe");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Password (min. 8 characters)"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
await screen.findByText("home page");
|
||||
expect(calls("POST /api/users/register")[0].body).toEqual({
|
||||
username: "new_one",
|
||||
password: "longenough",
|
||||
inviteToken: "inv-1",
|
||||
email: "n@o.pe",
|
||||
});
|
||||
expect(calls("GET /api/invites/:t")[0].params.t).toBe("inv-1");
|
||||
});
|
||||
|
||||
test("validates the username and password length", async () => {
|
||||
route("GET /api/invites/:t", () => ({}));
|
||||
const user = setup();
|
||||
await user.type(
|
||||
await screen.findByPlaceholderText("Username"),
|
||||
"bad name!",
|
||||
);
|
||||
await user.type(screen.getByPlaceholderText("Email address"), "n@o.pe");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Password (min. 8 characters)"),
|
||||
"short{Enter}",
|
||||
);
|
||||
expect(await screen.findByText(/letters, numbers, or underscores/))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.getByText("At least 8 characters")).toBeInTheDocument();
|
||||
expect(calls("POST /api/users/register")).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("shows a server refusal (username taken)", async () => {
|
||||
route("GET /api/invites/:t", () => ({}));
|
||||
route(
|
||||
"POST /api/users/register",
|
||||
() => fail("Username already taken", 409),
|
||||
);
|
||||
const user = setup();
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "taken");
|
||||
await user.type(screen.getByPlaceholderText("Email address"), "n@o.pe");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Password (min. 8 characters)"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
"Username already taken",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("ResetPassword", () => {
|
||||
function setup(search = "?token=rst") {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<ResetPassword />, {
|
||||
route: `/reset-password${search}`,
|
||||
path: "/reset-password",
|
||||
extraRoutes: <Route path="/login" element={<p>login page</p>} />,
|
||||
});
|
||||
return user;
|
||||
}
|
||||
|
||||
test("no token: an invalid link", () => {
|
||||
setup("");
|
||||
expect(screen.getByRole("heading", { name: "Invalid link" }))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.getByRole("link", { name: "Back to login" })).toHaveAttribute(
|
||||
"href",
|
||||
"/login",
|
||||
);
|
||||
});
|
||||
|
||||
test("the two passwords must match", async () => {
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("New password"), "longenough");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Confirm new password"),
|
||||
"different",
|
||||
);
|
||||
expect(await screen.findByText("Passwords do not match"))
|
||||
.toBeInTheDocument();
|
||||
await user.click(screen.getByRole("button", { name: "Set new password" }));
|
||||
expect(calls("POST /api/users/reset-password")).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("sets the password, then offers login", async () => {
|
||||
route("POST /api/users/reset-password", () => ({}));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("New password"), "longenough");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Confirm new password"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
await screen.findByRole("heading", { name: "Password updated" });
|
||||
expect(calls("POST /api/users/reset-password")[0].body).toEqual({
|
||||
token: "rst",
|
||||
newPassword: "longenough",
|
||||
});
|
||||
await user.click(screen.getByRole("button", { name: "Go to login" }));
|
||||
expect(screen.getByText("login page")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("an expired token is reported", async () => {
|
||||
route(
|
||||
"POST /api/users/reset-password",
|
||||
() => fail("Reset link expired", 400),
|
||||
);
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("New password"), "longenough");
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Confirm new password"),
|
||||
"longenough{Enter}",
|
||||
);
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
"Reset link expired",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("route guards and 404", () => {
|
||||
test("guest-only pages send members home", () => {
|
||||
renderWithContexts(
|
||||
<RestrictedGuest>
|
||||
<p>form</p>
|
||||
</RestrictedGuest>,
|
||||
{
|
||||
session: makeSession(),
|
||||
route: "/login",
|
||||
path: "/login",
|
||||
extraRoutes: home,
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("home page")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("member-only pages send guests to login", () => {
|
||||
renderWithContexts(
|
||||
<RestrictedLoggedIn>
|
||||
<p>secret</p>
|
||||
</RestrictedLoggedIn>,
|
||||
{
|
||||
route: "/notifications",
|
||||
path: "/notifications",
|
||||
extraRoutes: <Route path="/login" element={<p>login page</p>} />,
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("login page")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("each guard lets the right people through", () => {
|
||||
renderWithContexts(
|
||||
<RestrictedLoggedIn>
|
||||
<p>secret</p>
|
||||
</RestrictedLoggedIn>,
|
||||
{
|
||||
session: makeSession(),
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("secret")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("NotFound", async () => {
|
||||
renderWithContexts(<NotFound />, { route: "/nope" });
|
||||
expect(screen.getByRole("heading", { name: "404" })).toBeInTheDocument();
|
||||
await waitFor(() => expect(document.title).toMatch(/^Page not found/));
|
||||
expect(screen.getByRole("link", { name: "Go home" })).toHaveAttribute(
|
||||
"href",
|
||||
"/",
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,39 +0,0 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { FeedTabBar } from "../../../pages/index/FeedTabBar.tsx";
|
||||
import type { Category } from "../../../model.ts";
|
||||
import { makeCategory, makeSession } from "../../fixtures.ts";
|
||||
import { currentPath, renderWithContexts } from "../../render.tsx";
|
||||
|
||||
const categories: Category[] = [
|
||||
makeCategory({ id: "c1", slug: "music", name: "Music" }),
|
||||
makeCategory({ id: "c2", slug: "cinema", name: "Cinema" }),
|
||||
];
|
||||
|
||||
describe("FeedTabBar", () => {
|
||||
test("guests don't get Followed; tabs navigate within the scope", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<FeedTabBar />, {
|
||||
route: "/music/hot",
|
||||
path: "/:categorySlug/:feedTab",
|
||||
categories,
|
||||
});
|
||||
expect(screen.queryByRole("button", { name: "Followed" })).not
|
||||
.toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Hot" })).toHaveClass("active");
|
||||
await user.click(screen.getByRole("button", { name: "Journal" }));
|
||||
expect(currentPath()).toBe("/music/journal");
|
||||
});
|
||||
|
||||
test("signed in, Followed is there", () => {
|
||||
renderWithContexts(<FeedTabBar />, {
|
||||
session: makeSession(),
|
||||
route: "/~/followed",
|
||||
path: "/~/:feedTab",
|
||||
});
|
||||
expect(screen.getByRole("button", { name: "Followed" })).toHaveClass(
|
||||
"active",
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,52 +0,0 @@
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import { act, screen } from "@testing-library/react";
|
||||
import { PresenceRow } from "../../../pages/index/PresenceRow.tsx";
|
||||
import { renderWithContexts } from "../../render.tsx";
|
||||
|
||||
describe("PresenceRow", () => {
|
||||
const online = (n: number) =>
|
||||
Array.from({ length: n }, (_, i) => ({
|
||||
userId: `u${i}`,
|
||||
username: `user${i}`,
|
||||
hasAvatar: false,
|
||||
}));
|
||||
|
||||
test("nothing when nobody's online", () => {
|
||||
renderWithContexts(<PresenceRow />);
|
||||
expect(document.querySelector(".index-presence")).toBeNull();
|
||||
});
|
||||
|
||||
test("up to six seats, the rest folded into a counter", () => {
|
||||
renderWithContexts(<PresenceRow />, { ws: { onlineUsers: online(9) } });
|
||||
expect(screen.getAllByRole("link")).toHaveLength(5);
|
||||
const more = screen.getByRole("img", { name: /4 more online/ });
|
||||
expect(more).toHaveTextContent("+4");
|
||||
expect(more).toHaveAttribute("title", "user5, user6, user7, user8");
|
||||
});
|
||||
|
||||
test("six or fewer all show", () => {
|
||||
renderWithContexts(<PresenceRow />, { ws: { onlineUsers: online(6) } });
|
||||
expect(screen.getAllByRole("link")).toHaveLength(6);
|
||||
expect(screen.queryByText(/^\+/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("gives up seats to the tabs beside it, keeping at least an avatar and the counter", () => {
|
||||
const width = vi.spyOn(HTMLElement.prototype, "clientWidth", "get")
|
||||
.mockReturnValue(100);
|
||||
renderWithContexts(
|
||||
<div className="bar">
|
||||
<div className="tabs">
|
||||
<span>a</span>
|
||||
</div>
|
||||
<PresenceRow fitWithin=".bar" fitBeside=".tabs" />
|
||||
</div>,
|
||||
{ ws: { onlineUsers: online(9) } },
|
||||
);
|
||||
expect(screen.getAllByRole("link")).toHaveLength(3);
|
||||
width.mockReturnValue(0);
|
||||
act(() => {
|
||||
globalThis.dispatchEvent(new Event("resize"));
|
||||
});
|
||||
width.mockRestore();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user