ompchamber 3.0.0 → 3.1.1

package/src/client/hooks/editor/use-occurrences.test.ts

@@ -0,0 +1,236 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `useOccurrences` — the ranges behind ⌘D, ⌘⇧L and ⌘⇧D.
+ *
+ * The rules live in `shared/lib/code/editor/occurrences` and are tested there;
+ * what this file covers is the hook's own contract: the caller's copy wins
+ * (clearing the ranges in the panel must clear them here), every change is
+ * announced so the surface repaints, and the textarea is read rather than
+ * assumed.
+ *
+ * Runs against a real DOM (happy-dom) because it is a Preact hook; the modules
+ * below are imported dynamically, after those globals exist.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { OccurrencesApi, useOccurrences as UseOccurrencesHook } from '@/client/hooks/editor/use-occurrences';
+import type { TextRange } from '@/shared/lib/code/editor/commands';
+
+let useOccurrences: typeof UseOccurrencesHook;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let api: OccurrencesApi | null = null;
+let container: HTMLElement;
+let textarea: HTMLTextAreaElement;
+/** What the caller passes in as its own copy, changed per test. */
+let controlled: TextRange[] | undefined;
+const announced: Array<readonly TextRange[]> = [];
+const selections: Array<[number, number]> = [];
+
+function Harness() {
+  api = useOccurrences({
+    controlled,
+    onChange: (ranges) => announced.push(ranges),
+  });
+  return null;
+}
+
+async function flush() {
+  for (let i = 0; i < 3; i++) {
+    await act(async () => {
+      for (let turn = 0; turn < 4; turn++) await Promise.resolve();
+    });
+  }
+}
+
+async function rerender() {
+  await act(async () => {
+    render(h(Harness, {}), container);
+  });
+  await flush();
+}
+
+function select(start: number, end = start) {
+  textarea.selectionStart = start;
+  textarea.selectionEnd = end;
+}
+
+/**
+ * Stands in for the editor's own `select`: it MOVES the textarea's selection and
+ * records it. The hook reads the textarea, so a callback that only recorded the
+ * range would leave every later press looking at the original caret.
+ */
+function selectingSurface() {
+  return (start: number, end: number) => {
+    selections.push([start, end]);
+    select(start, end);
+  };
+}
+
+function domGlobals(win: Window): Record<string, unknown> {
+  return {
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+    HTMLTextAreaElement: win.HTMLTextAreaElement,
+  };
+}
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(async () => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const [key, value] of Object.entries(domGlobals(win))) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = value;
+    (globalThis as Record<string, unknown>)[key] = value;
+  }
+  ({ useOccurrences } = await import('@/client/hooks/editor/use-occurrences'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+beforeEach(async () => {
+  api = null;
+  controlled = undefined;
+  announced.length = 0;
+  selections.length = 0;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  textarea = document.createElement('textarea');
+  textarea.value = 'alpha beta alpha gamma alpha';
+  container.appendChild(textarea);
+  await rerender();
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+});
+
+describe('useOccurrences', () => {
+  test('starts with no extra ranges', () => {
+    expect(api?.ranges).toEqual([]);
+  });
+
+  test('⌘D selects the word first, then grows one occurrence per press', async () => {
+    select(2);
+    await act(async () => {
+      api?.selectNext(textarea, selectingSurface());
+    });
+    expect(selections.at(-1)).toEqual([0, 5]);
+    expect(api?.ranges).toEqual([]);
+
+    await act(async () => {
+      api?.selectNext(textarea, selectingSurface());
+    });
+    expect(api?.ranges).toEqual([{ start: 11, end: 16 }]);
+  });
+
+  test('⌘⇧L takes every occurrence, primary first', async () => {
+    select(0, 5);
+    await act(async () => {
+      api?.selectAll(textarea, selectingSurface());
+    });
+
+    expect(selections.at(-1)).toEqual([0, 5]);
+    expect(api?.ranges).toEqual([
+      { start: 11, end: 16 },
+      { start: 23, end: 28 },
+    ]);
+  });
+
+  test('every change is announced so the surface can repaint', async () => {
+    select(0, 5);
+    await act(async () => {
+      api?.selectAll(textarea, () => {});
+    });
+
+    expect(announced.at(-1)?.length).toBe(2);
+  });
+
+  test('clear drops every range and says so', async () => {
+    select(0, 5);
+    await act(async () => {
+      api?.selectAll(textarea, () => {});
+    });
+    await act(async () => {
+      api?.clear();
+    });
+
+    expect(api?.ranges).toEqual([]);
+    expect(announced.at(-1)).toEqual([]);
+  });
+
+  test('the caller’s copy is authoritative', async () => {
+    // The panel can clear the ranges without the editor asking (a file switch,
+    // a save); the hook has to follow, not keep its own stale list.
+    controlled = [{ start: 1, end: 3 }];
+    await rerender();
+
+    expect(api?.ranges).toEqual([{ start: 1, end: 3 }]);
+
+    controlled = [];
+    await rerender();
+
+    expect(api?.ranges).toEqual([]);
+  });
+
+  test('⌘⇧D adds a caret below on the same column', async () => {
+    textarea.value = 'one\ntwo\nthree';
+    select(1);
+    await act(async () => {
+      api?.insertCursorBelow(textarea);
+    });
+
+    expect(api?.ranges).toEqual([{ start: 5, end: 5 }]);
+  });
+
+  test('⌘⇧D on the last line adds nothing', async () => {
+    textarea.value = 'one\ntwo';
+    select(5);
+    await act(async () => {
+      api?.insertCursorBelow(textarea);
+    });
+
+    expect(api?.ranges).toEqual([]);
+  });
+
+  test('replicate reports nothing without extra ranges', () => {
+    expect(api?.replicate('abc', 'abXc', { start: 2, end: 2 })).toBeNull();
+  });
+
+  test('replicate replays the browser’s edit at every extra range', async () => {
+    select(0, 5);
+    await act(async () => {
+      api?.selectAll(textarea, () => {});
+    });
+
+    // The browser replaced `alpha` at 0..5 with `Z`; the other two follow.
+    const applied = api?.replicate('alpha beta alpha gamma alpha', 'Z beta alpha gamma alpha', { start: 0, end: 5 });
+
+    expect(applied?.value).toBe('Z beta Z gamma Z');
+    expect(applied?.caret).toBe(1);
+    expect(applied?.rest.length).toBe(2);
+  });
+});

package/src/client/hooks/editor/use-occurrences.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The hook that owns the editor's extra selection ranges.
+ *
+ * It is a thin shell over `shared/lib/code/editor/occurrences`: the rules live
+ * there as pure functions, and this holds the ranges in a ref (the keydown and
+ * `input` handlers read them synchronously, inside one event) and tells the
+ * caller through `onChange` so the surface can paint them.
+ *
+ * The split is deliberate: a hook that decides where a range goes cannot be
+ * tested without a DOM, and every rule here is one a user notices when it is
+ * wrong.
+ */
+
+import { useRef } from 'preact/hooks';
+
+import {
+  growToNextOccurrence,
+  offsetBelow,
+  replicateAtRanges,
+  selectAllOccurrences,
+} from '@/shared/lib/code/editor/occurrences';
+import type { TextRange } from '@/shared/lib/code/editor/commands';
+
+export interface UseOccurrencesOptions {
+  /** Called with the extra ranges whenever they change, so the surface repaints. */
+  onChange: (ranges: readonly TextRange[]) => void;
+  /** The caller's copy of the ranges — clearing them there must clear them here. */
+  controlled?: readonly TextRange[];
+}
+
+export interface OccurrencesApi {
+  /** The extra ranges, excluding the textarea's own (primary) selection. */
+  readonly ranges: readonly TextRange[];
+  /** Replace the ranges and notify the surface. */
+  set: (ranges: readonly TextRange[]) => void;
+  /** Drop every extra range. */
+  clear: () => void;
+  /** ⌘D — grow the primary selection to the next occurrence of what it covers. */
+  selectNext: (input: HTMLTextAreaElement, select: (start: number, end: number) => void) => void;
+  /** ⌘⇧L — select every occurrence of the selection/word at the caret. */
+  selectAll: (input: HTMLTextAreaElement, select: (start: number, end: number) => void) => void;
+  /** ⌘⇧D — add an empty caret on the line below. */
+  insertCursorBelow: (input: HTMLTextAreaElement) => void;
+  /**
+   * Replay the browser's edit at every extra range. Returns the buffer and
+   * caret the caller should commit, or null when there is nothing to replicate.
+   */
+  replicate: (before: string, after: string, primaryBefore: TextRange) => { value: string; caret: number; rest: TextRange[] } | null;
+}
+
+export function useOccurrences({ onChange, controlled }: UseOccurrencesOptions): OccurrencesApi {
+  const ref = useRef<readonly TextRange[]>([]);
+  // The caller may clear the ranges without the editor asking (a file switch, a
+  // save), so its copy is mirrored into the ref the handlers read.
+  if (controlled && controlled !== ref.current) ref.current = controlled;
+
+  const set = (ranges: readonly TextRange[]) => {
+    ref.current = ranges;
+    onChange(ranges);
+  };
+
+  return {
+    get ranges() {
+      return ref.current;
+    },
+    set,
+    clear: () => set([]),
+
+    selectNext: (input, select) => {
+      const current: TextRange = { start: input.selectionStart, end: input.selectionEnd };
+      const next = growToNextOccurrence(input.value, current, ref.current);
+      if (!next) return;
+      select(next.primary.start, next.primary.end);
+      set(next.extras);
+    },
+
+    selectAll: (input, select) => {
+      const current: TextRange = { start: input.selectionStart, end: input.selectionEnd };
+      const all = selectAllOccurrences(input.value, current);
+      if (!all) return;
+      select(all.primary.start, all.primary.end);
+      set(all.extras);
+    },
+
+    insertCursorBelow: (input) => {
+      const target = offsetBelow(input.value, input.selectionStart);
+      if (target === null) return;
+      set([...ref.current, { start: target, end: target }]);
+    },
+
+    replicate: (before, after, primaryBefore) => replicateAtRanges(before, after, primaryBefore, ref.current),
+  };
+}

package/src/client/hooks/workspace/file-tree-actions.test.ts

@@ -0,0 +1,348 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `useFileActions` — the Files panel's server contract.
+ *
+ * Three rules are asserted here because each was a bug: a create that SUCCEEDS
+ * opens the new file (the dialog used to close and leave the user hunting for
+ * an empty row), a create that is REFUSED keeps the dialog open with the reason
+ * beside the field (rather than closing as if it had worked), and a settled
+ * response is acted on exactly ONCE — an unguarded effect re-ran on every render
+ * and pinned the tab the moment a file was created.
+ *
+ * Runs against a real DOM (happy-dom) because it is a Preact hook driving
+ * fetches. The modules below are therefore imported DYNAMICALLY, inside
+ * `beforeAll`: Preact binds its environment at evaluation time, so a static
+ * import would capture the DOM-less one and the render would fail — the same
+ * boundary `use-file-editor.test.ts` documents.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { FileActions, useFileActions as UseFileActionsHook } from '@/client/hooks/workspace/file-tree-actions';
+
+let useFileActions: typeof UseFileActionsHook;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let mounted: FileActions | null = null;
+let container: HTMLElement;
+
+/** What the stubbed endpoint was asked, and what it answers. */
+interface Server {
+  requests: Array<Record<string, string>>;
+  /** Response for the next create: `success` with a path, or a refusal. */
+  createResult: { success?: boolean; path?: string; error?: string };
+}
+
+const opened: Array<{ path: string; name: string }> = [];
+let refreshes = 0;
+
+function stubFetch(server: Server) {
+  globalThis.fetch = (async (_input: string | URL | Request, init?: RequestInit) => {
+    const form = init?.body as FormData;
+    const fields: Record<string, string> = {};
+    for (const [key, value] of form.entries()) fields[key] = String(value);
+    server.requests.push(fields);
+    // The fetcher reads `text()` and parses it itself, so a stub that only
+    // offers `json()` would leave every response looking empty — the request
+    // would be recorded and the effect would never see an answer.
+    const body = JSON.stringify(server.createResult);
+    return { ok: true, text: async () => body };
+  }) as unknown as typeof fetch;
+}
+
+/**
+ * Let the request chain and the render it queues land.
+ *
+ * Several `act` boundaries, each draining microtasks: the fetcher's chain
+ * (`fetch` → `text()` → parse → `setData` → `setState`) resolves over several
+ * turns, and a state update queued outside an `act` boundary is only flushed
+ * when the next one arrives. No timers — the hook resolves on promises, so
+ * waiting on the clock would only be guessing at how many turns it needs.
+ */
+async function settle() {
+  for (let i = 0; i < 8; i++) {
+    await act(async () => {
+      for (let turn = 0; turn < 8; turn++) await Promise.resolve();
+    });
+  }
+}
+
+function mount(file: { path: string; name: string }, diff?: { staged?: boolean; status?: string }) {
+  const Probe = () => {
+    mounted = useFileActions({
+      // `basePath` is the ABSOLUTE listing root the server reported, and it is
+      // what Copy Path anchors on — `rootPath` is the client's own (possibly
+      // `~`-relative) workspace path, which is not resolvable outside the panel.
+      file: { ...file, basePath: '/root', rootPath: '/root', repo: '.' },
+      diff,
+      onOpenFile: (target) => opened.push({ path: target.path, name: target.name }),
+      onActionComplete: () => refreshes++,
+    });
+    return null;
+  };
+  return act(async () => {
+    render(h(Probe, {}), container);
+  });
+}
+
+/** Open the create dialog the way the context menu does. */
+async function openCreateDialog() {
+  await act(async () => {
+    mounted?.handleAction('new_file');
+  });
+}
+
+/**
+ * Submit the create dialog with `name` and let the response land — the whole
+ * user sequence (open the dialog, type, press Create), because the state under
+ * test is what survives it.
+ */
+async function createNamed(name: string) {
+  await openCreateDialog();
+  await act(async () => {
+    mounted?.setCreateName(name);
+  });
+  await act(async () => {
+    mounted?.submitCreate({ preventDefault() {} } as never);
+  });
+  await settle();
+}
+
+function domGlobals(win: Window): Record<string, unknown> {
+  return {
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+  };
+}
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(async () => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const [key, value] of Object.entries(domGlobals(win))) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = value;
+    (globalThis as Record<string, unknown>)[key] = value;
+  }
+  ({ useFileActions } = await import('@/client/hooks/workspace/file-tree-actions'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+beforeEach(() => {
+  mounted = null;
+  opened.length = 0;
+  refreshes = 0;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+});
+
+function server(createResult: Server['createResult']): Server {
+  return { requests: [], createResult };
+}
+
+describe('useFileActions create', () => {
+  test('a created file opens in the editor and refreshes the tree', async () => {
+    const srv = server({ success: true, path: 'src/new-file.ts' });
+    stubFetch(srv);
+    await mount({ path: 'src', name: 'src' });
+    await createNamed('new-file.ts');
+
+    expect(srv.requests[0]).toEqual({ actionType: 'create', path: 'src', name: 'new-file.ts', root: '/root' });
+    expect(opened).toEqual([{ path: 'src/new-file.ts', name: 'new-file.ts' }]);
+    expect(refreshes).toBe(1);
+    expect(mounted?.showCreateModal).toBe(false);
+  });
+
+  test('a refusal keeps the dialog open and reports the server’s reason', async () => {
+    stubFetch(server({ error: 'new-file.ts already exists' }));
+    await mount({ path: 'src', name: 'src' });
+    await createNamed('new-file.ts');
+
+    expect(mounted?.showCreateModal).toBe(true);
+    expect(mounted?.createError).toBe('new-file.ts already exists');
+    expect(opened).toEqual([]);
+    expect(refreshes).toBe(0);
+  });
+
+  test('a refusal with no message still says something', async () => {
+    stubFetch(server({}));
+    await mount({ path: 'src', name: 'src' });
+    await createNamed('new-file.ts');
+
+    expect(mounted?.createError).toBe('Could not create the file');
+  });
+
+  test('a settled response is acted on once, however many times the row re-renders', async () => {
+    // The unguarded version re-ran this effect on every render and re-opened
+    // the file forever, which pinned the tab.
+    const srv = server({ success: true, path: 'src/once.ts' });
+    stubFetch(srv);
+    await mount({ path: 'src', name: 'src' });
+    await createNamed('once.ts');
+
+    for (let i = 0; i < 3; i++) {
+      await act(async () => {
+        mounted?.setCreateName('');
+      });
+    }
+    await settle();
+
+    expect(refreshes).toBe(1);
+    expect(opened.length).toBe(1);
+  });
+
+  test('an empty name never reaches the server', async () => {
+    const srv = server({ success: true, path: 'src/x.ts' });
+    stubFetch(srv);
+    await mount({ path: 'src', name: 'src' });
+
+    await act(async () => {
+      mounted?.setCreateName('   ');
+    });
+    await act(async () => {
+      mounted?.submitCreate({ preventDefault() {} } as never);
+    });
+    await settle();
+
+    expect(srv.requests).toEqual([]);
+    expect(mounted?.showCreateModal).toBe(false);
+  });
+});
+
+describe('useFileActions context menu', () => {
+  test('opening the create dialog resets the previous attempt', async () => {
+    stubFetch(server({ error: 'taken' }));
+    await mount({ path: 'src', name: 'src' });
+    await createNamed('taken.ts');
+    expect(mounted?.createError).toBe('taken');
+
+    await act(async () => {
+      mounted?.handleAction('new_file');
+    });
+
+    expect(mounted?.showCreateModal).toBe(true);
+    expect(mounted?.createError).toBeNull();
+    expect(mounted?.createName).toBe('');
+  });
+
+  test('copying the path reports the ABSOLUTE path, and does not call the server', async () => {
+    const srv = server({});
+    stubFetch(srv);
+    const writes: string[] = [];
+    // `copyToClipboard` prefers the async clipboard API, and only when the page
+    // is a secure context — the legacy textarea path needs `execCommand`, which
+    // happy-dom does not implement.
+    Object.defineProperty(globalThis.window, 'isSecureContext', { value: true, configurable: true });
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: {
+        writeText: async (text: string) => {
+          writes.push(text);
+        },
+      },
+      configurable: true,
+    });
+    await mount({ path: 'src/deep/file.ts', name: 'file.ts' });
+
+    await act(async () => {
+      mounted?.handleAction('copy_path');
+    });
+    await settle();
+
+    expect(writes).toEqual(['/root/src/deep/file.ts']);
+    expect(srv.requests).toEqual([]);
+  });
+
+  test('a folder gets the create action; a file does not offer it', async () => {
+    stubFetch(server({}));
+    await mount({ path: 'src', name: 'src' });
+
+    await act(async () => {
+      mounted?.handleAction('new_file');
+    });
+    expect(mounted?.showCreateModal).toBe(true);
+
+    await act(async () => {
+      mounted?.closeCreate();
+    });
+    expect(mounted?.showCreateModal).toBe(false);
+  });
+});
+
+describe('useFileActions rename and delete', () => {
+  test('rename sends the new path and closes on success', async () => {
+    const srv = server({ success: true });
+    stubFetch(srv);
+    await mount({ path: 'src/old.ts', name: 'old.ts' });
+
+    await act(async () => {
+      mounted?.handleAction('rename');
+    });
+    await act(async () => {
+      mounted?.setRenameValue('src/new.ts');
+    });
+    await act(async () => {
+      mounted?.submitRename({ preventDefault() {} } as never);
+    });
+    await settle();
+
+    expect(srv.requests[0]).toEqual({ actionType: 'rename', path: 'src/old.ts', newPath: 'src/new.ts', root: '/root' });
+    expect(mounted?.showRenameModal).toBe(false);
+    expect(refreshes).toBe(1);
+  });
+
+  test('delete posts the delete action for the row’s own path', async () => {
+    const srv = server({ success: true });
+    stubFetch(srv);
+    await mount({ path: 'src/gone.ts', name: 'gone.ts' });
+
+    await act(async () => {
+      mounted?.submitDelete();
+    });
+    await settle();
+
+    expect(srv.requests[0]).toEqual({ actionType: 'delete', path: 'src/gone.ts', root: '/root' });
+    expect(refreshes).toBe(1);
+  });
+
+  test('a git-history response does not close the dialogs or refresh the tree', async () => {
+    // `type` marks the history payload; treating it as a mutation would refresh
+    // the tree under an open modal.
+    const srv = server({ success: true, type: 'history', data: [] } as never);
+    stubFetch(srv);
+    await mount({ path: 'src/a.ts', name: 'a.ts' });
+
+    await act(async () => {
+      mounted?.handleAction('history');
+    });
+    await settle();
+
+    expect(mounted?.showHistoryModal).toBe(true);
+    expect(refreshes).toBe(0);
+  });
+});