toiljs 0.0.10 → 0.0.12

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

@@ -1,44 +1,44 @@
-// @vitest-environment jsdom
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import {
-    DevErrorBoundary,
-    DevErrorOverlay,
-    initDevErrorOverlay,
-} from '../../src/client/dev/error-overlay';
-
-afterEach(cleanup);
-
-function Boom(): never {
-    throw new Error('render boom');
-}
-
-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.
-        const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
-        const { getByRole } = render(
-            <>
-                <DevErrorBoundary>
-                    <Boom />
-                </DevErrorBoundary>
-                <DevErrorOverlay />
-            </>,
-        );
-        expect(getByRole('alert').textContent).toContain('render boom');
-        spy.mockRestore();
-    });
-
-    it('surfaces an unhandled window error and dismisses it', async () => {
-        initDevErrorOverlay();
-        const { findByRole, queryByRole, getByText } = render(<DevErrorOverlay />);
-        act(() => {
-            window.dispatchEvent(new ErrorEvent('error', { error: new Error('async boom') }));
-        });
-        const alert = await findByRole('alert');
-        expect(alert.textContent).toContain('async boom');
-        fireEvent.click(getByText('Dismiss'));
-        expect(queryByRole('alert')).toBeNull();
-    });
-});
+// @vitest-environment jsdom
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+    DevErrorBoundary,
+    DevErrorOverlay,
+    initDevErrorOverlay,
+} from '../../src/client/dev/error-overlay';
+
+afterEach(cleanup);
+
+function Boom(): never {
+    throw new Error('render boom');
+}
+
+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.
+        const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+        const { getByRole } = render(
+            <>
+                <DevErrorBoundary>
+                    <Boom />
+                </DevErrorBoundary>
+                <DevErrorOverlay />
+            </>,
+        );
+        expect(getByRole('alert').textContent).toContain('render boom');
+        spy.mockRestore();
+    });
+
+    it('surfaces an unhandled window error and dismisses it', async () => {
+        initDevErrorOverlay();
+        const { findByRole, queryByRole, getByText } = render(<DevErrorOverlay />);
+        act(() => {
+            window.dispatchEvent(new ErrorEvent('error', { error: new Error('async boom') }));
+        });
+        const alert = await findByRole('alert');
+        expect(alert.textContent).toContain('async boom');
+        fireEvent.click(getByText('Dismiss'));
+        expect(queryByRole('alert')).toBeNull();
+    });
+});

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();
@@ -42,4 +41,38 @@ describe('route head (metadata baseline)', () => {
         setRouteHead(resolveMetadata({ title: 'About' }));
         expect(document.title).toBe('About · toiljs');
     });
+
+    // Regression for the "metadata title doesn't update" report: a real layout (title + template)
+    // plus a route's full `metadata` (the exact shape users write) must land on the route's title,
+    // wrapped by the layout template, with the route's og:title applied too.
+    it('applies a full route metadata over a layout title + template', () => {
+        function LayoutDefaults() {
+            useHead({ titleTemplate: '%s | ToilJS', title: 'ToilJS' });
+            return null;
+        }
+        render(<LayoutDefaults />);
+        setRouteHead(
+            resolveMetadata({
+                title: 'useReducer | React Hooks',
+                description: 'Manage complex state with a reducer.',
+                openGraph: { title: 'useReducer | React Hooks', type: 'website' },
+            }),
+        );
+        expect(document.title).toBe('useReducer | React Hooks | ToilJS');
+        expect(
+            document.head.querySelector('meta[property="og:title"]')?.getAttribute('content'),
+        ).toBe('useReducer | React Hooks');
+    });
+
+    // A route can opt out of the layout's template by setting its own `titleTemplate: '%s'`, so the
+    // tab reads exactly the route title with no site suffix.
+    it("lets a route override the layout template with its own '%s'", () => {
+        function LayoutDefaults() {
+            useHead({ titleTemplate: '%s | ToilJS', title: 'ToilJS' });
+            return null;
+        }
+        render(<LayoutDefaults />);
+        setRouteHead(resolveMetadata({ title: 'useReducer | React Hooks', titleTemplate: '%s' }));
+        expect(document.title).toBe('useReducer | React Hooks');
+    });
 });