sendou.ink/e2e/team.spec.ts

import { NZAP_TEST_ID } from "~/db/seed/constants";
import { ADMIN_DISCORD_ID, ADMIN_ID } from "~/features/admin/admin-constants";
import {
	createTeamSchema,
	editTeamFormSchema,
} from "~/features/team/team-schemas";
import { editTeamPage, teamPage, userPage } from "~/utils/urls";
import {
	expect,
	impersonate,
	isNotVisible,
	modalClickConfirmButton,
	navigate,
	seed,
	submit,
	test,
	waitForPOSTResponse,
} from "./helpers/playwright";
import { createFormHelpers } from "./helpers/playwright-form";

test.describe("New team creation", () => {
	test("creates new team", async ({ page }) => {
		await seed(page);
		await impersonate(page, NZAP_TEST_ID);
		await navigate({ page, url: "/" });

		await page.getByTestId("anything-adder-menu-button").first().click();
		await page.getByTestId("menu-item-team").click();

		await expect(page).toHaveURL(/t\/new/);

		const form = createFormHelpers(page, createTeamSchema);
		await form.fill("name", "Chimera");
		await form.submit();

		await expect(page).toHaveURL(/chimera/);
	});
});

test.describe("Team page", () => {
	test("edit team info", async ({ page }) => {
		await seed(page);
		await impersonate(page, ADMIN_ID);
		await navigate({ page, url: teamPage("alliance-rogue") });

		await page.getByTestId("edit-team-button").click();

		const form = createFormHelpers(page, editTeamFormSchema, {
			submitTestId: "edit-team-submit-button",
		});

		await form.fill("name", "Better Alliance Rogue");
		await form.fill("bsky", "BetterAllianceRogue");
		await form.fill("bio", "shorter bio");

		await form.submit();

		await expect(page).toHaveURL(/better-alliance-rogue/);
		await page.getByText("shorter bio").isVisible();
		await expect(page.getByTestId("bsky-link").first()).toHaveAttribute(
			"href",
			"https://bsky.app/profile/BetterAllianceRogue",
		);
	});

	test("kicks a member & changes a role", async ({ page }) => {
		await seed(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("member-row-0")
			.locator("select")
			.selectOption("SUPPORT");

		await expect(page.getByTestId("member-row-3")).toBeVisible();
		await page
			.locator("fieldset:has([data-testid='member-row-3'])")
			.getByRole("button", { name: "Remove item" })
			.click();
		await isNotVisible(page.getByTestId("member-row-3"));

		await submit(page);

		await navigate({ page, url: teamPage("alliance-rogue") });

		await expect(page.getByTestId("member-row-role-0")).toHaveText("Support");
	});

	test("sets a custom role for a member", async ({ page }) => {
		await seed(page);
		await impersonate(page, ADMIN_ID);
		await navigate({ page, url: teamPage("alliance-rogue") });

		await page.getByTestId("manage-roster-button").click();

		const memberRow = page.getByTestId("member-row-1");
		await memberRow.locator("select").first().selectOption("CUSTOM");
		await memberRow.getByRole("textbox").fill("Strategist");
		await memberRow.locator("select").nth(1).selectOption("OTHER");

		await submit(page);

		await navigate({ page, url: teamPage("alliance-rogue") });

		// custom role is classified as "OTHER" so it lives under the "Other" tab
		await page.getByRole("tab", { name: /Other/ }).click();
		await expect(page.getByText("Strategist").first()).toBeVisible();
	});

	test("reorders members via move buttons", async ({ page }) => {
		await seed(page);
		await impersonate(page, ADMIN_ID);
		await navigate({ page, url: teamPage("alliance-rogue") });

		await page.getByTestId("manage-roster-button").click();

		const firstName = await page
			.getByTestId("member-row-username-0")
			.innerText();
		const secondName = await page
			.getByTestId("member-row-username-1")
			.innerText();
		expect(firstName).not.toBe(secondName);

		const firstRow = page.locator("fieldset:has([data-testid='member-row-0'])");
		const lastRow = page.locator("fieldset:has([data-testid='member-row-3'])");

		// the first member can't move up and the last can't move down
		await expect(
			firstRow.getByRole("button", { name: "Move up" }),
		).toBeDisabled();
		await expect(
			lastRow.getByRole("button", { name: "Move down" }),
		).toBeDisabled();

		// move the first member down one slot
		await firstRow.getByRole("button", { name: "Move down" }).click();

		await expect(page.getByTestId("member-row-username-0")).toHaveText(
			secondName,
		);
		await expect(page.getByTestId("member-row-username-1")).toHaveText(
			firstName,
		);

		await submit(page);

		await navigate({ page, url: teamPage("alliance-rogue") });
		await page.getByTestId("manage-roster-button").click();

		// the new order is persisted
		await expect(page.getByTestId("member-row-username-0")).toHaveText(
			secondName,
		);
	});

	test("deletes team", async ({ page }) => {
		await seed(page);
		await impersonate(page, ADMIN_ID);
		await navigate({ page, url: teamPage("alliance-rogue") });

		await page.getByTestId("team-actions-menu-button").click();
		await page.getByTestId("delete-team-button").click();
		await modalClickConfirmButton(page);

		await expect(page).not.toHaveURL(/alliance-rogue/);
	});

	test("resets invite code, joins team, leaves, rejoins", async ({ page }) => {
		await seed(page);
		await impersonate(page, ADMIN_ID);
		await navigate({ page, url: teamPage("alliance-rogue") });

		await page.getByTestId("manage-roster-button").click();

		const oldInviteLink = await page.getByTestId("invite-link").innerText();

		await submit(page, "reset-invite-link-button");

		await expect(page.getByTestId("invite-link")).not.toHaveText(oldInviteLink);
		const newInviteLink = await page.getByTestId("invite-link").innerText();

		await impersonate(page, NZAP_TEST_ID);

		await navigate({ page, url: newInviteLink });
		await submit(page);

		await page.getByTestId("team-actions-menu-button").click();
		await page.getByTestId("leave-team-button").click();
		await modalClickConfirmButton(page);

		await navigate({ page, url: newInviteLink });
		await submit(page);

		await page.getByTestId("team-actions-menu-button").click();
		await expect(page.getByTestId("leave-team-button")).toBeVisible();
	});

	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 page.getByTestId("team-actions-menu-button").click();
		await waitForPOSTResponse(page, async () => {
			await page.getByTestId("make-main-team-button").click();
		});

		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("team-actions-menu-button").click();
		await expect(page.getByTestId("main-team-indicator")).toBeVisible();
		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();
	});

	test("makes another user editor, who can edit the page & becomes owner after the original leaves", async ({
		page,
	}) => {
		await seed(page, "NZAP_IN_TEAM");
		await impersonate(page, ADMIN_ID);
		await navigate({ page, url: teamPage("alliance-rogue") });

		await page.getByTestId("manage-roster-button").click();

		await page.getByLabel("Editor").first().click({ force: true });
		await submit(page);

		await impersonate(page, NZAP_TEST_ID);
		await navigate({ page, url: editTeamPage("alliance-rogue") });

		const editorForm = createFormHelpers(page, editTeamFormSchema, {
			submitTestId: "edit-team-submit-button",
		});
		await editorForm.fill("bio", "from editor");
		await editorForm.submit();

		await expect(page).toHaveURL(/alliance-rogue/);
		await page.getByText("from editor").isVisible();

		await impersonate(page, ADMIN_ID);
		await navigate({ page, url: teamPage("alliance-rogue") });
		await page.getByTestId("team-actions-menu-button").click();
		await page.getByTestId("leave-team-button").click();
		await page.getByText("New owner will be N-ZAP").isVisible();
		await modalClickConfirmButton(page);

		await page.getByTestId("team-actions-menu-button").click();
		await isNotVisible(page.getByTestId("leave-team-button"));
	});
});