@libredb/studio 0.9.7

package/tests/components/ResultsGrid.test.tsx

@@ -0,0 +1,804 @@
+import '../setup-dom';
+import '../helpers/mock-sonner';
+import '../helpers/mock-navigation';
+
+import { mock } from 'bun:test';
+import React from 'react';
+
+// ── Mock framer-motion ──────────────────────────────────────────────────────
+mock.module('framer-motion', () => {
+  const passthrough = ({ children, ...props }: Record<string, unknown>) =>
+    React.createElement('div', props, children as React.ReactNode);
+
+  return {
+    motion: new Proxy({}, {
+      get: () => passthrough,
+    }),
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => children,
+    useAnimation: () => ({ start: mock(() => {}), stop: mock(() => {}) }),
+    useInView: () => true,
+  };
+});
+
+// ── Mock data-masking ───────────────────────────────────────────────────────
+const mockShouldMask = mock(() => false);
+const mockCanToggleMasking = mock(() => true);
+const mockCanReveal = mock(() => true);
+const mockDetectSensitiveColumnsFromConfig = mock(() => new Map());
+const mockMaskValueByPattern = mock(() => '***');
+const mockLoadMaskingConfig = mock(() => ({
+  enabled: false,
+  patterns: [],
+  roles: {},
+}));
+
+mock.module('@/lib/data-masking', () => ({
+  shouldMask: mockShouldMask,
+  canToggleMasking: mockCanToggleMasking,
+  canReveal: mockCanReveal,
+  detectSensitiveColumnsFromConfig: mockDetectSensitiveColumnsFromConfig,
+  maskValueByPattern: mockMaskValueByPattern,
+  loadMaskingConfig: mockLoadMaskingConfig,
+}));
+
+// ── Mock sub-components to simplify testing ─────────────────────────────────
+mock.module('@/components/results-grid/ResultCard', () => ({
+  ResultCard: (props: Record<string, unknown>) =>
+    React.createElement('div', { 'data-testid': 'result-card', 'data-index': props.index }),
+}));
+
+mock.module('@/components/results-grid/RowDetailSheet', () => ({
+  RowDetailSheet: (props: Record<string, unknown>) =>
+    props.isOpen
+      ? React.createElement('div', { 'data-testid': 'row-detail-sheet' }, 'Row Detail')
+      : null,
+}));
+
+mock.module('@/components/results-grid/StatsBar', () => ({
+  StatsBar: (props: Record<string, unknown>) =>
+    React.createElement('div', { 'data-testid': 'stats-bar' },
+      React.createElement('span', { 'data-testid': 'row-count' }, `${(props.result as { rows: unknown[] })?.rows?.length ?? 0} rows`),
+      React.createElement('span', { 'data-testid': 'filtered-count' }, `${props.filteredRowCount} filtered`),
+      React.createElement('span', { 'data-testid': 'exec-time' }, `EXEC TIME: ${(props.result as { executionTime?: number })?.executionTime ?? 0}ms`),
+      props.onToggleMasking
+        ? React.createElement('button', { 'data-testid': 'masking-toggle', onClick: props.onToggleMasking as () => void }, 'MASK')
+        : null,
+      props.editingEnabled && props.pendingChanges && (props.pendingChanges as unknown[]).length > 0
+        ? React.createElement('span', { 'data-testid': 'pending-changes' }, `${(props.pendingChanges as unknown[]).length} changes`)
+        : null,
+      (props.activeFilterCount as number) > 0
+        ? React.createElement('button', { 'data-testid': 'clear-filters', onClick: props.onClearFilters as () => void }, 'Clear Filters')
+        : null,
+    ),
+  LoadMoreFooter: (props: Record<string, unknown>) =>
+    props.hasMore
+      ? React.createElement('div', { 'data-testid': 'load-more-footer' },
+          React.createElement('button', { onClick: props.onLoadMore as () => void, 'data-testid': 'load-more-btn' }, 'Load More (500 rows)')
+        )
+      : null,
+}));
+
+// ── Mock @tanstack/react-virtual ────────────────────────────────────────────
+mock.module('@tanstack/react-virtual', () => ({
+  useVirtualizer: (opts: { count: number }) => ({
+    getVirtualItems: () =>
+      Array.from({ length: opts.count }, (_, i) => ({
+        index: i,
+        start: i * 36,
+        size: 36,
+        key: i,
+      })),
+    getTotalSize: () => opts.count * 36,
+  }),
+}));
+
+// ── Mock lucide-react icons ─────────────────────────────────────────────────
+mock.module('lucide-react', () => {
+  return new Proxy({}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return (props: Record<string, unknown>) =>
+        React.createElement('span', { 'data-icon': prop, className: props.className as string });
+    },
+  });
+});
+
+// ── Imports AFTER mocks ─────────────────────────────────────────────────────
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, fireEvent, cleanup, act } from '@testing-library/react';
+import { ResultsGrid, type CellChange } from '@/components/ResultsGrid';
+import type { QueryResult } from '@/lib/types';
+
+// ── Test data ───────────────────────────────────────────────────────────────
+
+const mockResult: QueryResult = {
+  rows: [
+    { id: 1, name: 'Alice', email: 'alice@example.com' },
+    { id: 2, name: 'Bob', email: 'bob@example.com' },
+    { id: 3, name: 'Charlie', email: 'charlie@example.com' },
+  ],
+  fields: ['id', 'name', 'email'],
+  rowCount: 3,
+  executionTime: 12,
+};
+
+const mockEmptyResult: QueryResult = {
+  rows: [],
+  fields: [],
+  rowCount: 0,
+  executionTime: 1,
+};
+
+const mockPaginatedResult: QueryResult = {
+  rows: Array.from({ length: 50 }, (_, i) => ({
+    id: i + 1,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+  })),
+  fields: ['id', 'name', 'email'],
+  rowCount: 50,
+  executionTime: 25,
+  pagination: {
+    limit: 50,
+    offset: 0,
+    hasMore: true,
+    totalReturned: 50,
+    wasLimited: true,
+  },
+};
+
+// =============================================================================
+// ResultsGrid Tests
+// =============================================================================
+
+describe('ResultsGrid', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    mockShouldMask.mockClear();
+    mockCanToggleMasking.mockClear();
+    mockCanReveal.mockClear();
+    mockDetectSensitiveColumnsFromConfig.mockClear();
+    mockDetectSensitiveColumnsFromConfig.mockReturnValue(new Map());
+    mockShouldMask.mockReturnValue(false);
+  });
+
+  // ── 1. Renders "No results" when result has empty rows ────────────────────
+
+  test('renders empty state when result has empty rows', () => {
+    const { queryByText } = render(React.createElement(ResultsGrid, { result: mockEmptyResult }));
+
+    expect(queryByText('Query returned no data')).not.toBeNull();
+  });
+
+  // ── 2. Renders column headers from result.fields ──────────────────────────
+
+  test('renders column headers from result.fields', () => {
+    const { queryAllByText } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+    expect(queryAllByText('id').length).toBeGreaterThan(0);
+    expect(queryAllByText('name').length).toBeGreaterThan(0);
+    expect(queryAllByText('email').length).toBeGreaterThan(0);
+  });
+
+  // ── 3. Renders data rows from result.rows ─────────────────────────────────
+
+  test('renders data rows from result.rows', () => {
+    const { queryAllByText } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+    expect(queryAllByText('Alice').length).toBeGreaterThan(0);
+    expect(queryAllByText('Bob').length).toBeGreaterThan(0);
+    expect(queryAllByText('Charlie').length).toBeGreaterThan(0);
+  });
+
+  // ── 4. Shows row count via StatsBar ───────────────────────────────────────
+
+  test('shows row count in stats bar', () => {
+    const { queryByTestId } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+    const rowCount = queryByTestId('row-count');
+    expect(rowCount).not.toBeNull();
+    expect(rowCount!.textContent).toContain('3 rows');
+  });
+
+  // ── 5. Shows execution time via StatsBar ──────────────────────────────────
+
+  test('shows execution time in stats bar', () => {
+    const { queryByTestId } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+    const execTime = queryByTestId('exec-time');
+    expect(execTime).not.toBeNull();
+    expect(execTime!.textContent).toContain('12ms');
+  });
+
+  // ── 6. Load More button shows when pagination hasMore ─────────────────────
+
+  test('Load More button shows when pagination hasMore', () => {
+    const onLoadMore = mock(() => {});
+    const { queryByTestId } = render(React.createElement(ResultsGrid, {
+      result: mockPaginatedResult,
+      onLoadMore,
+    }));
+
+    const loadMoreBtn = queryByTestId('load-more-btn');
+    expect(loadMoreBtn).not.toBeNull();
+    expect(loadMoreBtn!.textContent).toContain('Load More');
+  });
+
+  // ── 7. Load More button fires onLoadMore ──────────────────────────────────
+
+  test('Load More button fires onLoadMore callback', () => {
+    const onLoadMore = mock(() => {});
+    const { getByTestId } = render(React.createElement(ResultsGrid, {
+      result: mockPaginatedResult,
+      onLoadMore,
+    }));
+
+    const loadMoreBtn = getByTestId('load-more-btn');
+    fireEvent.click(loadMoreBtn);
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+
+  // ── 8. Masking toggle button renders when onToggleMasking provided ────────
+
+  test('masking toggle button renders when onToggleMasking provided', () => {
+    const onToggleMasking = mock(() => {});
+    const { queryByTestId } = render(React.createElement(ResultsGrid, {
+      result: mockResult,
+      onToggleMasking,
+    }));
+
+    const maskToggle = queryByTestId('masking-toggle');
+    expect(maskToggle).not.toBeNull();
+  });
+
+  // ── 9. Masking toggle button not rendered without onToggleMasking ─────────
+
+  test('masking toggle button not rendered without onToggleMasking', () => {
+    const { queryByTestId } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+    const maskToggle = queryByTestId('masking-toggle');
+    expect(maskToggle).toBeNull();
+  });
+
+  // ── 10. Pending changes indicator shows when editing enabled ──────────────
+
+  test('pending changes indicator shows when editingEnabled with changes', () => {
+    const pendingChanges: CellChange[] = [
+      { rowIndex: 0, columnId: 'name', originalValue: 'Alice', newValue: 'Alicia' },
+    ];
+    const { queryByTestId } = render(React.createElement(ResultsGrid, {
+      result: mockResult,
+      editingEnabled: true,
+      pendingChanges,
+      onCellChange: mock(() => {}),
+      onApplyChanges: mock(() => {}),
+      onDiscardChanges: mock(() => {}),
+    }));
+
+    const changesIndicator = queryByTestId('pending-changes');
+    expect(changesIndicator).not.toBeNull();
+    expect(changesIndicator!.textContent).toContain('1 changes');
+  });
+
+  // ── 11. No Load More when no pagination ───────────────────────────────────
+
+  test('no Load More footer when pagination not present', () => {
+    const { queryByTestId } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+    const loadMore = queryByTestId('load-more-footer');
+    expect(loadMore).toBeNull();
+  });
+
+  // ── 12. Empty state message is descriptive ────────────────────────────────
+
+  test('empty state contains helpful message', () => {
+    const { queryByText } = render(React.createElement(ResultsGrid, { result: mockEmptyResult }));
+
+    expect(queryByText('The operation was successful, but the result set is currently empty.')).not.toBeNull();
+  });
+
+  // ── 13. Column headers are interactive (sort on click) ────────────────────
+
+  test('column headers render as interactive elements', () => {
+    const { queryAllByText } = render(React.createElement(ResultsGrid, { result: mockResult }));
+    // Headers render with field names
+    const idHeaders = queryAllByText('id');
+    expect(idHeaders.length).toBeGreaterThan(0);
+    // Click doesn't crash
+    fireEvent.click(idHeaders[0]);
+  });
+
+  // ── 14. Click sort toggles data order ──────────────────────────────────
+
+  test('clicking column header twice for sort toggle does not crash', () => {
+    const { queryAllByText, container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+    const idHeaders = queryAllByText('id');
+    if (idHeaders[0]) {
+      fireEvent.click(idHeaders[0]);
+      fireEvent.click(idHeaders[0]);
+    }
+    expect(container.textContent).toContain('Alice');
+  });
+
+  // ── 15. Filter inputs render ──────────────────────────────────────────────
+
+  test('filter input renders for column filtering', () => {
+    const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+    // Filter inputs have type="text" and specific placeholder
+    const inputs = container.querySelectorAll('input');
+    // Should have at least some filter inputs
+    expect(inputs.length).toBeGreaterThanOrEqual(0);
+  });
+
+  // ── 16. Masking toggle fires callback ───────────────────────────────────
+
+  test('masking toggle fires onToggleMasking callback', () => {
+    const onToggleMasking = mock(() => {});
+    const { getByTestId } = render(React.createElement(ResultsGrid, {
+      result: mockResult,
+      onToggleMasking,
+    }));
+    const maskToggle = getByTestId('masking-toggle');
+    fireEvent.click(maskToggle);
+    expect(onToggleMasking).toHaveBeenCalledTimes(1);
+  });
+
+  // ── 17. Large dataset renders with virtualizer ──────────────────────────
+
+  test('large dataset renders rows via virtualizer', () => {
+    const { container } = render(React.createElement(ResultsGrid, { result: mockPaginatedResult }));
+    // Data rows should be rendered
+    expect(container.textContent).toContain('User 1');
+  });
+
+  // ── 18. No pending changes indicator when no changes ────────────────────
+
+  test('no pending changes indicator when pendingChanges is empty', () => {
+    const { queryByTestId } = render(React.createElement(ResultsGrid, {
+      result: mockResult,
+      editingEnabled: true,
+      pendingChanges: [],
+      onCellChange: mock(() => {}),
+      onApplyChanges: mock(() => {}),
+      onDiscardChanges: mock(() => {}),
+    }));
+    expect(queryByTestId('pending-changes')).toBeNull();
+  });
+
+  // ── 19. Result with single row ──────────────────────────────────────────
+
+  test('renders single row result correctly', () => {
+    const singleRow: QueryResult = {
+      rows: [{ id: 1, status: 'OK' }],
+      fields: ['id', 'status'],
+      rowCount: 1,
+      executionTime: 2,
+    };
+    const { queryAllByText, queryByTestId } = render(React.createElement(ResultsGrid, { result: singleRow }));
+    expect(queryAllByText('OK').length).toBeGreaterThan(0);
+    expect(queryByTestId('row-count')?.textContent).toContain('1 rows');
+  });
+
+  // ── 20. NULL values display ─────────────────────────────────────────────
+
+  test('null values are displayed', () => {
+    const withNulls: QueryResult = {
+      rows: [{ id: 1, name: null }],
+      fields: ['id', 'name'],
+      rowCount: 1,
+      executionTime: 1,
+    };
+    const { container } = render(React.createElement(ResultsGrid, { result: withNulls }));
+    // NULL should be displayed in some form
+    expect(container.textContent).toContain('NULL');
+  });
+
+  // ── 21. Boolean values display ──────────────────────────────────────────
+
+  test('boolean values are displayed', () => {
+    const withBool: QueryResult = {
+      rows: [{ id: 1, active: true }],
+      fields: ['id', 'active'],
+      rowCount: 1,
+      executionTime: 1,
+    };
+    const { container } = render(React.createElement(ResultsGrid, { result: withBool }));
+    expect(container.textContent).toContain('true');
+  });
+
+  // ── 22. Row number column shown ─────────────────────────────────────────
+
+  test('row number column shown', () => {
+    const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+    // Row numbers (1, 2, 3) should appear in the rendered output
+    expect(container.textContent).toContain('1');
+    expect(container.textContent).toContain('2');
+    expect(container.textContent).toContain('3');
+  });
+
+  // ── 23. Masking enabled shows lock icons ────────────────────────────────
+
+  test('masked cells display masked values when masking enabled', () => {
+    mockShouldMask.mockReturnValue(true);
+    mockDetectSensitiveColumnsFromConfig.mockReturnValue(new Map([
+      ['email', { maskType: 'email', pattern: { name: 'email', maskType: 'email' as const, columnPatterns: ['email'], enabled: true, id: 'e1' } }],
+    ]));
+    const { container } = render(React.createElement(ResultsGrid, {
+      result: mockResult,
+      maskingEnabled: true,
+      maskingConfig: { enabled: true, patterns: [], roleSettings: { admin: { canToggle: true, canReveal: true }, user: { canToggle: false, canReveal: false } } },
+    }));
+    // When masking is enabled and shouldMask returns true, values should be masked
+    // The mock maskValueByPattern returns '***'
+    expect(container.textContent).toContain('***');
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Column Filtering Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('Column filtering', () => {
+    test('clicking filter button opens filter dropdown with input', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      expect(filterButtons.length).toBeGreaterThan(0);
+
+      fireEvent.click(filterButtons[0]);
+
+      const filterInput = container.querySelector('input[placeholder="Filter id..."]');
+      expect(filterInput).not.toBeNull();
+    });
+
+    test('typing in filter input filters rows', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[1]);
+
+      const filterInput = container.querySelector('input[placeholder="Filter name..."]');
+      expect(filterInput).not.toBeNull();
+
+      fireEvent.change(filterInput!, { target: { value: 'Alice' } });
+
+      const filteredCount = container.querySelector('[data-testid="filtered-count"]');
+      expect(filteredCount?.textContent).toContain('1 filtered');
+    });
+
+    test('clearing filter value in input removes filter', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[1]);
+
+      const filterInput = container.querySelector('input[placeholder="Filter name..."]')!;
+      fireEvent.change(filterInput, { target: { value: 'Alice' } });
+      expect(container.querySelector('[data-testid="filtered-count"]')?.textContent).toContain('1 filtered');
+
+      // Re-query input after state change (TanStack Table recreates columns)
+      const filterInput2 = container.querySelector('input[placeholder="Filter name..."]')!;
+      fireEvent.change(filterInput2, { target: { value: '' } });
+      expect(container.querySelector('[data-testid="filtered-count"]')?.textContent).toContain('3 filtered');
+    });
+
+    test('Clear filter button removes single column filter', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[1]);
+
+      const filterInput = container.querySelector('input[placeholder="Filter name..."]')!;
+      fireEvent.change(filterInput, { target: { value: 'Alice' } });
+
+      // "Clear filter" button should appear inside dropdown
+      const clearBtn = Array.from(container.querySelectorAll('button')).find(
+        btn => btn.textContent === 'Clear filter'
+      );
+      expect(clearBtn).not.toBeUndefined();
+      fireEvent.click(clearBtn!);
+
+      expect(container.querySelector('[data-testid="filtered-count"]')?.textContent).toContain('3 filtered');
+    });
+
+    test('Escape key closes filter dropdown', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[0]);
+
+      const filterInput = container.querySelector('input[placeholder="Filter id..."]');
+      expect(filterInput).not.toBeNull();
+
+      fireEvent.keyDown(filterInput!, { key: 'Escape' });
+
+      expect(container.querySelector('input[placeholder="Filter id..."]')).toBeNull();
+    });
+
+    test('Enter key closes filter dropdown', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[0]);
+
+      const filterInput = container.querySelector('input[placeholder="Filter id..."]');
+      expect(filterInput).not.toBeNull();
+
+      fireEvent.keyDown(filterInput!, { key: 'Enter' });
+
+      expect(container.querySelector('input[placeholder="Filter id..."]')).toBeNull();
+    });
+
+    test('clicking same filter button again closes dropdown', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[0]);
+      expect(container.querySelector('input[placeholder="Filter id..."]')).not.toBeNull();
+
+      // Re-query button after re-render
+      const filterButtons2 = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons2[0]);
+      expect(container.querySelector('input[placeholder="Filter id..."]')).toBeNull();
+    });
+
+    test('clear all filters via StatsBar handleClearFilters', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      // Set a filter
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[1]);
+      const filterInput = container.querySelector('input[placeholder="Filter name..."]')!;
+      fireEvent.change(filterInput, { target: { value: 'Alice' } });
+
+      // Close dropdown (re-query input after state change)
+      const filterInput2 = container.querySelector('input[placeholder="Filter name..."]')!;
+      fireEvent.keyDown(filterInput2, { key: 'Escape' });
+
+      // Clear all filters button should be visible (activeFilterCount > 0)
+      const clearAllBtn = container.querySelector('[data-testid="clear-filters"]');
+      expect(clearAllBtn).not.toBeNull();
+      fireEvent.click(clearAllBtn!);
+
+      // All rows restored
+      expect(container.querySelector('[data-testid="filtered-count"]')?.textContent).toContain('3 filtered');
+      expect(container.querySelector('[data-testid="clear-filters"]')).toBeNull();
+    });
+
+    test('filter with no matching rows shows 0 filtered', () => {
+      const { container } = render(React.createElement(ResultsGrid, { result: mockResult }));
+
+      const filterButtons = container.querySelectorAll('button[title="Filter column"]');
+      fireEvent.click(filterButtons[1]);
+      const filterInput = container.querySelector('input[placeholder="Filter name..."]')!;
+      fireEvent.change(filterInput, { target: { value: 'Nonexistent' } });
+
+      expect(container.querySelector('[data-testid="filtered-count"]')?.textContent).toContain('0 filtered');
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Inline Editing Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('Inline editing', () => {
+    function findEditInput(container: HTMLElement) {
+      return Array.from(container.querySelectorAll('input')).find(
+        input => input.className.includes('border-blue-500')
+      );
+    }
+
+    test('double-clicking cell enters edit mode with input', () => {
+      const onCellChange = mock(() => {});
+      const { container } = render(React.createElement(ResultsGrid, {
+        result: mockResult,
+        editingEnabled: true,
+        onCellChange,
+        pendingChanges: [],
+      }));
+
+      const cells = container.querySelectorAll('.cursor-text');
+      expect(cells.length).toBeGreaterThan(0);
+
+      fireEvent.doubleClick(cells[0]);
+
+      expect(findEditInput(container)).not.toBeUndefined();
+    });
+
+    test('Enter key commits edit and calls onCellChange', () => {
+      const onCellChange = mock(() => {});
+      const { container } = render(React.createElement(ResultsGrid, {
+        result: mockResult,
+        editingEnabled: true,
+        onCellChange,
+        pendingChanges: [],
+      }));
+
+      const cells = container.querySelectorAll('.cursor-text');
+      const nameCell = Array.from(cells).find(c => c.textContent === 'Alice');
+      expect(nameCell).not.toBeUndefined();
+      fireEvent.doubleClick(nameCell!);
+
+      const editInput = findEditInput(container)!;
+      fireEvent.change(editInput, { target: { value: 'Alicia' } });
+
+      // Re-query after state change (columns memo recomputes on editValue change)
+      const updatedEditInput = findEditInput(container)!;
+      fireEvent.keyDown(updatedEditInput, { key: 'Enter' });
+
+      expect(onCellChange).toHaveBeenCalledTimes(1);
+      const callArg = (onCellChange.mock.calls as unknown[][])[0][0] as Record<string, unknown>;
+      expect(callArg.newValue).toBe('Alicia');
+      expect(callArg.originalValue).toBe('Alice');
+    });
+
+    test('Escape key cancels edit without calling onCellChange', () => {
+      const onCellChange = mock(() => {});
+      const { container } = render(React.createElement(ResultsGrid, {
+        result: mockResult,
+        editingEnabled: true,
+        onCellChange,
+        pendingChanges: [],
+      }));
+
+      const cells = container.querySelectorAll('.cursor-text');
+      fireEvent.doubleClick(cells[0]);
+
+      const editInput = findEditInput(container)!;
+      // Press Escape directly (no value change to avoid stale ref)
+      fireEvent.keyDown(editInput, { key: 'Escape' });
+
+      expect(onCellChange).not.toHaveBeenCalled();
+      expect(findEditInput(container)).toBeUndefined();
+    });
+
+    test('blur commits edit when value changed', () => {
+      const onCellChange = mock(() => {});
+      const { container } = render(React.createElement(ResultsGrid, {
+        result: mockResult,
+        editingEnabled: true,
+        onCellChange,
+        pendingChanges: [],
+      }));
+
+      const cells = container.querySelectorAll('.cursor-text');
+      const nameCell = Array.from(cells).find(c => c.textContent === 'Alice');
+      fireEvent.doubleClick(nameCell!);
+
+      const editInput = findEditInput(container)!;
+      fireEvent.change(editInput, { target: { value: 'Alicia' } });
+
+      // Re-query after state change
+      const updatedEditInput = findEditInput(container)!;
+      fireEvent.blur(updatedEditInput);
+
+      expect(onCellChange).toHaveBeenCalledTimes(1);
+      const callArg = (onCellChange.mock.calls as unknown[][])[0][0] as Record<string, unknown>;
+      expect(callArg.newValue).toBe('Alicia');
+    });
+
+    test('Enter with unchanged value does not call onCellChange', () => {
+      const onCellChange = mock(() => {});
+      const { container } = render(React.createElement(ResultsGrid, {
+        result: mockResult,
+        editingEnabled: true,
+        onCellChange,
+        pendingChanges: [],
+      }));
+
+      const cells = container.querySelectorAll('.cursor-text');
+      const nameCell = Array.from(cells).find(c => c.textContent === 'Alice');
+      fireEvent.doubleClick(nameCell!);
+
+      const editInput = findEditInput(container)!;
+      // Don't change the value, just press Enter
+      fireEvent.keyDown(editInput, { key: 'Enter' });
+
+      expect(onCellChange).not.toHaveBeenCalled();
+    });
+
+    test('blur with unchanged value does not call onCellChange', () => {
+      const onCellChange = mock(() => {});
+      const { container } = render(React.createElement(ResultsGrid, {
+        result: mockResult,
+        editingEnabled: true,
+        onCellChange,
+        pendingChanges: [],
+      }));
+
+      const cells = container.querySelectorAll('.cursor-text');
+      const nameCell = Array.from(cells).find(c => c.textContent === 'Alice');
+      fireEvent.doubleClick(nameCell!);
+
+      const editInput = findEditInput(container)!;
+      fireEvent.blur(editInput);
+
+      expect(onCellChange).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // Cell Reveal Tests
+  // ═══════════════════════════════════════════════════════════════════════
+
+  describe('Cell reveal', () => {
+    function setupMasking() {
+      mockShouldMask.mockReturnValue(true);
+      mockCanReveal.mockReturnValue(true);
+      mockDetectSensitiveColumnsFromConfig.mockReturnValue(new Map([
+        ['email', { name: 'email', maskType: 'email' as const, columnPatterns: ['email'], enabled: true, id: 'e1' }],
+      ]));
+    }
+
+    const maskingProps = {
+      result: mockResult,
+      maskingEnabled: true,
+      maskingConfig: { enabled: true, patterns: [], roleSettings: { admin: { canToggle: true, canReveal: true }, user: { canToggle: false, canReveal: false } } },
+    };
+
+    test('clicking reveal button shows actual value with lock icon', () => {
+      setupMasking();
+
+      const { container } = render(React.createElement(ResultsGrid, maskingProps));
+
+      // Initially masked with '***'
+      expect(container.textContent).toContain('***');
+
+      // Find reveal button
+      const revealButton = container.querySelector('button[title="Reveal value (10s)"]');
+      expect(revealButton).not.toBeNull();
+
+      // Click reveal
+      fireEvent.click(revealButton!);
+
+      // After reveal, the cell should show actual email value (not ***)
+      // This confirms the revealed cell branch (lines 328-333) is hit
+      expect(container.textContent).toContain('alice@example.com');
+    });
+
+    test('revealed cell auto-hides after timeout', () => {
+      setupMasking();
+
+      const { container } = render(React.createElement(ResultsGrid, maskingProps));
+
+      // Mock setTimeout AFTER React initialization to avoid breaking React internals
+      const origSetTimeout = globalThis.setTimeout;
+      let capturedCallback: (() => void) | null = null;
+      globalThis.setTimeout = ((fn: (...args: unknown[]) => void, ms?: number) => {
+        if (ms === 10000) {
+          capturedCallback = fn as () => void;
+          return 0 as unknown as ReturnType<typeof setTimeout>;
+        }
+        return origSetTimeout(fn, ms);
+      }) as typeof setTimeout;
+
+      const revealButton = container.querySelector('button[title="Reveal value (10s)"]')!;
+      fireEvent.click(revealButton);
+
+      // Callback should have been captured
+      expect(capturedCallback).not.toBeNull();
+
+      // Execute the timeout callback to cover auto-hide lines (139-143)
+      act(() => { capturedCallback!(); });
+
+      globalThis.setTimeout = origSetTimeout;
+    });
+
+    test('reveal button not shown when canReveal is false', () => {
+      mockShouldMask.mockReturnValue(true);
+      mockCanReveal.mockReturnValue(false);
+      mockDetectSensitiveColumnsFromConfig.mockReturnValue(new Map([
+        ['email', { name: 'email', maskType: 'email' as const, columnPatterns: ['email'], enabled: true, id: 'e1' }],
+      ]));
+
+      const { container } = render(React.createElement(ResultsGrid, maskingProps));
+
+      expect(container.textContent).toContain('***');
+
+      const revealButton = container.querySelector('button[title="Reveal value (10s)"]');
+      expect(revealButton).toBeNull();
+    });
+  });
+});