From 9fd6aff8c280d4772703350abdbc4dfb4ea921fd Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Thu, 9 Jan 2025 13:58:21 -0600
Subject: [PATCH 01/13] remove shadow on button - makes alignment with input
 harder

---
 resources/client/components/ui/button/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/client/components/ui/button/index.ts b/resources/client/components/ui/button/index.ts
index f02ad70..430fce9 100644
--- a/resources/client/components/ui/button/index.ts
+++ b/resources/client/components/ui/button/index.ts
@@ -8,13 +8,13 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-brand-maroon-800 text-neutral-50 shadow hover:bg-brand-maroon-800/90 dark:bg-neutral-50 dark:text-brand-maroon-800 dark:hover:bg-neutral-50/90",
+          "bg-brand-maroon-800 text-neutral-50 hover:bg-brand-maroon-800/90 dark:bg-neutral-50 dark:text-brand-maroon-800 dark:hover:bg-neutral-50/90",
         destructive:
-          "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+          "bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
         outline:
           "border border-brand-maroon-800/20 hover:bg-white brand-maroon-800/20 hover:text-brand-maroon-800 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
         secondary:
-          "bg-brand-maroon-800/5 text-brand-maroon-800 shadow-sm hover:bg-brand-maroon-800/80 hover:text-white dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+          "bg-brand-maroon-800/5 text-brand-maroon-800 hover:bg-brand-maroon-800/80 hover:text-white dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
         ghost:
           "hover:bg-neutral-100 hover:text-brand-maroon-800 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
         link: "text-brand-maroon-800 underline-offset-4 hover:underline dark:text-neutral-50",

From 8104d2b6c2d11ed571e1051c5d41320a5d292cad Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Thu, 9 Jan 2025 13:58:42 -0600
Subject: [PATCH 02/13] add search input to deck

---
 .../client/components/icons/IconSearch.vue    | 19 +++++++++++++++++++
 resources/client/components/icons/index.ts    |  1 +
 .../pages/Decks/DeckShowPage/DeckShowPage.vue | 15 ++++++++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 resources/client/components/icons/IconSearch.vue

diff --git a/resources/client/components/icons/IconSearch.vue b/resources/client/components/icons/IconSearch.vue
new file mode 100644
index 0000000..0ad090f
--- /dev/null
+++ b/resources/client/components/icons/IconSearch.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 256 256"
+  >
+    <path
+      fill="currentColor"
+      d="m228.24 219.76l-51.38-51.38a86.15 86.15 0 1 0-8.48 8.48l51.38 51.38a6 6 0 0 0 8.48-8.48M38 112a74 74 0 1 1 74 74a74.09 74.09 0 0 1-74-74"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "PhMagnifyingGlassLight",
+};
+</script>
diff --git a/resources/client/components/icons/index.ts b/resources/client/components/icons/index.ts
index 2fc33a6..61e9bf7 100644
--- a/resources/client/components/icons/index.ts
+++ b/resources/client/components/icons/index.ts
@@ -27,6 +27,7 @@ export { default as IconPencil } from "./IconPencil.vue";
 export { default as IconPlusFilled } from "./IconPlusFilled.vue";
 export { default as IconUser } from "./IconUser.vue";
 export { default as IconRefresh } from "./IconRefresh.vue";
+export { default as IconSearch } from "./IconSearch.vue";
 export { default as IconSettings } from "./IconSettings.vue";
 export { default as IconSpinner } from "./IconSpinner.vue";
 export { default as IconSound } from "./IconSound.vue";
diff --git a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
index c7c0f20..e813985 100644
--- a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
+++ b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
@@ -67,7 +67,18 @@
           class="flex justify-between items-baseline sticky top-16 lg:top-0 z-10 bg-brand-oatmeal-100 py-4"
         >
           <h3 class="text-3xl font-bold">Cards</h3>
-          <Button @click="flipAllCards" variant="secondary"> Flip All </Button>
+          <div class="flex gap-4">
+            <form class="relative">
+              <IconSearch class="absolute left-2 top-2 w-4 h-4 z-10" />
+              <Input
+                placeholder="Search cards"
+                class="pl-8 placeholder:text-black/40 h-full"
+              />
+            </form>
+            <Button @click="flipAllCards" variant="secondary">
+              Flip All
+            </Button>
+          </div>
         </header>
         <div class="card-grid">
           <RouterLink
@@ -128,6 +139,8 @@ import LevelProgress from "@/components/LevelProgress.vue";
 import { useActivityTypesQuery } from "@/queries/activityTypes/useActivityTypesQuery";
 import { useIsDeckTTSEnabled } from "@/composables/useIsDeckTTSEnabled";
 import { IS_DECK_TTS_ENABLED_INJECTION_KEY } from "@/constants";
+import { Input } from "@/components/ui/input";
+import { IconSearch } from "@/components/icons";
 
 const props = defineProps<{
   deckId: number;

From 80b3ae4ee4de9deabd2fbbb67419db918a15dc8e Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Thu, 9 Jan 2025 14:09:18 -0600
Subject: [PATCH 03/13] add simple card text search to deck page

---
 .../pages/Decks/DeckShowPage/DeckShowPage.vue | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
index e813985..ab8f2bb 100644
--- a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
+++ b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
@@ -71,6 +71,7 @@
             <form class="relative">
               <IconSearch class="absolute left-2 top-2 w-4 h-4 z-10" />
               <Input
+                v-model="cardSearch"
                 placeholder="Search cards"
                 class="pl-8 placeholder:text-black/40 h-full"
               />
@@ -90,7 +91,7 @@
             <span>Create Card</span>
           </RouterLink>
 
-          <template v-for="card in deck.cards" :key="card.id">
+          <template v-for="card in filteredCards" :key="card.id">
             <FlippableCard
               data-cy="flippable-card"
               :front="card.front"
@@ -146,6 +147,7 @@ const props = defineProps<{
   deckId: number;
 }>();
 
+const cardSearch = ref("");
 const deckIdRef = computed(() => props.deckId);
 
 const canEdit = computed(() => {
@@ -187,6 +189,23 @@ function handleDeleteCard(card: T.Card) {
 
 const initialCardSide = ref<T.CardSideName>("front");
 
+function doesBlockContainText(block: T.ContentBlock, text: string) {
+  if (block.type !== "text") return false;
+  return (block as T.TextContentBlock).content
+    .toLowerCase()
+    .includes(text.toLowerCase());
+}
+
+const filteredCards = computed((): T.Card[] => {
+  if (!deck.value?.cards) return [];
+
+  return deck.value.cards.filter((card) => {
+    return [...card.front, ...card.back].some((block) => {
+      return doesBlockContainText(block, cardSearch.value);
+    });
+  });
+});
+
 function flipAllCards() {
   initialCardSide.value = initialCardSide.value === "front" ? "back" : "front";
 }

From 4c1d41fd5e14d06d79c5a003aa6fa48d26794c00 Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Thu, 9 Jan 2025 14:10:52 -0600
Subject: [PATCH 04/13] fix search icon alignment

---
 resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
index ab8f2bb..288a4c5 100644
--- a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
+++ b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
@@ -69,7 +69,9 @@
           <h3 class="text-3xl font-bold">Cards</h3>
           <div class="flex gap-4">
             <form class="relative">
-              <IconSearch class="absolute left-2 top-2 w-4 h-4 z-10" />
+              <IconSearch
+                class="absolute left-2 top-1/2 -translate-y-1/2 size-4 z-10"
+              />
               <Input
                 v-model="cardSearch"
                 placeholder="Search cards"

From a3b93de1ab529a1cd6f7492e28077648f63375f3 Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 10:52:50 -0600
Subject: [PATCH 05/13] fix: cypress `click()` doesn't work on dropdowns

see: https://github.com/radix-ui/primitives/issues/1241
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6c459e2..1157e5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "pinia": "^2.1.7",
         "quill": "^2.0.2",
         "quill-paste-smart": "^2.0.0",
-        "radix-vue": "^1.8.4",
+        "radix-vue": "^1.9.12",
         "ramda": "^0.30.1",
         "uuid": "^10.0.0",
         "vue": "^3.4.21",
@@ -7418,9 +7418,9 @@
       }
     },
     "node_modules/radix-vue": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.3.tgz",
-      "integrity": "sha512-9pewcgzghM+B+FO1h9mMsZa/csVH6hElpN1sqmG4/qoeieiDG0i4nhMjS7p2UOz11EEdVm7eLandHSPyx7hYhg==",
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.12.tgz",
+      "integrity": "sha512-zkr66Jqxbej4+oR6O/pZRzyM/VZi66ndbyIBZQjJKAXa1lIoYReZJse6W1EEDZKXknD7rXhpS+jM9Sr23lIqfg==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.7",
diff --git a/package.json b/package.json
index d237007..154e6b1 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "pinia": "^2.1.7",
     "quill": "^2.0.2",
     "quill-paste-smart": "^2.0.0",
-    "radix-vue": "^1.8.4",
+    "radix-vue": "^1.9.12",
     "ramda": "^0.30.1",
     "uuid": "^10.0.0",
     "vue": "^3.4.21",

From a36c8051a7d20fe51d01d74fc7cb36731ab5ea7c Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 10:53:15 -0600
Subject: [PATCH 06/13] update card factory

---
 database/factories/CardFactory.php | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/database/factories/CardFactory.php b/database/factories/CardFactory.php
index a6bd416..7dacfdc 100644
--- a/database/factories/CardFactory.php
+++ b/database/factories/CardFactory.php
@@ -9,6 +9,14 @@
  */
 class CardFactory extends Factory
 {
+    protected function createTextBlock(string $text): array
+    {
+        return [
+            'type' => 'text',
+            'content' => $text,
+        ];
+    }
+
     /**
      * Define the model's default state.
      *
@@ -17,7 +25,13 @@ class CardFactory extends Factory
     public function definition(): array
     {
         return [
-            //
+            'front' => [
+                $this->createTextBlock($this->faker->sentence),
+            ],
+            'back' => [
+                $this->createTextBlock($this->faker->sentence),
+            ],
+
         ];
     }
 }

From ea10b0b6ddaa356243b4aaaa1410bc57aedd0ecb Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 10:53:33 -0600
Subject: [PATCH 07/13] fix cypress tsconfig

---
 tests/cypress/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/cypress/tsconfig.json b/tests/cypress/tsconfig.json
index bc7bf61..d02e74e 100644
--- a/tests/cypress/tsconfig.json
+++ b/tests/cypress/tsconfig.json
@@ -6,7 +6,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "paths": {
-      "@/*": ["../../resources/js/*"]
+      "@/*": ["../../resources/client/*"]
     }
   },
   "include": ["**/*.ts"]

From cda164373665a24952e9c1019d874a8364fb3dc6 Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 10:54:39 -0600
Subject: [PATCH 08/13] use enum for MembershipRole

need to import into cypress tests
---
 resources/client/components/DeckMembership.vue            | 7 ++++---
 .../layouts/AuthenticatedLayout/AuthenticatedLayout.vue   | 8 ++++++--
 .../client/pages/Decks/DeckIndexPage/DecksIndexPage.vue   | 8 ++++++--
 resources/client/types/index.ts                           | 6 +++++-
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/resources/client/components/DeckMembership.vue b/resources/client/components/DeckMembership.vue
index 5ff9626..8f9e04d 100644
--- a/resources/client/components/DeckMembership.vue
+++ b/resources/client/components/DeckMembership.vue
@@ -12,7 +12,8 @@
       <div>
         <p
           v-if="
-            membership.role === 'owner' || !membership.capabilities.canUpdate
+            membership.role === T.MembershipRole.OWNER ||
+            !membership.capabilities.canUpdate
           "
           class="px-4 py-3 border border-black/10 rounded-lg text-sm capitalize leading-none"
         >
@@ -24,8 +25,8 @@
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectItem value="viewer">Viewer</SelectItem>
-              <SelectItem value="editor">Editor</SelectItem>
+              <SelectItem :value="T.MembershipRole.VIEWER">Viewer</SelectItem>
+              <SelectItem :value="T.MembershipRole.EDITOR">Editor</SelectItem>
             </SelectGroup>
           </SelectContent>
         </Select>
diff --git a/resources/client/layouts/AuthenticatedLayout/AuthenticatedLayout.vue b/resources/client/layouts/AuthenticatedLayout/AuthenticatedLayout.vue
index c8943c0..17cf07a 100644
--- a/resources/client/layouts/AuthenticatedLayout/AuthenticatedLayout.vue
+++ b/resources/client/layouts/AuthenticatedLayout/AuthenticatedLayout.vue
@@ -69,13 +69,17 @@ const { data: decks } = useAllDecksQuery();
 
 const myDecks = computed((): T.Deck[] => {
   return (
-    decks.value?.filter((deck) => deck.current_user_role === "owner") ?? []
+    decks.value?.filter(
+      (deck) => deck.current_user_role === T.MembershipRole.OWNER,
+    ) ?? []
   );
 });
 
 const sharedDecks = computed((): T.Deck[] => {
   return (
-    decks.value?.filter((deck) => deck.current_user_role !== "owner") ?? []
+    decks.value?.filter(
+      (deck) => deck.current_user_role !== T.MembershipRole.OWNER,
+    ) ?? []
   );
 });
 </script>
diff --git a/resources/client/pages/Decks/DeckIndexPage/DecksIndexPage.vue b/resources/client/pages/Decks/DeckIndexPage/DecksIndexPage.vue
index 4cae01a..a826817 100644
--- a/resources/client/pages/Decks/DeckIndexPage/DecksIndexPage.vue
+++ b/resources/client/pages/Decks/DeckIndexPage/DecksIndexPage.vue
@@ -49,13 +49,17 @@ const { data: decks } = useAllDecksQuery();
 
 const myDecks = computed((): T.Deck[] => {
   return (
-    decks.value?.filter((deck) => deck.current_user_role === "owner") ?? []
+    decks.value?.filter(
+      (deck) => deck.current_user_role === T.MembershipRole.OWNER,
+    ) ?? []
   );
 });
 
 const sharedDecks = computed((): T.Deck[] => {
   return (
-    decks.value?.filter((deck) => deck.current_user_role !== "owner") ?? []
+    decks.value?.filter(
+      (deck) => deck.current_user_role !== T.MembershipRole.OWNER,
+    ) ?? []
   );
 });
 </script>
diff --git a/resources/client/types/index.ts b/resources/client/types/index.ts
index ffee5e2..3e15363 100644
--- a/resources/client/types/index.ts
+++ b/resources/client/types/index.ts
@@ -35,7 +35,11 @@ export interface User {
   };
 }
 
-type MembershipRole = "viewer" | "editor" | "owner";
+export enum MembershipRole {
+  VIEWER = "viewer",
+  EDITOR = "editor",
+  OWNER = "owner",
+}
 
 export interface DeckMembership {
   id: number;

From 60ed27c425ed09e88921850b9da83c6d1c18acdf Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 11:21:03 -0600
Subject: [PATCH 09/13] wip test edit card

---
 .../Decks/DeckShowPage/MoreCardActions.vue    |   4 +-
 tests/cypress/e2e/deckShowPage.cy.ts          |  84 ++++++++
 tests/cypress/e2e/happyPath.cy.ts             |   2 +-
 tests/cypress/support/commands.ts             |  33 ++-
 tests/cypress/support/index.d.ts              | 196 +++++++++++-------
 tests/cypress/support/index.ts                |   1 +
 6 files changed, 237 insertions(+), 83 deletions(-)
 create mode 100644 tests/cypress/e2e/deckShowPage.cy.ts

diff --git a/resources/client/pages/Decks/DeckShowPage/MoreCardActions.vue b/resources/client/pages/Decks/DeckShowPage/MoreCardActions.vue
index 3327409..221cc9c 100644
--- a/resources/client/pages/Decks/DeckShowPage/MoreCardActions.vue
+++ b/resources/client/pages/Decks/DeckShowPage/MoreCardActions.vue
@@ -1,9 +1,9 @@
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger asChild>
-      <Button variant="ghost" size="icon">
+      <Button variant="ghost" size="icon" data-cy="more-card-actions-button">
         <IconEllipsesVertical />
-        <span class="sr-only">More</span>
+        <span class="sr-only">More actions</span>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">
diff --git a/tests/cypress/e2e/deckShowPage.cy.ts b/tests/cypress/e2e/deckShowPage.cy.ts
new file mode 100644
index 0000000..8bbe799
--- /dev/null
+++ b/tests/cypress/e2e/deckShowPage.cy.ts
@@ -0,0 +1,84 @@
+import * as T from "../../../resources/client/types";
+
+describe("DeckShowPage", () => {
+  let deckId = null;
+  beforeEach(() => {
+    cy.refreshDatabase();
+    cy.login({ umndid: "user" });
+
+    cy.createDeckForUser("user", { name: "Deck 1" }).then((deck) => {
+      deckId = deck.id;
+    });
+  });
+
+  it("creates a card", () => {
+    cy.visit(`/decks/${deckId}`);
+    // create a card
+    cy.contains("Create Card").click();
+
+    // add front side content
+    cy.get('[data-cy="front-side-input"]').within(() => {
+      cy.get(
+        '[data-cy="text-block-input-container"] [data-cy="text-block-input"] .ql-editor',
+      ).type("Front side");
+    });
+
+    // add back side content
+    cy.get('[data-cy="back-side-input"]').within(() => {
+      cy.get(
+        '[data-cy="text-block-input-container"] [data-cy="text-block-input"] .ql-editor',
+      ).type("Back side");
+    });
+
+    // save the card
+    cy.get('[data-cy="save-card-button"]').click();
+
+    // we should be on the deck page
+    cy.contains("Deck 1");
+
+    // we should see the card
+    cy.get('[data-cy="flippable-card"]').within(() => {
+      cy.contains("Front side");
+      cy.contains("Flip").click();
+
+      cy.contains("Back side");
+    });
+  });
+
+  it.only("edits a card", () => {
+    // create a card
+    cy.create("App\\Models\\Card", 1, {
+      deck_id: deckId,
+      front: [
+        {
+          id: crypto.randomUUID(),
+          type: "text",
+          content: "Front side",
+          meta: null,
+        },
+      ],
+      back: [
+        {
+          id: crypto.randomUUID(),
+          type: "text",
+          content: "Back side",
+          meta: null,
+        },
+      ],
+    });
+
+    cy.visit(`/decks/${deckId}`);
+
+    cy.contains("Front side")
+      .closest('[data-cy="card-side-view--Front"]')
+      .within(() => {
+        cy.get('[data-cy="more-card-actions-button"]').click();
+        //https://github.com/radix-ui/primitives/issues/1241
+        // .click();
+      });
+  });
+
+  it("deletes a card");
+
+  it("filters the list of cards given a search term");
+});
diff --git a/tests/cypress/e2e/happyPath.cy.ts b/tests/cypress/e2e/happyPath.cy.ts
index 90a440a..ce78d86 100644
--- a/tests/cypress/e2e/happyPath.cy.ts
+++ b/tests/cypress/e2e/happyPath.cy.ts
@@ -17,7 +17,7 @@ describe("Happy Path", () => {
     cy.contains("Decks");
   });
 
-  it.only("creates a deck", () => {
+  it("creates a deck", () => {
     cy.login({ umndid: "admin" });
 
     cy.visit("/decks");
diff --git a/tests/cypress/support/commands.ts b/tests/cypress/support/commands.ts
index 698b01a..55e2b9f 100644
--- a/tests/cypress/support/commands.ts
+++ b/tests/cypress/support/commands.ts
@@ -34,4 +34,35 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
\ No newline at end of file
+// }
+
+import * as T from "../../../resources/client/types";
+
+Cypress.Commands.add("getUserByUsername", (umndid: string) => {
+  return cy.php(
+    `App\\Models\\User::where('umndid', '${umndid}')->firstOrFail()`,
+  );
+});
+
+Cypress.Commands.add("getUser", (userId: number) => {
+  return cy.php(`App\\Models\\User::findOrFail(${userId});`);
+});
+
+Cypress.Commands.add(
+  "createDeckForUser",
+  (
+    umndid: string,
+    { name, description = "" }: { name: string; description: string },
+  ) => {
+    return cy.php(`
+      $user = \\App\\Models\\User::where("umndid", "${umndid}")->first();
+      $deck = \\App\\Models\\Deck::factory()->create([
+        'name' => '${name}',
+        'description' => '${description}',
+        ]);
+      $user->decks()->attach($deck, ["role" => "${T.MembershipRole.OWNER}"]);
+
+      return $deck;
+    `);
+  },
+);
diff --git a/tests/cypress/support/index.d.ts b/tests/cypress/support/index.d.ts
index eb52d46..85222d3 100644
--- a/tests/cypress/support/index.d.ts
+++ b/tests/cypress/support/index.d.ts
@@ -1,92 +1,130 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /// <reference types="cypress" />
 
 declare namespace Cypress {
-    interface Chainable<Subject> {
-        /**
-         * Log in the user with the given attributes, or create a new user and then log them in.
-         *
-         * @example
-         * cy.login()
-         * cy.login({ id: 1 })
-         */
-        login(attributes?: object): Chainable<any>;
+  interface Chainable<Subject> {
+    /**
+     * Log in the user with the given attributes, or create a new user and then log them in.
+     *
+     * @example
+     * cy.login()
+     * cy.login({ id: 1 })
+     */
+    login(umndidOrAttributes: string | object): Chainable<any>;
 
-        /**
-         * Log out the current user.
-         *
-         * @example
-         * cy.logout()
-         */
-        logout(): Chainable<any>;
+    /**
+     * Log out the current user.
+     *
+     * @example
+     * cy.logout()
+     */
+    logout(): Chainable<any>;
 
-        /**
-         * Fetch the currently authenticated user.
-         *
-         * @example
-         * cy.currentUser()
-         */
-        currentUser(): Chainable<any>;
+    /**
+     * Fetch the currently authenticated user.
+     *
+     * @example
+     * cy.currentUser()
+     */
+    currentUser(): Chainable<any>;
 
-        /**
-         * Fetch a CSRF token from the server.
-         *
-         * @example
-         * cy.logout()
-         */
-        csrfToken(): Chainable<any>;
+    /**
+     * Fetch a CSRF token from the server.
+     *
+     * @example
+     * cy.logout()
+     */
+    csrfToken(): Chainable<any>;
 
-        /**
-         * Fetch a fresh list of URI routes from the server.
-         *
-         * @example
-         * cy.logout()
-         */
-        refreshRoutes(): Chainable<any>;
+    /**
+     * Fetch a fresh list of URI routes from the server.
+     *
+     * @example
+     * cy.logout()
+     */
+    refreshRoutes(): Chainable<any>;
 
-        /**
-         * Create and persist a new Eloquent record using Laravel model factories.
-         *
-         * @example
-         * cy.create('App\\User');
-         * cy.create('App\\User', 2);
-         * cy.create('App\\User', 2, { active: false });
-         * cy.create({ model: 'App\\User', state: ['guest'], relations: ['profile'], count: 2 }
-         */
-        create(): Chainable<any>;
+    /**
+     * Create and persist a new Eloquent record using Laravel model factories.
+     *
+     * @example
+     * cy.create('App\\User');
+     * cy.create('App\\User', 2);
+     * cy.create('App\\User', 2, { active: false });
+     * cy.create({ model: 'App\\User', state: ['guest'], relations: ['profile'], count: 2 }
+     */
+    create(model: string): Chainable<any>;
+    create(model: string, count: number): Chainable<any>;
+    create(model: string, count: number, props: object): Chainable<any>;
+    create(options: {
+      model: string;
+      state?: string[];
+      load?: string[];
+      count?: number;
+      attributes?: object;
+    });
 
-        /**
-         * Refresh the database state using Laravel's migrate:fresh command.
-         *
-         * @example
-         * cy.refreshDatabase()
-         * cy.refreshDatabase({ '--drop-views': true }
-         */
-        refreshDatabase(options?: object): Chainable<any>;
+    /**
+     * Refresh the database state using Laravel's migrate:fresh command.
+     *
+     * @example
+     * cy.refreshDatabase()
+     * cy.refreshDatabase({ '--drop-views': true }
+     */
+    refreshDatabase(options?: object): Chainable<any>;
 
-        /**
-         * Run Artisan's db:seed command.
-         *
-         * @example
-         * cy.seed()
-         * cy.seed('PlansTableSeeder')
-         */
-        seed(seederClass?: string): Chainable<any>;
+    /**
+     * Run Artisan's db:seed command.
+     *
+     * @example
+     * cy.seed()
+     * cy.seed('PlansTableSeeder')
+     */
+    seed(seederClass?: string): Chainable<any>;
 
-        /**
-         * Run an Artisan command.
-         *
-         * @example
-         * cy.artisan()
-         */
-        artisan(command: string, parameters?: object, options?: object): Chainable<any>;
+    /**
+     * Run an Artisan command.
+     *
+     * @example
+     * cy.artisan()
+     */
+    artisan(
+      command: string,
+      parameters?: object,
+      options?: object,
+    ): Chainable<any>;
 
-        /**
-         * Execute arbitrary PHP on the server.
-         *
-         * @example
-         * cy.php('2 + 2')
-         * cy.php('App\\User::count()')
-         */
-        php(command: string): Chainable<any>;
-    }
+    /**
+     * Execute arbitrary PHP on the server.
+     *
+     * @example
+     * cy.php('2 + 2')
+     * cy.php('App\\User::count()')
+     */
+    php(command: string): Chainable<any>;
+
+    /**
+     * Get a user by their userId.
+     */
+    getUser(userId: number): Chainable<any>;
+
+    /**
+     * Get a user by their username (umndid).
+     */
+    getUserByUsername(umndid: string): Chainable<any>;
+
+    /**
+     * Create a deck for a user.
+     */
+    createDeckForUser(
+      umndid: string,
+      {
+        name,
+        description,
+      }: {
+        name: string;
+        description?: string;
+      },
+    ): Chainable<any>;
+  }
 }
diff --git a/tests/cypress/support/index.ts b/tests/cypress/support/index.ts
index 21ee295..2e45904 100644
--- a/tests/cypress/support/index.ts
+++ b/tests/cypress/support/index.ts
@@ -18,6 +18,7 @@
 import "./laravel-commands";
 import "./laravel-routes";
 import "./assertions";
+import "./commands";
 
 before(() => {
   cy.artisan("config:clear", {}, { log: false });

From 18a341084ab529b6c78aca9a60068c96d4ff8caa Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 11:24:59 -0600
Subject: [PATCH 10/13] add test for editing card

---
 tests/cypress/e2e/deckShowPage.cy.ts | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/e2e/deckShowPage.cy.ts b/tests/cypress/e2e/deckShowPage.cy.ts
index 8bbe799..437fd5c 100644
--- a/tests/cypress/e2e/deckShowPage.cy.ts
+++ b/tests/cypress/e2e/deckShowPage.cy.ts
@@ -73,9 +73,29 @@ describe("DeckShowPage", () => {
       .closest('[data-cy="card-side-view--Front"]')
       .within(() => {
         cy.get('[data-cy="more-card-actions-button"]').click();
-        //https://github.com/radix-ui/primitives/issues/1241
-        // .click();
       });
+
+    cy.contains("Edit Card").click();
+    // edit the front side
+    cy.get('[data-cy="front-side-input"]').within(() => {
+      cy.get(
+        '[data-cy="text-block-input-container"] [data-cy="text-block-input"] .ql-editor',
+      ).type(" edited");
+    });
+
+    // save the card
+    cy.get('[data-cy="save-card-button"]').click();
+
+    // we should be on the deck page
+    cy.contains("Deck 1");
+
+    // we should see the card
+    cy.get('[data-cy="flippable-card"]').within(() => {
+      cy.contains("Front side edited");
+      cy.contains("Flip").click();
+
+      cy.contains("Back side");
+    });
   });
 
   it("deletes a card");

From 99eef2a78a4f282b542342106de7abeddb3a30cc Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 11:54:50 -0600
Subject: [PATCH 11/13] add test for deleting a card

---
 .../components/ui/dialog/DialogContent.vue    |  3 ++
 .../ui/dropdown-menu/DropdownMenu.vue         | 13 ++++--
 tests/cypress/e2e/deckShowPage.cy.ts          | 45 ++++++++++---------
 tests/cypress/support/commands.ts             | 25 +++++++++++
 tests/cypress/support/index.d.ts              |  8 ++++
 5 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/resources/client/components/ui/dialog/DialogContent.vue b/resources/client/components/ui/dialog/DialogContent.vue
index fb6406f..43f3332 100644
--- a/resources/client/components/ui/dialog/DialogContent.vue
+++ b/resources/client/components/ui/dialog/DialogContent.vue
@@ -33,6 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     />
     <DialogContent
       v-bind="forwarded"
+      data-cy="dialog-content"
       :class="
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-stone-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-stone-800 dark:bg-stone-950',
@@ -40,10 +41,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         )
       "
     >
+      {{ props }}
       <slot />
 
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-stone-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-stone-100 data-[state=open]:text-stone-500 dark:ring-offset-stone-950 dark:focus:ring-stone-300 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-400"
+        data-cy="dialog-close"
       >
         <Cross2Icon class="w-4 h-4" />
         <span class="sr-only">Close</span>
diff --git a/resources/client/components/ui/dropdown-menu/DropdownMenu.vue b/resources/client/components/ui/dropdown-menu/DropdownMenu.vue
index b83d90b..6fc03a6 100644
--- a/resources/client/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/resources/client/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+import {
+  DropdownMenuRoot,
+  type DropdownMenuRootEmits,
+  type DropdownMenuRootProps,
+  useForwardPropsEmits,
+} from "radix-vue";
 
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/tests/cypress/e2e/deckShowPage.cy.ts b/tests/cypress/e2e/deckShowPage.cy.ts
index 437fd5c..ca2a8b2 100644
--- a/tests/cypress/e2e/deckShowPage.cy.ts
+++ b/tests/cypress/e2e/deckShowPage.cy.ts
@@ -45,27 +45,9 @@ describe("DeckShowPage", () => {
     });
   });
 
-  it.only("edits a card", () => {
+  it("edits a card", () => {
     // create a card
-    cy.create("App\\Models\\Card", 1, {
-      deck_id: deckId,
-      front: [
-        {
-          id: crypto.randomUUID(),
-          type: "text",
-          content: "Front side",
-          meta: null,
-        },
-      ],
-      back: [
-        {
-          id: crypto.randomUUID(),
-          type: "text",
-          content: "Back side",
-          meta: null,
-        },
-      ],
-    });
+    cy.createTextCardInDeck(deckId, { front: "Front side", back: "Back side" });
 
     cy.visit(`/decks/${deckId}`);
 
@@ -98,7 +80,28 @@ describe("DeckShowPage", () => {
     });
   });
 
-  it("deletes a card");
+  it.only("deletes a card", () => {
+    cy.createTextCardInDeck(deckId, { front: "Front side", back: "Back side" });
+
+    cy.visit(`/decks/${deckId}`);
+
+    cy.contains("Front side")
+      .closest('[data-cy="card-side-view--Front"]')
+      .within(() => {
+        cy.get('[data-cy="more-card-actions-button"]').click();
+      });
+
+    cy.contains("Delete Card").click();
+
+    // confirm the deletion
+    cy.get('[data-cy="dialog-content"]').within(() => {
+      // expect a confirm modal
+      cy.contains("Are you sure").should("be.visible");
+      cy.get('button[type="submit"]').should("have.text", "Delete").click();
+    });
+
+    cy.contains("Front side").should("not.be.visible");
+  });
 
   it("filters the list of cards given a search term");
 });
diff --git a/tests/cypress/support/commands.ts b/tests/cypress/support/commands.ts
index 55e2b9f..c8ebc9b 100644
--- a/tests/cypress/support/commands.ts
+++ b/tests/cypress/support/commands.ts
@@ -66,3 +66,28 @@ Cypress.Commands.add(
     `);
   },
 );
+
+Cypress.Commands.add(
+  "createTextCardInDeck",
+  (deckId: number, { front, back }: { front: string; back: string }) => {
+    return cy.create("App\\Models\\Card", 1, {
+      deck_id: deckId,
+      front: [
+        {
+          id: crypto.randomUUID(),
+          type: "text",
+          content: front,
+          meta: null,
+        },
+      ],
+      back: [
+        {
+          id: crypto.randomUUID(),
+          type: "text",
+          content: back,
+          meta: null,
+        },
+      ],
+    });
+  },
+);
diff --git a/tests/cypress/support/index.d.ts b/tests/cypress/support/index.d.ts
index 85222d3..1edd876 100644
--- a/tests/cypress/support/index.d.ts
+++ b/tests/cypress/support/index.d.ts
@@ -126,5 +126,13 @@ declare namespace Cypress {
         description?: string;
       },
     ): Chainable<any>;
+
+    /**
+     * Create a text card in a deck.
+     */
+    createTextCardInDeck(
+      deckId: number,
+      { front, back }: { front: string; back: string },
+    ): Chainable<any>;
   }
 }

From 0c93af825de85b00f7e4cb866005ec2cb6695f70 Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 11:58:15 -0600
Subject: [PATCH 12/13] test search input

---
 .../pages/Decks/DeckShowPage/DeckShowPage.vue |  2 ++
 tests/cypress/e2e/deckShowPage.cy.ts          | 22 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
index 288a4c5..c9871a2 100644
--- a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
+++ b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
@@ -75,7 +75,9 @@
               <Input
                 v-model="cardSearch"
                 placeholder="Search cards"
+                type="search"
                 class="pl-8 placeholder:text-black/40 h-full"
+                data-cy="card-search-input"
               />
             </form>
             <Button @click="flipAllCards" variant="secondary">
diff --git a/tests/cypress/e2e/deckShowPage.cy.ts b/tests/cypress/e2e/deckShowPage.cy.ts
index ca2a8b2..2439aed 100644
--- a/tests/cypress/e2e/deckShowPage.cy.ts
+++ b/tests/cypress/e2e/deckShowPage.cy.ts
@@ -80,7 +80,7 @@ describe("DeckShowPage", () => {
     });
   });
 
-  it.only("deletes a card", () => {
+  it("deletes a card", () => {
     cy.createTextCardInDeck(deckId, { front: "Front side", back: "Back side" });
 
     cy.visit(`/decks/${deckId}`);
@@ -103,5 +103,23 @@ describe("DeckShowPage", () => {
     cy.contains("Front side").should("not.be.visible");
   });
 
-  it("filters the list of cards given a search term");
+  it("filters the list of cards given a search term", () => {
+    cy.createTextCardInDeck(deckId, { front: "Front side", back: "Back side" });
+    cy.createTextCardInDeck(deckId, {
+      front: "Another card",
+      back: "Back side",
+    });
+
+    cy.visit(`/decks/${deckId}`);
+
+    // verify that we see all the cards
+    cy.get('[data-cy="flippable-card"]').should("have.length", 2);
+
+    // search for a card
+    cy.get('[data-cy="card-search-input"]').type("Another");
+
+    // verify that we see only the card that matches the search term
+    cy.get('[data-cy="flippable-card"]').should("have.length", 1);
+    cy.contains("Another card");
+  });
 });

From e174ae375af2801464bb421a1e57e23b0ec8a5eb Mon Sep 17 00:00:00 2001
From: James Johnson <johnsojr@umn.edu>
Date: Fri, 10 Jan 2025 11:59:16 -0600
Subject: [PATCH 13/13] oops

---
 resources/client/components/ui/dialog/DialogContent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/client/components/ui/dialog/DialogContent.vue b/resources/client/components/ui/dialog/DialogContent.vue
index 43f3332..94a7ede 100644
--- a/resources/client/components/ui/dialog/DialogContent.vue
+++ b/resources/client/components/ui/dialog/DialogContent.vue
@@ -41,7 +41,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         )
       "
     >
-      {{ props }}
       <slot />
 
       <DialogClose