Add badges page e2e tests

app/db/seed.ts

@@ -239,7 +239,7 @@ function badgesToUsers() {
   );
 
   let userIds = sql
-    .prepare(`select "id" from "User"`)
+    .prepare(`select "id" from "User" where id != 2`) // no badges for N-ZAP
     .all()
     .map((u) => u.id) as number[];
 

app/routes/badges/$id.tsx

@@ -71,7 +71,7 @@ export default function BadgeDetailsPage() {
               >
                 ×{owner.count}
               </span>
-              <span>{discordFullName(owner)}</span>
+              <span data-cy="badge-owner">{discordFullName(owner)}</span>
             </li>
           ))}
         </ul>

app/routes/badges/$id/edit.tsx

@@ -12,7 +12,7 @@ import { actualNumber, noDuplicates, safeJSONParse, id } from "~/utils/zod";
 import type { ActionFunction } from "@remix-run/node";
 import { requireUser, useUser } from "~/modules/auth";
 import { parseRequestFormData, validate } from "~/utils/remix";
-import { canEditBadgeManagers } from "~/permissions";
+import { canEditBadgeManagers, canEditBadgeOwners } from "~/permissions";
 import { assertUnreachable } from "~/utils/types";
 import { db } from "~/db";
 import type { User } from "~/db/types";
@@ -36,14 +36,21 @@ export const action: ActionFunction = async ({ request, params }) => {
   const badgeId = z.preprocess(actualNumber, z.number()).parse(params["id"]);
   const user = await requireUser(request);
 
-  validate(canEditBadgeManagers(user));
-
   switch (data._action) {
     case "MANAGERS": {
+      validate(canEditBadgeManagers(user));
+
       db.badges.upsertManyManagers({ badgeId, managerIds: data.managerIds });
       break;
     }
     case "OWNERS": {
+      validate(
+        canEditBadgeOwners({
+          user,
+          managers: db.badges.managersByBadgeId(badgeId),
+        })
+      );
+
       db.badges.upsertManyOwners({ badgeId, ownerIds: data.ownerIds });
       break;
     }
@@ -117,7 +124,7 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) {
         <h3 className="badges-edit__small-header">Managers</h3>
         <ul className="badges-edit__users-list">
           {managers.map((manager) => (
-            <li key={manager.id}>
+            <li key={manager.id} data-cy="manager">
               {manager.discordFullName}
               <Button
                 icon={<TrashIcon />}
@@ -126,6 +133,7 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) {
                 onClick={() =>
                   setManagers(managers.filter((m) => m.id !== manager.id))
                 }
+                data-cy="delete-manager-button"
               />
             </li>
           ))}
@@ -188,6 +196,7 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
               {owner.discordFullName}
               <input
                 className="badges-edit__number-input"
+                data-cy="owner-count-input"
                 id="number"
                 type="number"
                 value={owner.count}

cypress/e2e/badges.cy.ts

@@ -14,4 +14,58 @@ describe("Plus suggestions page", () => {
     cy.contains("Awarded for winning");
     cy.getCy("edit-button").should("not.exist");
   });
+
+  it("edits badge managers", function () {
+    cy.auth(1);
+    cy.visit(BADGES_PAGE);
+
+    cy.getCy("badge-nav-link").first().click();
+    cy.getCy("edit-button").click();
+
+    cy.getCy("delete-manager-button").click();
+    cy.getCy("new-manager-combobox-input").clear().type("Sendou{enter}");
+    cy.contains("2 changes").click();
+
+    cy.reload();
+    cy.getCy("manager").contains("Sendou");
+  });
+
+  it("edits adds badge owner", function () {
+    cy.auth(2);
+    cy.visit(BADGES_PAGE);
+
+    cy.getCy("badge-nav-link").first().click();
+    cy.getCy("edit-button").click();
+
+    cy.getCy("new-owner-combobox-input").clear().type("N-ZAP{enter}");
+    cy.getCy("owner-count-input").last().type("1"); // new count = 11
+
+    cy.contains("1 change").click();
+    cy.contains("Cancel").click();
+    cy.contains("11");
+  });
+
+  it("removes badge owner", function () {
+    cy.auth(2);
+    cy.visit(BADGES_PAGE);
+
+    cy.getCy("badge-nav-link").first().click();
+    cy.getCy("badge-owner")
+      .first()
+      .invoke("text")
+      .then((previousContent) => {
+        cy.getCy("edit-button").click();
+
+        cy.getCy("owner-count-input").first().type("{selectall}").type("0");
+
+        cy.contains("1 change").click();
+
+        cy.visit(BADGES_PAGE);
+        cy.getCy("badge-nav-link").first().click();
+        cy.getCy("badge-owner")
+          .first()
+          .invoke("text")
+          .should("not.equal", previousContent);
+      });
+  });
 });