Update StandingsTable tests to match redesigned component

- Remove showPlacementBreakdown prop (no longer exists on component)
- Replace Placement Breakdown test suite with 7-Day Change column tests
- Update header assertion: "Placements" → "7-Day Change"
- Add tests for positive/negative point change display and rank change indicators
- Remove accessibility test for placement title attributes

https://claude.ai/code/session_01CuCKFVYbpsKSQoFDcTYfY7
This commit is contained in:
Claude 2026-03-22 17:48:30 +00:00
parent 5e572d6351
commit 26b51cc28b
No known key found for this signature in database

View file

@ -9,11 +9,6 @@ function renderWithRouter(ui: React.ReactElement) {
return render(<BrowserRouter>{ui}</BrowserRouter>); return render(<BrowserRouter>{ui}</BrowserRouter>);
} }
/**
* StandingsTable Component Tests
* Phase 4.1: Test standings display with tiebreakers and placement breakdown
* Phase 4.3: Added tests for clickable team links
*/
describe("StandingsTable", () => { describe("StandingsTable", () => {
const mockLeagueId = "league-123"; const mockLeagueId = "league-123";
const mockSeasonId = "season-456"; const mockSeasonId = "season-456";
@ -25,7 +20,7 @@ describe("StandingsTable", () => {
totalPoints: 250.5, totalPoints: 250.5,
currentRank: 1, currentRank: 1,
previousRank: 2, previousRank: 2,
rankChange: 1, // Moved up rankChange: 1,
placementCounts: { placementCounts: {
first: 2, first: 2,
second: 1, second: 1,
@ -45,7 +40,7 @@ describe("StandingsTable", () => {
totalPoints: 245.0, totalPoints: 245.0,
currentRank: 2, currentRank: 2,
previousRank: 1, previousRank: 1,
rankChange: -1, // Moved down rankChange: -1,
placementCounts: { placementCounts: {
first: 1, first: 1,
second: 2, second: 2,
@ -65,7 +60,7 @@ describe("StandingsTable", () => {
totalPoints: 200.0, totalPoints: 200.0,
currentRank: 3, currentRank: 3,
previousRank: 3, previousRank: 3,
rankChange: 0, // No change rankChange: 0,
placementCounts: { placementCounts: {
first: 0, first: 0,
second: 1, second: 1,
@ -135,7 +130,6 @@ describe("StandingsTable", () => {
renderWithRouter(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} />); renderWithRouter(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
// Should not have emoji, just the number
const badge = screen.getByText("4"); const badge = screen.getByText("4");
expect(badge).toBeInTheDocument(); expect(badge).toBeInTheDocument();
}); });
@ -157,80 +151,59 @@ describe("StandingsTable", () => {
it("should not show indicator for no rank change", () => { it("should not show indicator for no rank change", () => {
renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />); renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
// Third team has no change, so no arrow // Only first two teams have rank changes
const arrows = screen.queryAllByText(/↑|↓/); const arrows = screen.queryAllByText(/↑|↓/);
expect(arrows).toHaveLength(2); // Only first two teams expect(arrows).toHaveLength(2);
}); });
}); });
describe("Placement Breakdown", () => { describe("7-Day Change Column", () => {
it("should display placement counts", () => { it("should show dash when sevenDayPointChange is not present", () => {
const singleTeam: TeamStanding[] = [ renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
{
teamId: "team1",
teamName: "Test Team",
totalPoints: 250,
currentRank: 1,
previousRank: null,
rankChange: 0,
placementCounts: {
first: 2,
second: 1,
third: 0,
fourth: 1,
fifth: 0,
sixth: 0,
seventh: 0,
eighth: 1,
},
participantsRemaining: 0,
calculatedAt: new Date(),
},
];
renderWithRouter(<StandingsTable standings={singleTeam} leagueId={mockLeagueId} seasonId={mockSeasonId} showPlacementBreakdown={true} />); // All mock standings lack sevenDayPointChange, so all rows show —
const dashes = screen.getAllByText("—");
// Test Team: 2 firsts, 1 second, 1 fourth, 1 eighth expect(dashes.length).toBeGreaterThanOrEqual(3);
expect(screen.getByText("1st×2")).toBeInTheDocument();
expect(screen.getByText("2nd×1")).toBeInTheDocument();
expect(screen.getByText("4th×1")).toBeInTheDocument();
expect(screen.getByText("8th×1")).toBeInTheDocument();
}); });
it("should only show non-zero placement counts", () => { it("should display positive point change in green with + prefix", () => {
renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} showPlacementBreakdown={true} />);
// Should not show "3rd×0" for Champions United
const placements = screen.queryByText("3rd×0");
expect(placements).not.toBeInTheDocument();
});
it("should hide placement breakdown when disabled", () => {
renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} showPlacementBreakdown={false} />);
expect(screen.queryByText("1st×2")).not.toBeInTheDocument();
});
it("should show 'None yet' when no placements", () => {
const standings: TeamStanding[] = [ const standings: TeamStanding[] = [
{ { ...mockStandings[0], sevenDayPointChange: 12.5 },
...mockStandings[0],
placementCounts: {
first: 0,
second: 0,
third: 0,
fourth: 0,
fifth: 0,
sixth: 0,
seventh: 0,
eighth: 0,
},
},
]; ];
renderWithRouter(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} showPlacementBreakdown={true} />); renderWithRouter(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
expect(screen.getByText("None yet")).toBeInTheDocument(); expect(screen.getByText("+12.50 pts")).toBeInTheDocument();
});
it("should display negative point change with no + prefix", () => {
const standings: TeamStanding[] = [
{ ...mockStandings[0], sevenDayPointChange: -3.25 },
];
renderWithRouter(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
expect(screen.getByText("-3.25 pts")).toBeInTheDocument();
});
it("should show rank change within the 7-day column", () => {
const standings: TeamStanding[] = [
{ ...mockStandings[0], sevenDayPointChange: 10, rankChange: 2 },
];
renderWithRouter(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
expect(screen.getByText("↑2 rank")).toBeInTheDocument();
});
it("should show no rank change indicator when rank is unchanged", () => {
const standings: TeamStanding[] = [
{ ...mockStandings[0], sevenDayPointChange: 5, rankChange: 0 },
];
renderWithRouter(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
expect(screen.getByText("— rank")).toBeInTheDocument();
}); });
}); });
@ -256,23 +229,18 @@ describe("StandingsTable", () => {
expect(screen.getByText("Rank")).toBeInTheDocument(); expect(screen.getByText("Rank")).toBeInTheDocument();
expect(screen.getByText("Team")).toBeInTheDocument(); expect(screen.getByText("Team")).toBeInTheDocument();
expect(screen.getByText("Points")).toBeInTheDocument(); expect(screen.getByText("Points")).toBeInTheDocument();
expect(screen.getByText("Placements")).toBeInTheDocument(); expect(screen.getByText("7-Day Change")).toBeInTheDocument();
expect(screen.getByText("Remaining")).toBeInTheDocument(); expect(screen.getByText("Remaining")).toBeInTheDocument();
}); });
it("should render teams in order", () => { it("should render teams in order by rank", () => {
const { container } = renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />); const { container } = renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
const rows = container.querySelectorAll("tbody tr"); const rows = container.querySelectorAll("tbody tr");
expect(rows).toHaveLength(3); expect(rows).toHaveLength(3);
// First row should be Champions United (rank 1)
expect(rows[0].textContent).toContain("Champions United"); expect(rows[0].textContent).toContain("Champions United");
// Second row should be Second Place Squad (rank 2)
expect(rows[1].textContent).toContain("Second Place Squad"); expect(rows[1].textContent).toContain("Second Place Squad");
// Third row should be Bronze Warriors (rank 3)
expect(rows[2].textContent).toContain("Bronze Warriors"); expect(rows[2].textContent).toContain("Bronze Warriors");
}); });
}); });
@ -280,30 +248,16 @@ describe("StandingsTable", () => {
describe("Tied Ranks", () => { describe("Tied Ranks", () => {
it("should handle teams with same rank", () => { it("should handle teams with same rank", () => {
const tiedStandings: TeamStanding[] = [ const tiedStandings: TeamStanding[] = [
{ { ...mockStandings[0], currentRank: 1, teamName: "Team A" },
...mockStandings[0], { ...mockStandings[1], currentRank: 1, teamName: "Team B" },
currentRank: 1, { ...mockStandings[2], currentRank: 3, teamName: "Team C" },
teamName: "Team A",
},
{
...mockStandings[1],
currentRank: 1,
teamName: "Team B",
},
{
...mockStandings[2],
currentRank: 3, // Skips 2
teamName: "Team C",
},
]; ];
renderWithRouter(<StandingsTable standings={tiedStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />); renderWithRouter(<StandingsTable standings={tiedStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
// Both teams should show rank 1
const firstPlaceBadges = screen.getAllByText(/🏆.*1st/); const firstPlaceBadges = screen.getAllByText(/🏆.*1st/);
expect(firstPlaceBadges).toHaveLength(2); expect(firstPlaceBadges).toHaveLength(2);
// Third team should show rank 3 (not 2)
expect(screen.getByText(/🥉.*3rd/)).toBeInTheDocument(); expect(screen.getByText(/🥉.*3rd/)).toBeInTheDocument();
}); });
}); });
@ -320,13 +274,5 @@ describe("StandingsTable", () => {
expect(downArrow).toBeInTheDocument(); expect(downArrow).toBeInTheDocument();
expect(downArrow?.getAttribute("title")).toContain("Down 1 place"); expect(downArrow?.getAttribute("title")).toContain("Down 1 place");
}); });
it("should have title attributes for placement counts", () => {
const { container } = renderWithRouter(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} showPlacementBreakdown={true} />);
const firstPlace = container.querySelector('[title*="1st place"]');
expect(firstPlace).toBeInTheDocument();
expect(firstPlace?.getAttribute("title")).toContain("2 1st place finishes");
});
}); });
}); });