diff --git a/app/components/Input.tsx b/app/components/Input.tsx index 3fbf52d0a..0cbd9f6b1 100644 --- a/app/components/Input.tsx +++ b/app/components/Input.tsx @@ -2,6 +2,7 @@ import clsx from "clsx"; export function Input({ name, + id, className, minLength, maxLength, @@ -11,10 +12,12 @@ export function Input({ pattern, list, "data-cy": dataCy, + "aria-label": ariaLabel, value, onChange, }: { name?: string; + id?: string; className?: string; minLength?: number; maxLength?: number; @@ -24,6 +27,7 @@ export function Input({ pattern?: string; list?: string; "data-cy"?: string; + "aria-label"?: string; value?: string; onChange?: (e: React.ChangeEvent) => void; }) { @@ -32,6 +36,7 @@ export function Input({ {leftAddon ?
{leftAddon}
: null} {icon} diff --git a/app/routes/u.$identifier/edit.tsx b/app/routes/u.$identifier/edit.tsx index d839eb75a..66ab84fe0 100644 --- a/app/routes/u.$identifier/edit.tsx +++ b/app/routes/u.$identifier/edit.tsx @@ -211,6 +211,7 @@ function CustomUrlInput({ @@ -242,6 +244,7 @@ function InGameNameInputs({
- + {data.country.emoji}{" "} - {data.country.name} + + {data.country.name} +
) : null}
diff --git a/app/utils/playwright.ts b/app/utils/playwright.ts index 4244c5b7e..1a3eac739 100644 --- a/app/utils/playwright.ts +++ b/app/utils/playwright.ts @@ -18,3 +18,11 @@ export async function navigate({ page, url }: { page: Page; url: string }) { await page.goto(url); page.getByTestId("hydrated"); } + +export async function seed(page: Page) { + return page.request.post("/seed"); +} + +export async function impersonate(page: Page, userId = 1) { + return page.request.post(`/auth/impersonate?id=${userId}`); +} diff --git a/e2e/user-page.spec.ts b/e2e/user-page.spec.ts new file mode 100644 index 000000000..b485f98a7 --- /dev/null +++ b/e2e/user-page.spec.ts @@ -0,0 +1,60 @@ +import { expect, type Page, test } from "@playwright/test"; +import { ADMIN_DISCORD_ID } from "~/constants"; +import { impersonate, navigate, seed } from "~/utils/playwright"; +import { 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("edits user profile", async ({ page }) => { + await seed(page); + await impersonate(page); + await navigate({ + page, + url: userPage({ discordId: ADMIN_DISCORD_ID, customUrl: "sendou" }), + }); + + const country = page.getByTestId("country"); + + await expect(country).toHaveText("Finland"); + await goToEditPage(page); + + await page + .getByRole("textbox", { name: "In game name", exact: true }) + .fill("Lean"); + await page + .getByRole("textbox", { name: "In game name discriminator" }) + .fill("1234"); + 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 submitEditForm(page); + + await expect(country).toHaveText("Sweden"); + await page.getByText("My awesome bio").isVisible(); + await page.getByText("Lean#1234").isVisible(); + await page.getByText("Stick 0 / Motion -5").isVisible(); + }); + + test("has redirecting custom url", async ({ page }) => { + await seed(page); + await impersonate(page); + await navigate({ + page, + url: userPage({ discordId: ADMIN_DISCORD_ID }), + }); + + // got redirected + await expect(page).toHaveURL(/sendou/); + + await goToEditPage(page); + await page.getByLabel("Custom URL").fill("lean"); + await submitEditForm(page); + + await expect(page).toHaveURL(/lean/); + }); +}); diff --git a/package.json b/package.json index 2412119f5..60ba95fba 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "test:unit": "uvu -r tsm -r tsconfig-paths/register -i e2e", "test:e2e": "npx playwright test", "checks": "npm run test:unit && npm run lint:styles && npm run lint:ts && npm run prettier:check && npm run typecheck", - "cf": "npm run test:unit && npm run check-translation-jsons && npm run lint:styles -- --fix && npm run lint:ts -- --fix && npm run prettier:write && npm run typecheck" + "cf": "npm run test:unit && npm run check-translation-jsons && npm run lint:styles -- --fix && npm run lint:ts -- --fix && npm run prettier:write && npm run typecheck && npm run test:e2e" }, "dependencies": { "@faker-js/faker": "^7.6.0", diff --git a/playwright.config.ts b/playwright.config.ts index 635c0f80a..9e75dc14f 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -27,8 +27,8 @@ const config: PlaywrightTestConfig = { forbidOnly: !!process.env["CI"], /* Retry on CI only */ retries: process.env["CI"] ? 2 : 0, - /* Opt out of parallel tests on CI. */ - workers: process.env["CI"] ? 1 : undefined, + /* Opt out of parallel tests. */ + workers: 1, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: "list", /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */