E2E test

app/db/seed/index.ts

@@ -1545,9 +1545,12 @@ function otherTeams() {
 	);
 
 	for (let i = 3; i < 50; i++) {
-		const teamName = `${capitalize(faker.word.adjective())} ${capitalize(
-			faker.word.noun(),
-		)}`;
+		const teamName =
+			i === 3
+				? "Team Olive"
+				: `${capitalize(faker.word.adjective())} ${capitalize(
+						faker.word.noun(),
+					)}`;
 		const teamCustomUrl = mySlugify(teamName);
 
 		sql

app/features/front-page/routes/index.tsx

@@ -12,6 +12,7 @@ import { Placement } from "~/components/Placement";
 import { BSKYLikeIcon } from "~/components/icons/BSKYLike";
 import { BSKYReplyIcon } from "~/components/icons/BSKYReply";
 import { BSKYRepostIcon } from "~/components/icons/BSKYRepost";
+import { ExternalIcon } from "~/components/icons/External";
 import { GlobeIcon } from "~/components/icons/Globe";
 import { LogInIcon } from "~/components/icons/LogIn";
 import { LogOutIcon } from "~/components/icons/LogOut";
@@ -41,7 +42,6 @@ import {
 	userPage,
 	userSubmittedImage,
 } from "~/utils/urls";
-import { ExternalIcon } from "~/components/icons/External";
 
 import { loader } from "../loaders/index.server";
 export { loader };

app/features/team/routes/t.$customUrl.tsx

@@ -246,6 +246,7 @@ function ChangeMainTeamButton() {
 				size="tiny"
 				variant="outlined"
 				icon={<StarIcon />}
+				testId="make-main-team-button"
 			>
 				{t("team:actionButtons.makeMainTeam")}
 			</SubmitButton>
@@ -280,7 +281,10 @@ function MemberRow({
 	const { t } = useTranslation(["team"]);
 
 	return (
-		<div className="team__member">
+		<div
+			className="team__member"
+			data-testid={member.isOwner ? `member-owner-${member.id}` : undefined}
+		>
 			{member.role ? (
 				<span
 					className="team__member__role"

app/features/user-page/routes/u.$identifier.index.tsx

@@ -87,7 +87,11 @@ function TeamInfo() {
 
 	return (
 		<div className="stack horizontal sm">
-			<Link to={teamPage(data.user.team.customUrl)} className="u__team">
+			<Link
+				to={teamPage(data.user.team.customUrl)}
+				className="u__team"
+				data-testid="main-team-link"
+			>
 				{data.user.team.avatarUrl ? (
 					<img
 						alt=""
@@ -121,7 +125,12 @@ function SecondaryTeamsPopover() {
 	return (
 		<Popover
 			buttonChildren={
-				<span className="text-sm font-bold text-main-forced">+1</span>
+				<span
+					className="text-sm font-bold text-main-forced"
+					data-testid="secondary-team-trigger"
+				>
+					+{data.user.secondaryTeams.length}
+				</span>
 			}
 			triggerClassName="minimal tiny focus-text-decoration"
 		>

app/utils/playwright.ts

@@ -27,7 +27,7 @@ export async function selectUser({
 	await expect(combobox).not.toBeDisabled();
 
 	await combobox.clear();
-	await combobox.type(userName);
+	await combobox.fill(userName);
 	await expect(page.getByTestId("combobox-option-0")).toBeVisible();
 	await page.keyboard.press("Enter");
 }
@@ -68,11 +68,11 @@ export function impersonate(page: Page, userId = ADMIN_ID) {
 	return page.request.post(`/auth/impersonate?id=${userId}`);
 }
 
-export async function submit(page: Page) {
+export async function submit(page: Page, testId?: string) {
 	const responsePromise = page.waitForResponse(
 		(res) => res.request().method() === "POST",
 	);
-	await page.getByTestId("submit-button").click();
+	await page.getByTestId(testId ?? "submit-button").click();
 	await responsePromise;
 }
 

e2e/team.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { ADMIN_ID } from "~/constants";
+import { ADMIN_DISCORD_ID, ADMIN_ID } from "~/constants";
 import { NZAP_TEST_ID } from "~/db/seed/constants";
 import {
 	impersonate,
@@ -9,7 +9,7 @@ import {
 	seed,
 	submit,
 } from "~/utils/playwright";
-import { TEAM_SEARCH_PAGE, teamPage } from "~/utils/urls";
+import { TEAM_SEARCH_PAGE, teamPage, userPage } from "~/utils/urls";
 
 test.describe("Team search page", () => {
 	test("filters teams", async ({ page }) => {
@@ -24,7 +24,7 @@ test.describe("Team search page", () => {
 		await expect(firstTeamName).toHaveText("Alliance Rogue");
 		await expect(secondTeamName).toBeVisible();
 
-		await searchInput.type("Alliance Rogue");
+		await searchInput.fill("Alliance Rogue");
 		await expect(secondTeamName).not.toBeVisible();
 
 		await firstTeamName.click();
@@ -38,10 +38,10 @@ test.describe("Team search page", () => {
 
 		await page.getByTestId("new-team-button").click();
 		await expect(page).toHaveURL(/new=true/);
-		await page.getByTestId("new-team-name-input").type("Team Olive");
+		await page.getByTestId("new-team-name-input").fill("Chimera");
 		await submit(page);
 
-		await expect(page).toHaveURL(/team-olive/);
+		await expect(page).toHaveURL(/chimera/);
 	});
 });
 
@@ -54,13 +54,13 @@ test.describe("Team page", () => {
 		await page.getByTestId("edit-team-button").click();
 
 		await page.getByTestId("name-input").clear();
-		await page.getByTestId("name-input").type("Better Alliance Rogue");
+		await page.getByTestId("name-input").fill("Better Alliance Rogue");
 
 		await page.getByTestId("twitter-input").clear();
-		await page.getByTestId("twitter-input").type("BetterAllianceRogue");
+		await page.getByTestId("twitter-input").fill("BetterAllianceRogue");
 
 		await page.getByTestId("bio-textarea").clear();
-		await page.getByTestId("bio-textarea").type("shorter bio");
+		await page.getByTestId("bio-textarea").fill("shorter bio");
 
 		await page.getByTestId("edit-team-submit-button").click();
 
@@ -77,6 +77,9 @@ test.describe("Team page", () => {
 		await impersonate(page, ADMIN_ID);
 		await navigate({ page, url: teamPage("alliance-rogue") });
 
+		// Owner is Sendou
+		await expect(page.getByTestId(`member-owner-${ADMIN_ID}`)).toBeVisible();
+
 		await page.getByTestId("manage-roster-button").click();
 
 		await page.getByTestId("role-select-0").selectOption("SUPPORT");
@@ -92,7 +95,9 @@ test.describe("Team page", () => {
 		await expect(page.getByTestId("member-row-role-0")).toHaveText("Support");
 
 		await expect(page).not.toHaveURL(/roster/);
-		await isNotVisible(page.getByTestId("manage-roster-button"));
+
+		// Owner is not Sendou
+		await isNotVisible(page.getByTestId(`member-owner-${ADMIN_ID}`));
 	});
 
 	test("deletes team", async ({ page }) => {
@@ -138,4 +143,35 @@ test.describe("Team page", () => {
 
 		await page.getByTestId("leave-team-button").isVisible();
 	});
+
+	test("joins a secondary team, makes main team & leaves making the seconary team the main one", async ({
+		page,
+	}) => {
+		await seed(page);
+		await impersonate(page, ADMIN_ID);
+		await navigate({ page, url: teamPage("team-olive") });
+
+		await page.getByTestId("manage-roster-button").click();
+
+		const inviteLink = await page.getByTestId("invite-link").innerText();
+		await navigate({ page, url: inviteLink });
+		await submit(page);
+
+		await submit(page, "make-main-team-button");
+
+		await navigate({ page, url: userPage({ discordId: ADMIN_DISCORD_ID }) });
+
+		await expect(page.getByTestId("secondary-team-trigger")).toBeVisible();
+		await isNotVisible(page.getByText("Alliance Rogue"));
+
+		await page.getByTestId("main-team-link").click();
+
+		await page.getByTestId("leave-team-button").click();
+		await modalClickConfirmButton(page);
+
+		await navigate({ page, url: userPage({ discordId: ADMIN_DISCORD_ID }) });
+
+		await isNotVisible(page.getByTestId("secondary-team-trigger"));
+		await expect(page.getByText("Alliance Rogue")).toBeVisible();
+	});
 });

e2e/tournament.spec.ts

@@ -61,7 +61,7 @@ test.describe("Tournament", () => {
 
 		await page.getByTestId("tab-Register").click();
 
-		await page.getByLabel("Team name").type("Chimera");
+		await page.getByLabel("Pick-up name").fill("Chimera");
 		await page.getByTestId("save-team-button").click();
 
 		await page.getByTestId("add-player-button").click();

e2e/user-page.spec.ts

@@ -29,7 +29,7 @@ test.describe("User page", () => {
 		await page.getByLabel("R-stick sens").selectOption("0");
 		await page.getByLabel("Motion sens").selectOption("-50");
 		await page.getByLabel("Country").selectOption("SE");
-		await page.getByLabel("Bio").type("My awesome bio");
+		await page.getByLabel("Bio").fill("My awesome bio");
 		await submitEditForm(page);
 
 		await page.getByTestId("flag-SV").isVisible();

e2e/vods.spec.ts

@@ -21,11 +21,11 @@ test.describe("VoDs page", () => {
 
 		await page
 			.getByLabel("YouTube URL")
-			.type("https://www.youtube.com/watch?v=o7kWlMZP3lM");
+			.fill("https://www.youtube.com/watch?v=o7kWlMZP3lM");
 
 		await page
 			.getByLabel("Video title")
-			.type("ITZXI Finals - Team Olive vs. Astral [CAMO TENTA PoV]");
+			.fill("ITZXI Finals - Team Olive vs. Astral [CAMO TENTA PoV]");
 
 		await page.getByLabel("Video date").fill("2021-06-20");
 
@@ -49,8 +49,8 @@ test.describe("VoDs page", () => {
 
 		await page.getByTestId("add-match").click();
 
-		await page.getByTestId("match-2-seconds").type("55");
-		await page.getByTestId("match-2-minutes").type("5");
+		await page.getByTestId("match-2-seconds").fill("55");
+		await page.getByTestId("match-2-minutes").fill("5");
 		await page.getByTestId("match-2-mode").selectOption("RM");
 		await page.getByTestId("match-2-stage").selectOption("6");
 		await selectWeapon({
@@ -76,11 +76,11 @@ test.describe("VoDs page", () => {
 
 		await page
 			.getByLabel("YouTube URL")
-			.type("https://www.youtube.com/watch?v=QFk1Gf91SwI");
+			.fill("https://www.youtube.com/watch?v=QFk1Gf91SwI");
 
 		await page
 			.getByLabel("Video title")
-			.type("BIG ! vs Starburst - Splatoon 3 Grand Finals - The Big House 10");
+			.fill("BIG ! vs Starburst - Splatoon 3 Grand Finals - The Big House 10");
 
 		await page.getByLabel("Video date").fill("2022-07-21");
 

package.json

@@ -88,7 +88,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.3",
-		"@playwright/test": "^1.47.0",
+		"@playwright/test": "^1.47.1",
 		"@remix-run/dev": "^2.11.2",
 		"@types/better-sqlite3": "^7.6.11",
 		"@types/bun": "^1.1.8",

playwright.config.ts

@@ -37,8 +37,7 @@ const config: PlaywrightTestConfig = {
 		/* Base URL to use in actions like `await page.goto('/')`. */
 		baseURL: "http://localhost:5173",
 
-		// disabled because https://github.com/microsoft/playwright/issues/27048
-		trace: "off",
+		trace: "retain-on-failure",
 
 		permissions: ["clipboard-read"],
 	},