@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/__tests__/DocPlayer.test.tsx

@@ -1,635 +0,0 @@
-import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { DocPlayer } from '../DocPlayer';
-import type { Doc } from '@bendyline/squisq/schemas';
-import type { AudioController } from '../hooks/AudioController';
-import type { SquisqRenderAPI } from '../types';
-
-function minimalDoc(): Doc {
-  return {
-    articleId: 'smoke',
-    duration: 5,
-    blocks: [{ id: 'b1', startTime: 0, duration: 5, audioSegment: 0, layers: [] }],
-    audio: { segments: [] },
-  };
-}
-
-function docWithCover(): Doc {
-  return {
-    ...minimalDoc(),
-    startBlock: {
-      title: 'Managed Cover',
-      subtitle: 'Generated by Squisq',
-    },
-  };
-}
-
-function docWithTransition(): Doc {
-  return {
-    articleId: 'transition-doc',
-    duration: 10,
-    blocks: [
-      { id: 'first', startTime: 0, duration: 5, audioSegment: 0, layers: [] },
-      {
-        id: 'second',
-        startTime: 5,
-        duration: 5,
-        audioSegment: 0,
-        transition: { type: 'fade', duration: 1 },
-        layers: [
-          {
-            type: 'text',
-            id: 'animated-title',
-            content: { text: 'Second slide', style: { fontSize: 48, color: '#fff' } },
-            position: { x: 100, y: 100 },
-            animation: { type: 'fadeIn', duration: 1 },
-          },
-        ],
-      },
-    ],
-    audio: { segments: [] },
-  };
-}
-
-function docWithThreeSlides(): Doc {
-  return {
-    articleId: 'three-slide-transition-doc',
-    duration: 15,
-    blocks: [
-      { id: 'first', startTime: 0, duration: 5, audioSegment: 0, layers: [] },
-      { id: 'second', startTime: 5, duration: 5, audioSegment: 0, layers: [] },
-      {
-        id: 'third',
-        startTime: 10,
-        duration: 5,
-        audioSegment: 0,
-        transition: { type: 'fade', duration: 1 },
-        layers: [],
-      },
-    ],
-    audio: { segments: [] },
-  };
-}
-
-function controller(overrides: Partial<AudioController> = {}): AudioController {
-  return {
-    currentTime: 0,
-    isPlaying: false,
-    currentSegment: 0,
-    totalDuration: 5,
-    isEnded: false,
-    isReady: true,
-    isAvailable: true,
-    play: vi.fn(async () => {}),
-    pause: vi.fn(async () => {}),
-    toggle: vi.fn(async () => {}),
-    seekTo: vi.fn(async () => {}),
-    skipToSegment: vi.fn(async () => {}),
-    restart: vi.fn(async () => {}),
-    ...overrides,
-  };
-}
-
-function pointerEvent(type: string, clientX: number): MouseEvent {
-  const event = new MouseEvent(type, { bubbles: true, cancelable: true, button: 0, clientX });
-  Object.defineProperties(event, {
-    pointerId: { value: 1 },
-    pointerType: { value: 'touch' },
-  });
-  return event;
-}
-
-describe('DocPlayer smoke test', () => {
-  beforeAll(() => {
-    vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
-  });
-
-  afterAll(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('renders without crashing in video mode (default)', () => {
-    const { container } = render(<DocPlayer doc={minimalDoc()} basePath="/test" />);
-    expect(container.firstChild).toBeTruthy();
-  });
-
-  it('renders without crashing in slideshow mode', () => {
-    const { container } = render(
-      <DocPlayer doc={minimalDoc()} basePath="/test" displayMode="slideshow" />,
-    );
-    expect(container.firstChild).toBeTruthy();
-  });
-
-  it('lists block summaries and jumps to a selected slideshow block', () => {
-    const audioController = controller({ totalDuration: 15 });
-    render(
-      <DocPlayer
-        doc={docWithThreeSlides()}
-        audioController={audioController}
-        displayMode="slideshow"
-      />,
-    );
-
-    fireEvent.click(screen.getByTestId('slide-counter'));
-    expect(screen.getByTestId('slide-picker-item-0').textContent).toContain('1First');
-    expect(screen.getByTestId('slide-picker-item-2').textContent).toContain('3Third');
-
-    fireEvent.click(screen.getByTestId('slide-picker-item-2'));
-    expect(audioController.seekTo).toHaveBeenCalledWith(10);
-    expect(screen.queryByTestId('slide-picker')).toBeNull();
-  });
-
-  it('uses global left and right arrows to change slides without focusing the player', () => {
-    const audioController = controller({ currentTime: 5, totalDuration: 15 });
-    render(
-      <DocPlayer
-        doc={docWithThreeSlides()}
-        audioController={audioController}
-        displayMode="slideshow"
-        globalKeyboardShortcuts
-      />,
-    );
-
-    fireEvent.keyDown(document, { key: 'ArrowLeft' });
-    fireEvent.keyDown(document, { key: 'ArrowRight' });
-
-    expect(audioController.seekTo).toHaveBeenNthCalledWith(1, 0);
-    expect(audioController.seekTo).toHaveBeenNthCalledWith(2, 10);
-  });
-
-  it('globally opens the slide picker with ArrowUp instead of changing slides', () => {
-    const audioController = controller({ currentTime: 5, totalDuration: 15 });
-    render(
-      <DocPlayer
-        doc={docWithThreeSlides()}
-        audioController={audioController}
-        displayMode="slideshow"
-        globalKeyboardShortcuts
-      />,
-    );
-
-    fireEvent.keyDown(document, { key: 'ArrowUp' });
-
-    expect(screen.getByTestId('slide-picker')).toBeTruthy();
-    expect(audioController.seekTo).not.toHaveBeenCalled();
-  });
-
-  it('globally seeks video with left and right arrows', () => {
-    const audioController = controller({ currentTime: 20, totalDuration: 60 });
-    render(
-      <DocPlayer
-        doc={docWithThreeSlides()}
-        audioController={audioController}
-        globalKeyboardShortcuts
-      />,
-    );
-
-    fireEvent.keyDown(document, { key: 'ArrowRight' });
-    fireEvent.keyDown(document, { key: 'ArrowLeft' });
-
-    expect(audioController.seekTo).toHaveBeenNthCalledWith(1, 30);
-    expect(audioController.seekTo).toHaveBeenNthCalledWith(2, 10);
-  });
-
-  it('handles a focused-player arrow only once when global shortcuts are enabled', () => {
-    const audioController = controller({ currentTime: 5, totalDuration: 15 });
-    const { container } = render(
-      <DocPlayer
-        doc={docWithThreeSlides()}
-        audioController={audioController}
-        displayMode="slideshow"
-        globalKeyboardShortcuts
-      />,
-    );
-
-    fireEvent.keyDown(container.querySelector<HTMLElement>('.doc-player')!, {
-      key: 'ArrowRight',
-    });
-
-    expect(audioController.seekTo).toHaveBeenCalledTimes(1);
-    expect(audioController.seekTo).toHaveBeenCalledWith(10);
-  });
-
-  it('does not globally intercept arrows from editable fields', () => {
-    const audioController = controller({ currentTime: 20, totalDuration: 60 });
-    render(
-      <>
-        <input aria-label="Editable field" />
-        <DocPlayer
-          doc={docWithThreeSlides()}
-          audioController={audioController}
-          globalKeyboardShortcuts
-        />
-      </>,
-    );
-
-    fireEvent.keyDown(screen.getByRole('textbox', { name: 'Editable field' }), {
-      key: 'ArrowRight',
-    });
-
-    expect(audioController.seekTo).not.toHaveBeenCalled();
-  });
-
-  it('shows the managed cover as the first slideshow entry by default', async () => {
-    const { container } = render(
-      <DocPlayer doc={docWithCover()} basePath="/test" displayMode="slideshow" />,
-    );
-    await waitFor(() => expect(container.textContent).toContain('Managed Cover'));
-    expect(screen.getByTestId('slide-counter').textContent).toBe('Cover');
-  });
-
-  it('can suppress the managed cover slide', () => {
-    const { container } = render(
-      <DocPlayer
-        doc={docWithCover()}
-        basePath="/test"
-        displayMode="slideshow"
-        showCoverSlide={false}
-      />,
-    );
-    expect(container.textContent).not.toContain('Managed Cover');
-    expect(screen.getByTestId('slide-counter').textContent).toBe('1 / 1');
-  });
-
-  it('renders the managed cover without layer animation classes when animations are disabled', async () => {
-    const { container } = render(
-      <DocPlayer
-        doc={docWithCover()}
-        basePath="/test"
-        displayMode="slideshow"
-        animationsEnabled={false}
-      />,
-    );
-
-    await waitFor(() => expect(container.textContent).toContain('Managed Cover'));
-    expect(container.querySelector('[class*="anim-"]')).toBeNull();
-  });
-
-  it('uses static cuts without an outgoing slide while preserving timeline changes', () => {
-    const doc = docWithTransition();
-    const onRenderAPIReady = vi.fn();
-    const { container, rerender } = render(
-      <DocPlayer
-        doc={doc}
-        audioController={controller({ currentTime: 0, totalDuration: 10 })}
-        showControls={false}
-        renderMode
-        animationsEnabled={false}
-        onRenderAPIReady={onRenderAPIReady}
-      />,
-    );
-
-    rerender(
-      <DocPlayer
-        doc={doc}
-        audioController={controller({ currentTime: 5.1, totalDuration: 10 })}
-        showControls={false}
-        renderMode
-        animationsEnabled={false}
-        onRenderAPIReady={onRenderAPIReady}
-      />,
-    );
-
-    expect(container.querySelector('.doc-player__block--previous')).toBeNull();
-    expect(
-      container.querySelector('.doc-player__block--active [data-block-id="second"]'),
-    ).toBeTruthy();
-    expect(container.querySelector('.transition-fade-enter')).toBeNull();
-    expect(container.querySelector('[class*="anim-"]')).toBeNull();
-  });
-
-  it('keeps a swiped-to slide entrance transition without remounting the swiped-away slide', async () => {
-    const doc = docWithThreeSlides();
-    const secondSlideController = controller({ currentTime: 5, totalDuration: 15 });
-    const { container, rerender } = render(
-      <DocPlayer
-        doc={doc}
-        audioController={secondSlideController}
-        displayMode="slideshow"
-        showControls={false}
-      />,
-    );
-    const player = container.querySelector<HTMLElement>('.doc-player');
-    expect(player).not.toBeNull();
-    vi.spyOn(player!, 'getBoundingClientRect').mockReturnValue({
-      width: 1000,
-      height: 600,
-      x: 0,
-      y: 0,
-      top: 0,
-      right: 1000,
-      bottom: 600,
-      left: 0,
-      toJSON: () => ({}),
-    });
-
-    fireEvent(player!, pointerEvent('pointerdown', 800));
-    expect(player!.classList.contains('doc-player--grabbing')).toBe(true);
-    fireEvent(window, pointerEvent('pointermove', 400));
-    expect(
-      container.querySelector<HTMLElement>('.doc-player__block--active')?.style.transform,
-    ).toBe('translateX(-400px)');
-    fireEvent(window, pointerEvent('pointerup', 400));
-
-    await waitFor(() => expect(secondSlideController.seekTo).toHaveBeenCalledWith(10), {
-      timeout: 1000,
-    });
-    rerender(
-      <DocPlayer
-        doc={doc}
-        audioController={controller({ currentTime: 10, totalDuration: 15 })}
-        displayMode="slideshow"
-        showControls={false}
-      />,
-    );
-
-    expect(
-      container.querySelector(
-        '.doc-player__block--active [data-block-id="third"].transition-fade-enter',
-      ),
-    ).toBeTruthy();
-    expect(container.querySelector('.doc-player__block--previous')).toBeNull();
-  });
-
-  it('keeps outgoing slide context for ordinary slideshow button navigation', () => {
-    const doc = docWithThreeSlides();
-    const secondSlideController = controller({ currentTime: 5, totalDuration: 15 });
-    const { container, rerender } = render(
-      <DocPlayer doc={doc} audioController={secondSlideController} displayMode="slideshow" />,
-    );
-
-    fireEvent.click(screen.getByTestId('slide-next'));
-    expect(secondSlideController.seekTo).toHaveBeenCalledWith(10);
-    rerender(
-      <DocPlayer
-        doc={doc}
-        audioController={controller({ currentTime: 10, totalDuration: 15 })}
-        displayMode="slideshow"
-      />,
-    );
-
-    expect(
-      container.querySelector('.doc-player__block--previous [data-block-id="second"]'),
-    ).toBeTruthy();
-    expect(
-      container.querySelector(
-        '.doc-player__block--active [data-block-id="third"].transition-fade-enter',
-      ),
-    ).toBeTruthy();
-  });
-
-  it('advances from slideshow cover to slide 1', async () => {
-    const { container } = render(
-      <DocPlayer doc={docWithCover()} basePath="/test" displayMode="slideshow" />,
-    );
-    await waitFor(() => expect(screen.getByTestId('slide-counter').textContent).toBe('Cover'));
-    fireEvent.click(screen.getByTestId('slide-next'));
-    await waitFor(() => expect(screen.getByTestId('slide-counter').textContent).toBe('1 / 1'));
-    expect(container.textContent).not.toContain('Managed Cover');
-  });
-
-  it('accepts controlled cover visibility for a synchronized audience mirror', async () => {
-    const states: Array<{ isCoverVisible?: boolean }> = [];
-    const { container, rerender } = render(
-      <DocPlayer
-        doc={docWithCover()}
-        audioController={controller()}
-        displayMode="slideshow"
-        showControls={false}
-        coverVisible={false}
-        onPlaybackStateChange={(state) => states.push(state)}
-      />,
-    );
-
-    await waitFor(() => expect(container.textContent).not.toContain('Managed Cover'));
-    expect(states[states.length - 1]?.isCoverVisible).toBe(false);
-    expect(screen.queryByTestId('slide-counter')).toBeNull();
-
-    rerender(
-      <DocPlayer
-        doc={docWithCover()}
-        audioController={controller()}
-        displayMode="slideshow"
-        showControls={false}
-        coverVisible
-        onPlaybackStateChange={(state) => states.push(state)}
-      />,
-    );
-
-    await waitFor(() => expect(container.textContent).toContain('Managed Cover'));
-    expect(states[states.length - 1]?.isCoverVisible).toBe(true);
-  });
-
-  it('reinitializes cover state when a new document replaces the old one', async () => {
-    const { container, rerender } = render(
-      <DocPlayer doc={docWithCover()} basePath="/test" displayMode="slideshow" />,
-    );
-    fireEvent.click(screen.getByTestId('slide-next'));
-    await waitFor(() => expect(screen.getByTestId('slide-counter').textContent).toBe('1 / 1'));
-    rerender(
-      <DocPlayer
-        doc={{
-          ...docWithCover(),
-          articleId: 'replacement',
-          startBlock: { title: 'Replacement Cover' },
-        }}
-        basePath="/test"
-        displayMode="slideshow"
-      />,
-    );
-    await waitFor(() => expect(container.textContent).toContain('Replacement Cover'));
-    expect(screen.getByTestId('slide-counter').textContent).toBe('Cover');
-  });
-
-  it('renders without crashing in linear mode', () => {
-    const { container } = render(
-      <DocPlayer doc={minimalDoc()} basePath="/test" displayMode="linear" />,
-    );
-    expect(container.firstChild).toBeTruthy();
-  });
-
-  it('exposes playback controls via onControlsReady', () => {
-    let controls: { play: () => void; pause: () => void } | null = null;
-    render(
-      <DocPlayer
-        doc={minimalDoc()}
-        basePath="/test"
-        showControls={false}
-        onControlsReady={(c) => {
-          controls = c;
-        }}
-      />,
-    );
-    expect(controls).not.toBeNull();
-    expect(typeof controls!.play).toBe('function');
-    expect(typeof controls!.pause).toBe('function');
-  });
-
-  it('handles keyboard shortcuts only in the focused player instance', () => {
-    const first = controller();
-    const second = controller();
-    const { container } = render(
-      <>
-        <DocPlayer doc={minimalDoc()} audioController={first} showControls={false} />
-        <DocPlayer doc={minimalDoc()} audioController={second} showControls={false} />
-      </>,
-    );
-    const players = container.querySelectorAll<HTMLElement>('.doc-player');
-    players[1].focus();
-    fireEvent.keyDown(players[1], { key: ' ' });
-    expect(second.toggle).toHaveBeenCalledOnce();
-    expect(first.toggle).not.toHaveBeenCalled();
-
-    const editable = document.createElement('div');
-    editable.setAttribute('contenteditable', 'true');
-    players[1].append(editable);
-    fireEvent.keyDown(editable, { key: ' ' });
-    expect(second.toggle).toHaveBeenCalledOnce();
-  });
-
-  it('keeps render APIs scoped to their player callbacks during sibling cleanup', () => {
-    const firstEvents: Array<SquisqRenderAPI | null> = [];
-    const secondEvents: Array<SquisqRenderAPI | null> = [];
-    const one = render(
-      <DocPlayer
-        doc={minimalDoc()}
-        renderMode
-        audioController={controller()}
-        onRenderAPIReady={(api) => firstEvents.push(api)}
-      />,
-    );
-    render(
-      <DocPlayer
-        doc={minimalDoc()}
-        renderMode
-        audioController={controller()}
-        onRenderAPIReady={(api) => secondEvents.push(api)}
-      />,
-    );
-    const secondAPI = secondEvents[secondEvents.length - 1];
-    expect(firstEvents[firstEvents.length - 1]).not.toBeNull();
-    expect(secondAPI).not.toBeNull();
-
-    one.unmount();
-
-    expect(firstEvents[firstEvents.length - 1]).toBeNull();
-    expect(secondEvents[secondEvents.length - 1]).toBe(secondAPI);
-    expect(typeof secondAPI?.seekTo).toBe('function');
-    expect('seekTo' in window).toBe(false);
-    expect('getDuration' in window).toBe(false);
-    expect('squisqActivePlayerId' in window).toBe(false);
-    expect('squisqPlayers' in window).toBe(false);
-  });
-
-  it('delivers and cleans up an instance render API through the callback', () => {
-    const observed: Array<SquisqRenderAPI | null> = [];
-    const { unmount } = render(
-      <DocPlayer
-        doc={minimalDoc()}
-        renderMode
-        audioController={controller()}
-        onRenderAPIReady={(api) => observed.push(api)}
-      />,
-    );
-
-    expect(observed[observed.length - 1]?.getDuration()).toBeGreaterThan(0);
-    unmount();
-    expect(observed[observed.length - 1]).toBeNull();
-  });
-
-  it('keeps the render API identity stable while dispatching to the latest controller', async () => {
-    const firstController = controller({ currentSegment: 0 });
-    const secondController = controller({ currentSegment: 1 });
-    const observed: Array<SquisqRenderAPI | null> = [];
-    const onRenderAPIReady = (api: SquisqRenderAPI | null) => observed.push(api);
-    const { rerender } = render(
-      <DocPlayer
-        doc={minimalDoc()}
-        renderMode
-        audioController={firstController}
-        onRenderAPIReady={onRenderAPIReady}
-      />,
-    );
-    const api = observed[observed.length - 1];
-    expect(api).not.toBeNull();
-
-    rerender(
-      <DocPlayer
-        doc={minimalDoc()}
-        renderMode
-        audioController={secondController}
-        onRenderAPIReady={onRenderAPIReady}
-      />,
-    );
-
-    expect(observed[observed.length - 1]).toBe(api);
-    await api!.seekTo(3.25);
-    expect(secondController.seekTo).toHaveBeenCalledWith(3.25);
-    expect(firstController.seekTo).not.toHaveBeenCalled();
-  });
-
-  it('refreshes instance render metadata when the doc prop changes', () => {
-    const firstDoc: Doc = { ...minimalDoc(), captions: { version: 1, phrases: [] } };
-    const observed: Array<SquisqRenderAPI | null> = [];
-    const onRenderAPIReady = (next: SquisqRenderAPI | null) => {
-      observed.push(next);
-    };
-    const { container, rerender } = render(
-      <DocPlayer
-        doc={firstDoc}
-        renderMode
-        audioController={controller()}
-        onRenderAPIReady={onRenderAPIReady}
-      />,
-    );
-    expect(container.querySelector('.doc-player')).toBeTruthy();
-    const nextDoc: Doc = {
-      ...minimalDoc(),
-      captions: {
-        version: 1,
-        phrases: [{ text: 'new caption', startTime: 0, endTime: 1, audioSegment: 0 }],
-      },
-    };
-    rerender(
-      <DocPlayer
-        doc={nextDoc}
-        renderMode
-        audioController={controller()}
-        onRenderAPIReady={onRenderAPIReady}
-      />,
-    );
-    expect(observed[observed.length - 1]?.getCaptions()).toEqual([
-      { text: 'new caption', startTime: 0, endTime: 1 },
-    ]);
-  });
-});
-
-describe('DocPlayer front door (doc / markdown resolution)', () => {
-  it('renders a doc built from the markdown prop', () => {
-    const { container } = render(
-      <DocPlayer markdown={'# Hello From Markdown\n\nBody text here.'} displayMode="linear" />,
-    );
-    expect(container.querySelector('.doc-player')).toBeTruthy();
-    expect(container.textContent).toContain('Hello From Markdown');
-  });
-
-  it('doc wins over markdown when both are provided', () => {
-    const { container } = render(
-      <DocPlayer doc={minimalDoc()} markdown="# Markdown Loses" displayMode="linear" />,
-    );
-    expect(container.querySelector('.doc-player')).toBeTruthy();
-    expect(container.textContent).not.toContain('Markdown Loses');
-  });
-
-  it('renders an empty state without throwing when neither doc nor markdown is given', () => {
-    const { container } = render(<DocPlayer />);
-    const empty = container.querySelector('.doc-player--empty');
-    expect(empty).toBeTruthy();
-    expect(empty!.classList.contains('doc-player')).toBe(true);
-  });
-
-  it('defaults basePath when omitted', () => {
-    const { container } = render(<DocPlayer doc={minimalDoc()} />);
-    expect(container.querySelector('.doc-player')).toBeTruthy();
-  });
-});

package/src/__tests__/DocPlayerStylesSentinel.test.tsx

@@ -1,41 +0,0 @@
-/**
- * Missing-stylesheet sentinel test.
- *
- * Lives in its own file so it owns a fresh module instance of DocPlayer
- * (vitest isolates module registries per test file) — the sentinel warning
- * is one-shot at module level, so this file's first mount deterministically
- * observes it.
- */
-
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render } from '@testing-library/react';
-import { DocPlayer } from '../DocPlayer';
-import type { Doc } from '@bendyline/squisq/schemas';
-
-function minimalDoc(): Doc {
-  return {
-    articleId: 'sentinel',
-    duration: 5,
-    blocks: [{ id: 'b1', startTime: 0, duration: 5, audioSegment: 0, layers: [] }],
-    audio: { segments: [] },
-  };
-}
-
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
-describe('DocPlayer missing-CSS sentinel', () => {
-  it('warns once (and only once) in dev when the stylesheet is not loaded', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-    render(<DocPlayer doc={minimalDoc()} />);
-    const sentinelCalls = () =>
-      warnSpy.mock.calls.filter((c) => String(c[0]).includes('squisq-react/styles'));
-    expect(sentinelCalls().length).toBe(1);
-
-    // Second mount must not warn again — module-level one-shot.
-    render(<DocPlayer doc={minimalDoc()} />);
-    expect(sentinelCalls().length).toBe(1);
-  });
-});