@opendata-ai/openchart-vanilla 2.0.0

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

@@ -0,0 +1,213 @@
+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('.viz-graph-wrapper');
+    expect(wrapper).not.toBeNull();
+
+    // Canvas
+    const canvas = container.querySelector('.viz-graph-canvas');
+    expect(canvas).not.toBeNull();
+    expect(canvas?.tagName.toLowerCase()).toBe('canvas');
+
+    // Chrome
+    const chrome = container.querySelector('.viz-graph-chrome');
+    expect(chrome).not.toBeNull();
+
+    // Title
+    const title = container.querySelector('.viz-title');
+    expect(title).not.toBeNull();
+    expect(title?.textContent).toBe('Test Graph');
+
+    // Subtitle
+    const subtitle = container.querySelector('.viz-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('.viz-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('.viz-graph-wrapper')).not.toBeNull();
+
+    graph.destroy();
+
+    expect(container.querySelector('.viz-graph-wrapper')).toBeNull();
+    expect(container.querySelector('.viz-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('.viz-title');
+    expect(titleBefore?.textContent).toBe('Test Graph');
+
+    graph.update(communitySpec);
+
+    const titleAfter = container.querySelector('.viz-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('.viz-graph-legend');
+    expect(legend).not.toBeNull();
+    // Community graph should have visible legend items
+    const items = container.querySelectorAll('.viz-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 viz-dark class in dark mode', () => {
+    container = makeContainer();
+    const graph = createGraph(container, basicSpec, { darkMode: 'force' });
+
+    expect(container.classList.contains('viz-dark')).toBe(true);
+
+    graph.destroy();
+    expect(container.classList.contains('viz-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

@@ -0,0 +1,205 @@
+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);
+    });
+  });
+});