From 3818cf4004c13d63a609139f5c122a691f28bedb Mon Sep 17 00:00:00 2001
From: Toni Kangas <toni.ar.kangas@gmail.com>
Date: Wed, 13 Nov 2024 00:51:19 +0200
Subject: [PATCH] Fix test issues

---
 src/stores.ts                        |  2 +-
 src/views/Pileon/DeadEndModal.svelte | 18 ++++++++++--------
 src/views/Pileon/Pileon.svelte       |  2 +-
 test/views/Pileon.test.ts            | 14 +++++++++++++-
 vitest.config.ts                     |  9 ++++++++-
 5 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/stores.ts b/src/stores.ts
index ea1b1b0..2ee386e 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -15,7 +15,7 @@ const defaultSettings: ISettings = {
 };
 
 const userSettings = JSON.parse(
-  localStorage.getItem(settingsKey) ?? '',
+  localStorage.getItem(settingsKey) ?? 'null',
 ) as ISettings | null;
 
 export const settings = writable(userSettings ?? defaultSettings);
diff --git a/src/views/Pileon/DeadEndModal.svelte b/src/views/Pileon/DeadEndModal.svelte
index 1154a27..492b37a 100644
--- a/src/views/Pileon/DeadEndModal.svelte
+++ b/src/views/Pileon/DeadEndModal.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
-
   import IconButton from "../../components/Menu/IconButton.svelte";
   import MinimizeableModal from "../../components/MinimizeableModal.svelte";
   import { isDeadEnd, type Piles } from "../../utils/pileon";
   import { cardsToPrettyString } from "../../utils/text";
 
-  export let piles: Piles;
+  interface IProps {
+    piles: Piles;
+    shuffle: (e: CustomEvent | KeyboardEvent | MouseEvent) => void;
+    undo: (e: CustomEvent | KeyboardEvent | MouseEvent) => void;
+  }
 
-  $: [deadEnd, loopCards] = isDeadEnd(piles);
-  $: loopCardsStr = cardsToPrettyString(loopCards);
+  let { piles, shuffle, undo} : IProps = $props();
 
-  const dispatch = createEventDispatcher();
+  const [deadEnd, loopCards] = $derived(isDeadEnd(piles));
+  const loopCardsStr = $derived(cardsToPrettyString(loopCards));
 </script>
 
 {#if deadEnd}
@@ -29,9 +31,9 @@
       <IconButton
         icon="Shuffle"
         label="Shuffle"
-        onClick={() => dispatch("shuffle")}
+        onClick={shuffle}
       />
-      <IconButton icon="Undo" label="Undo" onClick={() => dispatch("undo")} />
+      <IconButton icon="Undo" label="Undo" onClick={undo} />
     </div>
   </MinimizeableModal>
 {/if}
diff --git a/src/views/Pileon/Pileon.svelte b/src/views/Pileon/Pileon.svelte
index 7bc8432..fc25f13 100644
--- a/src/views/Pileon/Pileon.svelte
+++ b/src/views/Pileon/Pileon.svelte
@@ -197,7 +197,7 @@
   />
 {/if}
 <CompletedModal {events} {piles} on:shuffle={shuffle} />
-<DeadEndModal {piles} on:shuffle={shuffle} on:undo={undo} />
+<DeadEndModal {piles} {shuffle} {undo} />
 
 <style lang="sass">
   .pileon
diff --git a/test/views/Pileon.test.ts b/test/views/Pileon.test.ts
index 5f3636e..1481876 100644
--- a/test/views/Pileon.test.ts
+++ b/test/views/Pileon.test.ts
@@ -25,8 +25,20 @@ it("has related cards in infinite loop alert", async () => {
     new Cards("J♥ J♦ Q♦ Q♣"),
     new Cards("4♦ K♠ Q♥"),
   ];
-  render(DeadEndModal, { piles });
+
+  const shuffle = vi.fn();
+  const undo = vi.fn();
+
+  render(DeadEndModal, { piles, shuffle, undo });
   await screen.findByText(
     /Seven of diamonds and queen of clubs can be moved back and forth between two piles\..*/,
   );
+
+  const shuffleButton = screen.getByText("Shuffle");
+  shuffleButton.click();
+  expect(shuffle).toHaveBeenCalledTimes(1);
+
+  const undoButton = screen.getByText("Undo");
+  undoButton.click();
+  expect(undo).toHaveBeenCalledTimes(1);
 });
diff --git a/vitest.config.ts b/vitest.config.ts
index b03d725..18a4db6 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -4,6 +4,13 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [svelte()],
+  css: {
+    preprocessorOptions: {
+      sass: {
+        api: "modern-compiler",
+      },
+    },
+  },
   resolve: { conditions: ["browser"] },
-  test: { globals: true, environment: "jsdom" },
+  test: { globals: true, environment: "jsdom", setupFiles: ["test/setup.ts"] },
 });