Fix test issues

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);

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}

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

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);
 });

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"] },
 });