@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/__tests__/MapLayer.test.tsx

@@ -1,63 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, waitFor } from '@testing-library/react';
-import type { MapLayer as MapLayerSchema } from '@bendyline/squisq/schemas';
-
-const { composeMapImage } = vi.hoisted(() => ({
-  composeMapImage: vi.fn(async () => 'data:image/png;base64,map'),
-}));
-vi.mock('../utils/mapTileUtils', () => ({ composeMapImage }));
-
-import { MapLayer } from '../layers/MapLayer';
-
-function layer(
-  markers: MapLayerSchema['content']['markers'],
-  showAttribution = true,
-): MapLayerSchema {
-  return {
-    id: 'map',
-    type: 'map',
-    position: { x: 0, y: 0, width: 100, height: 100 },
-    content: {
-      center: { lat: 1, lng: 2 },
-      zoom: 4,
-      style: 'road',
-      markers,
-      showAttribution,
-    },
-  };
-}
-
-describe('MapLayer dependencies', () => {
-  beforeEach(() => composeMapImage.mockClear());
-
-  it('recomposes when markers or attribution change', async () => {
-    const firstMarkers = [{ lat: 1, lng: 2, label: 'A' }];
-    const { rerender } = render(
-      <svg>
-        <MapLayer
-          layer={layer(firstMarkers)}
-          basePath="."
-          viewport={{ width: 100, height: 100 }}
-          blockTime={0}
-        />
-      </svg>,
-    );
-    await waitFor(() => expect(composeMapImage).toHaveBeenCalledTimes(1));
-
-    const secondMarkers = [{ lat: 3, lng: 4, label: 'B' }];
-    rerender(
-      <svg>
-        <MapLayer
-          layer={layer(secondMarkers, false)}
-          basePath="."
-          viewport={{ width: 100, height: 100 }}
-          blockTime={0}
-        />
-      </svg>,
-    );
-    await waitFor(() => expect(composeMapImage).toHaveBeenCalledTimes(2));
-    expect(composeMapImage).toHaveBeenLastCalledWith(
-      expect.objectContaining({ markers: secondMarkers, showAttribution: false }),
-    );
-  });
-});

package/src/__tests__/MarkdownRenderer.test.tsx

@@ -1,357 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { MarkdownRenderer } from '../MarkdownRenderer';
-import {
-  parseMarkdown,
-  type MarkdownBlockNode,
-  type MarkdownInlineNode,
-} from '@bendyline/squisq/markdown';
-
-// ── Helpers ────────────────────────────────────────────────────────
-
-function text(value: string): MarkdownInlineNode {
-  return { type: 'text', value };
-}
-
-function paragraph(...children: MarkdownInlineNode[]): MarkdownBlockNode {
-  return { type: 'paragraph', children };
-}
-
-function heading(
-  depth: 1 | 2 | 3 | 4 | 5 | 6,
-  ...children: MarkdownInlineNode[]
-): MarkdownBlockNode {
-  return { type: 'heading', depth, children };
-}
-
-function parseNodes(markdown: string): MarkdownBlockNode[] {
-  return parseMarkdown(markdown).children;
-}
-
-// ── Tests ──────────────────────────────────────────────────────────
-
-describe('MarkdownRenderer', () => {
-  it('renders null for empty nodes', () => {
-    const { container } = render(<MarkdownRenderer nodes={[]} />);
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('renders a paragraph', () => {
-    const { container } = render(<MarkdownRenderer nodes={[paragraph(text('Hello world'))]} />);
-    const p = container.querySelector('p.squisq-md-p');
-    expect(p).toBeTruthy();
-    expect(p?.textContent).toBe('Hello world');
-  });
-
-  it('renders headings at correct depth', () => {
-    const nodes: MarkdownBlockNode[] = [
-      heading(1, text('Title')),
-      heading(2, text('Subtitle')),
-      heading(3, text('Section')),
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    expect(container.querySelector('h1')?.textContent).toBe('Title');
-    expect(container.querySelector('h2')?.textContent).toBe('Subtitle');
-    expect(container.querySelector('h3')?.textContent).toBe('Section');
-  });
-
-  it('renders emphasis and strong inline', () => {
-    const nodes: MarkdownBlockNode[] = [
-      paragraph(text('normal '), { type: 'emphasis', children: [text('italic')] }, text(' and '), {
-        type: 'strong',
-        children: [text('bold')],
-      }),
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    expect(container.querySelector('em')?.textContent).toBe('italic');
-    expect(container.querySelector('strong')?.textContent).toBe('bold');
-  });
-
-  it('renders inline code', () => {
-    const nodes: MarkdownBlockNode[] = [
-      paragraph(text('run '), { type: 'inlineCode', value: 'npm install' }),
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const code = container.querySelector('code.squisq-md-inline-code');
-    expect(code?.textContent).toBe('npm install');
-  });
-
-  it('renders a link with target _blank', () => {
-    const nodes: MarkdownBlockNode[] = [
-      paragraph({
-        type: 'link',
-        url: 'https://example.com',
-        title: 'Example',
-        children: [text('click')],
-      }),
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const a = container.querySelector('a.squisq-md-link') as HTMLAnchorElement;
-    expect(a).toBeTruthy();
-    expect(a.href).toContain('example.com');
-    expect(a.target).toBe('_blank');
-    expect(a.textContent).toBe('click');
-  });
-
-  it('renders unsafe links as inert text by default', () => {
-    const { container } = render(
-      <MarkdownRenderer nodes={parseNodes('[x](javascript:alert(1))')} />,
-    );
-    expect(container.querySelector('a.squisq-md-link')).toBeNull();
-    expect(container.querySelector('.squisq-md-link--blocked')?.textContent).toBe('x');
-    expect(container.innerHTML).not.toContain('javascript:');
-  });
-
-  it('linkSchemes allows a host scheme as a real anchor, never executable ones', () => {
-    const nodes = parseNodes('[a](workspace-nav:src%2Fa.ts) [b](javascript:alert(1))');
-    const blocked = render(<MarkdownRenderer nodes={nodes} />);
-    expect(blocked.container.querySelector('a.squisq-md-link')).toBeNull();
-
-    const allowed = render(<MarkdownRenderer nodes={nodes} linkSchemes={['workspace-nav']} />);
-    const a = allowed.container.querySelector('a.squisq-md-link') as HTMLAnchorElement;
-    expect(a?.getAttribute('href')).toBe('workspace-nav:src%2Fa.ts');
-    // javascript: stays blocked even when a host lists it
-    const evil = render(
-      <MarkdownRenderer
-        nodes={parseNodes('[b](javascript:alert(1))')}
-        linkSchemes={['javascript']}
-      />,
-    );
-    expect(evil.container.querySelector('a.squisq-md-link')).toBeNull();
-  });
-
-  it('renders an image', () => {
-    const nodes: MarkdownBlockNode[] = [
-      paragraph({
-        type: 'image',
-        url: '/cat.jpg',
-        alt: 'A cat',
-      }),
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const img = container.querySelector('img.squisq-md-image') as HTMLImageElement;
-    expect(img).toBeTruthy();
-    expect(img.alt).toBe('A cat');
-  });
-
-  it('renders an unordered list', () => {
-    const nodes: MarkdownBlockNode[] = [
-      {
-        type: 'list',
-        ordered: false,
-        children: [
-          { type: 'listItem', children: [paragraph(text('Item A'))] },
-          { type: 'listItem', children: [paragraph(text('Item B'))] },
-        ],
-      },
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const ul = container.querySelector('ul.squisq-md-ul');
-    expect(ul).toBeTruthy();
-    const items = ul?.querySelectorAll('li');
-    expect(items?.length).toBe(2);
-    expect(items?.[0]?.textContent).toBe('Item A');
-  });
-
-  it('renders an ordered list with start number', () => {
-    const nodes: MarkdownBlockNode[] = [
-      {
-        type: 'list',
-        ordered: true,
-        start: 3,
-        children: [{ type: 'listItem', children: [paragraph(text('Third'))] }],
-      },
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const ol = container.querySelector('ol.squisq-md-ol') as HTMLOListElement;
-    expect(ol).toBeTruthy();
-    expect(ol.start).toBe(3);
-  });
-
-  it('renders a task list item with checkbox', () => {
-    const nodes: MarkdownBlockNode[] = [
-      {
-        type: 'list',
-        ordered: false,
-        children: [
-          { type: 'listItem', checked: true, children: [paragraph(text('Done'))] },
-          { type: 'listItem', checked: false, children: [paragraph(text('Todo'))] },
-        ],
-      },
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
-    expect(checkboxes.length).toBe(2);
-    expect((checkboxes[0] as HTMLInputElement).checked).toBe(true);
-    expect((checkboxes[1] as HTMLInputElement).checked).toBe(false);
-  });
-
-  it('renders a code block', () => {
-    const nodes: MarkdownBlockNode[] = [
-      { type: 'code', lang: 'typescript', value: 'const x = 1;' },
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const pre = container.querySelector('pre.squisq-md-code-block');
-    expect(pre).toBeTruthy();
-    const code = pre?.querySelector('code.language-typescript');
-    expect(code?.textContent).toBe('const x = 1;');
-  });
-
-  it('renders a blockquote', () => {
-    const nodes: MarkdownBlockNode[] = [
-      { type: 'blockquote', children: [paragraph(text('Quoted text'))] },
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const bq = container.querySelector('blockquote.squisq-md-blockquote');
-    expect(bq).toBeTruthy();
-    expect(bq?.textContent).toBe('Quoted text');
-  });
-
-  it('renders a thematic break', () => {
-    const nodes: MarkdownBlockNode[] = [
-      paragraph(text('Before')),
-      { type: 'thematicBreak' },
-      paragraph(text('After')),
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    expect(container.querySelector('hr.squisq-md-hr')).toBeTruthy();
-  });
-
-  it('renders a table', () => {
-    const nodes: MarkdownBlockNode[] = [
-      {
-        type: 'table',
-        align: ['left', 'right'],
-        children: [
-          {
-            type: 'tableRow',
-            children: [
-              { type: 'tableCell', isHeader: true, children: [text('Name')] },
-              { type: 'tableCell', isHeader: true, children: [text('Value')] },
-            ],
-          },
-          {
-            type: 'tableRow',
-            children: [
-              { type: 'tableCell', children: [text('A')] },
-              { type: 'tableCell', children: [text('1')] },
-            ],
-          },
-        ],
-      },
-    ];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const table = container.querySelector('table.squisq-md-table');
-    expect(table).toBeTruthy();
-    expect(table?.querySelectorAll('th').length).toBe(2);
-    expect(table?.querySelectorAll('td').length).toBe(2);
-  });
-
-  it('renders strikethrough', () => {
-    const nodes: MarkdownBlockNode[] = [paragraph({ type: 'delete', children: [text('removed')] })];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    const del = container.querySelector('del.squisq-md-del');
-    expect(del?.textContent).toBe('removed');
-  });
-
-  it('renders a hard break', () => {
-    const nodes: MarkdownBlockNode[] = [paragraph(text('line1'), { type: 'break' }, text('line2'))];
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-    expect(container.querySelector('br')).toBeTruthy();
-  });
-
-  it('applies custom className', () => {
-    const { container } = render(
-      <MarkdownRenderer nodes={[paragraph(text('test'))]} className="custom" />,
-    );
-    expect(container.querySelector('.squisq-md.custom')).toBeTruthy();
-  });
-
-  it('sanitizes raw HTML by default', () => {
-    const nodes = parseNodes(
-      '<div><img src="x.jpg" onerror="alert(1)"><script>alert(1)</script><span onclick="alert(1)">ok</span></div>',
-    );
-    const { container } = render(<MarkdownRenderer nodes={nodes} />);
-
-    expect(container.querySelector('script')).toBeNull();
-    expect(container.querySelector('img')?.getAttribute('src')).toBe('x.jpg');
-    expect(container.querySelector('img')?.getAttribute('onerror')).toBeNull();
-    expect(container.querySelector('span')?.getAttribute('onclick')).toBeNull();
-    expect(container.textContent).toContain('ok');
-    expect(container.textContent).not.toContain('alert(1)');
-  });
-
-  it('strips raw HTML when requested', () => {
-    const { container } = render(
-      <MarkdownRenderer nodes={parseNodes('<div><span>hidden</span></div>')} htmlPolicy="strip" />,
-    );
-    expect(container.textContent).not.toContain('hidden');
-    expect(container.querySelector('span')).toBeNull();
-  });
-
-  it('preserves trusted HTML structure without executable attributes', () => {
-    const { container } = render(
-      <MarkdownRenderer
-        nodes={parseNodes('<div><span class="trusted" onclick="alert(1)">ok</span></div>')}
-        htmlPolicy="trusted"
-      />,
-    );
-    const span = container.querySelector('span.trusted');
-    expect(span?.getAttribute('onclick')).toBeNull();
-  });
-
-  it('blocks executable URLs under the trusted policy', () => {
-    const { container } = render(
-      <MarkdownRenderer
-        nodes={parseNodes('<a href="javascript:alert(1)">bad</a><img src="javascript:x">')}
-        htmlPolicy="trusted"
-      />,
-    );
-    expect(container.querySelector('a')?.getAttribute('href')).toBeNull();
-    expect(container.querySelector('img')?.getAttribute('src')).toBeNull();
-  });
-
-  // Host-affecting tags (style/script/…) must never reach the document.
-  // A bare <style> applies page-wide (CSS isn't scoped outside shadow DOM
-  // / iframes), so an embedded game's <style> in a chat message used to
-  // restyle the whole app chrome. Guard it across every policy.
-  it('drops a raw <style> by default so it cannot leak onto the host', () => {
-    const { container } = render(
-      <MarkdownRenderer
-        nodes={parseNodes('<div><style>body{font-family:monospace}</style><p>hi</p></div>')}
-      />,
-    );
-    expect(container.querySelector('style')).toBeNull();
-    expect(container.textContent).toContain('hi');
-    expect(container.textContent).not.toContain('font-family');
-  });
-
-  it('drops <style>/<script> even under the trusted policy, keeping safe content', () => {
-    const { container } = render(
-      <MarkdownRenderer
-        nodes={parseNodes(
-          '<div class="game"><style>body{font-family:monospace}</style><script>alert(1)</script><p>play</p></div>',
-        )}
-        htmlPolicy="trusted"
-      />,
-    );
-    expect(container.querySelector('style')).toBeNull();
-    expect(container.querySelector('script')).toBeNull();
-    expect(container.querySelector('div.game')).toBeTruthy();
-    expect(container.textContent).toContain('play');
-    expect(container.textContent).not.toContain('font-family');
-  });
-
-  it('drops a raw <style> on the verbatim path when htmlChildren was not parsed', () => {
-    // parseHtml:false leaves htmlChildren empty while rawHtml keeps the
-    // markup — the raw-string backstop must still refuse the fast path.
-    const node = {
-      type: 'htmlBlock',
-      rawHtml: '<style>body{font-family:monospace}</style><p>play</p>',
-      htmlChildren: [],
-    } as unknown as MarkdownBlockNode;
-    const { container } = render(<MarkdownRenderer nodes={[node]} htmlPolicy="trusted" />);
-    expect(container.querySelector('style')).toBeNull();
-    expect(container.textContent).not.toContain('font-family');
-  });
-});

package/src/__tests__/MediaClipLayer.test.tsx

@@ -1,70 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { act, render, waitFor } from '@testing-library/react';
-import type { MediaProvider, ScheduledClip } from '@bendyline/squisq/schemas';
-import { MediaClipLayer } from '../MediaClipLayer';
-import { MediaContext } from '../hooks/MediaContext';
-
-afterEach(() => vi.restoreAllMocks());
-
-describe('MediaClipLayer', () => {
-  it('mutes scheduled audio when the player muted contract is enabled', () => {
-    vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
-    const clip: ScheduledClip = {
-      id: 'narration',
-      kind: 'audio',
-      src: 'narration.mp3',
-      absoluteStart: 0,
-      absoluteEnd: 5,
-      sourceIn: 0,
-      anchor: 'document',
-    };
-    const { container } = render(
-      <MediaClipLayer schedule={[clip]} currentTime={0} isPlaying={false} basePath="." muted />,
-    );
-    expect(container.querySelector('audio')?.muted).toBe(true);
-  });
-
-  it('restores a paused clip position after an async media URL resolves', async () => {
-    vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
-    let resolveUrl!: (url: string) => void;
-    const provider = {
-      resolveUrl: vi.fn(
-        () =>
-          new Promise<string>((resolve) => {
-            resolveUrl = resolve;
-          }),
-      ),
-    } as unknown as MediaProvider;
-    const clip: ScheduledClip = {
-      id: 'background-video',
-      kind: 'video',
-      src: 'background.mp4',
-      absoluteStart: 0,
-      absoluteEnd: 10,
-      sourceIn: 2,
-      anchor: 'document',
-    };
-
-    const { container } = render(
-      <MediaContext.Provider value={provider}>
-        <MediaClipLayer
-          schedule={[clip]}
-          currentTime={5}
-          isPlaying={false}
-          basePath="/media"
-          muted
-        />
-      </MediaContext.Provider>,
-    );
-    const video = container.querySelector('video')!;
-    await waitFor(() => expect(video.currentTime).toBe(7));
-
-    // Replacing an HTMLMediaElement source resets its playback position in a
-    // browser. Simulate that reset before the provider's blob URL arrives.
-    video.currentTime = 0;
-    await act(async () => resolveUrl('blob:resolved-background'));
-
-    await waitFor(() => expect(video.getAttribute('src')).toBe('blob:resolved-background'));
-    expect(video.currentTime).toBe(7);
-  });
-});

package/src/__tests__/MediaContext.test.tsx

@@ -1,51 +0,0 @@
-import { act, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import type { MediaProvider } from '@bendyline/squisq/schemas';
-import { MediaContext, useMediaUrl } from '../hooks/MediaContext';
-
-function deferred<T>() {
-  let resolve!: (value: T) => void;
-  let reject!: (reason?: unknown) => void;
-  const promise = new Promise<T>((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-}
-
-function Probe({ path }: { path: string }) {
-  return <span data-testid="url">{useMediaUrl(path, '.')}</span>;
-}
-
-describe('useMediaUrl', () => {
-  it('clears a stale URL and consumes provider rejection', async () => {
-    const first = deferred<string>();
-    const second = deferred<string>();
-    const resolveUrl = vi
-      .fn()
-      .mockReturnValueOnce(first.promise)
-      .mockReturnValueOnce(second.promise);
-    const provider = { resolveUrl } as unknown as MediaProvider;
-    const { rerender } = render(
-      <MediaContext.Provider value={provider}>
-        <Probe path="first.png" />
-      </MediaContext.Provider>,
-    );
-    expect(screen.getByTestId('url').textContent).toBe('./first.png');
-
-    rerender(
-      <MediaContext.Provider value={provider}>
-        <Probe path="second.png" />
-      </MediaContext.Provider>,
-    );
-    expect(screen.getByTestId('url').textContent).toBe('./second.png');
-
-    await act(async () => {
-      first.resolve('blob:first');
-      await first.promise;
-      second.reject(new Error('missing'));
-      await second.promise.catch(() => undefined);
-    });
-    expect(screen.getByTestId('url').textContent).toBe('./second.png');
-  });
-});

package/src/__tests__/PathLayer.test.tsx

@@ -1,84 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { PathLayer } from '../layers/PathLayer';
-import type { PathLayer as PathLayerType } from '@bendyline/squisq/schemas';
-
-const viewport = { width: 1000, height: 1000 };
-
-function renderPath(layer: PathLayerType) {
-  const { container } = render(
-    <svg>
-      <PathLayer layer={layer} viewport={viewport} blockTime={0} />
-    </svg>,
-  );
-  return container.querySelector('.block-layer--path > path')!;
-}
-
-describe('PathLayer', () => {
-  it('uses the stored absolute `d` for plain paths (no shapeKind)', () => {
-    const path = renderPath({
-      id: 'p1',
-      type: 'path',
-      position: { x: 0, y: 0, width: 100, height: 100 },
-      content: { d: 'M 10 10 L 90 90' },
-    });
-    expect(path.getAttribute('d')).toBe('M 10 10 L 90 90');
-  });
-
-  it('derives `d` from the position box for a named shape', () => {
-    // A diamond's first vertex is the top-center of its box.
-    const path = renderPath({
-      id: 'p2',
-      type: 'path',
-      position: { x: 100, y: 200, width: 400, height: 200 },
-      content: { d: 'STALE', shapeKind: 'diamond' },
-    });
-    const d = path.getAttribute('d')!;
-    expect(d).not.toBe('STALE');
-    // Top vertex at (x + w/2, y) = (300, 200).
-    expect(d.startsWith('M 300 200')).toBe(true);
-  });
-
-  it('moving the position moves a named shape (regenerates `d`)', () => {
-    const at = (x: number) =>
-      renderPath({
-        id: 'p3',
-        type: 'path',
-        position: { x, y: 0, width: 200, height: 200 },
-        content: { d: 'M 0 0', shapeKind: 'diamond' },
-      }).getAttribute('d')!;
-    expect(at(0)).not.toBe(at(300));
-  });
-
-  it('resolves `%` positions against the viewport', () => {
-    const path = renderPath({
-      id: 'p4',
-      type: 'path',
-      position: { x: '0%', y: '0%', width: '50%', height: '50%' },
-      content: { d: '', shapeKind: 'diamond' },
-    });
-    // 50% of a 1000px viewport → 500px box; diamond top vertex at (250, 0).
-    expect(path.getAttribute('d')!.startsWith('M 250 0')).toBe(true);
-  });
-
-  it('falls back to the stored `d` when shapeKind is unknown', () => {
-    const path = renderPath({
-      id: 'p5',
-      type: 'path',
-      position: { x: 0, y: 0, width: 100, height: 100 },
-      content: { d: 'M 1 2 L 3 4', shapeKind: 'not-a-real-shape' },
-    });
-    expect(path.getAttribute('d')).toBe('M 1 2 L 3 4');
-  });
-
-  it('reads the old serialized arrow field without exposing it in the PathLayer type', () => {
-    const legacyLayer = {
-      id: 'legacy-arrow',
-      type: 'path',
-      position: { x: 0, y: 0, width: 100, height: 100 },
-      content: { d: 'M 0 0 L 100 100', arrow: 'end' },
-    } as unknown as PathLayerType;
-
-    expect(renderPath(legacyLayer).getAttribute('marker-end')).toMatch(/^url\(#marker-end-/);
-  });
-});