@libredb/studio 0.9.7

package/tests/components/SchemaDiff.test.tsx

@@ -0,0 +1,906 @@
+import '../setup-dom';
+import '../helpers/mock-sonner';
+import '../helpers/mock-navigation';
+
+import { mock } from 'bun:test';
+import React from 'react';
+
+// ── Mock data ────────────────────────────────────────────────────────────────
+
+const mockDiffWithChanges = {
+  tables: [
+    {
+      action: 'added',
+      tableName: 'new_table',
+      columns: [
+        { action: 'added', columnName: 'id', targetType: 'integer', changes: ['Added column "id" (integer)'] },
+      ],
+      indexes: [],
+      foreignKeys: [],
+    },
+    {
+      action: 'removed',
+      tableName: 'old_table',
+      columns: [
+        { action: 'removed', columnName: 'name', sourceType: 'varchar', changes: ['Removed column "name"'] },
+      ],
+      indexes: [],
+      foreignKeys: [],
+    },
+    {
+      action: 'modified',
+      tableName: 'users',
+      columns: [
+        { action: 'modified', columnName: 'email', sourceType: 'varchar(100)', targetType: 'varchar(255)', changes: ['Type changed: varchar(100) -> varchar(255)'] },
+      ],
+      indexes: [
+        { action: 'added', indexName: 'idx_email', changes: ['Added index idx_email'] },
+        { action: 'removed', indexName: 'idx_old', changes: ['Removed index idx_old'] },
+        { action: 'modified', indexName: 'idx_name', changes: ['Columns changed'] },
+      ],
+      foreignKeys: [
+        { action: 'added', columnName: 'org_id', changes: ['Added FK on org_id'] },
+        { action: 'removed', columnName: 'dept_id', changes: ['Removed FK on dept_id'] },
+      ],
+    },
+  ],
+  summary: { added: 1, removed: 1, modified: 1 },
+  hasChanges: true,
+};
+
+const mockDiffNoChanges = {
+  tables: [],
+  summary: { added: 0, removed: 0, modified: 0 },
+  hasChanges: false,
+};
+
+const mockDiffSchemas = mock(() => structuredClone(mockDiffWithChanges));
+const mockGenerateMigrationSQL = mock(() => 'CREATE TABLE new_table (\n  id integer\n);\nDROP TABLE old_table;');
+
+mock.module('@/lib/schema-diff/diff-engine', () => ({
+  diffSchemas: mockDiffSchemas,
+}));
+
+mock.module('@/lib/schema-diff/migration-generator', () => ({
+  generateMigrationSQL: mockGenerateMigrationSQL,
+}));
+
+// ── Mock SnapshotTimeline ────────────────────────────────────────────────────
+
+let capturedTimelineProps: { onCompare?: (s: string, t: string) => void; onDelete?: (id: string) => void } = {};
+
+mock.module('@/components/SnapshotTimeline', () => ({
+  SnapshotTimeline: (props: { snapshots: unknown[]; onCompare?: (s: string, t: string) => void; onDelete?: (id: string) => void }) => {
+    capturedTimelineProps = { onCompare: props.onCompare, onDelete: props.onDelete };
+    return React.createElement('div', { 'data-testid': 'snapshot-timeline' }, `${props.snapshots.length} snapshots`);
+  },
+}));
+
+// ── Mock UI components ───────────────────────────────────────────────────────
+
+mock.module('@/components/ui/button', () => ({
+  Button: ({ children, onClick, disabled, className, ...rest }: Record<string, unknown>) =>
+    React.createElement('button', { onClick: onClick as (() => void), disabled: disabled as boolean, className, ...rest }, children as React.ReactNode),
+}));
+
+mock.module('@/components/ui/badge', () => ({
+  Badge: ({ children, className }: { children: React.ReactNode; className?: string }) =>
+    React.createElement('span', { 'data-testid': 'badge', className }, children),
+}));
+
+// ── Mock Select: capture onValueChange callbacks ─────────────────────────────
+
+// We store onValueChange keyed by the Select's current value prop.
+// Source starts with value="current", Target starts with value="".
+const selectCallbacks = new Map<string, (v: string) => void>();
+
+mock.module('@/components/ui/select', () => ({
+  Select: ({ children, value, onValueChange }: { children: React.ReactNode; value?: string; onValueChange?: (v: string) => void }) => {
+    const key = value ?? '__empty__';
+    if (onValueChange) selectCallbacks.set(key, onValueChange);
+    return React.createElement('div', { 'data-testid': `select-${key}` }, children);
+  },
+  SelectTrigger: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', { 'data-testid': 'select-trigger' }, children),
+  SelectContent: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', { 'data-testid': 'select-content' }, children),
+  SelectItem: ({ children, value }: { children: React.ReactNode; value: string }) =>
+    React.createElement('div', { 'data-testid': `select-item-${value}`, 'data-value': value }, children),
+  SelectValue: ({ placeholder }: { placeholder?: string }) =>
+    React.createElement('span', { 'data-testid': 'select-value' }, placeholder),
+}));
+
+// ── Mock storage ─────────────────────────────────────────────────────────────
+
+const mockSnapshots = [
+  {
+    id: 'snap-1',
+    connectionId: 'test-pg-1',
+    connectionName: 'TestDB',
+    databaseType: 'postgres',
+    schema: [
+      { name: 'old_table', columns: [{ name: 'name', type: 'varchar', nullable: true, isPrimary: false }], indexes: [], foreignKeys: [] },
+      { name: 'users', columns: [{ name: 'email', type: 'varchar(100)', nullable: true, isPrimary: false }], indexes: [], foreignKeys: [] },
+    ],
+    createdAt: new Date('2026-01-10T10:00:00Z'),
+    label: 'Before migration',
+  },
+];
+
+const mockGetSchemaSnapshots = mock(() => [...mockSnapshots]);
+const mockSaveSchemaSnapshot = mock(() => {});
+const mockDeleteSchemaSnapshot = mock(() => {});
+const mockGetConnections = mock(() => [
+  { id: 'remote-1', name: 'Remote PG', type: 'postgres', host: 'remote', port: 5432, database: 'db', createdAt: new Date() },
+  { id: 'remote-2', name: 'Prod DB', type: 'postgres', host: 'prod', port: 5432, database: 'db', environment: 'production', createdAt: new Date() },
+]);
+
+mock.module('@/lib/storage', () => ({
+  storage: {
+    getSchemaSnapshots: mockGetSchemaSnapshots,
+    saveSchemaSnapshot: mockSaveSchemaSnapshot,
+    deleteSchemaSnapshot: mockDeleteSchemaSnapshot,
+    getConnections: mockGetConnections,
+  },
+}));
+
+mock.module('@/hooks/use-all-connections', () => ({
+  useAllConnections: () => ({
+    connections: mockGetConnections(),
+    loading: false,
+  }),
+}));
+
+// ── Imports AFTER mocks ──────────────────────────────────────────────────────
+
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, fireEvent, cleanup, act } from '@testing-library/react';
+import { SchemaDiff } from '@/components/SchemaDiff';
+import { mockSchema } from '../fixtures/schemas';
+import { mockPostgresConnection } from '../fixtures/connections';
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function renderDiff(overrides: Partial<Parameters<typeof SchemaDiff>[0]> = {}) {
+  return render(
+    <SchemaDiff
+      schema={mockSchema}
+      connection={mockPostgresConnection}
+      {...overrides}
+    />
+  );
+}
+
+/** Trigger the source Select's onValueChange (source value starts as "current") */
+function changeSource(value: string) {
+  const fn = selectCallbacks.get('current');
+  if (fn) act(() => fn(value));
+}
+
+/** Trigger the target Select's onValueChange (target value starts as "") */
+function changeTarget(value: string) {
+  const fn = selectCallbacks.get('__empty__') || selectCallbacks.get('');
+  if (fn) act(() => fn(value));
+}
+
+/** Get the target callback for async tests (no act() wrapping) */
+function getTargetCallback() {
+  return selectCallbacks.get('__empty__') || selectCallbacks.get('');
+}
+
+/** Helper to set native input value and trigger React change handler */
+function changeInput(input: HTMLInputElement, value: string) {
+  // React controlled inputs need nativeInputValueSetter
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+  if (nativeInputValueSetter) {
+    nativeInputValueSetter.call(input, value);
+  } else {
+    // fallback
+    Object.defineProperty(input, 'value', { value, writable: true, configurable: true });
+  }
+  fireEvent.input(input, { target: { value } });
+  fireEvent.change(input, { target: { value } });
+}
+
+describe('SchemaDiff', () => {
+  beforeEach(() => {
+    mockDiffSchemas.mockClear();
+    mockGenerateMigrationSQL.mockClear();
+    mockGetSchemaSnapshots.mockClear();
+    mockSaveSchemaSnapshot.mockClear();
+    mockDeleteSchemaSnapshot.mockClear();
+    mockGetConnections.mockClear();
+    selectCallbacks.clear();
+    capturedTimelineProps = {};
+
+    mockDiffSchemas.mockImplementation(() => structuredClone(mockDiffWithChanges));
+    mockGenerateMigrationSQL.mockImplementation(() => 'CREATE TABLE new_table (\n  id integer\n);\nDROP TABLE old_table;');
+    mockGetSchemaSnapshots.mockImplementation(() => [...mockSnapshots]);
+    mockGetConnections.mockImplementation(() => [
+      { id: 'remote-1', name: 'Remote PG', type: 'postgres', host: 'remote', port: 5432, database: 'db', createdAt: new Date() },
+      { id: 'remote-2', name: 'Prod DB', type: 'postgres', host: 'prod', port: 5432, database: 'db', environment: 'production', createdAt: new Date() },
+    ]);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Header
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('header', () => {
+    test('renders "Schema Diff" title', () => {
+      const { getByText } = renderDiff();
+      expect(getByText('Schema Diff')).toBeTruthy();
+    });
+
+    test('renders Source and Target labels', () => {
+      const { getByText } = renderDiff();
+      expect(getByText('Source')).toBeTruthy();
+      expect(getByText('Target')).toBeTruthy();
+    });
+
+    test('renders "vs" separator', () => {
+      const { getByText } = renderDiff();
+      expect(getByText('vs')).toBeTruthy();
+    });
+
+    test('renders "Current Schema" in select options', () => {
+      const { getAllByText } = renderDiff();
+      expect(getAllByText('Current Schema').length).toBeGreaterThanOrEqual(2);
+    });
+
+    test('renders snapshot items in select options', () => {
+      const { getAllByText } = renderDiff();
+      const items = getAllByText(/Before migration/);
+      expect(items.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Empty State
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('empty state', () => {
+    test('shows instructions when no target selected', () => {
+      const { getByText } = renderDiff();
+      expect(getByText('Select source and target to compare schemas')).toBeTruthy();
+      expect(getByText('Take a snapshot first, then compare with the current schema')).toBeTruthy();
+    });
+
+    test('shows SnapshotTimeline when snapshots exist', () => {
+      const { container, getByText } = renderDiff();
+      expect(container.querySelector('[data-testid="snapshot-timeline"]')).toBeTruthy();
+      expect(getByText('1 snapshots')).toBeTruthy();
+    });
+
+    test('hides SnapshotTimeline when no snapshots', () => {
+      mockGetSchemaSnapshots.mockImplementation(() => []);
+      const { container } = renderDiff();
+      expect(container.querySelector('[data-testid="snapshot-timeline"]')).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Snapshot Controls
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('snapshot controls', () => {
+    test('renders Snapshot button', () => {
+      const { getByText } = renderDiff();
+      expect(getByText('Snapshot')).toBeTruthy();
+    });
+
+    test('Snapshot button is disabled when no connection', () => {
+      const { container } = renderDiff({ connection: null });
+      const snapshotBtn = Array.from(container.querySelectorAll('button')).find(
+        b => b.textContent?.includes('Snapshot')
+      );
+      expect(snapshotBtn?.disabled).toBe(true);
+    });
+
+    test('clicking Snapshot shows label input', () => {
+      const { getByText, getByPlaceholderText } = renderDiff();
+      fireEvent.click(getByText('Snapshot'));
+      expect(getByPlaceholderText('Label (optional)...')).toBeTruthy();
+      expect(getByText('Save')).toBeTruthy();
+      expect(getByText('Cancel')).toBeTruthy();
+    });
+
+    test('Cancel button hides label input', () => {
+      const { getByText, queryByPlaceholderText } = renderDiff();
+      fireEvent.click(getByText('Snapshot'));
+      expect(queryByPlaceholderText('Label (optional)...')).toBeTruthy();
+      fireEvent.click(getByText('Cancel'));
+      expect(queryByPlaceholderText('Label (optional)...')).toBeNull();
+    });
+
+    test('Save button calls storage.saveSchemaSnapshot', () => {
+      const { getByText, getByPlaceholderText, queryByPlaceholderText } = renderDiff();
+      fireEvent.click(getByText('Snapshot'));
+
+      const input = getByPlaceholderText('Label (optional)...') as HTMLInputElement;
+      changeInput(input, 'My label');
+      fireEvent.click(getByText('Save'));
+
+      expect(mockSaveSchemaSnapshot).toHaveBeenCalledTimes(1);
+      const saved = (mockSaveSchemaSnapshot.mock.calls as unknown[][])[0][0] as Record<string, unknown>;
+      expect(saved.connectionId).toBe(mockPostgresConnection.id);
+      expect(saved.connectionName).toBe(mockPostgresConnection.name);
+      expect(saved.databaseType).toBe(mockPostgresConnection.type);
+
+      // Label input should be hidden after save
+      expect(queryByPlaceholderText('Label (optional)...')).toBeNull();
+    });
+
+    test('Save with empty label sets label to undefined', () => {
+      const { getByText } = renderDiff();
+      fireEvent.click(getByText('Snapshot'));
+      fireEvent.click(getByText('Save'));
+
+      expect(mockSaveSchemaSnapshot).toHaveBeenCalledTimes(1);
+      expect(((mockSaveSchemaSnapshot.mock.calls as unknown[][])[0][0] as Record<string, unknown>).label).toBeUndefined();
+    });
+
+    test('Enter key in label input triggers snapshot save', () => {
+      const { getByText, getByPlaceholderText } = renderDiff();
+      fireEvent.click(getByText('Snapshot'));
+
+      const input = getByPlaceholderText('Label (optional)...') as HTMLInputElement;
+      changeInput(input, 'Enter label');
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      expect(mockSaveSchemaSnapshot).toHaveBeenCalledTimes(1);
+    });
+
+    test('takeSnapshot does nothing when connection is null', () => {
+      // Snapshot button is disabled for null connection, so storage should not be called
+      renderDiff({ connection: null });
+      expect(mockSaveSchemaSnapshot).not.toHaveBeenCalled();
+    });
+
+    test('snapshot save refreshes snapshot list', () => {
+      const { getByText } = renderDiff();
+      const callsBefore = mockGetSchemaSnapshots.mock.calls.length;
+      fireEvent.click(getByText('Snapshot'));
+      fireEvent.click(getByText('Save'));
+      expect(mockGetSchemaSnapshots.mock.calls.length).toBeGreaterThan(callsBefore);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Source/Target Selection
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('source/target selection', () => {
+    test('selecting a target triggers diff display', () => {
+      const { queryByText } = renderDiff();
+      changeTarget('snap-1');
+      // diff has changes → summary should appear
+      expect(queryByText(/1 added, 1 removed, 1 modified/)).toBeTruthy();
+    });
+
+    test('selecting same source and target shows same-schema message', () => {
+      const { getByText } = renderDiff();
+      changeTarget('current');
+      // source=current, target=current → same → null diff
+      expect(getByText('Cannot compare same schema with itself')).toBeTruthy();
+    });
+
+    test('changing source updates diff', () => {
+      renderDiff();
+      changeSource('snap-1');
+      changeTarget('current');
+      expect(mockDiffSchemas).toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Diff View (hasChanges = true)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('diff view with changes', () => {
+    function renderWithDiff() {
+      const result = renderDiff();
+      changeTarget('snap-1');
+      return result;
+    }
+
+    test('shows summary counts', () => {
+      const { getByText } = renderWithDiff();
+      expect(getByText(/1 added, 1 removed, 1 modified/)).toBeTruthy();
+    });
+
+    test('renders all table names in sidebar', () => {
+      const { getByText } = renderWithDiff();
+      expect(getByText('new_table')).toBeTruthy();
+      expect(getByText('old_table')).toBeTruthy();
+      expect(getByText('users')).toBeTruthy();
+    });
+
+    test('renders action badges for tables', () => {
+      const { getByText } = renderWithDiff();
+      expect(getByText('Added')).toBeTruthy();
+      expect(getByText('Removed')).toBeTruthy();
+      expect(getByText('Modified')).toBeTruthy();
+    });
+
+    test('shows "Select a table" prompt when no table is selected', () => {
+      const { getByText } = renderWithDiff();
+      expect(getByText('Select a table to view diff details')).toBeTruthy();
+    });
+
+    test('clicking a table shows its detail', () => {
+      const { getByText } = renderWithDiff();
+      fireEvent.click(getByText('new_table'));
+      // TableDiffDetail renders: table heading with action badge
+      const badges = document.querySelectorAll('[data-testid="badge"]');
+      const addedBadge = Array.from(badges).find(b => b.textContent === 'added');
+      expect(addedBadge).toBeTruthy();
+    });
+
+    test('clicking a different table switches detail', () => {
+      const { getByText } = renderWithDiff();
+      fireEvent.click(getByText('new_table'));
+      // new_table detail should show column "id"
+      expect(getByText('id')).toBeTruthy();
+
+      fireEvent.click(getByText('old_table'));
+      // old_table detail should show column "name"
+      expect(getByText('name')).toBeTruthy();
+    });
+
+    test('selected table has ChevronDown, others have ChevronRight', () => {
+      const { container, getByText } = renderWithDiff();
+      fireEvent.click(getByText('new_table'));
+
+      const tableButtons = Array.from(container.querySelectorAll('button'));
+      const newTableBtn = tableButtons.find(b => b.textContent?.includes('new_table'));
+      const oldTableBtn = tableButtons.find(b => b.textContent?.includes('old_table'));
+
+      expect(newTableBtn?.querySelector('.lucide-chevron-down')).toBeTruthy();
+      expect(oldTableBtn?.querySelector('.lucide-chevron-right')).toBeTruthy();
+    });
+
+    test('selected table has highlighted background', () => {
+      const { container, getByText } = renderWithDiff();
+      fireEvent.click(getByText('users'));
+
+      const usersBtn = Array.from(container.querySelectorAll('button')).find(
+        b => b.textContent?.includes('users')
+      );
+      expect(usersBtn?.className).toContain('bg-white/10');
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // No Changes State
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('no changes state', () => {
+    test('shows "No differences found" message', () => {
+      mockDiffSchemas.mockImplementation(() => structuredClone(mockDiffNoChanges));
+      const { getByText } = renderDiff();
+      changeTarget('snap-1');
+      expect(getByText('No differences found between source and target')).toBeTruthy();
+    });
+
+    test('SQL Migration button does not appear when no changes', () => {
+      mockDiffSchemas.mockImplementation(() => structuredClone(mockDiffNoChanges));
+      const { queryByText } = renderDiff();
+      changeTarget('snap-1');
+      expect(queryByText('SQL Migration')).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Migration SQL View
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('migration SQL', () => {
+    function renderWithDiff() {
+      const result = renderDiff();
+      changeTarget('snap-1');
+      return result;
+    }
+
+    test('SQL Migration button appears when diff has changes', () => {
+      const { getByText } = renderWithDiff();
+      expect(getByText('SQL Migration')).toBeTruthy();
+    });
+
+    test('clicking SQL Migration shows SQL and changes button text', () => {
+      const { getByText, container } = renderWithDiff();
+      fireEvent.click(getByText('SQL Migration'));
+
+      expect(container.textContent).toContain('CREATE TABLE new_table');
+      expect(container.textContent).toContain('DROP TABLE old_table');
+      expect(getByText('Diff View')).toBeTruthy();
+    });
+
+    test('toggling back to diff view shows table list again', () => {
+      const { getByText } = renderWithDiff();
+      fireEvent.click(getByText('SQL Migration'));
+      expect(getByText('Diff View')).toBeTruthy();
+
+      fireEvent.click(getByText('Diff View'));
+      expect(getByText('SQL Migration')).toBeTruthy();
+      expect(getByText('new_table')).toBeTruthy();
+    });
+
+    test('migration SQL is rendered in a pre tag', () => {
+      const { getByText, container } = renderWithDiff();
+      fireEvent.click(getByText('SQL Migration'));
+      const pre = container.querySelector('pre');
+      expect(pre).toBeTruthy();
+      expect(pre!.textContent).toContain('CREATE TABLE');
+    });
+
+    test('generateMigrationSQL receives correct dialect', () => {
+      renderWithDiff();
+      if (mockGenerateMigrationSQL.mock.calls.length > 0) {
+        const dialect = (mockGenerateMigrationSQL.mock.calls as unknown[][])[0][1];
+        expect(dialect).toBe('postgres');
+      }
+    });
+
+    test('defaults to postgres dialect when connection is null', () => {
+      renderDiff({ connection: null });
+      changeTarget('snap-1');
+      if (mockGenerateMigrationSQL.mock.calls.length > 0) {
+        const dialect = (mockGenerateMigrationSQL.mock.calls as unknown[][])[0][1];
+        expect(dialect).toBe('postgres');
+      }
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TableDiffDetail Sub-Component
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('TableDiffDetail', () => {
+    function renderAndSelectTable(tableName: string) {
+      const result = renderDiff();
+      changeTarget('snap-1');
+      fireEvent.click(result.getByText(tableName));
+      return result;
+    }
+
+    // ── Header ──
+
+    test('shows table name and action badge', () => {
+      const { container } = renderAndSelectTable('new_table');
+      const badges = container.querySelectorAll('[data-testid="badge"]');
+      const addedBadge = Array.from(badges).find(b => b.textContent === 'added');
+      expect(addedBadge).toBeTruthy();
+    });
+
+    test('removed table shows removed badge', () => {
+      const { container } = renderAndSelectTable('old_table');
+      const badges = container.querySelectorAll('[data-testid="badge"]');
+      const removedBadge = Array.from(badges).find(b => b.textContent === 'removed');
+      expect(removedBadge).toBeTruthy();
+    });
+
+    test('modified table shows modified badge', () => {
+      const { container } = renderAndSelectTable('users');
+      const badges = container.querySelectorAll('[data-testid="badge"]');
+      const modifiedBadge = Array.from(badges).find(b => b.textContent === 'modified');
+      expect(modifiedBadge).toBeTruthy();
+    });
+
+    // ── Columns ──
+
+    test('renders "Columns" heading when columns exist', () => {
+      const { getByText } = renderAndSelectTable('users');
+      expect(getByText('Columns')).toBeTruthy();
+    });
+
+    test('renders added column with target type', () => {
+      const { getByText } = renderAndSelectTable('new_table');
+      expect(getByText('id')).toBeTruthy();
+      expect(getByText('integer')).toBeTruthy();
+    });
+
+    test('renders removed column with source type', () => {
+      const { getByText } = renderAndSelectTable('old_table');
+      expect(getByText('name')).toBeTruthy();
+      expect(getByText('varchar')).toBeTruthy();
+    });
+
+    test('renders modified column with change details', () => {
+      const { getByText } = renderAndSelectTable('users');
+      expect(getByText('email')).toBeTruthy();
+      expect(getByText('Type changed: varchar(100) -> varchar(255)')).toBeTruthy();
+    });
+
+    test('added column row has green background', () => {
+      const { getByText } = renderAndSelectTable('new_table');
+      const colRow = getByText('id').closest('div[class*="rounded"]');
+      expect(colRow?.className).toContain('bg-green-500/5');
+    });
+
+    test('removed column row has red background', () => {
+      const { getByText } = renderAndSelectTable('old_table');
+      const colRow = getByText('name').closest('div[class*="rounded"]');
+      expect(colRow?.className).toContain('bg-red-500/5');
+    });
+
+    test('modified column row has yellow background', () => {
+      const { getByText } = renderAndSelectTable('users');
+      const colRow = getByText('email').closest('div[class*="rounded"]');
+      expect(colRow?.className).toContain('bg-yellow-500/5');
+    });
+
+    // ── Indexes ──
+
+    test('renders "Indexes" heading when indexes exist', () => {
+      const { getByText } = renderAndSelectTable('users');
+      expect(getByText('Indexes')).toBeTruthy();
+    });
+
+    test('renders index names and changes', () => {
+      const { getByText } = renderAndSelectTable('users');
+      expect(getByText('idx_email')).toBeTruthy();
+      expect(getByText('idx_old')).toBeTruthy();
+      expect(getByText('idx_name')).toBeTruthy();
+      expect(getByText('Added index idx_email')).toBeTruthy();
+      expect(getByText('Removed index idx_old')).toBeTruthy();
+      expect(getByText('Columns changed')).toBeTruthy();
+    });
+
+    test('index rows have correct backgrounds', () => {
+      const { getByText } = renderAndSelectTable('users');
+      const addedIdx = getByText('idx_email').closest('div[class*="rounded"]');
+      expect(addedIdx?.className).toContain('bg-green-500/5');
+      const removedIdx = getByText('idx_old').closest('div[class*="rounded"]');
+      expect(removedIdx?.className).toContain('bg-red-500/5');
+      const modifiedIdx = getByText('idx_name').closest('div[class*="rounded"]');
+      expect(modifiedIdx?.className).toContain('bg-yellow-500/5');
+    });
+
+    test('does not render "Indexes" heading when no indexes', () => {
+      const { queryByText } = renderAndSelectTable('new_table');
+      expect(queryByText('Indexes')).toBeNull();
+    });
+
+    // ── Foreign Keys ──
+
+    test('renders "Foreign Keys" heading when FKs exist', () => {
+      const { getByText } = renderAndSelectTable('users');
+      expect(getByText('Foreign Keys')).toBeTruthy();
+    });
+
+    test('renders FK column names and changes', () => {
+      const { getByText } = renderAndSelectTable('users');
+      expect(getByText('org_id')).toBeTruthy();
+      expect(getByText('dept_id')).toBeTruthy();
+      expect(getByText('Added FK on org_id')).toBeTruthy();
+      expect(getByText('Removed FK on dept_id')).toBeTruthy();
+    });
+
+    test('FK rows have correct backgrounds', () => {
+      const { getByText } = renderAndSelectTable('users');
+      const addedFK = getByText('org_id').closest('div[class*="rounded"]');
+      expect(addedFK?.className).toContain('bg-green-500/5');
+      const removedFK = getByText('dept_id').closest('div[class*="rounded"]');
+      expect(removedFK?.className).toContain('bg-red-500/5');
+    });
+
+    test('does not render "Foreign Keys" heading when no FKs', () => {
+      const { queryByText } = renderAndSelectTable('new_table');
+      expect(queryByText('Foreign Keys')).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SnapshotTimeline Integration
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('SnapshotTimeline integration', () => {
+    test('onCompare callback sets source and target', () => {
+      renderDiff();
+      expect(capturedTimelineProps.onCompare).toBeDefined();
+
+      act(() => {
+        capturedTimelineProps.onCompare!('snap-1', 'current');
+      });
+
+      // Diff should be triggered
+      expect(mockDiffSchemas).toHaveBeenCalled();
+    });
+
+    test('onDelete callback removes snapshot', () => {
+      renderDiff();
+      expect(capturedTimelineProps.onDelete).toBeDefined();
+
+      act(() => {
+        capturedTimelineProps.onDelete!('snap-1');
+      });
+
+      expect(mockDeleteSchemaSnapshot).toHaveBeenCalledWith('snap-1');
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Cross-Connection Comparison
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('cross-connection comparison', () => {
+    test('renders "Fetch from connection" section in target selector', () => {
+      const { getByText } = renderDiff();
+      expect(getByText('Fetch from connection')).toBeTruthy();
+    });
+
+    test('renders remote connections', () => {
+      const { getByText } = renderDiff();
+      expect(getByText('Remote PG')).toBeTruthy();
+      expect(getByText('Prod DB')).toBeTruthy();
+    });
+
+    test('does not show "Fetch from connection" when no other connections', () => {
+      mockGetConnections.mockImplementation(() => []);
+      const { queryByText } = renderDiff();
+      expect(queryByText('Fetch from connection')).toBeNull();
+    });
+
+    test('production connection shows warning icon', () => {
+      const { getByText } = renderDiff();
+      // Find Prod DB text and check its parent container for the AlertTriangle icon
+      const prodText = getByText('Prod DB');
+      const wrapper = prodText.closest('[data-testid^="select-item-"]') || prodText.parentElement;
+      expect(wrapper).toBeTruthy();
+      // Lucide renders class="lucide lucide-triangle-alert ..."
+      const alertIcon = wrapper!.querySelector('svg[class*="alert-triangle"], svg[class*="triangle-alert"]');
+      expect(alertIcon).toBeTruthy();
+    });
+
+    test('selecting a remote connection triggers API fetch', async () => {
+      const origFetch = globalThis.fetch;
+      const mockFetch = mock(() =>
+        Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({ schema: mockSchema }),
+        })
+      );
+      globalThis.fetch = mockFetch as unknown as typeof fetch;
+
+      try {
+        renderDiff();
+        const fn = getTargetCallback();
+        expect(fn).toBeTruthy();
+
+        await act(async () => {
+          fn!('conn:remote-1');
+        });
+
+        expect(mockFetch).toHaveBeenCalledTimes(1);
+        const [url, options] = (mockFetch.mock.calls as unknown[][])[0] as [string, RequestInit];
+        expect(url).toBe('/api/db/schema-snapshot');
+        expect(JSON.parse(options.body as string).connection.id).toBe('remote-1');
+
+        expect(mockSaveSchemaSnapshot).toHaveBeenCalledTimes(1);
+        const saved = (mockSaveSchemaSnapshot.mock.calls as unknown[][])[0][0] as Record<string, unknown>;
+        expect(saved.label).toBe('Live: Remote PG');
+      } finally {
+        globalThis.fetch = origFetch;
+      }
+    });
+
+    test('shows "Fetching..." during remote fetch', async () => {
+      const origFetch = globalThis.fetch;
+      let resolveFetch!: (v: unknown) => void;
+      const fetchPromise = new Promise((resolve) => { resolveFetch = resolve; });
+      globalThis.fetch = mock(() => fetchPromise) as unknown as typeof fetch;
+
+      try {
+        const { queryByText } = renderDiff();
+        const fn = getTargetCallback();
+
+        // Start the fetch synchronously, then check for Fetching...
+        act(() => {
+          fn!('conn:remote-1');
+        });
+
+        expect(queryByText('Fetching...')).toBeTruthy();
+
+        // Resolve the fetch
+        await act(async () => {
+          resolveFetch({ ok: true, json: () => Promise.resolve({ schema: [] }) });
+        });
+
+        expect(queryByText('Fetching...')).toBeNull();
+      } finally {
+        globalThis.fetch = origFetch;
+      }
+    });
+
+    test('handles fetch error gracefully', async () => {
+      const origFetch = globalThis.fetch;
+      const origError = console.error;
+      const mockConsoleError = mock(() => {});
+      console.error = mockConsoleError;
+
+      globalThis.fetch = mock(() =>
+        Promise.resolve({
+          ok: false,
+          json: () => Promise.resolve({ error: 'Unauthorized' }),
+        })
+      ) as unknown as typeof fetch;
+
+      try {
+        renderDiff();
+        const fn = getTargetCallback();
+
+        await act(async () => {
+          fn!('conn:remote-1');
+        });
+
+        expect(mockConsoleError).toHaveBeenCalled();
+        expect(mockSaveSchemaSnapshot).not.toHaveBeenCalled();
+      } finally {
+        globalThis.fetch = origFetch;
+        console.error = origError;
+      }
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // formatSnapshotLabel
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('formatSnapshotLabel', () => {
+    test('snapshot with label shows label', () => {
+      const { getAllByText } = renderDiff();
+      const matches = getAllByText(/Before migration/);
+      expect(matches.length).toBeGreaterThanOrEqual(1);
+    });
+
+    test('snapshot without label shows connectionName', () => {
+      mockGetSchemaSnapshots.mockImplementation(() => [
+        { ...mockSnapshots[0], label: '' },
+      ]);
+      const { getAllByText } = renderDiff();
+      const matches = getAllByText(/TestDB/);
+      expect(matches.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Action Badges (sidebar)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  describe('action badges', () => {
+    function renderWithDiff() {
+      const result = renderDiff();
+      changeTarget('snap-1');
+      return result;
+    }
+
+    test('added badge has green styling', () => {
+      const { container } = renderWithDiff();
+      const badges = container.querySelectorAll('[data-testid="badge"]');
+      const addedBadge = Array.from(badges).find(b => b.textContent?.includes('Added'));
+      expect(addedBadge).toBeTruthy();
+      expect(addedBadge!.className).toContain('bg-green-500/20');
+    });
+
+    test('removed badge has red styling', () => {
+      const { container } = renderWithDiff();
+      const badges = container.querySelectorAll('[data-testid="badge"]');
+      const removedBadge = Array.from(badges).find(b => b.textContent?.includes('Removed'));
+      expect(removedBadge).toBeTruthy();
+      expect(removedBadge!.className).toContain('bg-red-500/20');
+    });
+
+    test('modified badge has yellow styling', () => {
+      const { container } = renderWithDiff();
+      const badges = container.querySelectorAll('[data-testid="badge"]');
+      const modifiedBadge = Array.from(badges).find(b => b.textContent?.includes('Modified'));
+      expect(modifiedBadge).toBeTruthy();
+      expect(modifiedBadge!.className).toContain('bg-yellow-500/20');
+    });
+  });
+});