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