Tournament bracket E2E test

app/db/seed/index.ts

@@ -748,7 +748,9 @@ const availablePairs = rankedModesShort
   .filter((pair) => !tiebreakerPicks.has(pair));
 function calendarEventWithToToolsTeams(sz?: boolean) {
   const userIds = userIdsInAscendingOrderById();
-  for (let id = 1; id <= 14; id++) {
+  for (let id = 1; id <= 16; id++) {
+    const teamId = id + (sz ? 100 : 0);
+
     sql
       .prepare(
         `
@@ -768,14 +770,14 @@ function calendarEventWithToToolsTeams(sz?: boolean) {
       `
       )
       .run({
-        id: id + (sz ? 100 : 0),
+        id: teamId,
         name: names.pop(),
         createdAt: dateToDatabaseTimestamp(new Date()),
         tournamentId: sz ? 2 : 1,
         inviteCode: nanoid(INVITE_CODE_LENGTH),
       });
 
-    if (id !== 1) {
+    if (sz || id !== 1) {
       sql
         .prepare(
           `
@@ -794,11 +796,14 @@ function calendarEventWithToToolsTeams(sz?: boolean) {
         });
     }
 
-    for (
-      let i = 0;
-      i < faker.helpers.arrayElement([4, 4, 4, 4, 4, 5, 5, 6]);
-      i++
-    ) {
+    for (let i = 0; i < (id < 10 ? 4 : 5); i++) {
+      let userId = userIds.shift()!;
+      // ensure N-ZAP is in different team than Sendou for ITZ
+      if (userId === NZAP_TEST_ID && teamId === 101) {
+        userId = userIds.shift()!;
+        userIds.unshift(NZAP_TEST_ID);
+      }
+
       sql
         .prepare(
           `
@@ -817,7 +822,7 @@ function calendarEventWithToToolsTeams(sz?: boolean) {
         )
         .run({
           tournamentTeamId: id + (sz ? 100 : 0),
-          userId: userIds.shift()!,
+          userId,
           isOwner: i === 0 ? 1 : 0,
           createdAt: dateToDatabaseTimestamp(new Date()),
         });

app/features/tournament-bracket/components/ScoreReporter.tsx

@@ -108,6 +108,7 @@ export function ScoreReporter({
               <SubmitButton
                 _action="UNDO_REPORT_SCORE"
                 className="tournament-bracket__stage-banner__undo-button"
+                testId="undo-score-button"
               >
                 Undo last score
               </SubmitButton>
@@ -122,6 +123,7 @@ export function ScoreReporter({
                 <SubmitButton
                   _action="REOPEN_MATCH"
                   className="tournament-bracket__stage-banner__undo-button"
+                  testId="reopen-match-button"
                 >
                   Reopen match
                 </SubmitButton>
@@ -134,6 +136,7 @@ export function ScoreReporter({
               _action="REOPEN_MATCH"
               className="tournament-bracket__stage-banner__undo-button"
               disabled
+              testId="match-is-locked-button"
             >
               Match is locked
             </SubmitButton>
@@ -166,6 +169,7 @@ export function ScoreReporter({
           className={clsx("text-center text-xs text-lighter", {
             invisible: !isMounted,
           })}
+          data-testid="report-timestamp"
         >
           {isMounted
             ? databaseTimestampToDate(result.createdAt).toLocaleString()

app/features/tournament-bracket/components/ScoreReporterRosters.tsx

@@ -145,7 +145,11 @@ function ReportScoreButtons({
         </b>
         ?
       </div>
-      <SubmitButton size="tiny" _action="REPORT_SCORE">
+      <SubmitButton
+        size="tiny"
+        _action="REPORT_SCORE"
+        testId="report-score-button"
+      >
         Report
       </SubmitButton>
     </div>

app/features/tournament-bracket/components/TeamRosterInputs.tsx

@@ -145,6 +145,7 @@ function WinnerRadio({
         id={`${teamId}-${id}`}
         onChange={onChange}
         checked={checked}
+        data-testid={`winner-radio-${team}`}
       />
       <Label className="mb-0 ml-2" htmlFor={`${teamId}-${id}`}>
         Winner
@@ -169,7 +170,7 @@ function TeamRosterInputsCheckboxes({
 
   return (
     <div className="tournament-bracket__during-match-actions__team-players">
-      {team.members.map((member) => {
+      {team.members.map((member, i) => {
         return (
           <div
             key={member.userId}
@@ -188,6 +189,7 @@ function TeamRosterInputsCheckboxes({
               value={member.userId}
               checked={checkedPlayers.flat().includes(member.userId)}
               onChange={() => handlePlayerClick(member.userId)}
+              data-testid={`player-checkbox-${i}`}
             />{" "}
             <label
               className="tournament-bracket__during-match-actions__player-name"

app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx

@@ -330,6 +330,7 @@ export default function TournamentMatchPage() {
           size="tiny"
           className="w-max"
           icon={<ArrowLongLeftIcon />}
+          testId="back-to-bracket-button"
         >
           Back to bracket
         </LinkButton>

e2e/tournament-bracket.spec.ts

@@ -0,0 +1,126 @@
+import { type Page, test, expect } from "@playwright/test";
+import { NZAP_TEST_ID } from "~/db/seed/constants";
+import { impersonate, navigate, seed } from "~/utils/playwright";
+import { tournamentBracketsPage } from "~/utils/urls";
+
+const TOURNAMENT_ID = 2;
+
+const startBracket = async (page: Page) => {
+  await seed(page);
+  await impersonate(page);
+
+  await navigate({
+    page,
+    url: tournamentBracketsPage(TOURNAMENT_ID),
+  });
+
+  await page.getByTestId("finalize-bracket-button").click();
+};
+
+const reportResult = async (
+  page: Page,
+  amountOfMapsToReport: 1 | 2,
+  sidesWithMoreThanFourPlayers: ("first" | "last")[] = ["last"],
+  winner: 1 | 2 = 1
+) => {
+  if (sidesWithMoreThanFourPlayers.includes("first")) {
+    await page.getByTestId("player-checkbox-0").first().click();
+    await page.getByTestId("player-checkbox-1").first().click();
+    await page.getByTestId("player-checkbox-2").first().click();
+    await page.getByTestId("player-checkbox-3").first().click();
+  }
+  if (sidesWithMoreThanFourPlayers.includes("last")) {
+    await page.getByTestId("player-checkbox-0").last().click();
+    await page.getByTestId("player-checkbox-1").last().click();
+    await page.getByTestId("player-checkbox-2").last().click();
+    await page.getByTestId("player-checkbox-3").last().click();
+  }
+
+  await page.getByTestId(`winner-radio-${winner}`).click();
+  await page.getByTestId("report-score-button").click();
+  await expect(page.getByText(winner === 1 ? "1-0" : "0-1")).toBeVisible();
+
+  if (amountOfMapsToReport === 2) {
+    await page.getByTestId(`winner-radio-${winner}`).click();
+    await page.getByTestId("report-score-button").click();
+
+    await expect(page.getByTestId("report-timestamp")).toBeVisible();
+  }
+};
+
+const backToBracket = (page: Page) =>
+  page.getByTestId("back-to-bracket-button").click();
+
+const expectScore = (page: Page, score: [number, number]) =>
+  expect(page.getByText(score.join("-"))).toBeVisible();
+
+// 1) Report winner of N-ZAP's first match
+// 2) Report winner of the adjacent match by using admin powers
+// 3) Report one match on the only losers side match available
+// 4) Try to reopen N-ZAP's first match and fail
+// 5) Undo score of first losers match
+// 6) Try to reopen N-ZAP's first match and succeed
+// 7) As N-ZAP, undo all scores and switch to different team sweeping
+test.describe("Tournament bracket", () => {
+  test("reports score and sees bracket update", async ({ page }) => {
+    await startBracket(page);
+
+    await impersonate(page, NZAP_TEST_ID);
+    await navigate({
+      page,
+      url: tournamentBracketsPage(TOURNAMENT_ID),
+    });
+
+    // 1)
+    await page.locator('[data-match-id="5"]').click();
+    await reportResult(page, 2);
+    await backToBracket(page);
+
+    // 2)
+    await impersonate(page);
+    await navigate({
+      page,
+      url: tournamentBracketsPage(TOURNAMENT_ID),
+    });
+    await page.locator('[data-match-id="6"]').click();
+    await reportResult(page, 2);
+    await backToBracket(page);
+
+    // 3)
+    await page.locator('[data-match-id="18"]').click();
+    await reportResult(page, 1, ["first", "last"]);
+    await backToBracket(page);
+
+    // 4)
+    await page.locator('[data-match-id="5"]').click();
+    await page.getByTestId("reopen-match-button").click();
+    await expect(page.getByTestId("match-is-locked-button")).toBeVisible();
+    await backToBracket(page);
+
+    // 5)
+    await page.locator('[data-match-id="18"]').click();
+    await page.getByTestId("undo-score-button").click();
+    await expectScore(page, [0, 0]);
+    await backToBracket(page);
+
+    // 6)
+    await page.locator('[data-match-id="5"]').click();
+    await page.getByTestId("reopen-match-button").click();
+    await expectScore(page, [1, 0]);
+
+    // 7)
+    await impersonate(page, 2);
+    await navigate({
+      page,
+      url: tournamentBracketsPage(TOURNAMENT_ID),
+    });
+    await page.locator('[data-match-id="5"]').click();
+    await page.getByTestId("undo-score-button").click();
+    await expectScore(page, [0, 0]);
+    await reportResult(page, 2, ["last"], 2);
+    await backToBracket(page);
+    await expect(
+      page.locator("[data-round-id='5'] [data-participant-id='102']")
+    ).toBeVisible();
+  });
+});