Move band management into dedicated settings pages
- Add BandSettingsPage (/bands/:id/settings/:panel) with Members, Storage, and Band Settings panels matching the mockup design - Strip members list, invite controls, and NC folder config from BandPage — library view now focuses purely on recordings workflow - Add band-scoped nav section to AppShell sidebar (Members, Storage, Band Settings) with correct per-panel active states - Fix amAdmin bug: was checking if any member is admin; now correctly checks if the current user holds the admin role - Add 31 vitest tests covering BandPage cleanliness, routing, access control (admin vs member), and per-panel mutation behaviour - Add test:web, test:api:unit, test:feature (post-feature pipeline), and ci tasks to Taskfile; frontend tests run via podman node:20-alpine - Add README with architecture overview, setup guide, and test docs - Add @testing-library/dom and @testing-library/jest-dom to package.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
97
web/src/pages/BandPage.test.tsx
Normal file
97
web/src/pages/BandPage.test.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import { renderWithProviders } from "../test/helpers";
|
||||
import { BandPage } from "./BandPage";
|
||||
|
||||
// ── Mocks ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
vi.mock("../api/bands", () => ({
|
||||
getBand: vi.fn().mockResolvedValue({
|
||||
id: "band-1",
|
||||
name: "Loud Hands",
|
||||
slug: "loud-hands",
|
||||
genre_tags: ["post-rock"],
|
||||
nc_folder_path: null,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("../api/client", () => ({
|
||||
api: {
|
||||
get: vi.fn().mockImplementation((url: string) => {
|
||||
if (url.includes("/sessions")) {
|
||||
return Promise.resolve([
|
||||
{ id: "s1", date: "2026-03-31", label: "Late Night Jam", recording_count: 3 },
|
||||
]);
|
||||
}
|
||||
if (url.includes("/songs/search")) {
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
return Promise.resolve([]);
|
||||
}),
|
||||
post: vi.fn(),
|
||||
patch: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
},
|
||||
isLoggedIn: vi.fn().mockReturnValue(true),
|
||||
}));
|
||||
|
||||
const renderBandPage = () =>
|
||||
renderWithProviders(<BandPage />, {
|
||||
path: "/bands/:bandId",
|
||||
route: "/bands/band-1",
|
||||
});
|
||||
|
||||
// ── Tests ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe("BandPage — cleanliness (TC-01 to TC-07)", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("TC-01: does not render a member list", async () => {
|
||||
renderBandPage();
|
||||
// Allow queries to settle
|
||||
await new Promise((r) => setTimeout(r, 50));
|
||||
expect(screen.queryByText(/members/i)).toBeNull();
|
||||
});
|
||||
|
||||
it("TC-02: does not render an invite button", async () => {
|
||||
renderBandPage();
|
||||
await new Promise((r) => setTimeout(r, 50));
|
||||
expect(screen.queryByText(/\+ invite/i)).toBeNull();
|
||||
});
|
||||
|
||||
it("TC-03: does not render the Nextcloud folder config widget", async () => {
|
||||
renderBandPage();
|
||||
await new Promise((r) => setTimeout(r, 50));
|
||||
expect(screen.queryByText(/scan path/i)).toBeNull();
|
||||
expect(screen.queryByText(/nextcloud scan folder/i)).toBeNull();
|
||||
});
|
||||
|
||||
it("TC-04: renders sessions grouped by date", async () => {
|
||||
renderBandPage();
|
||||
// Sessions appear after the query resolves
|
||||
const sessionEl = await screen.findByText("Late Night Jam");
|
||||
expect(sessionEl).toBeTruthy();
|
||||
});
|
||||
|
||||
it("TC-05: renders the Scan Nextcloud action button", async () => {
|
||||
renderBandPage();
|
||||
const btn = await screen.findByText(/scan nextcloud/i);
|
||||
expect(btn).toBeTruthy();
|
||||
});
|
||||
|
||||
it("TC-06: renders the + New Song button", async () => {
|
||||
renderBandPage();
|
||||
const btn = await screen.findByText(/\+ new song/i);
|
||||
expect(btn).toBeTruthy();
|
||||
});
|
||||
|
||||
it("TC-07: renders both By Date and Search tabs", async () => {
|
||||
renderBandPage();
|
||||
const byDate = await screen.findByText(/by date/i);
|
||||
const search = await screen.findByText(/^search$/i);
|
||||
expect(byDate).toBeTruthy();
|
||||
expect(search).toBeTruthy();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user