Add StandingsPreview component tests covering avatar rendering
Tests were missing for the StandingsPreview component, which is the component that actually renders team avatars on the full standings page. Covers uploaded image, flag SVG, owner avatar inheritance, and the generated-flag fallback, plus basic content rendering (team names, owner names, points, description, full standings link). https://claude.ai/code/session_01CVt5Vo2PDGY4G3wSWbsmRG
This commit is contained in:
parent
4593917e7a
commit
a26294446d
1 changed files with 104 additions and 0 deletions
104
app/components/league/__tests__/StandingsPreview.test.tsx
Normal file
104
app/components/league/__tests__/StandingsPreview.test.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router";
|
||||
import { StandingsPreview, type StandingsPreviewEntry } from "../StandingsPreview";
|
||||
|
||||
function renderWithRouter(ui: React.ReactElement) {
|
||||
return render(<BrowserRouter>{ui}</BrowserRouter>);
|
||||
}
|
||||
|
||||
const baseEntry: StandingsPreviewEntry = {
|
||||
teamId: "team-1",
|
||||
teamName: "Lightning Wolves",
|
||||
ownerName: "alice",
|
||||
displayRank: 1,
|
||||
currentRank: 1,
|
||||
points: 2500,
|
||||
href: "/leagues/1/standings/1/teams/team-1",
|
||||
};
|
||||
|
||||
describe("StandingsPreview", () => {
|
||||
describe("Avatar rendering", () => {
|
||||
it("renders an img for uploaded avatar type", () => {
|
||||
const entry: StandingsPreviewEntry = {
|
||||
...baseEntry,
|
||||
avatarType: "uploaded",
|
||||
logoUrl: "https://example.com/team-logo.png",
|
||||
};
|
||||
renderWithRouter(<StandingsPreview entries={[entry]} />);
|
||||
|
||||
const img = screen.getByAltText("Lightning Wolves");
|
||||
expect(img.tagName).toBe("IMG");
|
||||
});
|
||||
|
||||
it("renders an SVG for flag avatar type", () => {
|
||||
const entry: StandingsPreviewEntry = {
|
||||
...baseEntry,
|
||||
avatarType: "flag",
|
||||
flagConfig: { pattern: "triband-h", colors: ["#ff0000", "#ffffff", "#0000ff"] },
|
||||
};
|
||||
const { container } = renderWithRouter(<StandingsPreview entries={[entry]} />);
|
||||
|
||||
expect(container.querySelector("svg")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders owner image when avatarType is owner with image ownerAvatarData", () => {
|
||||
const entry: StandingsPreviewEntry = {
|
||||
...baseEntry,
|
||||
avatarType: "owner",
|
||||
ownerAvatarData: { type: "image", url: "https://example.com/owner.png" },
|
||||
};
|
||||
renderWithRouter(<StandingsPreview entries={[entry]} />);
|
||||
|
||||
const img = screen.getByAltText("Lightning Wolves");
|
||||
expect(img.tagName).toBe("IMG");
|
||||
});
|
||||
|
||||
it("falls back to a generated flag when no avatar data is provided", () => {
|
||||
const entry: StandingsPreviewEntry = { ...baseEntry, avatarType: undefined };
|
||||
const { container } = renderWithRouter(<StandingsPreview entries={[entry]} />);
|
||||
|
||||
expect(container.querySelector("svg")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Basic rendering", () => {
|
||||
it("renders team names for all entries", () => {
|
||||
const entries: StandingsPreviewEntry[] = [
|
||||
{ ...baseEntry, teamId: "t1", teamName: "Team Alpha", displayRank: 1 },
|
||||
{ ...baseEntry, teamId: "t2", teamName: "Team Beta", displayRank: 2 },
|
||||
];
|
||||
renderWithRouter(<StandingsPreview entries={entries} />);
|
||||
|
||||
expect(screen.getByText("Team Alpha")).toBeInTheDocument();
|
||||
expect(screen.getByText("Team Beta")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders owner name below team name", () => {
|
||||
renderWithRouter(<StandingsPreview entries={[baseEntry]} />);
|
||||
|
||||
expect(screen.getByText("alice")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders rounded points", () => {
|
||||
renderWithRouter(<StandingsPreview entries={[{ ...baseEntry, points: 1500 }]} />);
|
||||
|
||||
expect(screen.getByText("1,500")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders description when provided", () => {
|
||||
renderWithRouter(<StandingsPreview entries={[baseEntry]} description="Current Standings" />);
|
||||
|
||||
expect(screen.getByText("Current Standings")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders full standings link when fullStandingsHref is provided", () => {
|
||||
renderWithRouter(
|
||||
<StandingsPreview entries={[baseEntry]} fullStandingsHref="/leagues/1/standings/1" />
|
||||
);
|
||||
|
||||
const link = screen.getByRole("link", { name: "Full Standings" });
|
||||
expect(link).toHaveAttribute("href", "/leagues/1/standings/1");
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue