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
parent
5e572d6351
commit
26b51cc28b
1 changed files with 50 additions and 104 deletions
|
|
@ -9,11 +9,6 @@ function renderWithRouter(ui: React.ReactElement) {
|
|||
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", () => {
|
||||
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(<StandingsTable standings={standings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
|
||||
|
||||
// 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(<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(/↑|↓/);
|
||||
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(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
|
||||
|
||||
renderWithRouter(<StandingsTable standings={singleTeam} leagueId={mockLeagueId} seasonId={mockSeasonId} showPlacementBreakdown={true} />);
|
||||
|
||||
// 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(<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", () => {
|
||||
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(<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("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(<StandingsTable standings={mockStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
|
||||
|
||||
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(<StandingsTable standings={tiedStandings} leagueId={mockLeagueId} seasonId={mockSeasonId} />);
|
||||
|
||||
// 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(<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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue