toiljs 0.0.11 → 0.0.14

package/test/dom/action.test.tsx

@@ -1,129 +1,146 @@
-// @vitest-environment jsdom
-import { act, cleanup, fireEvent, render, renderHook, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { useAction } from '../../src/client/routing/action';
-import { Form } from '../../src/client/components/Form';
-import { clearLoaderData, loaderKey, readRouteData } from '../../src/client/routing/loader';
-import type { RouteDef } from '../../src/client/types';
-
-afterEach(cleanup);
-beforeEach(() => {
-    clearLoaderData();
-});
-
-describe('useAction', () => {
-    it('goes idle → pending → success and returns the result', async () => {
-        const onSuccess = vi.fn();
-        const { result } = renderHook(() =>
-            useAction((n: number) => Promise.resolve(n * 2), { revalidate: false, onSuccess }),
-        );
-        expect(result.current.pending).toBe(false);
-
-        let returned: number | undefined;
-        await act(async () => {
-            returned = await result.current.run(3);
-        });
-        expect(returned).toBe(6);
-        expect(result.current.data).toBe(6);
-        expect(result.current.error).toBeUndefined();
-        expect(onSuccess).toHaveBeenCalledWith(6);
-    });
-
-    it('captures errors instead of rejecting, and calls onError', async () => {
-        const onError = vi.fn();
-        const { result } = renderHook(() =>
-            useAction(
-                () => {
-                    throw new Error('boom');
-                },
-                { revalidate: false, onError },
-            ),
-        );
-
-        let returned: unknown = 'sentinel';
-        await act(async () => {
-            returned = await result.current.run();
-        });
-        expect(returned).toBeUndefined();
-        expect((result.current.error as Error).message).toBe('boom');
-        expect(onError).toHaveBeenCalledOnce();
-    });
-
-    it('reset() returns to idle', async () => {
-        const { result } = renderHook(() => useAction(() => 'x', { revalidate: false }));
-        await act(async () => {
-            await result.current.run();
-        });
-        expect(result.current.data).toBe('x');
-        act(() => {
-            result.current.reset();
-        });
-        expect(result.current.data).toBeUndefined();
-        expect(result.current.pending).toBe(false);
-    });
-
-    it('revalidate: true invalidates cached loader data', async () => {
-        const route: RouteDef = {
-            pattern: '/x',
-            load: () => Promise.resolve({ default: () => null, loader: () => ({ n: 1 }), revalidate: false }),
-        };
-        const key = loaderKey('/x', '');
-        // Seed the cache (suspends once, then resolves).
-        try {
-            readRouteData(route, {}, key, 1);
-        } catch (thrown) {
-            await (thrown as Promise<void>);
-        }
-        // Cached now: a re-read returns synchronously (no throw).
-        expect(() => readRouteData(route, {}, key, 1)).not.toThrow();
-
-        const { result } = renderHook(() => useAction(() => 'done', { revalidate: true }));
-        await act(async () => {
-            await result.current.run();
-        });
-        // Cache was cleared → reading again suspends (throws a promise).
-        expect(() => readRouteData(route, {}, key, 1)).toThrow();
-    });
-});
-
-describe('Form', () => {
-    it('submits FormData (no reload) and exposes pending state', async () => {
-        let received: FormDataEntryValue | null = null;
-        const action = vi.fn((data: FormData) => {
-            received = data.get('title');
-        });
-        const { getByText, getByPlaceholderText } = render(
-            <Form action={action} revalidate={false}>
-                {({ pending }) => (
-                    <>
-                        <input name="title" placeholder="t" />
-                        <button type="submit">{pending ? 'Saving…' : 'Save'}</button>
-                    </>
-                )}
-            </Form>,
-        );
-        fireEvent.change(getByPlaceholderText('t'), { target: { value: 'Hello' } });
-        fireEvent.click(getByText('Save'));
-        await waitFor(() => {
-            expect(action).toHaveBeenCalledOnce();
-        });
-        expect(received).toBe('Hello');
-    });
-
-    it('resets fields after success when resetOnSuccess is set', async () => {
-        const { getByText, getByPlaceholderText } = render(
-            <Form action={() => undefined} revalidate={false} resetOnSuccess>
-                <input name="title" placeholder="t" defaultValue="" />
-                <button type="submit">Save</button>
-            </Form>,
-        );
-        const input = getByPlaceholderText('t') as HTMLInputElement;
-        fireEvent.change(input, { target: { value: 'typed' } });
-        expect(input.value).toBe('typed');
-        fireEvent.click(getByText('Save'));
-        await waitFor(() => {
-            expect(input.value).toBe('');
-        });
-    });
-});
+// @vitest-environment jsdom
+import { act, cleanup, fireEvent, render, renderHook, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useAction } from '../../src/client/routing/action';
+import { Form } from '../../src/client/components/Form';
+import { clearLoaderData, loaderKey, readRouteData } from '../../src/client/routing/loader';
+import type { RouteDef } from '../../src/client/types';
+
+afterEach(cleanup);
+beforeEach(() => {
+    clearLoaderData();
+});
+
+describe('useAction', () => {
+    it('goes idle → pending → success and returns the result', async () => {
+        const onSuccess = vi.fn();
+        const { result } = renderHook(() =>
+            useAction((n: number) => Promise.resolve(n * 2), { revalidate: false, onSuccess }),
+        );
+        expect(result.current.pending).toBe(false);
+
+        let returned: number | undefined;
+        await act(async () => {
+            returned = await result.current.run(3);
+        });
+        expect(returned).toBe(6);
+        expect(result.current.data).toBe(6);
+        expect(result.current.error).toBeUndefined();
+        expect(onSuccess).toHaveBeenCalledWith(6);
+    });
+
+    it('captures errors instead of rejecting, and calls onError', async () => {
+        const onError = vi.fn();
+        const { result } = renderHook(() =>
+            useAction(
+                () => {
+                    throw new Error('boom');
+                },
+                { revalidate: false, onError },
+            ),
+        );
+
+        let returned: unknown = 'sentinel';
+        await act(async () => {
+            returned = await result.current.run();
+        });
+        expect(returned).toBeUndefined();
+        expect((result.current.error as Error).message).toBe('boom');
+        expect(onError).toHaveBeenCalledOnce();
+    });
+
+    it('reset() returns to idle', async () => {
+        const { result } = renderHook(() => useAction(() => 'x', { revalidate: false }));
+        await act(async () => {
+            await result.current.run();
+        });
+        expect(result.current.data).toBe('x');
+        act(() => {
+            result.current.reset();
+        });
+        expect(result.current.data).toBeUndefined();
+        expect(result.current.pending).toBe(false);
+    });
+
+    it('revalidate: true invalidates cached loader data', async () => {
+        const route: RouteDef = {
+            pattern: '/x',
+            load: () =>
+                Promise.resolve({
+                    default: () => null,
+                    loader: () => ({ n: 1 }),
+                    revalidate: false,
+                }),
+        };
+        const key = loaderKey('/x', '');
+        // Seed the cache (suspends once, then resolves).
+        try {
+            readRouteData(route, {}, key, 1);
+        } catch (thrown) {
+            await (thrown as Promise<void>);
+        }
+        // Cached now: a re-read returns synchronously (no throw).
+        expect(() => readRouteData(route, {}, key, 1)).not.toThrow();
+
+        const { result } = renderHook(() => useAction(() => 'done', { revalidate: true }));
+        await act(async () => {
+            await result.current.run();
+        });
+        // Cache was cleared → reading again suspends (throws a promise).
+        expect(() => readRouteData(route, {}, key, 1)).toThrow();
+    });
+});
+
+describe('Form', () => {
+    it('submits FormData (no reload) and exposes pending state', async () => {
+        let received: FormDataEntryValue | null = null;
+        const action = vi.fn((data: FormData) => {
+            received = data.get('title');
+        });
+        const { getByText, getByPlaceholderText } = render(
+            <Form
+                action={action}
+                revalidate={false}>
+                {({ pending }) => (
+                    <>
+                        <input
+                            name="title"
+                            placeholder="t"
+                        />
+                        <button type="submit">{pending ? 'Saving…' : 'Save'}</button>
+                    </>
+                )}
+            </Form>,
+        );
+        fireEvent.change(getByPlaceholderText('t'), { target: { value: 'Hello' } });
+        fireEvent.click(getByText('Save'));
+        await waitFor(() => {
+            expect(action).toHaveBeenCalledOnce();
+        });
+        expect(received).toBe('Hello');
+    });
+
+    it('resets fields after success when resetOnSuccess is set', async () => {
+        const { getByText, getByPlaceholderText } = render(
+            <Form
+                action={() => undefined}
+                revalidate={false}
+                resetOnSuccess>
+                <input
+                    name="title"
+                    placeholder="t"
+                    defaultValue=""
+                />
+                <button type="submit">Save</button>
+            </Form>,
+        );
+        const input = getByPlaceholderText('t') as HTMLInputElement;
+        fireEvent.change(input, { target: { value: 'typed' } });
+        expect(input.value).toBe('typed');
+        fireEvent.click(getByText('Save'));
+        await waitFor(() => {
+            expect(input.value).toBe('');
+        });
+    });
+});

package/test/dom/error-overlay.test.tsx

@@ -16,7 +16,7 @@ function Boom(): never {
 
 describe('dev error overlay', () => {
     it('surfaces an uncaught render error', () => {
-        // React logs caught boundary errors to console.error — silence it for a clean test run.
+        // React logs caught boundary errors to console.error, silence it for a clean test run.
         const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
         const { getByRole } = render(
             <>

package/test/dom/loader.test.tsx

@@ -1,14 +1,14 @@
 // @vitest-environment jsdom
 import { afterEach, beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest';
 
+import type { Revalidate } from '../../src/client/routing/loader';
 import {
     clearLoaderData,
     invalidateLoaderData,
+    type LoaderData,
     loaderKey,
     readRouteData,
-    type LoaderData,
 } from '../../src/client/routing/loader';
-import type { Revalidate } from '../../src/client/routing/loader';
 import type { RouteDef } from '../../src/client/types';
 
 /** Reads route data, awaiting the suspending promise once if it's pending. */

package/test/dom/revalidate.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { act, cleanup, render } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, it } from 'vitest';
 
 import { Router } from '../../src/client/routing/Router';
 import { clearLoaderData, revalidate, useLoaderData } from '../../src/client/routing/loader';

package/test/dom/route-head.test.tsx

@@ -1,10 +1,9 @@
 // @vitest-environment jsdom
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 
 import { setRouteHead, useHead } from '../../src/client/head/head';
 import { resolveMetadata } from '../../src/client/head/metadata';
 import { cleanup, render } from '@testing-library/react';
-import { afterEach } from 'vitest';
 
 afterEach(() => {
     cleanup();

package/test/dom/router-loading.test.tsx

@@ -17,7 +17,7 @@ const routes: RouteDef[] = [
         load: () => Promise.resolve({ default: () => <div>HOME</div> }),
     },
     {
-        // Page chunk never resolves, so the route stays suspended — exercising the fallback path.
+        // Page chunk never resolves, so the route stays suspended, exercising the fallback path.
         pattern: '/slow',
         load: () => new Promise<{ default: () => null }>(() => undefined),
         loading: () => Promise.resolve({ default: () => <div>LOADING</div> }),

package/test/dom/slot.test.tsx

@@ -1,109 +1,131 @@
-// @vitest-environment jsdom
-import { act, cleanup, render } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import type { ReactNode } from 'react';
-
-import { Slot } from '../../src/client/components/Slot';
-import { navigate } from '../../src/client/navigation/navigation';
-import { Router } from '../../src/client/routing/Router';
-import { clearLoaderData } from '../../src/client/routing/loader';
-import { SlotContext } from '../../src/client/routing/slot-context';
-import type { RouteDef } from '../../src/client/types';
-
-const layoutWithModal = () =>
-    Promise.resolve({
-        default: ({ children }: { children?: ReactNode }) => (
-            <div>
-                {children}
-                <Slot name="modal" />
-            </div>
-        ),
-    });
-
-afterEach(cleanup);
-beforeEach(() => {
-    clearLoaderData();
-    window.history.replaceState({}, '', '/');
-});
-
-describe('Slot', () => {
-    it('renders the named slot element from context, or the fallback', () => {
-        const { getByText, queryByText } = render(
-            <SlotContext.Provider value={{ modal: <span>MODAL</span> }}>
-                <Slot name="modal" />
-                <Slot name="missing" fallback={<span>FB</span>} />
-            </SlotContext.Provider>,
-        );
-        expect(getByText('MODAL')).toBeTruthy();
-        expect(getByText('FB')).toBeTruthy();
-        expect(queryByText('missing')).toBeNull();
-    });
-});
-
-describe('Router parallel slots', () => {
-    const routes: RouteDef[] = [
-        { pattern: '/', load: () => Promise.resolve({ default: () => <main>PAGE</main> }) },
-    ];
-    // A layout that renders the page plus the "modal" slot.
-    const layout = () =>
-        Promise.resolve({
-            default: ({ children }: { children?: ReactNode }) => (
-                <div>
-                    {children}
-                    <Slot name="modal" />
-                </div>
-            ),
-        });
-    const slots: Record<string, RouteDef[]> = {
-        modal: [{ pattern: '/', load: () => Promise.resolve({ default: () => <aside>SLOT</aside> }) }],
-    };
-
-    it('renders the main route and a matching slot together', async () => {
-        const { findByText } = render(<Router routes={routes} layout={layout} slots={slots} />);
-        // Both the page and the parallel slot render for the same URL.
-        await findByText('PAGE');
-        await findByText('SLOT');
-    });
-});
-
-describe('intercepting routes', () => {
-    const routes: RouteDef[] = [
-        { pattern: '/photo/:id', load: () => Promise.resolve({ default: () => <main>PHOTO PAGE</main> }) },
-        { pattern: '/', load: () => Promise.resolve({ default: () => <main>FEED</main> }) },
-    ];
-    const slots: Record<string, RouteDef[]> = {
-        modal: [
-            {
-                pattern: '/photo/:id',
-                intercept: true,
-                load: () => Promise.resolve({ default: () => <aside>PHOTO MODAL</aside> }),
-            },
-        ],
-    };
-
-    // This test must run before any navigation so it observes a "hard" load (soft-nav state is false).
-    it('shows the full page on a hard load (no interception)', async () => {
-        window.history.replaceState({}, '', '/photo/1');
-        const { findByText, queryByText } = render(
-            <Router routes={routes} layout={layoutWithModal} slots={slots} />,
-        );
-        await findByText('PHOTO PAGE');
-        expect(queryByText('PHOTO MODAL')).toBeNull();
-    });
-
-    it('intercepts on soft navigation: modal overlays, previous page stays', async () => {
-        window.history.replaceState({}, '', '/');
-        const { findByText, queryByText } = render(
-            <Router routes={routes} layout={layoutWithModal} slots={slots} />,
-        );
-        await findByText('FEED');
-        act(() => {
-            navigate('/photo/1');
-        });
-        // The intercepting slot route shows the modal…
-        await findByText('PHOTO MODAL');
-        // …while the main view keeps the previous page (the backdrop), not the full photo page.
-        expect(queryByText('FEED')).not.toBeNull();
-        expect(queryByText('PHOTO PAGE')).toBeNull();
-    });
-});
+// @vitest-environment jsdom
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import type { ReactNode } from 'react';
+
+import { Slot } from '../../src/client/components/Slot';
+import { navigate } from '../../src/client/navigation/navigation';
+import { Router } from '../../src/client/routing/Router';
+import { clearLoaderData } from '../../src/client/routing/loader';
+import { SlotContext } from '../../src/client/routing/slot-context';
+import type { RouteDef } from '../../src/client/types';
+
+const layoutWithModal = () =>
+    Promise.resolve({
+        default: ({ children }: { children?: ReactNode }) => (
+            <div>
+                {children}
+                <Slot name="modal" />
+            </div>
+        ),
+    });
+
+afterEach(cleanup);
+beforeEach(() => {
+    clearLoaderData();
+    window.history.replaceState({}, '', '/');
+});
+
+describe('Slot', () => {
+    it('renders the named slot element from context, or the fallback', () => {
+        const { getByText, queryByText } = render(
+            <SlotContext.Provider value={{ modal: <span>MODAL</span> }}>
+                <Slot name="modal" />
+                <Slot
+                    name="missing"
+                    fallback={<span>FB</span>}
+                />
+            </SlotContext.Provider>,
+        );
+        expect(getByText('MODAL')).toBeTruthy();
+        expect(getByText('FB')).toBeTruthy();
+        expect(queryByText('missing')).toBeNull();
+    });
+});
+
+describe('Router parallel slots', () => {
+    const routes: RouteDef[] = [
+        { pattern: '/', load: () => Promise.resolve({ default: () => <main>PAGE</main> }) },
+    ];
+    // A layout that renders the page plus the "modal" slot.
+    const layout = () =>
+        Promise.resolve({
+            default: ({ children }: { children?: ReactNode }) => (
+                <div>
+                    {children}
+                    <Slot name="modal" />
+                </div>
+            ),
+        });
+    const slots: Record<string, RouteDef[]> = {
+        modal: [
+            { pattern: '/', load: () => Promise.resolve({ default: () => <aside>SLOT</aside> }) },
+        ],
+    };
+
+    it('renders the main route and a matching slot together', async () => {
+        const { findByText } = render(
+            <Router
+                routes={routes}
+                layout={layout}
+                slots={slots}
+            />,
+        );
+        // Both the page and the parallel slot render for the same URL.
+        await findByText('PAGE');
+        await findByText('SLOT');
+    });
+});
+
+describe('intercepting routes', () => {
+    const routes: RouteDef[] = [
+        {
+            pattern: '/photo/:id',
+            load: () => Promise.resolve({ default: () => <main>PHOTO PAGE</main> }),
+        },
+        { pattern: '/', load: () => Promise.resolve({ default: () => <main>FEED</main> }) },
+    ];
+    const slots: Record<string, RouteDef[]> = {
+        modal: [
+            {
+                pattern: '/photo/:id',
+                intercept: true,
+                load: () => Promise.resolve({ default: () => <aside>PHOTO MODAL</aside> }),
+            },
+        ],
+    };
+
+    // This test must run before any navigation so it observes a "hard" load (soft-nav state is false).
+    it('shows the full page on a hard load (no interception)', async () => {
+        window.history.replaceState({}, '', '/photo/1');
+        const { findByText, queryByText } = render(
+            <Router
+                routes={routes}
+                layout={layoutWithModal}
+                slots={slots}
+            />,
+        );
+        await findByText('PHOTO PAGE');
+        expect(queryByText('PHOTO MODAL')).toBeNull();
+    });
+
+    it('intercepts on soft navigation: modal overlays, previous page stays', async () => {
+        window.history.replaceState({}, '', '/');
+        const { findByText, queryByText } = render(
+            <Router
+                routes={routes}
+                layout={layoutWithModal}
+                slots={slots}
+            />,
+        );
+        await findByText('FEED');
+        act(() => {
+            navigate('/photo/1');
+        });
+        // The intercepting slot route shows the modal…
+        await findByText('PHOTO MODAL');
+        // …while the main view keeps the previous page (the backdrop), not the full photo page.
+        expect(queryByText('FEED')).not.toBeNull();
+        expect(queryByText('PHOTO PAGE')).toBeNull();
+    });
+});