v4: /follow/playlists opens the followed playlists' feed, and a page's test opens it through the app's routes — the path was a 404 since the two views of the followed feed became pages: the route table held each feed tab as an exact path, /follow, so /follow/playlists fell to /:handle/*, which read "follow" as a category and "playlists" as a tab it hasn't. /music/follow/playlists, which goes through that route, worked. The tabs' routes now take what follows them (/${tab}/*), which Feed already reads and refuses when it names no view.
No test saw it because each page's test mounted the page on a route pattern of its own, a copy of App's, with stand-in pages where a redirect lands: Index's parsed the path itself, and passed on one the app doesn't serve. renderPage (src/test/render.tsx) now opens a URL through AppRoutes, which App.tsx exports for it, inside the real providers, and every page's test uses it: the page is the one the app routes that URL to, behind its guard, and a redirect is checked by the path it lands on. An entry may be a location, to arrive with the state a link hands over. Every page being loaded with its route, the first query after opening one waits. src/test/App.test.tsx tests the table itself: the paths that are a feed, those that are not found, those that send a guest to sign in and back, and those that send a signed-in user home. The profile's test held /@ann/dumps/x to be a path the profile answers as not found, which only its own pattern made true: in the app it is a dump's page. It now asks for /@ann/dumps/x/y. The tests of the two guards still mount them around a stand-in child, being tests of the guard alone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
@@ -1,12 +1,10 @@
|
||||
import { afterEach, describe, expect, test, vi } 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 { 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";
|
||||
import { currentPath, renderPage } from "../render.tsx";
|
||||
|
||||
const instance = vi.hoisted(() => ({ federationIncoming: true }));
|
||||
vi.mock("../../config/instance.ts", async (importOriginal) => ({
|
||||
@@ -16,16 +14,14 @@ vi.mock("../../config/instance.ts", async (importOriginal) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const home = <Route path="/" element={<p>home page</p>} />;
|
||||
/** Waits for the sign-in to have left the login page for `path`. */
|
||||
const landsOn = (path: string) =>
|
||||
waitFor(() => expect(currentPath()).toBe(path));
|
||||
|
||||
describe("UserLogin", () => {
|
||||
function setup() {
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<UserLogin />, {
|
||||
route: "/login",
|
||||
path: "/login",
|
||||
extraRoutes: home,
|
||||
});
|
||||
renderPage("/login");
|
||||
return user;
|
||||
}
|
||||
|
||||
@@ -33,10 +29,10 @@ describe("UserLogin", () => {
|
||||
const session = makeSession({ username: "ann" });
|
||||
route("POST /api/sessions", () => wire(session));
|
||||
const user = setup();
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "ann");
|
||||
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");
|
||||
await landsOn("/");
|
||||
expect(calls("POST /api/sessions")[0].body).toEqual({
|
||||
username: "ann",
|
||||
password: "hunter22",
|
||||
@@ -47,6 +43,7 @@ describe("UserLogin", () => {
|
||||
|
||||
test("both fields are required", async () => {
|
||||
const user = setup();
|
||||
await screen.findByPlaceholderText("Username");
|
||||
// The header has a "Log in" button too; this is the form's.
|
||||
await user.click(
|
||||
document.querySelector<HTMLButtonElement>(
|
||||
@@ -54,16 +51,18 @@ describe("UserLogin", () => {
|
||||
)!,
|
||||
);
|
||||
expect(calls("POST /api/sessions")).toHaveLength(0);
|
||||
expect(screen.getByPlaceholderText("Username")).toHaveAttribute(
|
||||
"aria-invalid",
|
||||
"true",
|
||||
await waitFor(() =>
|
||||
expect(screen.getByPlaceholderText("Username")).toHaveAttribute(
|
||||
"aria-invalid",
|
||||
"true",
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
test("shows the server's refusal", async () => {
|
||||
route("POST /api/sessions", () => fail("Invalid credentials", 401));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "nope{Enter}");
|
||||
const alert = await screen.findByRole("alert");
|
||||
expect(alert).toHaveTextContent("Login failed");
|
||||
@@ -74,7 +73,7 @@ describe("UserLogin", () => {
|
||||
test("says when the server can't be reached", async () => {
|
||||
route("POST /api/sessions", () => new TypeError("Failed to fetch"));
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
/Could not connect/,
|
||||
@@ -85,7 +84,7 @@ describe("UserLogin", () => {
|
||||
const pending = deferred();
|
||||
route("POST /api/sessions", () => pending.promise);
|
||||
const user = setup();
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
expect(await screen.findByRole("button", { name: "Logging in…" }))
|
||||
.toBeDisabled();
|
||||
@@ -94,40 +93,31 @@ describe("UserLogin", () => {
|
||||
JSON.stringify({ success: true, data: wire(makeSession()) }),
|
||||
),
|
||||
);
|
||||
await screen.findByText("home page");
|
||||
await landsOn("/");
|
||||
});
|
||||
|
||||
test("Forgot password? leads to the reset page", () => {
|
||||
test("Forgot password? leads to the reset page", async () => {
|
||||
setup();
|
||||
expect(screen.getByRole("link", { name: "Forgot password?" }))
|
||||
expect(await screen.findByRole("link", { name: "Forgot password?" }))
|
||||
.toHaveAttribute("href", "/reset-password");
|
||||
});
|
||||
|
||||
test("a sign-in follows ?next= on this site, and only there", async () => {
|
||||
route("POST /api/sessions", () => wire(makeSession()));
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<UserLogin />, {
|
||||
route: `/login?next=${encodeURIComponent("/authorize?client_id=x")}`,
|
||||
path: "/login",
|
||||
extraRoutes: <Route path="/authorize" element={<p>authorize</p>} />,
|
||||
});
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
renderPage(`/login?next=${encodeURIComponent("/authorize?client_id=x")}`);
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
await screen.findByText("authorize");
|
||||
expect(currentPath()).toBe("/authorize?client_id=x");
|
||||
await landsOn("/authorize?client_id=x");
|
||||
});
|
||||
|
||||
test("ignores a ?next= that leaves the site", async () => {
|
||||
route("POST /api/sessions", () => wire(makeSession()));
|
||||
const user = userEvent.setup();
|
||||
renderWithContexts(<UserLogin />, {
|
||||
route: `/login?next=${encodeURIComponent("//evil.example")}`,
|
||||
path: "/login",
|
||||
extraRoutes: home,
|
||||
});
|
||||
await user.type(screen.getByPlaceholderText("Username"), "ann");
|
||||
renderPage(`/login?next=${encodeURIComponent("//evil.example")}`);
|
||||
await user.type(await screen.findByPlaceholderText("Username"), "ann");
|
||||
await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
|
||||
await screen.findByText("home page");
|
||||
await landsOn("/");
|
||||
});
|
||||
|
||||
describe("with an account on another instance", () => {
|
||||
@@ -181,10 +171,11 @@ describe("UserLogin", () => {
|
||||
);
|
||||
});
|
||||
|
||||
test("isn't offered where accounts of other instances don't sign in", () => {
|
||||
test("isn't offered where accounts of other instances don't sign in", async () => {
|
||||
instance.federationIncoming = false;
|
||||
setup();
|
||||
expect(screen.getByPlaceholderText("Username")).toBeInTheDocument();
|
||||
expect(await screen.findByPlaceholderText("Username"))
|
||||
.toBeInTheDocument();
|
||||
expect(screen.queryByText(/another gerbeur/)).not.toBeInTheDocument();
|
||||
expect(calls("GET /api/federation/peers")).toHaveLength(0);
|
||||
});
|
||||
@@ -197,7 +188,7 @@ describe("UserLogin", () => {
|
||||
);
|
||||
const user = setup();
|
||||
await user.type(
|
||||
screen.getByPlaceholderText("Your gerbeur's URL"),
|
||||
await screen.findByPlaceholderText("Your gerbeur's URL"),
|
||||
"films.example{Enter}",
|
||||
);
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent(
|
||||
|
||||
Reference in New Issue
Block a user