Add user build tab E2E tests

Closes #909

app/components/AbilitiesSelector.tsx

@@ -61,6 +61,7 @@ export function AbilitiesSelector({
             className="ability-selector__ability-button"
             type="button"
             onClick={() => onButtonClick(ability)}
+            data-cy={`${ability.name}-ability-button`}
           >
             <Image
               alt=""

app/components/Ability.tsx

@@ -28,6 +28,7 @@ export function Ability({
         } as any
       }
       onClick={onClick}
+      data-cy={`${ability}-ability`}
     >
       <Image alt="" path={abilityImageUrl(ability)} />
     </div>

app/components/BuildCard.tsx

@@ -68,6 +68,7 @@ export function BuildCard({
         variant="minimal"
         tiny
         to={`new?buildId=${id}&userId=${user!.id}`}
+        data-cy="edit-build-button"
       >
         {t("builds:buildCard.edit")}
       </LinkButton>
@@ -83,6 +84,7 @@ export function BuildCard({
           variant="minimal-destructive"
           tiny
           type="submit"
+          data-cy="delete-build-button"
         >
           {t("common:actions.delete")}
         </Button>
@@ -91,7 +93,7 @@ export function BuildCard({
   ].filter(Boolean);
 
   return (
-    <div className="build">
+    <div className="build" data-cy="build-card">
       <div>
         <div className="build__top-row">
           <h2 className="build__title">{title}</h2>

app/components/layout/index.tsx

@@ -57,6 +57,7 @@ export const Layout = React.memo(function Layout({
           <button
             className="layout__header__color-mode-button"
             onClick={toggleTheme}
+            data-cy="theme-switch-button"
           >
             <SunIcon className="light-mode-only layout__header__color-mode-button__icon" />
             <MoonIcon className="dark-mode-only layout__header__color-mode-button__icon" />

app/routes/u.$identifier/builds/index.tsx

@@ -68,7 +68,7 @@ export default function UserBuildsPage() {
     <Main className="stack lg">
       {data.builds.length < BUILD.MAX_COUNT && isOwnPage && (
         <div className="stack items-end">
-          <LinkButton to="new" tiny>
+          <LinkButton to="new" tiny data-cy="new-build-button">
             {t("addBuild")}
           </LinkButton>
         </div>

app/routes/u.$identifier/builds/new.tsx

@@ -272,6 +272,7 @@ function ModeCheckboxes() {
               name={mode}
               type="checkbox"
               defaultChecked={buildToEdit?.modes?.includes(mode)}
+              data-cy={`${mode}-checkbox`}
             />
           </div>
         ))}

cypress/e2e/builds.cy.ts

@@ -0,0 +1,87 @@
+import { ADMIN_DISCORD_ID } from "~/constants";
+import { userBuildsPage } from "~/utils/urls";
+
+export {};
+
+describe("user builds tab", () => {
+  beforeEach(() => {
+    cy.seed();
+  });
+
+  it("views builds of other user", () => {
+    cy.visit(userBuildsPage(ADMIN_DISCORD_ID));
+
+    cy.getCy("build-card").its("length").should("eq", 50);
+
+    cy.getCy("new-build-button").should("not.exist");
+  });
+
+  it("operates ability selector", () => {
+    cy.auth(1);
+    cy.visit(userBuildsPage(ADMIN_DISCORD_ID));
+    cy.getCy("new-build-button").click();
+
+    cy.getCy("UNKNOWN-ability").its("length").should("eq", 12);
+
+    // adding main ability only works once
+    for (let i = 0; i < 3; i++) {
+      cy.getCy("DR-ability-button").click();
+    }
+
+    cy.getCy("DR-ability").its("length").should("eq", 1);
+    cy.getCy("UNKNOWN-ability").its("length").should("eq", 11);
+
+    // can delete ability
+
+    cy.getCy("DR-ability").click();
+    cy.getCy("UNKNOWN-ability").its("length").should("eq", 12);
+  });
+
+  it("adds a new build", () => {
+    cy.auth(1);
+    cy.visit(userBuildsPage(ADMIN_DISCORD_ID));
+    cy.getCy("new-build-button").click();
+
+    cy.getCy("weapon-combobox-input").type("Luna Blaster{enter}");
+    cy.getCy("HEAD-combobox-input").type("White Headband{enter}");
+    cy.getCy("CLOTHES-combobox-input").type("Black Squideye{enter}");
+    cy.getCy("SHOES-combobox-input").type("Blue Lo-Tops{enter}");
+
+    for (let i = 0; i < 12; i++) {
+      cy.getCy("ISM-ability-button").click();
+    }
+
+    cy.getCy("title-input").type("My awesome build");
+    cy.getCy("description-textarea").type("Does not run out of ink :-)");
+    cy.getCy("SZ-checkbox").click();
+
+    cy.getCy("submit-button").click();
+
+    cy.getCy("build-card").first().contains("Luna Blaster");
+  });
+
+  it("edits build", () => {
+    cy.auth(1);
+    cy.visit(userBuildsPage(ADMIN_DISCORD_ID));
+
+    cy.getCy("edit-build-button").first().click();
+
+    const title = "My edited title";
+
+    cy.getCy("title-input").clear().type(title);
+
+    cy.getCy("submit-button").click();
+
+    cy.getCy("build-card").first().contains(title);
+  });
+
+  it("deletes build", () => {
+    cy.auth(1);
+    cy.visit(userBuildsPage(ADMIN_DISCORD_ID));
+
+    cy.contains("Builds (50)");
+    cy.getCy("delete-build-button").first().click();
+    cy.getCy("confirm-button").first().click();
+    cy.contains("Builds (49)");
+  });
+});

cypress/e2e/misc.cy.ts

@@ -6,3 +6,14 @@ describe("404 page", () => {
     cy.contains("404");
   });
 });
+
+describe("theme switcher", () => {
+  it("should switch to light mode and remember it", () => {
+    cy.visit("/");
+    cy.get(".dark-mode-only").should("be.visible"); // moon svg icon
+    cy.getCy("theme-switch-button").click();
+    cy.get(".light-mode-only").should("be.visible"); // sun svg icon
+    cy.reload();
+    cy.get(".light-mode-only").should("be.visible"); // sun svg icon again
+  });
+});