Add tournament seeding E2E test Closes #1994

app/components/Draggable.tsx

@@ -7,11 +7,13 @@ export function Draggable({
 	disabled,
 	liClassName,
 	children,
+	testId,
 }: {
 	id: number;
 	disabled: boolean;
 	liClassName: string;
 	children: React.ReactNode;
+	testId?: string;
 }) {
 	const { attributes, listeners, setNodeRef, transform, transition } =
 		useSortable({ id, disabled });
@@ -26,6 +28,7 @@ export function Draggable({
 			className={liClassName}
 			style={style}
 			ref={setNodeRef}
+			data-testid={testId}
 			{...listeners}
 			{...attributes}
 		>

app/features/tournament/components/TeamWithRoster.tsx

@@ -43,6 +43,7 @@ export function TeamWithRoster({
 						<Link
 							to={teamPageUrl}
 							className="tournament__team-with-roster__team-name"
+							data-testid="team-name"
 						>
 							{team.name}
 						</Link>

app/features/tournament/routes/to.$id.seeds.tsx

@@ -233,6 +233,7 @@ export default function TournamentSeedsPage() {
 							<Draggable
 								key={team.id}
 								id={team.id}
+								testId={`seed-team-${team.id}`}
 								disabled={navigation.state !== "idle"}
 								liClassName={clsx(
 									"tournament__seeds__teams-list-row",

app/features/tournament/routes/to.$id.tsx

@@ -251,7 +251,12 @@ export function TournamentLayout() {
 				<SubNavLink to="brackets" data-testid="brackets-tab" prefetch="render">
 					{t("tournament:tabs.brackets")}
 				</SubNavLink>
-				<SubNavLink to="teams" end={false} prefetch="render">
+				<SubNavLink
+					to="teams"
+					end={false}
+					prefetch="render"
+					data-testid="teams-tab"
+				>
 					{t("tournament:tabs.teams", { count: tournament.ctx.teams.length })}
 				</SubNavLink>
 				{!tournament.everyBracketOver && tournament.subsFeatureEnabled && (

e2e/tournament.spec.ts

@@ -213,4 +213,28 @@ test.describe("Tournament", () => {
 		data = await fetchTournamentLoaderData();
 		expect(data.tournament.ctx.teams.find((t) => t.id === 1)).toBeFalsy();
 	});
+
+	test("adjusts seeds", async ({ page }) => {
+		await seed(page);
+		await impersonate(page);
+
+		await navigate({
+			page,
+			url: `${tournamentPage(1)}/seeds`,
+		});
+
+		await page.getByTestId("seed-team-1").hover();
+		await page.mouse.down();
+		// i think the drag & drop library might actually be a bit buggy
+		// so we have to do it in steps like this to allow for testing
+		await page.mouse.move(0, 500, { steps: 10 });
+		await page.mouse.up();
+
+		await submit(page);
+
+		await page.getByTestId("teams-tab").click();
+		await expect(page.getByTestId("team-name").first()).not.toHaveText(
+			"Chimera",
+		);
+	});
 });