Add customize user profile page colors e2e test

app/components/CustomizedColorsInput.tsx

@@ -3,7 +3,7 @@ import { Label } from "./Label";
 import * as React from "react";
 import { Button } from "./Button";
 
-const EDITABLE_COLORS = [
+const EDITABLE_CSS_VARS = [
   "bg",
   "bg-darker",
   "bg-lighter",
@@ -13,7 +13,7 @@ const EDITABLE_COLORS = [
 ] as const;
 
 type CustomColorsRecord = Partial<
-  Record<(typeof EDITABLE_COLORS)[number], string>
+  Record<(typeof EDITABLE_CSS_VARS)[number], string>
 >;
 
 export function CustomizedColorsInput({
@@ -31,31 +31,32 @@ export function CustomizedColorsInput({
       <Label>{t("custom.colors.title")}</Label>
       <input type="hidden" name="css" value={JSON.stringify(colors)} />
       <div className="colors__grid">
-        {EDITABLE_COLORS.map((color) => {
+        {EDITABLE_CSS_VARS.map((cssVar) => {
           return (
-            <React.Fragment key={color}>
-              <div>{t(`custom.colors.${color}`)}</div>
+            <React.Fragment key={cssVar}>
+              <div>{t(`custom.colors.${cssVar}`)}</div>
               <input
                 type="color"
                 className="plain"
-                value={colors[color]}
+                value={colors[cssVar]}
                 onChange={(e) => {
                   const extras: Record<string, string> = {};
-                  if (color === "bg-lighter") {
+                  if (cssVar === "bg-lighter") {
                     extras["bg-lightest"] = `${e.target.value}80`;
                   }
-                  setColors({ ...colors, ...extras, [color]: e.target.value });
+                  setColors({ ...colors, ...extras, [cssVar]: e.target.value });
                 }}
+                data-testid={`color-input-${cssVar}`}
               />
               <Button
                 size="tiny"
                 variant="minimal-destructive"
                 onClick={() => {
                   const newColors: Record<string, string> = { ...colors };
-                  if (color === "bg-lighter") {
+                  if (cssVar === "bg-lighter") {
                     delete newColors["bg-lightest"];
                   }
-                  setColors({ ...newColors, [color]: undefined });
+                  setColors({ ...newColors, [cssVar]: undefined });
                 }}
               >
                 {t("actions.reset")}

app/db/seed.ts

@@ -37,6 +37,7 @@ const AMOUNT_OF_CALENDAR_EVENTS = 200;
 
 const basicSeeds = [
   adminUser,
+  makeAdminPatron,
   adminUserWeaponPool,
   nzapUser,
   users,
@@ -109,6 +110,14 @@ function adminUser() {
   });
 }
 
+function makeAdminPatron() {
+  sql
+    .prepare(
+      `update "User" set "patronTier" = 2, "patronSince" = 1674663454 where id = 1`
+    )
+    .run();
+}
+
 function adminUserWeaponPool() {
   for (const [i, weaponSplId] of [200, 1100, 2000, 4000].entries()) {
     sql

e2e/user-page.spec.ts

@@ -38,6 +38,32 @@ test.describe("User page", () => {
     await page.getByText("Stick 0 / Motion -5").isVisible();
   });
 
+  test("customizes user page colors", 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.getByTestId("color-input-bg").fill("#4a412a");
+    await submitEditForm(page);
+
+    // got redirected
+    await expect(page).not.toHaveURL(/edit/);
+    await expect(bodyColor()).resolves.toMatch("#4a412a");
+  });
+
   test("has redirecting custom url", async ({ page }) => {
     await seed(page);
     await impersonate(page);