release: v0.17.0 (#677)

See CHANGELOG.md, section [0.17.0] — 2026-09-23.

app/admin/__tests__/useDraft.test.tsx

@@ -0,0 +1,157 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { renderHook, act, render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { useDraft, readDraft } from '../components/useDraft';
+import DraftNotice from '../components/DraftNotice';
+
+/**
+ * #592: leaving the page builder or the journal editor inside the admin — a tab
+ * link, back, Reload, Logout — unmounted it and threw the edits away. The draft
+ * is what brings them back, so these tests walk the round trip an operator
+ * makes: edit, leave (unmount), come back (a fresh hook), load.
+ */
+
+afterEach(() => {
+  cleanup();
+  window.sessionStorage.clear();
+  vi.restoreAllMocks();
+});
+
+type Props = { value: string; dirty: boolean };
+
+function mount(key = 'k', initial: Props = { value: '', dirty: false }) {
+  return renderHook(({ value, dirty }: Props) => useDraft(key, value, dirty), {
+    initialProps: initial,
+  });
+}
+
+describe('useDraft', () => {
+  it('writes nothing before the server state has loaded', () => {
+    // The editor mounts with an empty state; that must not become a draft.
+    mount('k', { value: 'empty', dirty: true });
+    expect(readDraft('k')).toBeNull();
+  });
+
+  it('brings edits back after leaving and returning', () => {
+    const first = mount();
+    act(() => void first.result.current.load('server-v1'));
+    first.rerender({ value: 'my edit', dirty: true });
+    first.unmount();
+
+    const second = mount();
+    let restored: string | null = null;
+    act(() => {
+      restored = second.result.current.load('server-v1');
+    });
+    expect(restored).toBe('my edit');
+    expect(second.result.current.status).toBe('restored');
+  });
+
+  it('holds a draft back when the server changed since', () => {
+    const first = mount();
+    act(() => void first.result.current.load('server-v1'));
+    first.rerender({ value: 'my edit', dirty: true });
+    first.unmount();
+
+    const second = mount();
+    let restored: string | null = 'unset';
+    act(() => {
+      restored = second.result.current.load('server-v2');
+    });
+    // Applying it silently would overwrite the other save.
+    expect(restored).toBeNull();
+    expect(second.result.current.status).toBe('conflict');
+
+    let taken: string | null = null;
+    act(() => {
+      taken = second.result.current.takeConflicting();
+    });
+    expect(taken).toBe('my edit');
+    expect(second.result.current.status).toBe('restored');
+  });
+
+  it('forgets the draft once saved, and bases new edits on the saved state', () => {
+    const first = mount();
+    act(() => void first.result.current.load('server-v1'));
+    first.rerender({ value: 'v2', dirty: true });
+    act(() => first.result.current.saved('server-v2'));
+    first.rerender({ value: 'v2', dirty: false });
+    expect(readDraft('k')).toBeNull();
+
+    // Edits after the save must restore against the saved version, not the
+    // one the editor first loaded.
+    first.rerender({ value: 'v3 edit', dirty: true });
+    first.unmount();
+    const second = mount();
+    let restored: string | null = null;
+    act(() => {
+      restored = second.result.current.load('server-v2');
+    });
+    expect(restored).toBe('v3 edit');
+  });
+
+  it('drops the draft when the edits are undone by a discard', () => {
+    const first = mount();
+    act(() => void first.result.current.load('server-v1'));
+    first.rerender({ value: 'my edit', dirty: true });
+    act(() => first.result.current.discard());
+    first.rerender({ value: 'server-v1', dirty: false });
+    expect(readDraft('k')).toBeNull();
+    expect(first.result.current.status).toBe('none');
+  });
+
+  it('keeps editors apart by key', () => {
+    const a = mount('journal-a');
+    act(() => void a.result.current.load('a'));
+    a.rerender({ value: 'edit in a', dirty: true });
+
+    const b = mount('journal-b');
+    let restored: string | null = 'unset';
+    act(() => {
+      restored = b.result.current.load('a');
+    });
+    expect(restored).toBeNull();
+  });
+
+  it('degrades to no draft when storage is unavailable', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('SecurityError');
+    });
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('QuotaExceededError');
+    });
+    const { result, rerender } = mount();
+    let restored: string | null = 'unset';
+    act(() => {
+      restored = result.current.load('server-v1');
+    });
+    expect(restored).toBeNull();
+    expect(() => rerender({ value: 'edit', dirty: true })).not.toThrow();
+  });
+});
+
+describe('DraftNotice', () => {
+  const handlers = () => ({ onDiscard: vi.fn(), onRestore: vi.fn(), onDismiss: vi.fn() });
+
+  it('says nothing without a draft', () => {
+    const { container } = render(<DraftNotice status="none" subject="entry" {...handlers()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('says a restored draft is still unsaved and offers to discard it', () => {
+    const h = handlers();
+    render(<DraftNotice status="restored" subject="entry" {...h} />);
+    expect(screen.getByText(/were restored\. They are not saved yet/)).toBeTruthy();
+    fireEvent.click(screen.getByText('Discard changes'));
+    expect(h.onDiscard).toHaveBeenCalled();
+  });
+
+  it('asks before restoring over a newer save', () => {
+    const h = handlers();
+    render(<DraftNotice status="conflict" subject="page structure" {...h} />);
+    fireEvent.click(screen.getByText('Restore my changes'));
+    expect(h.onRestore).toHaveBeenCalled();
+    fireEvent.click(screen.getByText('Discard them'));
+    expect(h.onDiscard).toHaveBeenCalled();
+  });
+});