@bendyline/squisq-editor-react 2.1.0 → 2.3.0

package/src/__tests__/useImageEditor.test.tsx

@@ -1,226 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { renderHook, act, waitFor } from '@testing-library/react';
-import { MemoryContentContainer } from '@bendyline/squisq/storage';
-import {
-  IMAGE_EDIT_STATE_FILENAME,
-  readImageEditDoc,
-  writeImageEditDoc,
-  createEmptyImageEditDoc,
-} from '@bendyline/squisq/imageEdit';
-import { useImageEditor } from '../imageEditor/useImageEditor.js';
-
-function deferred<T>() {
-  let resolve!: (value: T) => void;
-  const promise = new Promise<T>((res) => {
-    resolve = res;
-  });
-  return { promise, resolve };
-}
-
-beforeEach(() => {
-  // jsdom doesn't implement createObjectURL or HTMLImageElement loading.
-  // Stub both so the hook can complete its asset-resolution path.
-  if (typeof URL.createObjectURL !== 'function') {
-    Object.defineProperty(URL, 'createObjectURL', {
-      configurable: true,
-      value: vi.fn(() => 'blob:stub'),
-    });
-  } else {
-    vi.spyOn(URL, 'createObjectURL').mockImplementation(() => 'blob:stub');
-  }
-  if (typeof URL.revokeObjectURL !== 'function') {
-    Object.defineProperty(URL, 'revokeObjectURL', {
-      configurable: true,
-      value: vi.fn(),
-    });
-  }
-});
-
-describe('useImageEditor', () => {
-  it('loads an existing state.json from the container', async () => {
-    const container = new MemoryContentContainer();
-    const doc = createEmptyImageEditDoc(120, 80);
-    await writeImageEditDoc(container, doc);
-
-    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
-
-    await waitFor(() => expect(result.current.ready).toBe(true));
-    expect(result.current.state?.doc.canvas.width).toBe(120);
-    expect(result.current.error).toBe(null);
-  });
-
-  it('seeds an empty doc when no state.json and no initialSrc', async () => {
-    const container = new MemoryContentContainer();
-    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
-
-    await waitFor(() => expect(result.current.ready).toBe(true));
-    expect(result.current.state?.doc.layers).toHaveLength(0);
-    // The seed should have been written back to the container.
-    const persisted = await readImageEditDoc(container);
-    expect(persisted).not.toBeNull();
-  });
-
-  it('persists state.json after a debounced action', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(50, 50));
-
-    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
-    await waitFor(() => expect(result.current.ready).toBe(true));
-
-    act(() => {
-      result.current.dispatch({
-        type: 'add-layer',
-        layer: {
-          type: 'shape',
-          position: { x: 0, y: 0, width: 10, height: 10 },
-          content: { shape: 'rect', fill: '#000' },
-        },
-      });
-    });
-
-    await waitFor(() => expect(result.current.state?.dirty).toBe(false), {
-      timeout: 500,
-    });
-
-    const persisted = await readImageEditDoc(container);
-    expect(persisted?.layers).toHaveLength(1);
-  });
-
-  it('uploadAsset writes bytes under assets/ and returns the path', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
-
-    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
-    await waitFor(() => expect(result.current.ready).toBe(true));
-
-    const bytes = new Uint8Array([1, 2, 3, 4]);
-    // jsdom's Blob predates the arrayBuffer() method on some versions, so
-    // shim a minimal Blob-like that the hook only needs `.arrayBuffer()`
-    // and `.type` from.
-    const file = {
-      type: 'image/png',
-      arrayBuffer: async () => bytes.buffer,
-    } as unknown as Blob;
-    let path = '';
-    await act(async () => {
-      path = await result.current.uploadAsset(file, 'pic.png');
-    });
-    expect(path).toMatch(/^assets\/.+\.png$/);
-    const written = await container.readFile(path);
-    expect(written).not.toBeNull();
-    expect(written!.byteLength).toBe(4);
-  });
-
-  it('flush writes synchronously and clears dirty', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
-
-    const { result } = renderHook(
-      () => useImageEditor({ container, persistDebounceMs: 100000 }), // effectively disabled
-    );
-    await waitFor(() => expect(result.current.ready).toBe(true));
-
-    act(() => {
-      result.current.dispatch({
-        type: 'set-canvas',
-        canvas: { width: 25, height: 25 },
-      });
-    });
-    expect(result.current.state?.dirty).toBe(true);
-
-    await act(async () => {
-      await result.current.flush();
-    });
-    expect(result.current.state?.dirty).toBe(false);
-    const persisted = await readImageEditDoc(container);
-    expect(persisted?.canvas.width).toBe(25);
-  });
-
-  it('does not mark a newer edit clean when an older write resolves', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
-    const originalWrite = container.writeFile.bind(container);
-    const gate = deferred<void>();
-    const started = deferred<void>();
-    let writes = 0;
-    vi.spyOn(container, 'writeFile').mockImplementation(async (...args) => {
-      writes += 1;
-      if (writes === 1) {
-        started.resolve();
-        await gate.promise;
-      }
-      return originalWrite(...args);
-    });
-    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
-    await waitFor(() => expect(result.current.ready).toBe(true));
-
-    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 20, height: 20 } }));
-    await started.promise;
-    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 30, height: 30 } }));
-    gate.resolve();
-
-    await waitFor(() => expect(result.current.state?.dirty).toBe(false));
-    expect((await readImageEditDoc(container))?.canvas.width).toBe(30);
-  });
-
-  it('flushes a dirty debounce when the editor unmounts', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
-    const { result, unmount } = renderHook(() =>
-      useImageEditor({ container, persistDebounceMs: 100000 }),
-    );
-    await waitFor(() => expect(result.current.ready).toBe(true));
-    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 44, height: 44 } }));
-    unmount();
-    await waitFor(async () => expect((await readImageEditDoc(container))?.canvas.width).toBe(44));
-  });
-
-  it('does not populate the URL cache after unmount', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
-    await container.writeFile('assets/late.png', new Uint8Array([1]).buffer, 'image/png');
-    const { result, unmount } = renderHook(() => useImageEditor({ container }));
-    await waitFor(() => expect(result.current.ready).toBe(true));
-    const originalRead = container.readFile.bind(container);
-    const gate = deferred<ArrayBuffer | null>();
-    vi.spyOn(container, 'readFile').mockImplementation((path) =>
-      path === 'assets/late.png' ? gate.promise : originalRead(path),
-    );
-    const create = vi.mocked(URL.createObjectURL);
-    const before = create.mock.calls.length;
-    const pending = result.current.resolveAssetUrl('assets/late.png');
-    unmount();
-    gate.resolve(new Uint8Array([1]).buffer);
-    await expect(pending).rejects.toThrow(/cancelled/);
-    expect(create).toHaveBeenCalledTimes(before);
-  });
-
-  it('versioning is null when allowVersioning is false', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
-    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
-    await waitFor(() => expect(result.current.ready).toBe(true));
-    expect(result.current.versioning).toBe(null);
-  });
-
-  it('versioning manager is exposed when allowVersioning is true', async () => {
-    const container = new MemoryContentContainer();
-    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
-    const { result } = renderHook(() =>
-      useImageEditor({
-        container,
-        persistDebounceMs: 5,
-        allowVersioning: true,
-        versioningAutoSaveIdleMs: 0, // disable autosave
-      }),
-    );
-    await waitFor(() => expect(result.current.ready).toBe(true));
-    expect(result.current.versioning).not.toBe(null);
-  });
-});
-
-// Ensure constants are referenced so unused-import lint stays quiet.
-void IMAGE_EDIT_STATE_FILENAME;

package/src/__tests__/useJsonEditorTokens.test.ts

@@ -1,59 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { DARK_SURFACE, LIGHT_SURFACE, DEFAULT_THEME } from '@bendyline/squisq/schemas';
-import { useJsonEditorTokens } from '../jsonEditor/useJsonEditorTokens';
-
-type StyleBag = Record<string, string>;
-
-/** Install a matchMedia stub whose `(prefers-color-scheme: dark)` resolves to `dark`. */
-function mockPrefersDark(dark: boolean): void {
-  Object.defineProperty(window, 'matchMedia', {
-    configurable: true,
-    value: (query: string) => ({
-      matches: dark && query.includes('dark'),
-      media: query,
-      onchange: null,
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(() => false),
-    }),
-  });
-}
-
-describe('useJsonEditorTokens', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('emits jsonform-prefixed tokens', () => {
-    mockPrefersDark(false);
-    const { result } = renderHook(() => useJsonEditorTokens(DEFAULT_THEME, LIGHT_SURFACE));
-    const style = result.current.style as StyleBag;
-    expect(style['--squisq-jsonform-bg']).toBe(LIGHT_SURFACE.background);
-    expect(style).toHaveProperty('--squisq-jsonform-warning');
-    expect(style).toHaveProperty('--squisq-jsonform-input-bg');
-  });
-
-  it("responds to a dark OS preference under surface='auto' (reactive via useAutoSurface)", () => {
-    mockPrefersDark(true);
-    const { result } = renderHook(() => useJsonEditorTokens(DEFAULT_THEME, 'auto'));
-    const style = result.current.style as StyleBag;
-    expect(style['--squisq-jsonform-bg']).toBe(DARK_SURFACE.background);
-    expect(style['--squisq-jsonform-text']).toBe(DARK_SURFACE.text);
-    expect(result.current.theme.colors.background).toBe(DARK_SURFACE.background);
-  });
-
-  it("uses light surface under surface='auto' when the OS prefers light", () => {
-    mockPrefersDark(false);
-    const { result } = renderHook(() => useJsonEditorTokens(DEFAULT_THEME, 'auto'));
-    const style = result.current.style as StyleBag;
-    expect(style['--squisq-jsonform-bg']).toBe(LIGHT_SURFACE.background);
-  });
-
-  beforeEach(() => {
-    // Default to a defined matchMedia so the hook's useAutoSurface can subscribe.
-    mockPrefersDark(false);
-  });
-});

package/src/__tests__/useMediaRecorder.test.ts

@@ -1,302 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { useMediaRecorder } from '../recorder/hooks/useMediaRecorder.js';
-
-/**
- * Lifecycle test for the recorder hook with stubbed browser APIs.
- * Drives request → start → stop and verifies the surface contract:
- * state transitions, blob production, and cleanup on cancel.
- */
-
-class FakeMediaStreamTrack {
-  readyState: 'live' | 'ended' = 'live';
-  kind: 'audio' | 'video';
-  stop = vi.fn(() => {
-    this.readyState = 'ended';
-  });
-  constructor(kind: 'audio' | 'video') {
-    this.kind = kind;
-  }
-}
-
-class FakeMediaStream {
-  tracks: FakeMediaStreamTrack[];
-  constructor(tracks: FakeMediaStreamTrack[] = []) {
-    this.tracks = tracks;
-  }
-  get active() {
-    return this.tracks.some((t) => t.readyState === 'live');
-  }
-  getTracks() {
-    return this.tracks;
-  }
-  getAudioTracks() {
-    return this.tracks.filter((t) => t.kind === 'audio');
-  }
-  getVideoTracks() {
-    return this.tracks.filter((t) => t.kind === 'video');
-  }
-}
-
-interface FakeRecorderHandle {
-  state: 'recording' | 'inactive';
-  mimeType: string;
-  stream: FakeMediaStream;
-  ondataavailable: ((event: { data: Blob }) => void) | null;
-  onstop: (() => void) | null;
-  onerror: ((event: unknown) => void) | null;
-  start(): void;
-  stop(): void;
-}
-
-let lastRecorder: FakeRecorderHandle | null = null;
-let lastStream: FakeMediaStream | null = null;
-
-class FakeMediaRecorder implements FakeRecorderHandle {
-  state: 'recording' | 'inactive' = 'inactive';
-  mimeType: string;
-  stream: FakeMediaStream;
-  ondataavailable: ((event: { data: Blob }) => void) | null = null;
-  onstop: (() => void) | null = null;
-  onerror: ((event: unknown) => void) | null = null;
-  constructor(stream: FakeMediaStream, options?: { mimeType?: string }) {
-    this.stream = stream;
-    this.mimeType = options?.mimeType ?? 'audio/webm';
-    // Expose the most recent instance to the test body so assertions can
-    // poke at its state/event handlers. Not a `const self = this` alias
-    // pattern — `lastRecorder` is a module-level slot, not a workaround
-    // for arrow-function-vs-method `this` confusion.
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    lastRecorder = this;
-  }
-  static isTypeSupported(mime: string): boolean {
-    return mime.startsWith('audio/webm') || mime.startsWith('video/webm');
-  }
-  start() {
-    this.state = 'recording';
-  }
-  stop() {
-    if (this.state === 'inactive') return;
-    this.state = 'inactive';
-    // Emit a fake data chunk then resolve.
-    this.ondataavailable?.({ data: new Blob(['hello'], { type: this.mimeType }) });
-    this.onstop?.();
-  }
-}
-
-const originalMediaRecorder = (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
-const originalNavigator = globalThis.navigator;
-
-beforeEach(() => {
-  lastRecorder = null;
-  (globalThis as { MediaRecorder?: unknown }).MediaRecorder = FakeMediaRecorder;
-  const fakeStream = new FakeMediaStream([new FakeMediaStreamTrack('audio')]);
-  lastStream = fakeStream;
-  Object.defineProperty(globalThis, 'navigator', {
-    value: {
-      mediaDevices: {
-        getUserMedia: vi.fn().mockResolvedValue(fakeStream),
-      },
-    },
-    configurable: true,
-  });
-});
-
-afterEach(() => {
-  if (originalMediaRecorder === undefined) {
-    delete (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
-  } else {
-    (globalThis as { MediaRecorder?: unknown }).MediaRecorder = originalMediaRecorder;
-  }
-  Object.defineProperty(globalThis, 'navigator', {
-    value: originalNavigator,
-    configurable: true,
-  });
-});
-
-describe('useMediaRecorder lifecycle', () => {
-  it('walks idle → ready → recording → stopped and produces a blob', async () => {
-    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
-
-    expect(result.current.state).toBe('idle');
-
-    await act(async () => {
-      await result.current.request();
-    });
-    expect(result.current.state).toBe('ready');
-    expect(result.current.stream).not.toBeNull();
-    expect(result.current.mimeType).toMatch(/^audio\/webm/);
-    expect(result.current.extension).toBe('.webm');
-    expect(result.current.directory).toBe('audio');
-
-    act(() => {
-      result.current.start();
-    });
-    expect(result.current.state).toBe('recording');
-    expect(lastRecorder?.state).toBe('recording');
-
-    let blob: Blob | null = null;
-    await act(async () => {
-      blob = await result.current.stop();
-    });
-    expect(result.current.state).toBe('stopped');
-    expect(blob).toBeInstanceOf(Blob);
-    expect(result.current.blob).toBeInstanceOf(Blob);
-  });
-
-  it('reset() returns to ready when the underlying stream is still live (discard & re-record)', async () => {
-    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
-
-    await act(async () => {
-      await result.current.request();
-    });
-    act(() => {
-      result.current.start();
-    });
-    await act(async () => {
-      await result.current.stop();
-    });
-    expect(result.current.state).toBe('stopped');
-
-    act(() => {
-      result.current.reset();
-    });
-
-    expect(result.current.state).toBe('ready');
-    expect(result.current.blob).toBeNull();
-    expect(result.current.stream).not.toBeNull();
-  });
-
-  it('defaults to the mic source when called with no options', async () => {
-    const { result } = renderHook(() => useMediaRecorder());
-
-    expect(result.current.state).toBe('idle');
-
-    await act(async () => {
-      await result.current.request();
-    });
-
-    // Mic path: audio-only capture via getUserMedia, lands in `audio/`.
-    expect(result.current.state).toBe('ready');
-    expect(result.current.mimeType).toMatch(/^audio\/webm/);
-    expect(result.current.directory).toBe('audio');
-    const getUserMedia = navigator.mediaDevices.getUserMedia as ReturnType<typeof vi.fn>;
-    expect(getUserMedia).toHaveBeenCalled();
-  });
-
-  it('camera includes the mic by default', async () => {
-    const { result } = renderHook(() => useMediaRecorder({ source: 'camera' }));
-    await act(async () => {
-      await result.current.request();
-    });
-    const getUserMedia = navigator.mediaDevices.getUserMedia as ReturnType<typeof vi.fn>;
-    expect(getUserMedia).toHaveBeenCalledWith(
-      expect.objectContaining({ video: true, audio: true }),
-    );
-  });
-
-  it('camera omits the mic when includeMicrophone is false', async () => {
-    const { result } = renderHook(() =>
-      useMediaRecorder({ source: 'camera', includeMicrophone: false }),
-    );
-    await act(async () => {
-      await result.current.request();
-    });
-    const getUserMedia = navigator.mediaDevices.getUserMedia as ReturnType<typeof vi.fn>;
-    expect(getUserMedia).toHaveBeenCalledWith(
-      expect.objectContaining({ video: true, audio: false }),
-    );
-  });
-
-  it('cancel() tears down state and stops the stream tracks', async () => {
-    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
-
-    await act(async () => {
-      await result.current.request();
-    });
-    const stream = result.current.stream as unknown as FakeMediaStream;
-    expect(stream).not.toBeNull();
-    const tracks = stream.getTracks();
-
-    act(() => {
-      result.current.cancel();
-    });
-
-    expect(result.current.state).toBe('idle');
-    expect(result.current.stream).toBeNull();
-    expect(tracks.every((t) => t.stop.mock.calls.length > 0)).toBe(true);
-  });
-
-  it('deduplicates concurrent permission requests', async () => {
-    let resolve!: (stream: FakeMediaStream) => void;
-    const pending = new Promise<FakeMediaStream>((res) => {
-      resolve = res;
-    });
-    const getUserMedia = vi.fn().mockReturnValue(pending);
-    Object.defineProperty(globalThis, 'navigator', {
-      configurable: true,
-      value: { mediaDevices: { getUserMedia } },
-    });
-    const stream = new FakeMediaStream([new FakeMediaStreamTrack('audio')]);
-    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
-    let first!: Promise<void>;
-    let second!: Promise<void>;
-    act(() => {
-      first = result.current.request();
-      second = result.current.request();
-    });
-    expect(getUserMedia).toHaveBeenCalledTimes(1);
-    resolve(stream);
-    await act(async () => Promise.all([first, second]));
-    expect(result.current.state).toBe('ready');
-  });
-
-  it('releases an acquired stream when recorder construction fails', async () => {
-    class ThrowingRecorder {
-      static isTypeSupported() {
-        return true;
-      }
-      constructor() {
-        throw new Error('construction failed');
-      }
-    }
-    (globalThis as { MediaRecorder?: unknown }).MediaRecorder = ThrowingRecorder;
-    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
-    await act(async () => {
-      await expect(result.current.request()).rejects.toThrow('construction failed');
-    });
-    expect(lastStream?.getTracks().every((track) => track.stop.mock.calls.length > 0)).toBe(true);
-  });
-
-  it('ignores a late onstop event after cancel', async () => {
-    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
-    await act(async () => result.current.request());
-    act(() => result.current.start());
-    const lateOnStop = lastRecorder?.onstop;
-    act(() => result.current.cancel());
-    act(() => lateOnStop?.());
-    expect(result.current.state).toBe('idle');
-    expect(result.current.blob).toBeNull();
-  });
-
-  it('returns the same in-flight stop promise to repeated callers', async () => {
-    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
-    await act(async () => result.current.request());
-    act(() => result.current.start());
-    const recorder = lastRecorder!;
-    const complete = recorder.onstop!;
-    recorder.stop = vi.fn(() => {
-      recorder.state = 'inactive';
-    });
-    let first!: Promise<Blob | null>;
-    let second!: Promise<Blob | null>;
-    act(() => {
-      first = result.current.stop();
-      second = result.current.stop();
-    });
-    expect(second).toBe(first);
-    act(() => complete());
-    await first;
-    expect(result.current.state).toBe('stopped');
-  });
-});

package/src/__tests__/useTimelineClock.test.ts

@@ -1,21 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { advanceTime } from '../useTimelineClock';
-
-describe('advanceTime', () => {
-  it('advances by dt within range', () => {
-    expect(advanceTime(2, 1.5, 30)).toBe(3.5);
-  });
-
-  it('clamps to total at the end', () => {
-    expect(advanceTime(29.5, 1, 30)).toBe(30);
-    expect(advanceTime(30, 5, 30)).toBe(30);
-  });
-
-  it('never goes below 0', () => {
-    expect(advanceTime(0.2, -1, 30)).toBe(0);
-  });
-
-  it('returns 0 for an empty timeline', () => {
-    expect(advanceTime(5, 1, 0)).toBe(0);
-  });
-});