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:
Mistral Vibe
2026-04-01 14:55:10 +02:00
parent 69c614cf62
commit 16bfdd2e90
12 changed files with 2428 additions and 465 deletions

View 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();
});
});