sendou.ink/e2e/user-page.spec.ts

import type { Page } from "@playwright/test";
import { NZAP_TEST_DISCORD_ID, NZAP_TEST_ID } from "~/db/seed/constants";
import { ADMIN_DISCORD_ID } from "~/features/admin/admin-constants";
import { userEditProfileBaseSchema } from "~/features/user-page/user-page-schemas";
import {
	expect,
	impersonate,
	isNotVisible,
	navigate,
	seed,
	submit,
	test,
} from "~/utils/playwright";
import { createFormHelpers } from "~/utils/playwright-form";
import { userEditProfilePage, userPage } from "~/utils/urls";

const goToEditPage = (page: Page) =>
	page.getByText("Edit", { exact: true }).click();
const submitEditForm = (page: Page) =>
	page.getByText("Save", { exact: true }).click();

test.describe("User page", () => {
	test("uses badge pagination", async ({ page }) => {
		await seed(page);
		await navigate({
			page,
			url: userPage({ discordId: NZAP_TEST_DISCORD_ID }),
		});

		await expect(page.getByTestId("badge-display")).toBeVisible();
		await isNotVisible(page.getByTestId("badge-pagination-button"));

		await navigate({
			page,
			url: userPage({ discordId: ADMIN_DISCORD_ID, customUrl: "sendou" }),
		});

		await expect(page.getByAltText("Paddling Pool Weekly")).toBeVisible();
		await page.getByTestId("badge-pagination-button").nth(1).click();

		// test changing the big badge
		await page.getByAltText("Lobster Crossfire").click();
		await expect(page.getByAltText("Lobster Crossfire")).toHaveAttribute(
			"width",
			"125",
		);
	});

	test("customize which badge is shown as big by default as normal user", async ({
		page,
	}) => {
		await seed(page);
		await impersonate(page, NZAP_TEST_ID);
		await navigate({
			page,
			url: userEditProfilePage({ discordId: NZAP_TEST_DISCORD_ID }),
		});

		const badgeSelect = page.getByTestId("badges-selector");
		await badgeSelect.selectOption("5");
		await submit(page);

		await expect(
			page.getByAltText("It's Dangerous to go Alone"),
		).toHaveAttribute("width", "125");
	});

	test("customize big badge + small badge first page order as supporter", async ({
		page,
	}) => {
		await seed(page);
		await impersonate(page);
		await navigate({
			page,
			url: userEditProfilePage({ discordId: ADMIN_DISCORD_ID }),
		});

		const badgeSelect = page.getByTestId("badges-selector");
		await badgeSelect.selectOption("1");
		await expect(page.getByTestId("badge-display")).toBeVisible();
		await badgeSelect.selectOption("11");
		await submit(page);

		await expect(page.getByAltText("4v4 Sundaes")).toBeVisible();
		await expect(page.getByAltText("Lobster Crossfire")).toBeVisible();
	});

	test("edits user profile", async ({ page }) => {
		await seed(page);
		await impersonate(page);
		await navigate({
			page,
			url: userPage({ discordId: ADMIN_DISCORD_ID, customUrl: "sendou" }),
		});

		await page.getByTestId("flag-FI").isVisible();
		await goToEditPage(page);

		const form = createFormHelpers(page, userEditProfileBaseSchema);

		await form.fill("inGameName", "Lean#1234");
		await page.getByLabel("R-stick sens").selectOption("0");
		await page.getByLabel("Motion sens").selectOption("-50");

		await page.getByLabel("Country").click();
		await page.getByRole("searchbox", { name: "Search" }).fill("Sweden");
		await page.getByRole("option", { name: "Sweden" }).click();

		await form.fill("bio", "My awesome bio");
		await form.submit();

		await page.getByTestId("flag-SE").isVisible();
		await page.getByText("My awesome bio").isVisible();
		await page.getByText("Lean#1234").isVisible();
		await page.getByText("Stick 0 / Motion -5").isVisible();
	});

	test("customizes user page colors and resets them", async ({ page }) => {
		await seed(page);
		await impersonate(page);
		await navigate({
			page,
			url: userPage({ discordId: ADMIN_DISCORD_ID, customUrl: "sendou" }),
		});

		const body = page.locator("body");
		const bodyColor = () =>
			body.evaluate((element) =>
				window.getComputedStyle(element).getPropertyValue("--bg").trim(),
			);

		await expect(bodyColor()).resolves.toMatch(/#ebebf0/);

		await goToEditPage(page);

		await page.locator("span").filter({ hasText: "Custom colors" }).click();

		await page.getByTestId("color-input-bg").fill("#4a412a");

		// also test filling this because it's a special case as it also changes bg-lightest
		await page.getByTestId("color-input-bg-lighter").fill("#4a412a");

		await submitEditForm(page);

		// got redirected
		await expect(page).not.toHaveURL(/edit/);
		await page.reload();
		await expect(bodyColor()).resolves.toMatch(/#4a412a/);

		// then lets test resetting the colors is possible
		await goToEditPage(page);
		await page.locator("span").filter({ hasText: "Custom colors" }).click();

		for (const button of await page
			.getByRole("button", { name: "Reset" })
			.all()) {
			await button.click();
		}

		await submitEditForm(page);

		// got redirected
		await expect(page).not.toHaveURL(/edit/);
		await page.reload();
		await expect(bodyColor()).resolves.toMatch(/#ebebf0/);
	});

	test("edits weapon pool", async ({ page }) => {
		await seed(page);
		await impersonate(page);
		await navigate({
			page,
			url: userPage({ discordId: ADMIN_DISCORD_ID, customUrl: "sendou" }),
		});

		for (const [i, id] of [200, 1100, 2000, 4000].entries()) {
			await expect(page.getByTestId(`${id}-${i + 1}`)).toBeVisible();
		}

		await goToEditPage(page);

		const form = createFormHelpers(page, userEditProfileBaseSchema);

		await form.selectWeapons("weapons", ["Range Blaster"]);
		await page
			.getByRole("button", { name: /Inkbrush/ })
			.getByRole("button", { name: "Delete" })
			.click();

		await form.submit();

		for (const [i, id] of [200, 2000, 4000, 220].entries()) {
			await expect(page.getByTestId(`${id}-${i + 1}`)).toBeVisible();
		}
	});
});