diff --git a/e2e/tests/game-stats-sizing.spec.ts b/e2e/tests/game-stats-sizing.spec.ts new file mode 100644 index 0000000..9add44b --- /dev/null +++ b/e2e/tests/game-stats-sizing.spec.ts @@ -0,0 +1,36 @@ +import { expect, test } from "../fixtures/test-fixtures"; +import { mockPreseasonSchedule } from "../fixtures/mock-data"; + +test("keeps the game stats dialog the same size across Stats and Momentum", async ({ + page, + seedUser: _seedUser, + mockEspnApi: _mockEspnApi, +}) => { + await page.setViewportSize({ width: 1194, height: 834 }); + await page.route("**/api/schedule**", (route) => route.fulfill({ json: mockPreseasonSchedule })); + await page.goto("/"); + await page + .getByRole("button", { name: "View live updates for Seattle Seahawks at Tennessee Titans" }) + .click(); + + const dialog = page.getByTestId("game-stats-dialog"); + const statsPanel = dialog.getByRole("tabpanel", { name: "Stats" }); + await expect(statsPanel.getByText("Total Yards", { exact: true })).toBeVisible(); + const statsDialogBox = await dialog.boundingBox(); + const statsPanelBox = await statsPanel.boundingBox(); + + await dialog.getByRole("tab", { name: "Momentum" }).click(); + const momentumPanel = dialog.getByRole("tabpanel", { name: "Momentum" }); + await expect(momentumPanel.getByText("Win Probability Over Time", { exact: true })).toBeVisible(); + const momentumDialogBox = await dialog.boundingBox(); + const momentumPanelBox = await momentumPanel.boundingBox(); + + expect(statsDialogBox).not.toBeNull(); + expect(statsPanelBox).not.toBeNull(); + expect(momentumDialogBox).not.toBeNull(); + expect(momentumPanelBox).not.toBeNull(); + expect(Math.abs(momentumDialogBox!.width - statsDialogBox!.width)).toBeLessThan(1); + expect(Math.abs(momentumDialogBox!.height - statsDialogBox!.height)).toBeLessThan(1); + expect(Math.abs(momentumPanelBox!.width - statsPanelBox!.width)).toBeLessThan(1); + expect(statsPanelBox!.width).toBeGreaterThanOrEqual(statsDialogBox!.width - 2); +}); diff --git a/src/components/dialogs/GameStatsDialog.tsx b/src/components/dialogs/GameStatsDialog.tsx index 47e6b73..252c3ea 100644 --- a/src/components/dialogs/GameStatsDialog.tsx +++ b/src/components/dialogs/GameStatsDialog.tsx @@ -189,7 +189,7 @@ export function GameStatsDialog({ }; const content = ( -