From 3c416632db18fa076d99af13dda1f2faaa8cbf40 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 14 Sep 2024 12:26:49 +0300
Subject: [PATCH] E2E test

---
 app/db/seed/index.ts                          |   9 ++-
 app/features/front-page/routes/index.tsx      |   2 +-
 app/features/team/routes/t.$customUrl.tsx     |   6 +-
 .../user-page/routes/u.$identifier.index.tsx  |  13 ++++-
 app/utils/playwright.ts                       |   6 +-
 bun.lockb                                     | Bin 490560 -> 490560 bytes
 e2e/team.spec.ts                              |  54 +++++++++++++++---
 e2e/tournament.spec.ts                        |   2 +-
 e2e/user-page.spec.ts                         |   2 +-
 e2e/vods.spec.ts                              |  12 ++--
 package.json                                  |   2 +-
 playwright.config.ts                          |   3 +-
 12 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/app/db/seed/index.ts b/app/db/seed/index.ts
index 285edf669d..7764cfc0c1 100644
--- a/app/db/seed/index.ts
+++ b/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
diff --git a/app/features/front-page/routes/index.tsx b/app/features/front-page/routes/index.tsx
index f5a09f2ccb..5487b7744e 100644
--- a/app/features/front-page/routes/index.tsx
+++ b/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 };
diff --git a/app/features/team/routes/t.$customUrl.tsx b/app/features/team/routes/t.$customUrl.tsx
index e86bd6f93c..019e22eeb4 100644
--- a/app/features/team/routes/t.$customUrl.tsx
+++ b/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"
diff --git a/app/features/user-page/routes/u.$identifier.index.tsx b/app/features/user-page/routes/u.$identifier.index.tsx
index 1a7aca5686..57f11c2e29 100644
--- a/app/features/user-page/routes/u.$identifier.index.tsx
+++ b/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"
 		>
diff --git a/app/utils/playwright.ts b/app/utils/playwright.ts
index 44a94dc81e..7468a27529 100644
--- a/app/utils/playwright.ts
+++ b/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;
 }
 
diff --git a/bun.lockb b/bun.lockb
index e5c7659f12b784d53fbefc848f67bd12afeec7af..61f13808136a78c7f6a14d0ca4f0a25c03ec1da1 100755
GIT binary patch
delta 384
zcmX@`L-xQA*$H|IOlMw{w%R7~ZrSpvCg51ftoh5_8y7~(Mekv_RW15*i%+B9RzF6m
zqRA;C8q+5fF-m|KlLNdtrr#)H6ab3`gfViqOBOS3mn>$w^2nid>&k*FlFur>zRGWS
z>Ks(qQ!QJUyQXJ%b64Wp6Km%`PWfE2{f0yMAEhggBw8N|cE$ghSbX;Y)9U!lf@;--
z*oV_~!<Z%NJsr8a*H^shnvt_6uxsV*pth^2ebVC5>weC>X)^UM?^n}p;opKp=kJX;
zUGJOeEFa=_c=h#TM?;;a&s=#UO6>k*Mg|5(hJXD3fb@J81~_2pj@YDn>HfCWxz8h8
zCNEG-2y0ML_;^{w-g<J#2d7yP5j;KJ{$Xi5B_Agz{^8n_v0<^ol+C>>S{zdM&)4dn
zkXUNjem9JH``s{>rxO?r+Ydiy*?#yrtBx|G;q(t&Y?44BE^fB%T-@xIInys?uq#gA
bP|nUdJ-3`)7^tGLoIRA$aQpRg_DmK4IDDoO

delta 384
zcmX@`L-xQA*$H|IGfvOA{PM=ilc&R^i_0}K>Q7#6T75$7zzOS;-<mrkb(c5#ZS`Z6
zDw-_ftucK<5u*f%F*(4SWBQFEMgg#BKo}!uyJRurcFAI<D~}w!7-XmFNQ6y!q1?V-
zp|)0`@Y=qP#f*(V+urs>s=nMRvr<>{bN^ibf`otT4o??dGq<|=Z_18+(^{_{;Ck?)
zRfS`^ZWyyfeb3WHZfjSTToC`4!`;moG3Vn;!Fk%o&o6p%1<ErTqy>Mob>Q8z_g}{3
z*1x+?c${$Muhm|0CWO7k^Z2z1xj!nR85tND8UFGA1Jd(Z7~p{AicP!!;Z+llADY<8
z{N3h??+<IiFL!@0+hgSL-!yrBU$5R@h2HXMYLdx6Jr6`*NqOU$n;g6O`J#8~W<TZc
zxZ9uSYrh-Dy!~z%%hL&r2JMHRvur>7oK;7e(O~)qE;dP^5EnPwb}nvq%be*+Eo_R@
cH<Yt;PR}i87Y3?mEN2g8G}wN<oIR5T0I3S4Z2$lO

diff --git a/e2e/team.spec.ts b/e2e/team.spec.ts
index 814816b413..bfe03e059e 100644
--- a/e2e/team.spec.ts
+++ b/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();
+	});
 });
diff --git a/e2e/tournament.spec.ts b/e2e/tournament.spec.ts
index c7d8fbbe14..055ca6f66a 100644
--- a/e2e/tournament.spec.ts
+++ b/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();
diff --git a/e2e/user-page.spec.ts b/e2e/user-page.spec.ts
index 5b92a38b16..11d2e0e8d1 100644
--- a/e2e/user-page.spec.ts
+++ b/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();
diff --git a/e2e/vods.spec.ts b/e2e/vods.spec.ts
index b0c0ceab8a..1d563339ea 100644
--- a/e2e/vods.spec.ts
+++ b/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");
 
diff --git a/package.json b/package.json
index cc862b8748..aa08ae5618 100644
--- a/package.json
+++ b/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",
diff --git a/playwright.config.ts b/playwright.config.ts
index aed5fa20d9..d6e2d9421e 100644
--- a/playwright.config.ts
+++ b/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"],
 	},