@opendata-ai/openchart-vanilla 8.0.0-rc.2 → 8.0.0-rc.21

package/src/__tests__/tilemap.test.ts

@@ -1,158 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { createContainer } from '../__test-fixtures__/dom';
-import { createTileMap } from '../tilemap-mount';
-
-// ---------------------------------------------------------------------------
-// Shared fixtures
-// ---------------------------------------------------------------------------
-
-const basicTileMapSpec = {
-  type: 'tilemap' as const,
-  data: { CA: 5.4, TX: 4.1, NY: 4.5, FL: 3.3, IL: 4.6 } as Record<string, number>,
-};
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('createTileMap', () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = createContainer();
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('mounts an SVG element into the container', () => {
-    const instance = createTileMap(container, basicTileMapSpec, { responsive: false });
-
-    const svg = container.querySelector('svg');
-    expect(svg).not.toBeNull();
-    expect(svg?.classList.contains('oc-tilemap')).toBe(true);
-
-    instance.destroy();
-  });
-
-  it('renders all 51 state tiles', () => {
-    const instance = createTileMap(container, basicTileMapSpec, { responsive: false });
-
-    const tiles = container.querySelectorAll('.oc-tilemap-tile');
-    expect(tiles).toHaveLength(51);
-
-    instance.destroy();
-  });
-
-  it('update() re-renders with new data', () => {
-    const instance = createTileMap(container, basicTileMapSpec, { responsive: false });
-
-    // Update with full data
-    const updatedSpec = {
-      ...basicTileMapSpec,
-      data: {
-        AL: 2.7,
-        AK: 6.4,
-        AZ: 3.5,
-        AR: 3.4,
-        CA: 5.4,
-        CO: 3.4,
-        CT: 4.1,
-        DE: 4.4,
-        FL: 3.3,
-        GA: 3.4,
-        HI: 3.2,
-        ID: 3.0,
-        IL: 4.6,
-        IN: 3.3,
-        IA: 2.7,
-        KS: 3.2,
-        KY: 4.4,
-        LA: 3.6,
-        ME: 3.6,
-        MD: 1.8,
-        MA: 3.3,
-        MI: 4.2,
-        MN: 2.8,
-        MS: 3.7,
-        MO: 3.5,
-        MT: 2.9,
-        NE: 2.2,
-        NV: 5.4,
-        NH: 2.4,
-        NJ: 4.8,
-        NM: 4.1,
-        NY: 4.5,
-        NC: 3.5,
-        ND: 1.9,
-        OH: 4.0,
-        OK: 3.9,
-        OR: 4.2,
-        PA: 3.4,
-        RI: 3.8,
-        SC: 3.3,
-        SD: 2.0,
-        TN: 3.5,
-        TX: 4.1,
-        UT: 2.9,
-        VT: 2.3,
-        VA: 2.9,
-        WA: 4.6,
-        WV: 4.0,
-        WI: 2.9,
-        WY: 3.2,
-        DC: 5.2,
-      } as Record<string, number>,
-    };
-    instance.update(updatedSpec);
-
-    // All tiles should have data now
-    const dataTiles = instance.layout.tiles.filter((t) => t.hasData);
-    expect(dataTiles).toHaveLength(51);
-
-    instance.destroy();
-  });
-
-  it('destroy() removes the SVG from the container', () => {
-    const instance = createTileMap(container, basicTileMapSpec, { responsive: false });
-
-    const svgBefore = container.querySelector('svg');
-    expect(svgBefore).not.toBeNull();
-
-    instance.destroy();
-
-    const svgAfter = container.querySelector('svg');
-    expect(svgAfter).toBeNull();
-  });
-
-  it('gradient legend renders', () => {
-    const instance = createTileMap(container, basicTileMapSpec, { responsive: false });
-
-    const legend = container.querySelector('.oc-tilemap-legend');
-    expect(legend).not.toBeNull();
-
-    instance.destroy();
-  });
-
-  it('layout property returns the compiled layout', () => {
-    const instance = createTileMap(container, basicTileMapSpec, { responsive: false });
-
-    expect(instance.layout).toBeDefined();
-    expect(instance.layout.tiles).toHaveLength(51);
-    expect(instance.layout.gradientLegend).not.toBeNull();
-
-    instance.destroy();
-  });
-
-  it('export("svg") returns a string containing SVG content', () => {
-    const instance = createTileMap(container, basicTileMapSpec, { responsive: false });
-
-    const svgString = instance.export('svg');
-    expect(typeof svgString).toBe('string');
-    expect(svgString).toContain('<svg');
-    expect(svgString).toContain('oc-tilemap');
-
-    instance.destroy();
-  });
-});

package/src/__tests__/tooltip.test.ts

@@ -1,337 +0,0 @@
-/**
- * Tooltip manager tests.
- *
- * Tests the createTooltipManager() show/hide lifecycle, positioning logic,
- * and cleanup behavior.
- */
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createContainer } from '../__test-fixtures__/dom';
-
-const mockComputePosition = vi.fn();
-
-vi.mock('@floating-ui/dom', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@floating-ui/dom')>();
-  return {
-    ...actual,
-    computePosition: (...args: unknown[]) => mockComputePosition(...args),
-  };
-});
-
-// Import after mock so the module picks up the mock
-const { createTooltipManager } = await import('../tooltip');
-
-/**
- * Flush the microtask queue so computePosition's .then() resolves.
- */
-const flushPositioning = () => vi.waitFor(() => Promise.resolve());
-
-// ---------------------------------------------------------------------------
-// Cleanup
-// ---------------------------------------------------------------------------
-
-const defaultPositionResult = {
-  x: 0,
-  y: 0,
-  placement: 'bottom-start' as const,
-  strategy: 'absolute' as const,
-  middlewareData: {},
-};
-
-beforeEach(() => {
-  mockComputePosition.mockResolvedValue(defaultPositionResult);
-});
-
-afterEach(() => {
-  document.body.innerHTML = '';
-  mockComputePosition.mockReset();
-});
-
-// ---------------------------------------------------------------------------
-// Lifecycle
-// ---------------------------------------------------------------------------
-
-describe('createTooltipManager lifecycle', () => {
-  it('appends a tooltip element to the container on creation', () => {
-    const container = createContainer();
-    createTooltipManager(container);
-
-    const tooltip = container.querySelector('.oc-tooltip');
-    expect(tooltip).not.toBeNull();
-    expect(tooltip!.getAttribute('role')).toBe('tooltip');
-  });
-
-  it('show() makes the tooltip visible', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show({ title: 'Point A', fields: [{ label: 'Value', value: '42' }] }, 100, 100);
-
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    expect(tooltip.style.display).toBe('block');
-  });
-
-  it('show() renders title and field content', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show(
-      {
-        title: '2021-Q1',
-        fields: [
-          { label: 'Revenue', value: '$1.2M', color: '#3b82f6' },
-          { label: 'Growth', value: '+15%' },
-        ],
-      },
-      100,
-      100,
-    );
-
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    expect(tooltip.innerHTML).toContain('2021-Q1');
-    expect(tooltip.innerHTML).toContain('Revenue');
-    expect(tooltip.innerHTML).toContain('$1.2M');
-    expect(tooltip.innerHTML).toContain('Growth');
-    expect(tooltip.innerHTML).toContain('+15%');
-  });
-
-  it('show() renders color dot when field has color', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show(
-      {
-        title: 'Test',
-        fields: [{ label: 'Value', value: '42', color: '#ff0000' }],
-      },
-      50,
-      50,
-    );
-
-    const dot = container.querySelector('.oc-tooltip-dot') as HTMLElement;
-    expect(dot).not.toBeNull();
-    expect(dot.style.background).toBe('#ff0000');
-  });
-
-  it('hide() hides the tooltip', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show({ title: 'Test', fields: [{ label: 'V', value: '1' }] }, 100, 100);
-    manager.hide();
-
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    expect(tooltip.style.display).toBe('none');
-  });
-
-  it('Escape dismisses a visible tooltip without pointer movement (WCAG 1.4.13)', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show({ title: 'Test', fields: [{ label: 'V', value: '1' }] }, 100, 100);
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    expect(tooltip.style.display).toBe('none');
-    manager.destroy();
-  });
-
-  it('destroy() removes the Escape listener', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show({ title: 'Test', fields: [{ label: 'V', value: '1' }] }, 100, 100);
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    manager.destroy();
-
-    // Dispatch after destroy: no listener should touch the detached element
-    tooltip.style.display = 'block';
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-    expect(tooltip.style.display).toBe('block');
-  });
-
-  it('destroy() removes the tooltip element from the DOM', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    // Verify it exists
-    expect(container.querySelector('.oc-tooltip')).not.toBeNull();
-
-    manager.destroy();
-
-    expect(container.querySelector('.oc-tooltip')).toBeNull();
-  });
-
-  it('show() updates content when called again', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show({ title: 'First', fields: [{ label: 'A', value: '1' }] }, 50, 50);
-
-    let tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    expect(tooltip.innerHTML).toContain('First');
-
-    manager.show({ title: 'Second', fields: [{ label: 'B', value: '2' }] }, 100, 100);
-
-    tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    expect(tooltip.innerHTML).toContain('Second');
-    // First content should be replaced
-    expect(tooltip.innerHTML).not.toContain('First');
-
-    manager.destroy();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Positioning
-// ---------------------------------------------------------------------------
-
-describe('tooltip positioning', () => {
-  it('positions tooltip via computePosition with flip and shift', async () => {
-    mockComputePosition.mockResolvedValueOnce({
-      x: 112,
-      y: 212,
-      placement: 'bottom-start',
-      strategy: 'absolute',
-      middlewareData: {},
-    });
-
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show({ title: 'Test', fields: [{ label: 'V', value: '1' }] }, 100, 200);
-    await flushPositioning();
-
-    // computePosition should have been called with the tooltip element
-    expect(mockComputePosition).toHaveBeenCalledOnce();
-    const [ref, tooltipEl, options] = mockComputePosition.mock.calls[0];
-    expect(tooltipEl).toBeInstanceOf(HTMLElement);
-    expect(options?.placement).toBe('bottom-start');
-    // Should include offset, flip, and shift middleware
-    expect(options?.middleware).toHaveLength(3);
-
-    // Virtual reference should return a rect at the mouse position
-    const rect = (ref as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect();
-    expect(rect.width).toBe(0);
-    expect(rect.height).toBe(0);
-
-    // Position should be applied from computePosition result
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    expect(tooltip.style.left).toContain('px');
-    expect(tooltip.style.top).toContain('px');
-
-    manager.destroy();
-  });
-
-  it('discards stale position callbacks on rapid show() calls', async () => {
-    type PosResult = {
-      x: number;
-      y: number;
-      placement: string;
-      strategy: string;
-      middlewareData: Record<string, never>;
-    };
-    let resolveFirst!: (val: PosResult) => void;
-    let resolveSecond!: (val: PosResult) => void;
-
-    mockComputePosition
-      .mockImplementationOnce(
-        () =>
-          new Promise((r) => {
-            resolveFirst = r;
-          }),
-      )
-      .mockImplementationOnce(
-        () =>
-          new Promise((r) => {
-            resolveSecond = r;
-          }),
-      );
-
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    // Two rapid show() calls
-    manager.show({ title: 'A', fields: [{ label: 'V', value: '1' }] }, 10, 10);
-    manager.show({ title: 'B', fields: [{ label: 'V', value: '2' }] }, 200, 200);
-
-    // Resolve the second (latest) first
-    resolveSecond({
-      x: 212,
-      y: 212,
-      placement: 'bottom-start',
-      strategy: 'absolute',
-      middlewareData: {},
-    });
-    await flushPositioning();
-
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    const posAfterSecond = tooltip.style.left;
-
-    // Now resolve the first (stale) - should be discarded
-    resolveFirst({
-      x: 22,
-      y: 22,
-      placement: 'bottom-start',
-      strategy: 'absolute',
-      middlewareData: {},
-    });
-    await flushPositioning();
-
-    // Position should not have changed (stale callback was discarded)
-    expect(tooltip.style.left).toBe(posAfterSecond);
-
-    manager.destroy();
-  });
-
-  it('sets container position to relative if not already set', () => {
-    const container = createContainer();
-    container.style.position = '';
-
-    createTooltipManager(container);
-
-    // createTooltipManager sets container.style.position to 'relative'
-    // if it was empty
-    expect(container.style.position).toBe('relative');
-  });
-
-  it('preserves existing container position style', () => {
-    const container = createContainer();
-    container.style.position = 'absolute';
-
-    createTooltipManager(container);
-
-    expect(container.style.position).toBe('absolute');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// HTML escaping
-// ---------------------------------------------------------------------------
-
-describe('tooltip content escaping', () => {
-  it('escapes HTML special characters in title and fields', () => {
-    const container = createContainer();
-    const manager = createTooltipManager(container);
-
-    manager.show(
-      {
-        title: '<script>alert("xss")</script>',
-        fields: [{ label: 'A&B', value: 'val<ue' }],
-      },
-      50,
-      50,
-    );
-
-    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
-    // Should not contain raw HTML tags - the <script> should be escaped
-    expect(tooltip.innerHTML).not.toContain('<script>');
-    // Should contain escaped versions of angle brackets and ampersands
-    expect(tooltip.innerHTML).toContain('&lt;script&gt;');
-    expect(tooltip.innerHTML).toContain('A&amp;B');
-    // The value with < should be escaped
-    expect(tooltip.innerHTML).toContain('val&lt;ue');
-
-    manager.destroy();
-  });
-});