test: some more

fspoettel · Jun 20, 2024 · a3a5ce5 · a3a5ce5
1 parent 5769bf1
commit a3a5ce5
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 20 deletions.
diff --git a/src/components/cardset.tsx b/src/components/cardset.tsx
@@ -29,6 +29,7 @@ export function CardSet({ onChangeCardQuantity, onSelect, set }: Props) {
           <Checkbox
             checked={set.selected}
             className={css["cardset-title"]}
+            data-testid="cardset-select"
             disabled={!onSelect || !set.canSelect}
             id={`card-set-${set.id}`}
             label={set.title}

diff --git a/src/components/deck-summary.tsx b/src/components/deck-summary.tsx
@@ -48,12 +48,12 @@ export function DeckSummary({
           </div>
         )}
         <div className={css["header-container"]}>
-          <h3 className={css["title"]}>
+          <h3 className={css["title"]} data-testid="deck-title">
             {showValidation && !validation?.valid && <CircleAlert />}
             {deck.name}
           </h3>
           <div className={css["header-row"]}>
-            <h4 className={css["sub"]}>
+            <h4 className={css["sub"]} data-testid="deck-investigator">
               {deck.cards.investigator.card.real_name}
             </h4>
             <div className={css["stats"]}>

diff --git a/src/components/filters/cost-filter.tsx b/src/components/filters/cost-filter.tsx
@@ -89,6 +89,7 @@ export function CostFilter({ id }: { id: number }) {
       title="Cost"
     >
       <RangeSelect
+        data-testid="filters-cost"
         id="cost-select"
         label="Cost"
         max={max}

diff --git a/src/components/filters/faction-filter.tsx b/src/components/filters/faction-filter.tsx
@@ -37,6 +37,7 @@ export function FactionFilter({ id }: Props) {
   return (
     <ToggleGroup
       className={css["faction-filter"]}
+      data-testid="filters-faction"
       full
       icons
       onValueChange={handleValueChange}

diff --git a/src/components/filters/level-filter.tsx b/src/components/filters/level-filter.tsx
@@ -104,6 +104,7 @@ export function LevelFilter({ id }: { id: number }) {
       nonCollapsibleContent={
         !filter.open && (
           <ToggleGroup
+            data-testid="filters-level-shortcut"
             full
             onValueChange={handleApplyLevelShortcut}
             type="single"

diff --git a/src/components/filters/type-filter.tsx b/src/components/filters/type-filter.tsx
@@ -51,6 +51,7 @@ export function TypeFilter({ id }: { id: number }) {
     >
       {!filter.open && activeList?.cardType === "player" && (
         <ToggleGroup
+          data-testid="filters-type-shortcut"
           full
           onValueChange={handleApplyShortcut}
           type="multiple"

diff --git a/src/pages/browse/deck-collection/deck-collection.tsx b/src/pages/browse/deck-collection/deck-collection.tsx
@@ -25,32 +25,30 @@ export function DeckCollection() {
             <DeckCollectionImport />
           </Popover>
           <Link asChild to="/deck/create">
-            <Button as="a">
+            <Button as="a" data-testid="create-trigger">
               <Plus />
             </Button>
           </Link>
         </div>
       </header>
       {decks.length ? (
         <Scroller>
-          <ol className={css["decks"]} data-testid="collection">
+          <ol className={css["decks"]}>
             {decks.map(({ deck, validation }) => (
               <li
                 className={css["deck"]}
                 data-testid="collection-deck"
                 key={deck.id}
               >
-                <Link asChild href={`/deck/view/${deck.id}`}>
-                  <a>
-                    <DeckSummary
-                      deck={deck}
-                      interactive
-                      showThumbnail
-                      validation={validation}
-                    >
-                      {deck.tags && <DeckTags tags={deck.tags} />}
-                    </DeckSummary>
-                  </a>
+                <Link href={`/deck/view/${deck.id}`}>
+                  <DeckSummary
+                    deck={deck}
+                    interactive
+                    showThumbnail
+                    validation={validation}
+                  >
+                    {deck.tags && <DeckTags tags={deck.tags} />}
+                  </DeckSummary>
                 </Link>
               </li>
             ))}

diff --git a/src/pages/choose-investigator/choose-investigator.tsx b/src/pages/choose-investigator/choose-investigator.tsx
@@ -63,7 +63,12 @@ function DeckCreateChooseInvestigator() {
           <CardList
             renderListCardAction={(card) => (
               <Link asChild to={`/deck/create/${card.code}`}>
-                <Button as="a" size="lg" variant="bare">
+                <Button
+                  as="a"
+                  data-testid="create-choose-investigator"
+                  size="lg"
+                  variant="bare"
+                >
                   <CirclePlusIcon />
                 </Button>
               </Link>

diff --git a/src/pages/deck-create/deck-create-editor.tsx b/src/pages/deck-create/deck-create-editor.tsx
@@ -102,6 +102,7 @@ export function DeckCreateEditor() {
       <Field full padded>
         <FieldLabel>Title</FieldLabel>
         <input
+          data-testid="create-title"
           onChange={handleInputChange}
           type="text"
           value={deckCreate.title}
@@ -111,6 +112,7 @@ export function DeckCreateEditor() {
       <Field full padded>
         <FieldLabel>Taboo Set</FieldLabel>
         <Select
+          data-testid="create-taboo"
           emptyLabel="None"
           onChange={handleTabooSetChange}
           options={tabooSets}
@@ -124,6 +126,7 @@ export function DeckCreateEditor() {
             <FieldLabel>Investigator Front</FieldLabel>
             <Select
               data-side="front"
+              data-testid="create-investigator-front"
               onChange={handleInvestigatorChange}
               options={getInvestigatorOptions(investigator, "Front")}
               required
@@ -134,6 +137,7 @@ export function DeckCreateEditor() {
             <FieldLabel>Investigator Back</FieldLabel>
             <Select
               data-side="back"
+              data-testid="create-investigator-back"
               onChange={handleInvestigatorChange}
               options={getInvestigatorOptions(investigator, "Back")}
               required
@@ -177,7 +181,11 @@ export function DeckCreateEditor() {
         ))}
 
       <nav className={css["editor-nav"]}>
-        <Button onClick={handleDeckCreate} variant="primary">
+        <Button
+          data-testid="create-save"
+          onClick={handleDeckCreate}
+          variant="primary"
+        >
           Create deck
         </Button>
         <Button onClick={goBack} type="button" variant="bare">

diff --git a/tests/deck-create.spec.ts b/tests/deck-create.spec.ts
@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+
+test("create deck", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.getByTestId("create-trigger").click();
+  await page.getByTestId("search-input").click();
+  await page.getByTestId("search-input").fill("jenny");
+
+  await expect(page.getByTestId("cardlist-count")).toContainText("1 cards");
+
+  await page.getByTestId("create-choose-investigator").click();
+  await page.getByText("Replacements").click();
+  await page.getByLabel("Signatures").click();
+  await page.getByTestId("create-title").click();
+  await page.getByTestId("create-title").fill("Jenny Test");
+  await page.getByTestId("create-title").press("Tab");
+  await page.getByTestId("create-taboo").selectOption("7");
+  await page.getByTestId("create-save").click();
+
+  await expect(page.getByTestId("deck-investigator")).toContainText(
+    "Jenny Barnes",
+  );
+
+  await expect(page.getByTestId("deck-title")).toContainText("Jenny Test");
+
+  await expect(
+    page.getByRole("button", { name: "Green Man Medallion" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Sacrificial Beast" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Jenny's Twin .45s" }),
+  ).not.toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Searching for Izzie" }),
+  ).not.toBeVisible();
+});
diff --git a/tests/deck-import.spec.ts b/tests/deck-import.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("deck import", async ({ page }) => {
   await page.goto("http://localhost:3000/");
+
   await page.getByTestId("import-trigger").click();
   await page.getByTestId("import-input").click();
   await page
@@ -10,7 +11,10 @@ test("deck import", async ({ page }) => {
       "https://arkhamdb.com/decklist/view/47001/khaku-fifty-shades-of-blurse-fhv-intro-deck-guide-1.0",
     );
   await page.getByTestId("import-submit").click();
-  await expect(page.getByTestId("collection-deck").locator("h4")).toContainText(
-    "Kōhaku Narukami",
-  );
+  await expect(
+    page
+      .getByTestId("collection-deck")
+      .first()
+      .getByTestId("deck-investigator"),
+  ).toContainText("Kōhaku Narukami");
 });
diff --git a/tests/filters.spec.ts b/tests/filters.spec.ts
@@ -0,0 +1,32 @@
+import { expect, test } from "@playwright/test";
+
+test("test", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.getByTestId("filters-faction").getByTitle("Multiclass").click();
+  await page
+    .getByTestId("filters-type-shortcut")
+    .getByRole("button", { name: "Event" })
+    .click();
+  await page
+    .getByTestId("filters-level-shortcut")
+    .getByRole("radio", { name: "Level 1-5" })
+    .click();
+
+  await page
+    .locator("div")
+    .filter({ hasText: /^CostAll$/ })
+    .nth(1)
+    .click();
+
+  await page.getByLabel("Maximum").click();
+
+  for (let i = 0; i < 12; i++) {
+    await page.getByLabel("Maximum").press("ArrowLeft");
+  }
+
+  await expect(page.getByTestId("cardlist-count")).toContainText("1 cards");
+
+  await expect(
+    page.getByRole("figure").locator("div").filter({ hasText: "Snipe" }),
+  ).toBeVisible();
+});