[form] Add simple test cases for useAction

Author: x0k

mkfile

@@ -24,7 +24,7 @@ f/:
   c:
     pnpm run check
   t:
-    pnpm run test
+    pnpm run test $@
   popd
 
 ds/:

packages/form/package.json

@@ -46,6 +46,7 @@
     "@types/json-schema": "^7.0.15",
     "@types/json-schema-merge-allof": "^0.6.5",
     "deep-freeze-es6": "^3.0.2",
+    "svelte": "catalog:",
     "svelte-check": "catalog:",
     "vite": "catalog:",
     "vitest": "catalog:"

packages/form/src/use-action.svelte.test.ts

@@ -0,0 +1,107 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { tick } from "svelte";
+
+import {
+  abortPrevious,
+  forgetPrevious,
+  ignoreNewUntilPreviousIsFinished,
+  Status,
+  useAction,
+} from "./use-action.svelte.js";
+
+describe("useAction", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+  describe("Status", () => {
+    it("Should correctly update status during normal flow", async () => {
+      const action = useAction({
+        do: () => Promise.resolve(),
+      });
+      const promise = action.run();
+      expect(action.status).toBe(Status.Processed);
+      await promise;
+      expect(action.status).toBe(Status.Success);
+    });
+    it("Should correctly update statuses: processed -> delayed -> failed", async () => {
+      const action = useAction({
+        do: () =>
+          new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(0);
+            }, 100);
+          }),
+        delayedMs: 10,
+        timeoutMs: 50,
+      });
+      const promise = action.run();
+      vi.advanceTimersByTime(10);
+      expect(action.status).toBe(Status.Delayed);
+      vi.advanceTimersByTime(40);
+      expect(action.status).toBe(Status.Failed);
+      vi.advanceTimersByTime(50);
+      await promise
+      expect(action.status).toBe(Status.Failed);
+    });
+  });
+  describe("Combinator", () => {
+    it("Should ignore new action until the previous action is completed", async () => {
+      const impl = vi.fn(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(0);
+            }, 100);
+          })
+      );
+      const action = useAction({
+        do: impl,
+        combinator: ignoreNewUntilPreviousIsFinished,
+      });
+      action.run();
+      action.run();
+      vi.advanceTimersByTime(100);
+      await tick();
+      action.run();
+      expect(impl).toBeCalledTimes(2);
+    });
+    it("Should forget previous action with 'forgetPrevious' combinator", async () => {
+      let count = 0;
+      const onSuccess = vi.fn();
+      const action = useAction({
+        do: () => Promise.resolve(count++),
+        combinator: forgetPrevious,
+        onSuccess,
+      });
+      action.run();
+      action.run();
+      await tick();
+      expect(onSuccess).toBeCalledTimes(1);
+      expect(onSuccess).toBeCalledWith(1);
+    });
+    it("Should abort previous action with 'abortPrevious' combinator", async () => {
+      const onAbort = vi.fn();
+      let count = 0;
+      const impl = vi.fn((signal: AbortSignal) => {
+        signal.addEventListener("abort", onAbort);
+        return Promise.resolve(count++)
+      })
+      const onSuccess = vi.fn();
+      const action = useAction({
+        do: impl,
+        combinator: abortPrevious,
+        onSuccess,
+      });
+      action.run();
+      action.run();
+      await action.run()
+      expect(onAbort).toBeCalledTimes(2);
+      expect(impl).toBeCalledTimes(3);
+      expect(onSuccess).toBeCalledTimes(1);
+      expect(onSuccess).toBeCalledWith(2);
+    });
+  });
+});

packages/form/src/use-action.svelte.ts

@@ -91,7 +91,7 @@ export function useAction<T, R, E = unknown>(
     options.combinator ?? ignoreNewUntilPreviousIsFinished
   );
 
-  let state = $state<ActionState<E>>({
+  let state = $state.raw<ActionState<E>>({
     status: Status.IDLE,
   });
   let abortController: AbortController | null = null;
@@ -110,18 +110,17 @@ export function useAction<T, R, E = unknown>(
     clearTimeouts();
   }
 
-  const status = $derived(state.status);
-  const isSuccess = $derived(status === Status.Success);
-  const isFailed = $derived(status === Status.Failed);
-  const isProcessed = $derived(status === Status.Processed);
-  const isDelayed = $derived(status === Status.Delayed);
+  const isSuccess = $derived(state.status === Status.Success);
+  const isFailed = $derived(state.status === Status.Failed);
+  const isProcessed = $derived(state.status === Status.Processed);
+  const isDelayed = $derived(state.status === Status.Delayed);
 
   return {
     get state() {
       return state;
     },
     get status() {
-      return status;
+      return state.status;
     },
     get isSuccess() {
       return isSuccess;
@@ -144,18 +143,18 @@ export function useAction<T, R, E = unknown>(
         abort();
       }
       state = {
-        status: status === Status.Delayed ? Status.Processed : Status.IDLE,
+        status: state.status === Status.Delayed ? Status.Delayed : Status.Processed,
       };
       abortController = new AbortController();
       const action = options.do(abortController.signal, value).then(
         (result) => {
-          if (ref?.deref() !== action) return;
+          if (ref?.deref() !== action || state.status === Status.Failed) return;
           state = { status: Status.Success };
           options.onSuccess?.(result);
         },
         (error) => {
           // Action may have been aborted by user or timeout
-          if (ref?.deref() !== action || status === Status.Failed) return;
+          if (ref?.deref() !== action || state.status === Status.Failed) return;
           state = { status: Status.Failed, reason: "error", error };
           options.onFailure?.(state);
         }

packages/form/vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
   test: {},
   plugins: [svelte()],
   resolve: {
+    conditions: process.env.VITEST ? ["browser"] : [],
     alias: {
       "@": resolve(__dirname, "src"),
     },