From 0c32456e72f89337455f5e9706b73e165700a739 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 23 Apr 2023 13:26:18 +0300
Subject: [PATCH] Initial builds E2E tests

---
 app/components/BuildCard.tsx              | 10 ++-
 app/components/Combobox.tsx               |  1 +
 app/db/models/builds/countByUserId.sql    |  6 +-
 app/db/models/builds/queries.server.ts    | 11 ++-
 app/db/seed/constants.ts                  |  7 ++
 app/db/seed/index.ts                      | 19 ++---
 app/routes/calendar/new.tsx               |  2 +-
 app/routes/u.$identifier.tsx              | 15 +++-
 app/routes/u.$identifier/builds/index.tsx |  6 +-
 app/routes/u.$identifier/builds/new.tsx   |  4 +-
 app/utils/playwright.ts                   | 25 +++++-
 e2e/builds.spec.ts                        | 99 +++++++++++++++++++++++
 12 files changed, 181 insertions(+), 24 deletions(-)
 create mode 100644 app/db/seed/constants.ts
 create mode 100644 e2e/builds.spec.ts

diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index 20f1139af..2b6647e66 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -84,7 +84,10 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
   } = build;
 
   return (
-    <div className={clsx("build", { build__private: build.private })}>
+    <div
+      className={clsx("build", { build__private: build.private })}
+      data-testid="build-card"
+    >
       <div>
         <div className="build__top-row">
           {modes && modes.length > 0 && (
@@ -101,7 +104,9 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
               ))}
             </div>
           )}
-          <h2 className="build__title">{title}</h2>
+          <h2 className="build__title" data-testid="build-title">
+            {title}
+          </h2>
         </div>
         <div className="build__date-author-row">
           {owner && (
@@ -193,6 +198,7 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
               variant="minimal"
               size="tiny"
               to={`new?buildId=${id}&userId=${user!.id}`}
+              testId="edit-build"
             >
               <EditIcon className="build__icon" />
             </LinkButton>
diff --git a/app/components/Combobox.tsx b/app/components/Combobox.tsx
index 9a9684902..49f944f2f 100644
--- a/app/components/Combobox.tsx
+++ b/app/components/Combobox.tsx
@@ -221,6 +221,7 @@ export function UserCombobox({
   );
 }
 
+// TODO: [object Object] flickers when server rendered with initialValue
 export function WeaponCombobox({
   id,
   required,
diff --git a/app/db/models/builds/countByUserId.sql b/app/db/models/builds/countByUserId.sql
index d21ec67b4..953af853b 100644
--- a/app/db/models/builds/countByUserId.sql
+++ b/app/db/models/builds/countByUserId.sql
@@ -3,4 +3,8 @@ select
 from
   "Build"
 where
-  "ownerId" = @userId;
\ No newline at end of file
+  "Build"."ownerId" = @userId
+  and (
+    "Build"."private" = 0
+    or "Build"."ownerId" = @loggedInUserId
+  )
diff --git a/app/db/models/builds/queries.server.ts b/app/db/models/builds/queries.server.ts
index 70dcec72c..168b631b7 100644
--- a/app/db/models/builds/queries.server.ts
+++ b/app/db/models/builds/queries.server.ts
@@ -90,8 +90,15 @@ export const updateByReplacing = sql.transaction(
   }
 );
 
-export function countByUserId(userId: Build["ownerId"]) {
-  return (countByUserIdStm.get({ userId })?.count ?? 0) as number;
+export function countByUserId({
+  userId,
+  loggedInUserId,
+}: {
+  userId: Build["ownerId"];
+  loggedInUserId?: UserWithPlusTier["id"];
+}) {
+  return (countByUserIdStm.get({ userId, loggedInUserId })?.count ??
+    0) as number;
 }
 
 export interface BuildWeaponWithTop500Info {
diff --git a/app/db/seed/constants.ts b/app/db/seed/constants.ts
new file mode 100644
index 000000000..faf867aee
--- /dev/null
+++ b/app/db/seed/constants.ts
@@ -0,0 +1,7 @@
+export const ADMIN_TEST_AVATAR = "f34d6169979e60dfe63de0f96c8050f3";
+
+export const NZAP_TEST_DISCORD_ID = "455039198672453645";
+export const NZAP_TEST_AVATAR = "f809176af93132c3db5f0a5019e96339"; // https://cdn.discordapp.com/avatars/455039198672453645/f809176af93132c3db5f0a5019e96339.webp?size=160
+export const NZAP_TEST_ID = 2;
+
+export const AMOUNT_OF_CALENDAR_EVENTS = 200;
diff --git a/app/db/seed/index.ts b/app/db/seed/index.ts
index c8ac0531d..9bcd14f52 100644
--- a/app/db/seed/index.ts
+++ b/app/db/seed/index.ts
@@ -30,14 +30,13 @@ import { mySlugify } from "~/utils/urls";
 import { createVod } from "~/features/vods/queries/createVod.server";
 
 import placements from "./placements.json";
-
-const ADMIN_TEST_AVATAR = "f34d6169979e60dfe63de0f96c8050f3";
-
-const NZAP_TEST_DISCORD_ID = "455039198672453645";
-const NZAP_TEST_AVATAR = "f809176af93132c3db5f0a5019e96339"; // https://cdn.discordapp.com/avatars/455039198672453645/f809176af93132c3db5f0a5019e96339.webp?size=160
-const NZAP_TEST_ID = 2;
-
-const AMOUNT_OF_CALENDAR_EVENTS = 200;
+import {
+  NZAP_TEST_DISCORD_ID,
+  ADMIN_TEST_AVATAR,
+  NZAP_TEST_AVATAR,
+  NZAP_TEST_ID,
+  AMOUNT_OF_CALENDAR_EVENTS,
+} from "./constants";
 
 const calendarEventWithToToolsSz = () => calendarEventWithToTools(true);
 const calendarEventWithToToolsTeamsSz = () =>
@@ -875,7 +874,9 @@ function adminBuilds() {
 function manySplattershotBuilds() {
   // ensure 500 has at least one splattershot build for x placement test
   const users = [
-    ...userIdsInRandomOrder().filter((id) => id !== 500 && id !== ADMIN_ID),
+    ...userIdsInRandomOrder().filter(
+      (id) => id !== 500 && id !== ADMIN_ID && id !== NZAP_TEST_ID
+    ),
     500,
   ];
 
diff --git a/app/routes/calendar/new.tsx b/app/routes/calendar/new.tsx
index 731e9dc3b..8b3aeff97 100644
--- a/app/routes/calendar/new.tsx
+++ b/app/routes/calendar/new.tsx
@@ -162,7 +162,7 @@ export const action: ActionFunction = async ({ request }) => {
   };
 
   // TODO: messing with these and "one mode selection" can cause problems when teams
-  // have already chosend maps for their pools
+  // have already chosen maps for their pools
   const deserializedMaps = (() => {
     if (!data.pool) return;
 
diff --git a/app/routes/u.$identifier.tsx b/app/routes/u.$identifier.tsx
index 83aabe6b8..6c0653d82 100644
--- a/app/routes/u.$identifier.tsx
+++ b/app/routes/u.$identifier.tsx
@@ -16,6 +16,7 @@ import { userTopPlacements } from "~/features/top-search";
 import { findVods } from "~/features/vods";
 import { useTranslation } from "~/hooks/useTranslation";
 import { useUser } from "~/modules/auth";
+import { getUserId } from "~/modules/auth/user.server";
 import { canAddCustomizedColorsToUserProfile } from "~/permissions";
 import styles from "~/styles/u.css";
 import { notFoundIfFalsy, type SendouRouteHandle } from "~/utils/remix";
@@ -69,7 +70,8 @@ export const userParamsSchema = z.object({ identifier: z.string() });
 
 export type UserPageLoaderData = SerializeFrom<typeof loader>;
 
-export const loader = ({ params }: LoaderArgs) => {
+export const loader = async ({ params, request }: LoaderArgs) => {
+  const loggedInUser = await getUserId(request);
   const { identifier } = userParamsSchema.parse(params);
   const user = notFoundIfFalsy(db.users.findByIdentifier(identifier));
 
@@ -94,7 +96,10 @@ export const loader = ({ params }: LoaderArgs) => {
     css: canAddCustomizedColorsToUserProfile(user) ? user.css : undefined,
     badges: db.badges.findByOwnerId(user.id),
     results: db.calendarEvents.findResultsByUserId(user.id),
-    buildsCount: db.builds.countByUserId(user.id),
+    buildsCount: db.builds.countByUserId({
+      userId: user.id,
+      loggedInUserId: loggedInUser?.id,
+    }),
     vods: findVods({ userId: user.id }),
     playerId,
     topPlacements,
@@ -125,7 +130,11 @@ export default function UserPageLayout() {
           </SubNavLink>
         )}
         {(isOwnPage || data.buildsCount > 0) && (
-          <SubNavLink to={userBuildsPage(data)} prefetch="intent">
+          <SubNavLink
+            to={userBuildsPage(data)}
+            prefetch="intent"
+            data-testid="builds-tab"
+          >
             {t("pages.builds")} ({data.buildsCount})
           </SubNavLink>
         )}
diff --git a/app/routes/u.$identifier/builds/index.tsx b/app/routes/u.$identifier/builds/index.tsx
index b9f9c07a7..7be2b6a4a 100644
--- a/app/routes/u.$identifier/builds/index.tsx
+++ b/app/routes/u.$identifier/builds/index.tsx
@@ -77,7 +77,11 @@ export default function UserBuildsPage() {
       {isOwnPage && (
         <div className="stack sm horizontal items-center justify-end">
           {data.builds.length < BUILD.MAX_COUNT ? (
-            <LinkButton to={userNewBuildPage(parentPageData)} size="tiny">
+            <LinkButton
+              to={userNewBuildPage(parentPageData)}
+              size="tiny"
+              testId="new-build-button"
+            >
               {t("addBuild")}
             </LinkButton>
           ) : (
diff --git a/app/routes/u.$identifier/builds/new.tsx b/app/routes/u.$identifier/builds/new.tsx
index b52bddee5..f05926bcd 100644
--- a/app/routes/u.$identifier/builds/new.tsx
+++ b/app/routes/u.$identifier/builds/new.tsx
@@ -228,6 +228,7 @@ function TitleInput() {
         {t("forms.title")}
       </Label>
       <input
+        id="title"
         name="title"
         required
         minLength={BUILD.TITLE_MIN_LENGTH}
@@ -285,7 +286,7 @@ function ModeCheckboxes() {
               name={mode}
               type="checkbox"
               defaultChecked={modes.includes(mode)}
-              data-cy={`${mode}-checkbox`}
+              data-testid={`${mode}-checkbox`}
             />
           </div>
         ))}
@@ -357,6 +358,7 @@ function WeaponsSelector() {
                     disabled={weapons.length === BUILD.MAX_WEAPONS_COUNT}
                     onClick={() => setWeapons((weapons) => [...weapons, 0])}
                     icon={<PlusIcon />}
+                    testId="add-weapon-button"
                   />
                   {weapons.length > 1 && (
                     <Button
diff --git a/app/utils/playwright.ts b/app/utils/playwright.ts
index 86613f21d..c449ae689 100644
--- a/app/utils/playwright.ts
+++ b/app/utils/playwright.ts
@@ -9,10 +9,27 @@ export async function selectWeapon({
   name: string;
   inputName?: string;
 }) {
-  const weaponCombobox = page.getByTestId(`${inputName}-combobox-input`);
-  await weaponCombobox.clear();
-  await weaponCombobox.fill(name);
-  await weaponCombobox.press("Enter");
+  return selectComboboxValue({ page, value: name, inputName });
+}
+
+export async function selectComboboxValue({
+  page,
+  value,
+  inputName,
+  locator,
+}: {
+  page: Page;
+  value: string;
+  inputName?: string;
+  locator?: Locator;
+}) {
+  if (!locator && !inputName) {
+    throw new Error("Must provide either locator or inputName");
+  }
+  const combobox = locator ?? page.getByTestId(`${inputName!}-combobox-input`);
+  await combobox.clear();
+  await combobox.fill(value);
+  await combobox.press("Enter");
 }
 
 /** page.goto that waits for the page to be hydrated before proceeding */
diff --git a/e2e/builds.spec.ts b/e2e/builds.spec.ts
new file mode 100644
index 000000000..5daf74093
--- /dev/null
+++ b/e2e/builds.spec.ts
@@ -0,0 +1,99 @@
+import { expect, test } from "@playwright/test";
+import { ADMIN_DISCORD_ID } from "~/constants";
+import { NZAP_TEST_DISCORD_ID, NZAP_TEST_ID } from "~/db/seed/constants";
+import {
+  impersonate,
+  navigate,
+  seed,
+  selectComboboxValue,
+} from "~/utils/playwright";
+import { userBuildsPage, userNewBuildPage } from "~/utils/urls";
+
+test.describe("Builds", () => {
+  test("adds a build", async ({ page }) => {
+    await seed(page);
+    await impersonate(page, NZAP_TEST_ID);
+    await navigate({
+      page,
+      url: userNewBuildPage({ discordId: NZAP_TEST_DISCORD_ID }),
+    });
+
+    await selectComboboxValue({
+      locator: page.getByTestId("weapon-combobox-input").first(),
+      value: "Tenta Brella",
+      page,
+    });
+    await page.getByTestId("add-weapon-button").click();
+    await selectComboboxValue({
+      locator: page.getByTestId("weapon-combobox-input").nth(1),
+      value: "Splat Brella",
+      page,
+    });
+
+    await selectComboboxValue({
+      inputName: "HEAD",
+      value: "White Headband",
+      page,
+    });
+    await selectComboboxValue({
+      inputName: "CLOTHES",
+      value: "Basic Tee",
+      page,
+    });
+    await selectComboboxValue({
+      inputName: "SHOES",
+      value: "Blue Lo-Tops",
+      page,
+    });
+
+    for (let i = 0; i < 12; i++) {
+      await page.getByTestId("ISM-ability-button").click();
+    }
+
+    await page.getByLabel("Title").fill("Test Build");
+    await page.getByLabel("Description").fill("Test Description");
+    await page.getByTestId("SZ-checkbox").click();
+
+    await page.getByTestId("submit-button").click();
+
+    await expect(page.getByTestId("new-build-button")).toBeVisible();
+
+    await expect(page.getByAltText("Tenta Brella")).toBeVisible();
+    await expect(page.getByAltText("Splat Brella")).toBeVisible();
+
+    await expect(page.getByAltText("Tower Control")).toBeVisible();
+    await expect(page.getByAltText("Splat Zones")).not.toBeVisible();
+
+    await expect(page.getByTestId("build-title")).toContainText("Test Build");
+  });
+
+  test("makes build private", async ({ page }) => {
+    await seed(page);
+    await impersonate(page);
+    await navigate({
+      page,
+      url: userBuildsPage({ discordId: ADMIN_DISCORD_ID }),
+    });
+
+    await page.getByTestId("edit-build").first().click();
+
+    await page.getByLabel("Private").click();
+
+    await page.getByTestId("submit-button").click();
+
+    await expect(page.getByTestId("builds-tab")).toContainText("Builds (50)");
+    await expect(page.getByTestId("build-card").first()).toContainText(
+      "Private"
+    );
+
+    await impersonate(page, NZAP_TEST_ID);
+    await navigate({
+      page,
+      url: userBuildsPage({ discordId: ADMIN_DISCORD_ID }),
+    });
+    await expect(page.getByTestId("builds-tab")).toContainText("Builds (49)");
+    await expect(page.getByTestId("build-card").first()).not.toContainText(
+      "Private"
+    );
+  });
+});