@libredb/studio 0.9.7

package/tests/components/SchemaDiagram.test.tsx

@@ -0,0 +1,1034 @@
+import '../setup-dom';
+import '../helpers/mock-sonner';
+import '../helpers/mock-navigation';
+
+import { mock } from 'bun:test';
+import { setupFramerMotionMock } from '../helpers/mock-monaco';
+
+// Enhanced XYFlow mock that renders nodes via nodeTypes
+mock.module('@xyflow/react', () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const React = require('react');
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ReactFlow: ({ children, nodes = [], nodeTypes = {}, onNodeClick, onPaneClick }: Record<string, any>) => {
+      const renderedNodes = nodes.map((node: { id: string; type: string; data: Record<string, unknown> }) => {
+        const NodeComp = nodeTypes[node.type];
+        if (!NodeComp) return null;
+        return React.createElement('div', {
+          key: node.id,
+          'data-testid': `node-${node.id}`,
+          'data-node-id': node.id,
+          onClick: (e: React.MouseEvent) => { e.stopPropagation(); onNodeClick?.(e, node); },
+        }, React.createElement(NodeComp, { id: node.id, data: node.data, type: node.type }));
+      });
+      // Wrap nodes in a keyed container to avoid reconciliation issues
+      // when the number of nodes changes (e.g. during search filtering)
+      return React.createElement('div', {
+        'data-testid': 'mock-react-flow',
+        className: 'react-flow',
+        onClick: (e: React.MouseEvent) => { if (e.target === e.currentTarget) onPaneClick?.(); },
+      },
+        React.createElement('div', { key: '__nodes__', 'data-testid': 'nodes-container' }, renderedNodes),
+        React.createElement('svg', { key: '__svg__' }),
+        React.createElement(React.Fragment, { key: '__children__' }, children),
+      );
+    },
+    ReactFlowProvider: ({ children }: { children: unknown }) => children,
+    MiniMap: () => React.createElement('div', { 'data-testid': 'mock-minimap' }),
+    Controls: () => null,
+    Background: () => null,
+    Handle: () => null,
+    useNodesState: () => [[], mock(() => {}), mock(() => {})],
+    useEdgesState: () => [[], mock(() => {}), mock(() => {})],
+    useReactFlow: () => ({ fitView: mock(() => {}), getNodes: mock(() => []), getEdges: mock(() => []) }),
+    Position: { Top: 'top', Bottom: 'bottom', Left: 'left', Right: 'right' },
+    MarkerType: { ArrowClosed: 'arrowclosed' },
+    Panel: ({ children, position }: { children: unknown; position?: string }) =>
+      React.createElement('div', { 'data-testid': `mock-panel-${position || 'default'}` }, children),
+  };
+});
+
+setupFramerMotionMock();
+
+// Mock elkjs
+mock.module('elkjs/lib/elk.bundled.js', () => ({
+  default: class MockELK {
+    layout(graph: unknown) {
+      return Promise.resolve(graph);
+    }
+  },
+}));
+
+// Track html2canvas calls
+const mockHtml2canvas = mock(() => Promise.resolve({
+  toDataURL: () => 'data:image/png;base64,mock',
+}));
+
+mock.module('html2canvas', () => ({
+  default: mockHtml2canvas,
+}));
+
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, fireEvent, within, cleanup, act } from '@testing-library/react';
+import React from 'react';
+
+import { SchemaDiagram } from '@/components/SchemaDiagram';
+import { mockSchema, emptySchema } from '../fixtures/schemas';
+import type { TableSchema } from '@/lib/types';
+
+// =============================================================================
+// Test Data
+// =============================================================================
+
+// Schema with NO foreign keys at all (triggers heuristic fallback)
+const schemaNoFK: TableSchema[] = [
+  {
+    name: 'users',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'name', type: 'varchar(255)', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 100,
+  },
+  {
+    name: 'posts',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'title', type: 'text', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 50,
+  },
+];
+
+// Schema with heuristic _id column (no FK data, but column ends with _id)
+const schemaHeuristic: TableSchema[] = [
+  {
+    name: 'users',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'email', type: 'varchar', nullable: true, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 10,
+  },
+  {
+    name: 'comments',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'user_id', type: 'integer', nullable: false, isPrimary: false },
+      { name: 'body', type: 'text', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 200,
+  },
+];
+
+// Schema with heuristic _id column matching singular table name (no plural 's')
+const schemaHeuristicSingular: TableSchema[] = [
+  {
+    name: 'author',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'name', type: 'varchar(255)', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 10,
+  },
+  {
+    name: 'books',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'author_id', type: 'integer', nullable: false, isPrimary: false },
+      { name: 'title', type: 'text', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 50,
+  },
+];
+
+// Schema with foreignKeys field omitted (tests `|| []` guards)
+const schemaUndefinedFK: TableSchema[] = [
+  {
+    name: 'items',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'label', type: 'text', nullable: true, isPrimary: false },
+    ],
+    indexes: [],
+    rowCount: 20,
+  } as TableSchema,
+];
+
+// Multi-FK schema for highlighting tests
+const schemaMultiFK: TableSchema[] = [
+  {
+    name: 'users',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'name', type: 'varchar(255)', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 100,
+  },
+  {
+    name: 'orders',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'user_id', type: 'integer', nullable: false, isPrimary: false },
+      { name: 'total', type: 'numeric(10,2)', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [
+      { columnName: 'user_id', referencedTable: 'users', referencedColumn: 'id' },
+    ],
+    rowCount: 500,
+  },
+  {
+    name: 'items',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'order_id', type: 'integer', nullable: false, isPrimary: false },
+      { name: 'product', type: 'varchar(255)', nullable: false, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [
+      { columnName: 'order_id', referencedTable: 'orders', referencedColumn: 'id' },
+    ],
+    rowCount: 1000,
+  },
+];
+
+// Single table schema
+const singleTableSchema: TableSchema[] = [
+  {
+    name: 'settings',
+    columns: [
+      { name: 'key', type: 'text', nullable: false, isPrimary: true },
+      { name: 'value', type: 'text', nullable: true, isPrimary: false },
+    ],
+    indexes: [],
+    foreignKeys: [],
+    rowCount: 5,
+  },
+];
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function createDefaultProps(overrides: Partial<Parameters<typeof SchemaDiagram>[0]> = {}) {
+  return {
+    schema: mockSchema,
+    onClose: mock(() => {}),
+    ...overrides,
+  };
+}
+
+// =============================================================================
+// SchemaDiagram Tests
+// =============================================================================
+
+describe('SchemaDiagram', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    mockHtml2canvas.mockClear();
+  });
+
+  // ── Rendering ───────────────────────────────────────────────────────────
+
+  test('renders ReactFlow container', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+
+    expect(container.querySelector('[data-testid="mock-react-flow"]')).not.toBeNull();
+  });
+
+  test('shows top-right panel with buttons', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+
+    expect(container.querySelector('[data-testid="mock-panel-top-right"]')).not.toBeNull();
+  });
+
+  test('shows top-left info panel', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+
+    expect(container.querySelector('[data-testid="mock-panel-top-left"]')).not.toBeNull();
+  });
+
+  test('renders ERD Visualizer heading', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('ERD Visualizer')).not.toBeNull();
+  });
+
+  // ── Close button ────────────────────────────────────────────────────────
+
+  test('onClose fires when close button clicked', () => {
+    const onClose = mock(() => {});
+    const props = createDefaultProps({ onClose });
+    const { container } = render(<SchemaDiagram {...props} />);
+
+    const closeButton = Array.from(container.querySelectorAll('button')).find(btn =>
+      btn.className.includes('rounded-full')
+    );
+    expect(closeButton).not.toBeNull();
+
+    fireEvent.click(closeButton!);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Table count and relationships ───────────────────────────────────────
+
+  test('shows table info from schema in ERD panel', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('3 tables')).not.toBeNull();
+  });
+
+  test('shows relationship count', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    // mockSchema has orders → users FK, so 1 relationship
+    expect(view.queryByText('1 relationships')).not.toBeNull();
+  });
+
+  test('shows 0 relationships for schema without FKs', () => {
+    const props = createDefaultProps({ schema: schemaNoFK });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('0 relationships')).not.toBeNull();
+  });
+
+  test('shows heuristic relationships count for _id columns', () => {
+    const props = createDefaultProps({ schema: schemaHeuristic });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    // comments.user_id → users heuristic edge
+    expect(view.queryByText('1 relationships')).not.toBeNull();
+  });
+
+  test('shows single table count', () => {
+    const props = createDefaultProps({ schema: singleTableSchema });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('1 tables')).not.toBeNull();
+  });
+
+  // ── Export buttons ──────────────────────────────────────────────────────
+
+  test('export buttons present (PNG, SVG)', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('PNG')).not.toBeNull();
+    expect(view.queryByText('SVG')).not.toBeNull();
+  });
+
+  test('PNG export button click does not crash', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const pngButton = view.getByText('PNG').closest('button')!;
+    fireEvent.click(pngButton);
+    // Should not throw
+  });
+
+  test('SVG export button click does not crash', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const svgButton = view.getByText('SVG').closest('button')!;
+    fireEvent.click(svgButton);
+    // Should not throw
+  });
+
+  // ── Search input ────────────────────────────────────────────────────────
+
+  test('search input present with placeholder', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByPlaceholderText('Filter tables...')).not.toBeNull();
+  });
+
+  test('search filters tables and updates count', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    // Initially 3 tables
+    expect(view.queryByText('3 tables')).not.toBeNull();
+
+    const searchInput = view.getByPlaceholderText('Filter tables...');
+    fireEvent.change(searchInput, { target: { value: 'users' } });
+
+    // After filtering, only 1 table matches
+    expect(view.queryByText('1 tables')).not.toBeNull();
+    expect(view.queryByText('3 tables')).toBeNull();
+  });
+
+  test('search is case-insensitive', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const searchInput = view.getByPlaceholderText('Filter tables...');
+    fireEvent.change(searchInput, { target: { value: 'ORDERS' } });
+
+    expect(view.queryByText('1 tables')).not.toBeNull();
+  });
+
+  test('search with no matches shows 0 tables', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const searchInput = view.getByPlaceholderText('Filter tables...');
+    fireEvent.change(searchInput, { target: { value: 'nonexistent' } });
+
+    expect(view.queryByText('0 tables')).not.toBeNull();
+  });
+
+  test('clearing search restores all tables', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const searchInput = view.getByPlaceholderText('Filter tables...');
+
+    // Type to filter
+    fireEvent.change(searchInput, { target: { value: 'users' } });
+    expect(view.queryByText('1 tables')).not.toBeNull();
+
+    // Clear the search
+    fireEvent.change(searchInput, { target: { value: '' } });
+    expect(view.queryByText('3 tables')).not.toBeNull();
+  });
+
+  // ── Compact mode toggle ─────────────────────────────────────────────────
+
+  test('compact mode toggle present showing "Compact" initially', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('Compact')).not.toBeNull();
+    expect(view.queryByText('Detail')).toBeNull();
+  });
+
+  test('clicking Compact toggles to Detail', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const compactButton = view.getByText('Compact').closest('button')!;
+    fireEvent.click(compactButton);
+
+    expect(view.queryByText('Detail')).not.toBeNull();
+    expect(view.queryByText('Compact')).toBeNull();
+  });
+
+  test('clicking Detail toggles back to Compact', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    // Toggle to compact
+    const compactButton = view.getByText('Compact').closest('button')!;
+    fireEvent.click(compactButton);
+    expect(view.queryByText('Detail')).not.toBeNull();
+
+    // Toggle back to detail
+    const detailButton = view.getByText('Detail').closest('button')!;
+    fireEvent.click(detailButton);
+    expect(view.queryByText('Compact')).not.toBeNull();
+  });
+
+  test('compact button has blue text class when compact mode is active', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const compactButton = view.getByText('Compact').closest('button')!;
+    expect(compactButton.className).not.toContain('text-blue-400');
+
+    fireEvent.click(compactButton);
+    const detailButton = view.getByText('Detail').closest('button')!;
+    expect(detailButton.className).toContain('text-blue-400');
+  });
+
+  // ── No FK warning ───────────────────────────────────────────────────────
+
+  test('shows no-FK warning when schema has no foreign keys', () => {
+    const props = createDefaultProps({ schema: schemaNoFK });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText(/No FK data available/)).not.toBeNull();
+    expect(view.queryByText(/heuristic relationships/)).not.toBeNull();
+  });
+
+  test('does not show no-FK warning when schema has foreign keys', () => {
+    const props = createDefaultProps(); // mockSchema has FK on orders
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText(/No FK data available/)).toBeNull();
+  });
+
+  // ── Selected node info ──────────────────────────────────────────────────
+
+  test('does not show selected node info by default', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('Selected:')).toBeNull();
+    expect(view.queryByText('clear')).toBeNull();
+  });
+
+  // ── Empty schema / loading state ────────────────────────────────────────
+
+  test('empty schema shows loading/generating state', () => {
+    const props = createDefaultProps({ schema: emptySchema });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('Generating ERD Diagram...')).not.toBeNull();
+  });
+
+  test('empty schema does not render ReactFlow', () => {
+    const props = createDefaultProps({ schema: emptySchema });
+    const { container } = render(<SchemaDiagram {...props} />);
+
+    expect(container.querySelector('[data-testid="mock-react-flow"]')).toBeNull();
+  });
+
+  test('empty schema does not render panels', () => {
+    const props = createDefaultProps({ schema: emptySchema });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    expect(view.queryByText('ERD Visualizer')).toBeNull();
+    expect(view.queryByText('PNG')).toBeNull();
+    expect(view.queryByText('Compact')).toBeNull();
+    expect(view.queryByPlaceholderText('Filter tables...')).toBeNull();
+  });
+
+  // ── Search affects edge count ───────────────────────────────────────────
+
+  test('filtering to table with FK shows its relationships', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    // Search for "orders" — has FK to users, but users is filtered out
+    const searchInput = view.getByPlaceholderText('Filter tables...');
+    fireEvent.change(searchInput, { target: { value: 'orders' } });
+
+    // Only orders table visible, users is filtered out → FK edge excluded (target not in set)
+    expect(view.queryByText('1 tables')).not.toBeNull();
+    expect(view.queryByText('0 relationships')).not.toBeNull();
+  });
+
+  // ── Heuristic edge detection ────────────────────────────────────────────
+
+  test('heuristic edges are created for _id columns when no FK data', () => {
+    const props = createDefaultProps({ schema: schemaHeuristic });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    // comments has user_id → should heuristically link to users
+    expect(view.queryByText('1 relationships')).not.toBeNull();
+  });
+
+  test('heuristic edges not created when real FK data exists', () => {
+    // mockSchema has real FK on orders.user_id → users.id
+    // so heuristic fallback should NOT run
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    // Only 1 real FK edge, no extra heuristic
+    expect(view.queryByText('1 relationships')).not.toBeNull();
+  });
+
+  // ── Multiple re-renders don't crash ─────────────────────────────────────
+
+  test('re-rendering with different schema does not crash', () => {
+    const onClose = mock(() => {});
+    const { container, rerender } = render(
+      <SchemaDiagram schema={mockSchema} onClose={onClose} />
+    );
+    const view = within(container);
+    expect(view.queryByText('3 tables')).not.toBeNull();
+
+    rerender(<SchemaDiagram schema={singleTableSchema} onClose={onClose} />);
+    expect(view.queryByText('1 tables')).not.toBeNull();
+  });
+
+  // ── Panel buttons ─────────────────────────────────────────────────────
+
+  test('top-right panel has PNG, SVG, Compact, and close buttons', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+    expect(view.queryByText('PNG')).not.toBeNull();
+    expect(view.queryByText('SVG')).not.toBeNull();
+    expect(view.queryByText('Compact')).not.toBeNull();
+    // Close button (X icon)
+    const closeBtn = Array.from(container.querySelectorAll('button')).find(btn =>
+      btn.className.includes('rounded-full')
+    );
+    expect(closeBtn).not.toBeNull();
+  });
+
+  // ── MiniMap rendered ─────────────────────────────────────────────────
+
+  test('MiniMap component renders', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    expect(container.querySelector('[data-testid="mock-minimap"]')).not.toBeNull();
+  });
+
+  // ── Schema with many tables ─────────────────────────────────────────
+
+  test('schema with many tables renders correct count', () => {
+    const manyTables: TableSchema[] = Array.from({ length: 10 }, (_, i) => ({
+      name: `table_${i}`,
+      columns: [{ name: 'id', type: 'integer', nullable: false, isPrimary: true }],
+      indexes: [],
+      foreignKeys: [],
+      rowCount: i * 10,
+    }));
+    const props = createDefaultProps({ schema: manyTables });
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+    expect(view.queryByText('10 tables')).not.toBeNull();
+    expect(view.queryByText('0 relationships')).not.toBeNull();
+  });
+
+  // ── Search with partial match ───────────────────────────────────────
+
+  test('search with partial match filters correctly', () => {
+    const props = createDefaultProps();
+    const { container } = render(<SchemaDiagram {...props} />);
+    const view = within(container);
+
+    const searchInput = view.getByPlaceholderText('Filter tables...');
+    fireEvent.change(searchInput, { target: { value: 'ord' } });
+    // 'orders' matches 'ord'
+    expect(view.queryByText('1 tables')).not.toBeNull();
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // NEW: TableNode Rendering Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('TableNode rendering', () => {
+    test('renders table name in header', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // Each table name should appear in uppercase in the header
+      expect(view.queryByText('users')).not.toBeNull();
+      expect(view.queryByText('orders')).not.toBeNull();
+      expect(view.queryByText('products')).not.toBeNull();
+    });
+
+    test('shows column count badge', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // users has 6 columns, orders has 5, products has 4
+      expect(view.queryByText('6 cols')).not.toBeNull();
+      expect(view.queryByText('5 cols')).not.toBeNull();
+      expect(view.queryByText('4 cols')).not.toBeNull();
+    });
+
+    test('displays column names', () => {
+      const props = createDefaultProps({ schema: singleTableSchema });
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      expect(view.queryByText('key')).not.toBeNull();
+      expect(view.queryByText('value')).not.toBeNull();
+    });
+
+    test('displays column type text', () => {
+      const props = createDefaultProps({ schema: singleTableSchema });
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      // Column types should be rendered in uppercase
+      const texts = Array.from(container.querySelectorAll('.font-mono'));
+      const typeTexts = texts.map(el => el.textContent);
+      expect(typeTexts).toContain('text');
+    });
+
+    test('shows NN for NOT NULL columns', () => {
+      const props = createDefaultProps({ schema: singleTableSchema });
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      // 'key' column has nullable: false
+      const nnElements = container.querySelectorAll('span');
+      const nnTexts = Array.from(nnElements).map(el => el.textContent);
+      expect(nnTexts).toContain('NN');
+    });
+
+    test('compact mode hides column details', () => {
+      const props = createDefaultProps({ schema: singleTableSchema });
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // Before compact — columns visible
+      expect(view.queryByText('key')).not.toBeNull();
+      expect(view.queryByText('value')).not.toBeNull();
+
+      // Toggle compact mode
+      const compactButton = view.getByText('Compact').closest('button')!;
+      fireEvent.click(compactButton);
+
+      // In compact mode, columns should be hidden (only header visible)
+      // The header still shows settings and "2 cols"
+      expect(view.queryByText('settings')).not.toBeNull();
+      expect(view.queryByText('2 cols')).not.toBeNull();
+      // Column names should not appear as separate elements in the columns list
+      // key/value are column names, but the column list section is hidden in compact
+      const nodeEl = container.querySelector('[data-node-id="settings"]');
+      expect(nodeEl).not.toBeNull();
+      // In compact mode, the p-1 div with columns is not rendered
+      // We check that column type badges disappear
+      const fontMonoElements = nodeEl!.querySelectorAll('.font-mono');
+      expect(fontMonoElements.length).toBe(0);
+    });
+
+    test('renders node for each table in schema', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      expect(container.querySelector('[data-node-id="users"]')).not.toBeNull();
+      expect(container.querySelector('[data-node-id="orders"]')).not.toBeNull();
+      expect(container.querySelector('[data-node-id="products"]')).not.toBeNull();
+    });
+
+    test('node with empty/null data returns nothing', () => {
+      // Schema with a valid table ensures at least one node renders
+      // The guard `if (!data) return null; if (!table) return null;` is tested
+      // by the fact that the enhanced mock passes correct data through
+      const props = createDefaultProps({ schema: singleTableSchema });
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      const nodeEl = container.querySelector('[data-node-id="settings"]');
+      expect(nodeEl).not.toBeNull();
+      // The node should have content (table header)
+      expect(nodeEl!.textContent).toContain('settings');
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // NEW: Node Selection Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('Node selection', () => {
+    test('clicking a node shows "Selected:" info panel', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // Initially no selection
+      expect(view.queryByText('Selected:')).toBeNull();
+
+      // Click the users node
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+      fireEvent.click(usersNode);
+
+      // Selection should appear with selected node name and clear button
+      expect(view.queryByText('Selected:')).not.toBeNull();
+      // The selected table name appears in a font-mono span
+      const selectedSpan = container.querySelector('.font-mono.font-bold');
+      expect(selectedSpan).not.toBeNull();
+      expect(selectedSpan!.textContent).toBe('users');
+      expect(view.queryByText('clear')).not.toBeNull();
+    });
+
+    test('clicking the same node again deselects (toggle)', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+
+      // Select
+      fireEvent.click(usersNode);
+      expect(view.queryByText('Selected:')).not.toBeNull();
+
+      // Deselect
+      fireEvent.click(usersNode);
+      expect(view.queryByText('Selected:')).toBeNull();
+    });
+
+    test('clicking "clear" button clears selection', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // Select a node
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+      fireEvent.click(usersNode);
+      expect(view.queryByText('Selected:')).not.toBeNull();
+
+      // Click clear
+      const clearButton = view.getByText('clear');
+      fireEvent.click(clearButton);
+      expect(view.queryByText('Selected:')).toBeNull();
+    });
+
+    test('clicking pane background clears selection', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // Select a node
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+      fireEvent.click(usersNode);
+      expect(view.queryByText('Selected:')).not.toBeNull();
+
+      // Click the pane background (the react-flow container itself)
+      const reactFlowContainer = container.querySelector('[data-testid="mock-react-flow"]')!;
+      // Fire click directly on the container element (target === currentTarget)
+      fireEvent.click(reactFlowContainer);
+      expect(view.queryByText('Selected:')).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // NEW: Node/Edge Highlighting Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('Node/Edge highlighting', () => {
+    test('selected node gets highlighted (blue border)', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      // Click users node
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+      fireEvent.click(usersNode);
+
+      // The TableNode's root div inside the data-node-id div should have blue border
+      const innerDiv = usersNode.querySelector('.border-blue-500\\/60');
+      expect(innerDiv).not.toBeNull();
+    });
+
+    test('FK target of selected node is highlighted', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      // Select 'orders' which has FK to 'users'
+      const ordersNode = container.querySelector('[data-node-id="orders"]')!;
+      fireEvent.click(ordersNode);
+
+      // The 'users' table should also be highlighted (FK target)
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+      const usersInner = usersNode.querySelector('.border-blue-500\\/60');
+      expect(usersInner).not.toBeNull();
+    });
+
+    test('FK source of selected node is highlighted', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      // Select 'users' — orders has FK pointing to users
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+      fireEvent.click(usersNode);
+
+      // The 'orders' table should be highlighted (it references users via FK)
+      const ordersNode = container.querySelector('[data-node-id="orders"]')!;
+      const ordersInner = ordersNode.querySelector('.border-blue-500\\/60');
+      expect(ordersInner).not.toBeNull();
+    });
+
+    test('non-related node is NOT highlighted when another is selected', () => {
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      // Select 'orders' (related to users via FK, not related to products)
+      const ordersNode = container.querySelector('[data-node-id="orders"]')!;
+      fireEvent.click(ordersNode);
+
+      // Products should NOT be highlighted
+      const productsNode = container.querySelector('[data-node-id="products"]')!;
+      const productsInner = productsNode.querySelector('.border-blue-500\\/60');
+      expect(productsInner).toBeNull();
+      // Products should have default border
+      const productsDefault = productsNode.querySelector('.border-white\\/10');
+      expect(productsDefault).not.toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // NEW: Export Internals Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('Export functionality', () => {
+    test('PNG export calls html2canvas and creates download link', async () => {
+      const clickMock = mock(() => {});
+      const originalCreateElement = document.createElement.bind(document);
+      const createElementSpy = mock((tag: string) => {
+        const el = originalCreateElement(tag);
+        if (tag === 'a') {
+          Object.defineProperty(el, 'click', { value: clickMock });
+        }
+        return el;
+      });
+      document.createElement = createElementSpy as unknown as typeof document.createElement;
+
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      const pngButton = view.getByText('PNG').closest('button')!;
+      await act(async () => {
+        fireEvent.click(pngButton);
+      });
+
+      // html2canvas should have been called
+      expect(mockHtml2canvas).toHaveBeenCalledTimes(1);
+
+      // Wait for the async chain
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 10));
+      });
+
+      expect(clickMock).toHaveBeenCalled();
+
+      // Restore
+      document.createElement = originalCreateElement;
+    });
+
+    test('SVG export uses XMLSerializer and creates download link', async () => {
+      const clickMock = mock(() => {});
+      const revokeObjectURLMock = mock(() => {});
+      const originalCreateElement = document.createElement.bind(document);
+      const createElementSpy = mock((tag: string) => {
+        const el = originalCreateElement(tag);
+        if (tag === 'a') {
+          Object.defineProperty(el, 'click', { value: clickMock });
+        }
+        return el;
+      });
+      document.createElement = createElementSpy as unknown as typeof document.createElement;
+
+      const originalRevokeObjectURL = URL.revokeObjectURL;
+      URL.revokeObjectURL = revokeObjectURLMock;
+
+      const props = createDefaultProps();
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      const svgButton = view.getByText('SVG').closest('button')!;
+      await act(async () => {
+        fireEvent.click(svgButton);
+      });
+
+      // Wait for async chain
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 10));
+      });
+
+      expect(clickMock).toHaveBeenCalled();
+      expect(revokeObjectURLMock).toHaveBeenCalled();
+
+      // Restore
+      document.createElement = originalCreateElement;
+      URL.revokeObjectURL = originalRevokeObjectURL;
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // NEW: Edge Construction & Misc Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('Edge construction and misc', () => {
+    test('heuristic matches singular table name (author_id → author)', () => {
+      const props = createDefaultProps({ schema: schemaHeuristicSingular });
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // books.author_id → author (singular match, not authors)
+      expect(view.queryByText('1 relationships')).not.toBeNull();
+    });
+
+    test('schema with undefined foreignKeys does not crash', () => {
+      const props = createDefaultProps({ schema: schemaUndefinedFK });
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      expect(view.queryByText('1 tables')).not.toBeNull();
+      expect(view.queryByText('0 relationships')).not.toBeNull();
+    });
+
+    test('multi-FK schema shows correct relationship count', () => {
+      const props = createDefaultProps({ schema: schemaMultiFK });
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      // orders→users + items→orders = 2 relationships
+      expect(view.queryByText('2 relationships')).not.toBeNull();
+    });
+
+    test('multi-FK: selecting middle node highlights both connected nodes', () => {
+      const props = createDefaultProps({ schema: schemaMultiFK });
+      const { container } = render(<SchemaDiagram {...props} />);
+
+      // Select 'orders' which is FK target of 'items' and FK source pointing to 'users'
+      const ordersNode = container.querySelector('[data-node-id="orders"]')!;
+      fireEvent.click(ordersNode);
+
+      // 'users' should be highlighted (orders has FK to users)
+      const usersNode = container.querySelector('[data-node-id="users"]')!;
+      expect(usersNode.querySelector('.border-blue-500\\/60')).not.toBeNull();
+
+      // 'items' should be highlighted (items has FK to orders)
+      const itemsNode = container.querySelector('[data-node-id="items"]')!;
+      expect(itemsNode.querySelector('.border-blue-500\\/60')).not.toBeNull();
+    });
+
+    test('no-FK warning shown for schema with undefined foreignKeys', () => {
+      const props = createDefaultProps({ schema: schemaUndefinedFK });
+      const { container } = render(<SchemaDiagram {...props} />);
+      const view = within(container);
+
+      expect(view.queryByText(/No FK data available/)).not.toBeNull();
+    });
+  });
+});