site-builder/craft/src/components/sections/Gallery.toHtml.test.ts

import { describe, test, expect } from 'vitest';
import { Gallery } from './Gallery';

const toHtml = (Gallery as any).toHtml;

describe('Gallery.toHtml columns + lightbox controls (previously unexposed props)', () => {
  test('columns drives the grid-template-columns repeat count', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], columns: 5 }, '');
    expect(html).toContain('grid-template-columns:repeat(5,1fr)');
  });

  test('lightbox=true adds the delegated-listener overlay markup (columns unaffected)', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], columns: 4, lightbox: true }, '');
    expect(html).toContain('grid-template-columns:repeat(4,1fr)');
    expect(html).toContain('role="dialog"');
  });

  test('a non-numeric columns value falls back safely (Number() coercion, not NaN in the template)', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg' }], columns: 'not-a-number' as any }, '');
    expect(html).toContain('grid-template-columns:repeat(3,1fr)');
  });
});

describe('Gallery.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
  test('margin/padding/border/box-shadow/opacity all flow into the section style attribute', () => {
    const { html } = toHtml(
      {
        images: [{ src: '/a.jpg', alt: 'a' }],
        style: {
          marginTop: '20px',
          paddingLeft: '12px',
          border: '1px solid #333333',
          boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
          opacity: '0.9',
        },
      },
      ''
    );
    expect(html).toContain('margin-top:20px');
    expect(html).toContain('padding-left:12px');
    expect(html).toContain('border:1px solid #333333');
    expect(html).toContain('box-shadow:0 1px 2px rgba(0,0,0,0.08)');
    expect(html).toContain('opacity:0.9');
  });
});

describe('Gallery.craft.props exposes columns/lightbox + the animation/visibility rollout', () => {
  test('columns and lightbox have their existing defaults', () => {
    const props = (Gallery as any).craft.props;
    expect(props.columns).toBe(3);
    expect(props.lightbox).toBe(false);
  });

  test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
    const props = (Gallery as any).craft.props;
    expect(props.animation).toBe('');
    expect(props.animationDelay).toBe('0');
    expect(props.hideOnDesktop).toBe(false);
    expect(props.hideOnTablet).toBe(false);
    expect(props.hideOnMobile).toBe(false);
  });

  test('style carries blank/default box-model keys', () => {
    const style = (Gallery as any).craft.props.style;
    expect(style).toHaveProperty('marginTop');
    expect(style).toHaveProperty('paddingTop');
    expect(style.border).toBe('none');
    expect(style.boxShadow).toBe('none');
    expect(style.opacity).toBe('1');
  });
});

describe('Gallery.toHtml lightbox uses a delegated listener, not per-item onclick (A4.3)', () => {
  test('no per-item inline onclick with interpolated src', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
    expect(html).not.toMatch(/onclick="[^"]*_open\(/);
    expect(html).toContain('data-lb-src="/a.jpg"');
  });

  test('a single-quote in src cannot break the handler (no per-item onclick at all)', () => {
    const { html } = toHtml({ images: [{ src: "/a'.jpg", alt: 'a' }], lightbox: true }, '');
    // no per-item onclick handler exists at all (delegated listener only)
    expect(html).not.toMatch(/onclick="[^"]*_open\(/);
    // the quote in src is entity-escaped in the data attribute, not raw
    expect(html).toContain('data-lb-src="/a'.jpg"');
    expect(html).not.toContain(`data-lb-src="/a'.jpg"`);
  });

  test('emits exactly one delegated click listener', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg' }, { src: '/b.jpg' }], lightbox: true }, '');
    const matches = html.match(/addEventListener\(['"]click['"]/g) || [];
    expect(matches.length).toBe(1);
  });

  test('lightbox=false: no data-lb-src, no script', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg' }], lightbox: false }, '');
    expect(html).not.toContain('data-lb-src');
    expect(html).not.toContain('<script>');
  });
});

describe('Gallery.toHtml lightbox accessibility (F1.3)', () => {
  test('lightbox overlay has role="dialog", aria-modal, and aria-label', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
    expect(html).toMatch(/role="dialog"/);
    expect(html).toMatch(/aria-modal="true"/);
    expect(html).toMatch(/aria-label="[^"]+"/);
  });

  test('Escape closes the lightbox via the inline script', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
    expect(html).toMatch(/Escape/);
  });

  test('thumbnails are keyboard-operable when lightbox is enabled (role=button + tabindex=0)', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
    expect(html).toMatch(/data-lb-src="[^"]*"[^>]*role="button"[^>]*tabindex="0"/);
  });

  test('delegated listener handles Enter/Space for keyboard activation', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg' }, { src: '/b.jpg' }], lightbox: true }, '');
    expect(html).toMatch(/addEventListener\(['"]keydown['"]/);
  });

  test('lightbox=false: no role="dialog", no role="button" thumbnails', () => {
    const { html } = toHtml({ images: [{ src: '/a.jpg' }], lightbox: false }, '');
    expect(html).not.toContain('role="dialog"');
    expect(html).not.toContain('role="button"');
  });
});

describe('Gallery.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
  const props = { images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true };

  test('same node id -> identical output across calls (deterministic)', () => {
    const { html: html1 } = toHtml(props, '', 'node-gal1');
    const { html: html2 } = toHtml(props, '', 'node-gal1');
    expect(html1).toBe(html2);
  });

  test('different node ids -> different, non-colliding gallery scope ids (identical images, no collision)', () => {
    const { html: html1 } = toHtml(props, '', 'node-gal1');
    const { html: html2 } = toHtml(props, '', 'node-gal2');
    const id1 = html1.match(/id="([^"]+)_overlay"/)![1];
    const id2 = html2.match(/id="([^"]+)_overlay"/)![1];
    expect(id1).not.toBe(id2);
  });

  test('overlay/grid ids and the script function names all use the SAME scope', () => {
    const { html } = toHtml(props, '', 'node-gal1');
    const scope = html.match(/id="([^"]+)_overlay"/)![1];
    expect(html).toContain(`id="${scope}_grid"`);
    expect(html).toContain(`function ${scope}_close()`);
    expect(html).toContain(`function ${scope}_open(`);
  });

  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
    const { html: html1 } = toHtml(props, '');
    const { html: html2 } = toHtml(props, '');
    expect(html1).toBe(html2);
  });
});

describe('Gallery.toHtml default SVG placeholder images survive export (Bug 2 regression)', () => {
  test('a default data:image/svg+xml image emits a non-empty img src, not src=""', () => {
    const { html } = toHtml({}, ''); // no images prop -> component default SVG placeholders
    expect(html).not.toContain('src=""');
    expect(html).toMatch(/src="data:image\/svg\+xml[^"]*"/);
  });

  test('an explicit data:image/svg+xml gallery image src is preserved (not stripped to empty)', () => {
    const svg = 'data:image/svg+xml,%3Csvg%2F%3E';
    const { html } = toHtml({ images: [{ src: svg, alt: 'a' }] }, '');
    expect(html).toContain(`src="${svg}"`);
  });

  test('lightbox data-lb-src also preserves data:image/svg+xml (still an image context)', () => {
    const svg = 'data:image/svg+xml,%3Csvg%2F%3E';
    const { html } = toHtml({ images: [{ src: svg, alt: 'a' }], lightbox: true }, '');
    expect(html).toContain(`data-lb-src="${svg}"`);
  });

  test('a javascript: gallery image src still yields an empty src (safeImageUrl still blocks it)', () => {
    const { html } = toHtml({ images: [{ src: 'javascript:alert(1)', alt: 'a' }] }, '');
    expect(html).toContain('src=""');
    expect(html).not.toContain('javascript:');
  });
});

describe('Gallery.toHtml lightbox focus management (M-2)', () => {
  const props = { images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true };

  test('overlay includes a focusable close control with an accessible name and tabindex', () => {
    const { html } = toHtml(props, '', 'node-gal1');
    // A close control: a button (or the dialog container) with an accessible
    // name (aria-label) and an explicit tabindex so it's keyboard-focusable.
    expect(html).toMatch(/aria-label="[^"]*[Cc]lose[^"]*"[^>]*tabindex="-?\d+"|tabindex="-?\d+"[^>]*aria-label="[^"]*[Cc]lose[^"]*"/);
  });

  test('script saves document.activeElement on open (for focus restore)', () => {
    const { html } = toHtml(props, '', 'node-gal1');
    expect(html).toMatch(/document\.activeElement/);
  });

  test('script moves focus to the close control / dialog on open', () => {
    const { html } = toHtml(props, '', 'node-gal1');
    expect(html).toMatch(/\.focus\(\)/);
  });

  test('script restores the previously-saved focus on close', () => {
    const { html } = toHtml(props, '', 'node-gal1');
    // The close function references a stored "last focused element" variable
    // and calls .focus() on it, not just moving focus INTO the dialog.
    const closeFnMatch = html.match(/function\s+\w+_close\s*\(\)\s*\{[^}]*\}/);
    expect(closeFnMatch).not.toBeNull();
    expect(closeFnMatch![0]).toMatch(/\.focus\(\)/);
  });
});