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

package/src/graph/__tests__/graph-mount.test.ts

@@ -1,213 +0,0 @@
-import type { GraphSpec } from '@opendata-ai/openchart-core';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { createGraph } from '../../graph-mount';
-
-// ---------------------------------------------------------------------------
-// Test data
-// ---------------------------------------------------------------------------
-
-const basicSpec: GraphSpec = {
-  type: 'graph',
-  nodes: [
-    { id: 'a', label: 'Node A' },
-    { id: 'b', label: 'Node B' },
-    { id: 'c', label: 'Node C' },
-  ],
-  edges: [
-    { source: 'a', target: 'b' },
-    { source: 'b', target: 'c' },
-  ],
-  chrome: {
-    title: 'Test Graph',
-    subtitle: 'A simple test graph',
-  },
-};
-
-const communitySpec: GraphSpec = {
-  type: 'graph',
-  nodes: [
-    { id: 'a', label: 'Node A', group: 'x' },
-    { id: 'b', label: 'Node B', group: 'x' },
-    { id: 'c', label: 'Node C', group: 'y' },
-    { id: 'd', label: 'Node D', group: 'y' },
-  ],
-  edges: [
-    { source: 'a', target: 'b' },
-    { source: 'c', target: 'd' },
-    { source: 'a', target: 'c' },
-  ],
-  layout: {
-    clustering: { field: 'group' },
-  },
-  chrome: {
-    title: 'Community Graph',
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function makeContainer(): HTMLElement {
-  const el = document.createElement('div');
-  // happy-dom doesn't auto-size elements; we need to provide dimensions
-  // for getBoundingClientRect to return useful values
-  Object.defineProperty(el, 'getBoundingClientRect', {
-    value: () => ({
-      width: 800,
-      height: 600,
-      top: 0,
-      left: 0,
-      bottom: 600,
-      right: 800,
-      x: 0,
-      y: 0,
-      toJSON: () => {},
-    }),
-  });
-  document.body.appendChild(el);
-  return el;
-}
-
-// ---------------------------------------------------------------------------
-// Cleanup
-// ---------------------------------------------------------------------------
-
-let container: HTMLElement;
-
-afterEach(() => {
-  if (container?.parentNode) {
-    container.parentNode.removeChild(container);
-  }
-});
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('createGraph', () => {
-  it('creates expected DOM structure (wrapper, canvas, chrome, legend)', () => {
-    container = makeContainer();
-    const graph = createGraph(container, basicSpec);
-
-    // Wrapper
-    const wrapper = container.querySelector('.oc-graph-wrapper');
-    expect(wrapper).not.toBeNull();
-
-    // Canvas
-    const canvas = container.querySelector('.oc-graph-canvas');
-    expect(canvas).not.toBeNull();
-    expect(canvas?.tagName.toLowerCase()).toBe('canvas');
-
-    // Chrome
-    const chrome = container.querySelector('.oc-graph-chrome');
-    expect(chrome).not.toBeNull();
-
-    // Title
-    const title = container.querySelector('.oc-title');
-    expect(title).not.toBeNull();
-    expect(title?.textContent).toBe('Test Graph');
-
-    // Subtitle
-    const subtitle = container.querySelector('.oc-subtitle');
-    expect(subtitle).not.toBeNull();
-    expect(subtitle?.textContent).toBe('A simple test graph');
-
-    // Legend exists (even if hidden for non-community graphs)
-    const legend = container.querySelector('.oc-graph-legend');
-    expect(legend).not.toBeNull();
-
-    graph.destroy();
-  });
-
-  it('destroy cleans up DOM and does not error on subsequent calls', () => {
-    container = makeContainer();
-    const graph = createGraph(container, basicSpec);
-
-    expect(container.querySelector('.oc-graph-wrapper')).not.toBeNull();
-
-    graph.destroy();
-
-    expect(container.querySelector('.oc-graph-wrapper')).toBeNull();
-    expect(container.querySelector('.oc-graph-canvas')).toBeNull();
-
-    // Calling destroy again should not throw
-    expect(() => graph.destroy()).not.toThrow();
-
-    // Calling methods after destroy should not throw
-    expect(() => graph.update(basicSpec)).not.toThrow();
-    expect(() => graph.search('test')).not.toThrow();
-    expect(() => graph.zoomToFit()).not.toThrow();
-    expect(() => graph.resize()).not.toThrow();
-    expect(graph.getSelectedNodes()).toEqual([]);
-  });
-
-  it('update re-initializes with new spec', () => {
-    container = makeContainer();
-    const graph = createGraph(container, basicSpec);
-
-    const titleBefore = container.querySelector('.oc-title');
-    expect(titleBefore?.textContent).toBe('Test Graph');
-
-    graph.update(communitySpec);
-
-    const titleAfter = container.querySelector('.oc-title');
-    expect(titleAfter?.textContent).toBe('Community Graph');
-
-    graph.destroy();
-  });
-
-  it('shows legend for community graphs', () => {
-    container = makeContainer();
-    const graph = createGraph(container, communitySpec);
-
-    const legend = container.querySelector('.oc-graph-legend');
-    expect(legend).not.toBeNull();
-    // Community graph should have visible legend items
-    const items = container.querySelectorAll('.oc-graph-legend-item');
-    expect(items.length).toBeGreaterThan(0);
-
-    graph.destroy();
-  });
-
-  it('search and clearSearch update without errors', () => {
-    container = makeContainer();
-    const graph = createGraph(container, basicSpec);
-
-    expect(() => graph.search('Node')).not.toThrow();
-    expect(() => graph.clearSearch()).not.toThrow();
-
-    graph.destroy();
-  });
-
-  it('selectNode and getSelectedNodes work', () => {
-    container = makeContainer();
-    const graph = createGraph(container, basicSpec);
-
-    graph.selectNode('a');
-    expect(graph.getSelectedNodes()).toEqual(['a']);
-
-    graph.destroy();
-  });
-
-  it('applies oc-dark class in dark mode', () => {
-    container = makeContainer();
-    const graph = createGraph(container, basicSpec, { darkMode: 'force' });
-
-    expect(container.classList.contains('oc-dark')).toBe(true);
-
-    graph.destroy();
-    expect(container.classList.contains('oc-dark')).toBe(false);
-  });
-
-  it('onSelectionChange callback fires on selectNode', () => {
-    container = makeContainer();
-    const onSelectionChange = vi.fn();
-    const graph = createGraph(container, basicSpec, { onSelectionChange });
-
-    graph.selectNode('b');
-    expect(onSelectionChange).toHaveBeenCalledWith(['b']);
-
-    graph.destroy();
-  });
-});

package/src/graph/__tests__/interaction.test.ts

@@ -1,205 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest';
-import type { InteractionCallbacks } from '../interaction';
-import { GraphInteractionManager } from '../interaction';
-import { SpatialIndex } from '../spatial-index';
-import type { PositionedNode } from '../types';
-import { ZoomTransform } from '../zoom';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function makeNode(id: string, x: number, y: number, radius = 10): PositionedNode {
-  return {
-    id,
-    x,
-    y,
-    radius,
-    fill: '#3b82f6',
-    stroke: '#2563eb',
-    strokeWidth: 1,
-    label: id,
-    labelPriority: 0.5,
-    community: undefined,
-    data: {},
-  };
-}
-
-function createMockCanvas(): HTMLCanvasElement {
-  const canvas = document.createElement('canvas');
-  canvas.width = 800;
-  canvas.height = 600;
-  // Mock getBoundingClientRect for coordinate conversion
-  canvas.getBoundingClientRect = () => ({
-    left: 0,
-    top: 0,
-    right: 800,
-    bottom: 600,
-    width: 800,
-    height: 600,
-    x: 0,
-    y: 0,
-    toJSON: () => ({}),
-  });
-  return canvas;
-}
-
-function createCallbacks(): InteractionCallbacks & {
-  transformChanges: ZoomTransform[];
-  hoverChanges: (string | null)[];
-  selectionChanges: string[][];
-  dragStarts: string[];
-  drags: Array<{ nodeId: string; x: number; y: number }>;
-  dragEnds: string[];
-  doubleClicks: string[];
-} {
-  const state = {
-    transformChanges: [] as ZoomTransform[],
-    hoverChanges: [] as (string | null)[],
-    selectionChanges: [] as string[][],
-    dragStarts: [] as string[],
-    drags: [] as Array<{ nodeId: string; x: number; y: number }>,
-    dragEnds: [] as string[],
-    doubleClicks: [] as string[],
-    onTransformChange(t: ZoomTransform) {
-      state.transformChanges.push(t);
-    },
-    onHoverChange(nodeId: string | null) {
-      state.hoverChanges.push(nodeId);
-    },
-    onSelectionChange(nodeIds: string[]) {
-      state.selectionChanges.push(nodeIds);
-    },
-    onNodeDragStart(nodeId: string) {
-      state.dragStarts.push(nodeId);
-    },
-    onNodeDrag(nodeId: string, x: number, y: number) {
-      state.drags.push({ nodeId, x, y });
-    },
-    onNodeDragEnd(nodeId: string) {
-      state.dragEnds.push(nodeId);
-    },
-    onDoubleClick(nodeId: string) {
-      state.doubleClicks.push(nodeId);
-    },
-  };
-  return state;
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('GraphInteractionManager', () => {
-  let canvas: HTMLCanvasElement;
-  let spatialIndex: SpatialIndex;
-  let callbacks: ReturnType<typeof createCallbacks>;
-  let manager: GraphInteractionManager;
-
-  beforeEach(() => {
-    canvas = createMockCanvas();
-    spatialIndex = new SpatialIndex();
-    callbacks = createCallbacks();
-
-    const nodes = [
-      makeNode('center', 400, 300),
-      makeNode('left', 100, 300),
-      makeNode('right', 700, 300),
-    ];
-    spatialIndex.rebuild(nodes);
-
-    manager = new GraphInteractionManager(canvas, spatialIndex, callbacks);
-  });
-
-  describe('zoom', () => {
-    it('updates transform on wheel', () => {
-      const wheelEvent = new WheelEvent('wheel', {
-        deltaY: -100,
-        clientX: 400,
-        clientY: 300,
-      });
-      canvas.dispatchEvent(wheelEvent);
-
-      expect(callbacks.transformChanges.length).toBe(1);
-      const t = callbacks.transformChanges[0];
-      expect(t.k).toBeGreaterThan(1);
-    });
-
-    it('zoom in increases scale', () => {
-      // Negative deltaY = zoom in
-      canvas.dispatchEvent(new WheelEvent('wheel', { deltaY: -200, clientX: 400, clientY: 300 }));
-      const t = callbacks.transformChanges[0];
-      expect(t.k).toBeGreaterThan(1);
-    });
-
-    it('zoom out decreases scale', () => {
-      // Positive deltaY = zoom out
-      canvas.dispatchEvent(new WheelEvent('wheel', { deltaY: 200, clientX: 400, clientY: 300 }));
-      const t = callbacks.transformChanges[0];
-      expect(t.k).toBeLessThan(1);
-    });
-  });
-
-  describe('hover', () => {
-    it('fires hover change on mousemove over a node', () => {
-      // Move over node at (400, 300) with identity transform
-      canvas.dispatchEvent(new MouseEvent('mousemove', { clientX: 400, clientY: 300 }));
-
-      expect(callbacks.hoverChanges.length).toBeGreaterThan(0);
-      expect(callbacks.hoverChanges[callbacks.hoverChanges.length - 1]).toBe('center');
-    });
-
-    it('fires null hover on mousemove over background', () => {
-      canvas.dispatchEvent(new MouseEvent('mousemove', { clientX: 0, clientY: 0 }));
-
-      expect(callbacks.hoverChanges.length).toBeGreaterThan(0);
-      expect(callbacks.hoverChanges[callbacks.hoverChanges.length - 1]).toBeNull();
-    });
-  });
-
-  describe('selection', () => {
-    it('selects a node on click', () => {
-      // Mousedown on node
-      canvas.dispatchEvent(new MouseEvent('mousedown', { clientX: 400, clientY: 300 }));
-      // Mouseup without moving (click)
-      canvas.dispatchEvent(new MouseEvent('mouseup', { clientX: 400, clientY: 300 }));
-
-      expect(callbacks.selectionChanges.length).toBe(1);
-      expect(callbacks.selectionChanges[0]).toEqual(['center']);
-    });
-
-    it('clears selection on background click', () => {
-      // First select a node
-      canvas.dispatchEvent(new MouseEvent('mousedown', { clientX: 400, clientY: 300 }));
-      canvas.dispatchEvent(new MouseEvent('mouseup', { clientX: 400, clientY: 300 }));
-
-      // Then click background
-      canvas.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0 }));
-      canvas.dispatchEvent(new MouseEvent('mouseup', { clientX: 0, clientY: 0 }));
-
-      expect(callbacks.selectionChanges.length).toBe(2);
-      expect(callbacks.selectionChanges[1]).toEqual([]);
-    });
-  });
-
-  describe('transform', () => {
-    it('setTransform and getTransform work', () => {
-      const t = new ZoomTransform(10, 20, 3);
-      manager.setTransform(t);
-      const got = manager.getTransform();
-      expect(got.x).toBe(10);
-      expect(got.y).toBe(20);
-      expect(got.k).toBe(3);
-    });
-  });
-
-  describe('cleanup', () => {
-    it('destroy removes event listeners (no errors on subsequent events)', () => {
-      manager.destroy();
-
-      // Should not throw and should not trigger callbacks
-      canvas.dispatchEvent(new WheelEvent('wheel', { deltaY: -100, clientX: 400, clientY: 300 }));
-      expect(callbacks.transformChanges.length).toBe(0);
-    });
-  });
-});