@libredb/studio 0.9.7

package/tests/components/results-grid/RowDetailSheet.test.tsx

@@ -0,0 +1,308 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { RowDetailSheet } from '@/components/results-grid/RowDetailSheet';
+
+mock.module('@/components/ui/sheet', () => ({
+  Sheet: ({ open, children }: { open: boolean; children: React.ReactNode }) =>
+    open ? React.createElement('div', { 'data-testid': 'sheet' }, children) : null,
+  SheetContent: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', { 'data-testid': 'sheet-content' }, children),
+  SheetHeader: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', {}, children),
+  SheetTitle: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('h2', {}, children),
+}));
+
+mock.module('@/components/ui/scroll-area', () => ({
+  ScrollArea: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+}));
+
+mock.module('@/lib/data-masking', () => ({
+  maskValueByPattern: (value: unknown) => {
+    void value;
+    return '***MASKED***';
+  },
+}));
+
+describe('results-grid/RowDetailSheet', () => {
+  const writeText = mock(async (text: string) => {
+    void text;
+  });
+
+  beforeEach(() => {
+    writeText.mockClear();
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('does not render when closed', () => {
+    const { queryByTestId } = render(
+      <RowDetailSheet
+        row={{ id: 1, email: 'a@b.com' }}
+        fields={['id', 'email']}
+        isOpen={false}
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+    expect(queryByTestId('sheet')).toBeNull();
+  });
+
+  test('copies raw json when masking is not active', () => {
+    const { queryByText } = render(
+      <RowDetailSheet
+        row={{ id: 1, email: 'alice@example.com' }}
+        fields={['id', 'email']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    fireEvent.click(queryByText('Copy JSON')!);
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(String(writeText.mock.calls[0]?.[0])).toContain('alice@example.com');
+  });
+
+  test('copies masked json when masking is active', () => {
+    const sensitiveColumns = new Map<string, unknown>([['email', { type: 'email' }]]);
+    const { queryByText } = render(
+      <RowDetailSheet
+        row={{ id: 1, email: 'alice@example.com' }}
+        fields={['id', 'email']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+        maskingActive
+        sensitiveColumns={sensitiveColumns as never}
+      />
+    );
+
+    fireEvent.click(queryByText('Copy JSON')!);
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(String(writeText.mock.calls[0]?.[0])).toContain('***MASKED***');
+  });
+
+  test('shows masked value and reveals when reveal button is clicked', () => {
+    const sensitiveColumns = new Map<string, unknown>([['email', { type: 'email' }]]);
+    const { queryByText, queryByTitle } = render(
+      <RowDetailSheet
+        row={{ id: 1, email: 'alice@example.com' }}
+        fields={['id', 'email']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+        maskingActive
+        sensitiveColumns={sensitiveColumns as never}
+        allowReveal
+      />
+    );
+
+    expect(queryByText('***MASKED***')).not.toBeNull();
+
+    fireEvent.click(queryByTitle('Reveal value (10s)')!);
+    expect(queryByText('alice@example.com')).not.toBeNull();
+  });
+
+  test('displays Row #N header with correct 1-based index', () => {
+    const { queryByText } = render(
+      <RowDetailSheet
+        row={{ id: 1 }}
+        fields={['id']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={4}
+      />
+    );
+    expect(queryByText('Row #5')).not.toBeNull();
+  });
+
+  test('copies individual field value to clipboard', () => {
+    const { container } = render(
+      <RowDetailSheet
+        row={{ id: 1, name: 'Alice' }}
+        fields={['id', 'name']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    // Each field row has a copy button; get all ghost buttons (copy buttons)
+    const buttons = Array.from(container.querySelectorAll('button'));
+    // The last button per field row is the copy button; skip the "Copy JSON" button (first button)
+    const copyButtons = buttons.filter(b => !b.textContent?.includes('Copy JSON') && !b.textContent?.includes('Copied'));
+    // Click the second copy button (for "name" field)
+    fireEvent.click(copyButtons[1]!);
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(String(writeText.mock.calls[0]?.[0])).toBe('Alice');
+  });
+
+  test('shows check icon after copying a field value', () => {
+    const { container } = render(
+      <RowDetailSheet
+        row={{ id: 1, name: 'Bob' }}
+        fields={['id', 'name']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const copyButtons = buttons.filter(b => !b.textContent?.includes('Copy JSON') && !b.textContent?.includes('Copied'));
+    // Click the first copy button (for "id" field)
+    fireEvent.click(copyButtons[0]!);
+
+    // After copy, the Check icon (emerald-400 colored) should replace the Copy icon
+    const checkIcon = container.querySelector('.text-emerald-400');
+    expect(checkIcon).not.toBeNull();
+  });
+
+  test('displays NULL for null and undefined values', () => {
+    const { container } = render(
+      <RowDetailSheet
+        row={{ a: null, b: undefined }}
+        fields={['a', 'b']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    // null: typeof null === 'object' so JSON.stringify(null) => "null"
+    // undefined: String(undefined ?? 'NULL') => "NULL"
+    const valueElements = Array.from(container.querySelectorAll('.font-mono.break-all'));
+    expect(valueElements.length).toBe(2);
+    expect(valueElements[0]!.textContent).toBe('null');
+    expect(valueElements[1]!.textContent).toBe('NULL');
+  });
+
+  test('displays JSON.stringify for object values', () => {
+    const obj = { foo: 'bar', num: 42 };
+    const { queryByText } = render(
+      <RowDetailSheet
+        row={{ data: obj }}
+        fields={['data']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    expect(queryByText(JSON.stringify(obj))).not.toBeNull();
+  });
+
+  test('renders long values (>50 chars) with smaller text class', () => {
+    const longValue = 'A'.repeat(60);
+    const { container } = render(
+      <RowDetailSheet
+        row={{ description: longValue }}
+        fields={['description']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    // The value element should have both font-mono break-all (base) and text-xs (long value)
+    const valueElement = container.querySelector('.font-mono.break-all.text-xs');
+    expect(valueElement).not.toBeNull();
+    expect(valueElement!.textContent).toBe(longValue);
+  });
+
+  test('reveal button auto-hides field after timeout', () => {
+    const sensitiveColumns = new Map<string, unknown>([['email', { type: 'email' }]]);
+    const { queryByText, queryByTitle } = render(
+      <RowDetailSheet
+        row={{ email: 'secret@example.com' }}
+        fields={['email']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+        maskingActive
+        sensitiveColumns={sensitiveColumns as never}
+        allowReveal
+      />
+    );
+
+    // Initially masked
+    expect(queryByText('***MASKED***')).not.toBeNull();
+
+    // Mock setTimeout AFTER render 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;
+
+    // Reveal the field
+    fireEvent.click(queryByTitle('Reveal value (10s)')!);
+    expect(queryByText('secret@example.com')).not.toBeNull();
+
+    // The timeout callback should have been captured
+    expect(capturedCallback).not.toBeNull();
+
+    // Execute the timeout callback to auto-hide
+    act(() => { capturedCallback!(); });
+
+    // Field should be masked again
+    expect(queryByText('***MASKED***')).not.toBeNull();
+
+    globalThis.setTimeout = origSetTimeout;
+  });
+
+  test('renders all field name labels', () => {
+    const fields = ['id', 'username', 'email', 'created_at', 'status'];
+    const row: Record<string, unknown> = {};
+    fields.forEach(f => { row[f] = `val_${f}`; });
+
+    const { queryByText } = render(
+      <RowDetailSheet
+        row={row}
+        fields={fields}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    for (const field of fields) {
+      expect(queryByText(field)).not.toBeNull();
+    }
+  });
+
+  test('raw JSON copy contains exact row data when no masking active', () => {
+    const row = { id: 42, name: 'Charlie', active: true, score: 99.5 };
+    const { queryByText } = render(
+      <RowDetailSheet
+        row={row}
+        fields={['id', 'name', 'active', 'score']}
+        isOpen
+        onClose={mock(() => {})}
+        rowIndex={0}
+      />
+    );
+
+    fireEvent.click(queryByText('Copy JSON')!);
+    expect(writeText).toHaveBeenCalledTimes(1);
+    const copiedJson = String(writeText.mock.calls[0]?.[0]);
+    const parsed = JSON.parse(copiedJson);
+    expect(parsed).toEqual(row);
+  });
+});

package/tests/components/results-grid/StatsBar.test.tsx

@@ -0,0 +1,162 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import React from 'react';
+import { afterEach, describe, expect, mock, test } from 'bun:test';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { LoadMoreFooter, StatsBar } from '@/components/results-grid/StatsBar';
+import type { QueryResult } from '@/lib/types';
+import type { CellChange } from '@/components/ResultsGrid';
+
+function makeResult(): QueryResult {
+  return {
+    rows: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
+    fields: ['id', 'name'],
+    rowCount: 2,
+    executionTime: 14,
+    pagination: {
+      limit: 2,
+      offset: 0,
+      hasMore: true,
+      totalReturned: 2,
+      wasLimited: true,
+    },
+  };
+}
+
+describe('results-grid/StatsBar', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders stats and filter summary, clears filters', () => {
+    const onClearFilters = mock(() => {});
+    const { queryByText } = render(
+      <StatsBar
+        result={makeResult()}
+        filteredRowCount={1}
+        activeFilterCount={2}
+        onClearFilters={onClearFilters}
+        viewMode="card"
+        onSetViewMode={mock(() => {})}
+        hasSensitive={false}
+        effectiveMaskingEnabled={false}
+        userCanToggle={false}
+      />
+    );
+
+    expect(queryByText('2 rows')).not.toBeNull();
+    expect(queryByText('2 columns')).not.toBeNull();
+    expect(queryByText('AUTO-LIMITED')).not.toBeNull();
+    expect(queryByText('2 filters • 1 shown')).not.toBeNull();
+
+    fireEvent.click(queryByText('2 filters • 1 shown')!);
+    expect(onClearFilters).toHaveBeenCalledTimes(1);
+  });
+
+  test('supports masking toggle and view switch', () => {
+    const onToggleMasking = mock(() => {});
+    const onSetViewMode = mock((mode: 'card' | 'table') => {
+      void mode;
+    });
+    const { container, queryByText } = render(
+      <StatsBar
+        result={makeResult()}
+        filteredRowCount={2}
+        activeFilterCount={0}
+        onClearFilters={mock(() => {})}
+        viewMode="table"
+        onSetViewMode={onSetViewMode}
+        hasSensitive
+        effectiveMaskingEnabled={false}
+        userCanToggle
+        onToggleMasking={onToggleMasking}
+      />
+    );
+
+    expect(queryByText('MASK')).not.toBeNull();
+    fireEvent.click(queryByText('MASK')!);
+    expect(onToggleMasking).toHaveBeenCalledTimes(1);
+
+    const buttons = container.querySelectorAll('button');
+    fireEvent.click(buttons[buttons.length - 2]!);
+    fireEvent.click(buttons[buttons.length - 1]!);
+    expect(onSetViewMode).toHaveBeenCalledTimes(2);
+  });
+
+  test('shows locked masked label when user cannot toggle', () => {
+    const { queryByText } = render(
+      <StatsBar
+        result={makeResult()}
+        filteredRowCount={2}
+        activeFilterCount={0}
+        onClearFilters={mock(() => {})}
+        viewMode="card"
+        onSetViewMode={mock(() => {})}
+        hasSensitive
+        effectiveMaskingEnabled
+        userCanToggle={false}
+      />
+    );
+    expect(queryByText('MASKED')).not.toBeNull();
+  });
+
+  test('shows pending changes actions and executes callbacks', () => {
+    const onApplyChanges = mock(() => {});
+    const onDiscardChanges = mock(() => {});
+    const pendingChanges: CellChange[] = [
+      { rowIndex: 0, columnId: 'name', originalValue: 'Alice', newValue: 'Alicia' },
+    ];
+    const { container, queryByText } = render(
+      <StatsBar
+        result={makeResult()}
+        filteredRowCount={2}
+        activeFilterCount={0}
+        onClearFilters={mock(() => {})}
+        viewMode="card"
+        onSetViewMode={mock(() => {})}
+        hasSensitive={false}
+        effectiveMaskingEnabled={false}
+        userCanToggle={false}
+        editingEnabled
+        pendingChanges={pendingChanges}
+        onApplyChanges={onApplyChanges}
+        onDiscardChanges={onDiscardChanges}
+      />
+    );
+
+    expect(queryByText('1 change')).not.toBeNull();
+    const buttons = container.querySelectorAll('button');
+    fireEvent.click(buttons[0]!);
+    fireEvent.click(buttons[1]!);
+    expect(onApplyChanges).toHaveBeenCalledTimes(1);
+    expect(onDiscardChanges).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('results-grid/LoadMoreFooter', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders nothing when hasMore is false', () => {
+    const { container } = render(
+      <LoadMoreFooter hasMore={false} onLoadMore={mock(() => {})} />
+    );
+    expect(container.textContent).toBe('');
+  });
+
+  test('calls onLoadMore and shows loading state', () => {
+    const onLoadMore = mock(() => {});
+    const { queryByText, rerender } = render(
+      <LoadMoreFooter hasMore onLoadMore={onLoadMore} isLoadingMore={false} />
+    );
+    expect(queryByText('Load More (500 rows)')).not.toBeNull();
+    fireEvent.click(queryByText('Load More (500 rows)')!);
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+
+    rerender(<LoadMoreFooter hasMore onLoadMore={onLoadMore} isLoadingMore />);
+    expect(queryByText('Loading...')).not.toBeNull();
+  });
+});

package/tests/components/schema-explorer/ColumnList.test.tsx

@@ -0,0 +1,151 @@
+import '../../setup-dom';
+
+import React from 'react';
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { mock } from 'bun:test';
+
+// ── Mocks ───────────────────────────────────────────────────────────────────
+
+mock.module('framer-motion', () => ({
+  motion: new Proxy({}, {
+    get: () => (props: Record<string, unknown>) =>
+      React.createElement('div', {}, props.children as React.ReactNode),
+  }),
+  AnimatePresence: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', {}, children),
+}));
+
+// ── Imports after mocks ─────────────────────────────────────────────────────
+
+import { ColumnList } from '@/components/schema-explorer/ColumnList';
+import type { TableSchema } from '@/lib/types';
+
+// ── Test data ───────────────────────────────────────────────────────────────
+
+const columnsWithPrimary: TableSchema['columns'] = [
+  { name: 'id', type: 'SERIAL', nullable: false, isPrimary: true },
+  { name: 'email', type: 'VARCHAR(255)', nullable: true, isPrimary: false },
+  { name: 'created_at', type: 'timestamp', nullable: false, isPrimary: false },
+];
+
+const columnsNoPrimary: TableSchema['columns'] = [
+  { name: 'key', type: 'TEXT', nullable: false, isPrimary: false },
+  { name: 'value', type: 'JSONB', nullable: true, isPrimary: false },
+];
+
+const indexesSample: TableSchema['indexes'] = [
+  { name: 'idx_email', columns: ['email'], unique: true },
+  { name: 'idx_created', columns: ['created_at'], unique: false },
+];
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+
+describe('ColumnList', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  // ── Column rendering ────────────────────────────────────────────────────
+
+  test('renders all column names', () => {
+    const { queryByText } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={[]} />
+    );
+    expect(queryByText('id')).not.toBeNull();
+    expect(queryByText('email')).not.toBeNull();
+    expect(queryByText('created_at')).not.toBeNull();
+  });
+
+  test('renders column types stripped of parenthesized params', () => {
+    const { queryByText } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={[]} />
+    );
+    // VARCHAR(255) → should display "VARCHAR" only (type.split('(')[0])
+    expect(queryByText('VARCHAR')).not.toBeNull();
+    expect(queryByText('SERIAL')).not.toBeNull();
+    expect(queryByText('timestamp')).not.toBeNull();
+  });
+
+  test('does not render full type with params', () => {
+    const { queryByText } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={[]} />
+    );
+    expect(queryByText('VARCHAR(255)')).toBeNull();
+  });
+
+  // ── Primary key indicator ───────────────────────────────────────────────
+
+  test('renders Key icon for primary key columns', () => {
+    const { container } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={[]} />
+    );
+    // Key icon has text-yellow-500/70 class
+    const keyIcons = container.querySelectorAll('.text-yellow-500\\/70');
+    expect(keyIcons.length).toBe(1); // only 'id' is primary
+  });
+
+  test('renders dot indicator for non-primary columns', () => {
+    const { container } = render(
+      <ColumnList columns={columnsNoPrimary} indexes={[]} />
+    );
+    // Non-primary columns get a small dot (bg-muted-foreground/50)
+    const dots = container.querySelectorAll('.bg-muted-foreground\\/50');
+    expect(dots.length).toBe(2); // both columns are non-primary
+    // No key icons
+    const keyIcons = container.querySelectorAll('.text-yellow-500\\/70');
+    expect(keyIcons.length).toBe(0);
+  });
+
+  // ── Indexes section ─────────────────────────────────────────────────────
+
+  test('shows Indexes section when indexes are present', () => {
+    const { queryByText } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={indexesSample} />
+    );
+    expect(queryByText('Indexes')).not.toBeNull();
+  });
+
+  test('renders all index names', () => {
+    const { queryByText } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={indexesSample} />
+    );
+    expect(queryByText('idx_email')).not.toBeNull();
+    expect(queryByText('idx_created')).not.toBeNull();
+  });
+
+  test('hides Indexes section when no indexes', () => {
+    const { queryByText } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={[]} />
+    );
+    expect(queryByText('Indexes')).toBeNull();
+  });
+
+  test('index element has title attribute with column names', () => {
+    const { queryByText } = render(
+      <ColumnList columns={columnsWithPrimary} indexes={indexesSample} />
+    );
+    const indexEl = queryByText('idx_email');
+    expect(indexEl).not.toBeNull();
+    expect(indexEl!.getAttribute('title')).toBe('email');
+  });
+
+  // ── Edge cases ──────────────────────────────────────────────────────────
+
+  test('renders empty column list without crashing', () => {
+    const { container } = render(
+      <ColumnList columns={[]} indexes={[]} />
+    );
+    expect(container).not.toBeNull();
+  });
+
+  test('handles columns with simple types (no parens)', () => {
+    const columns: TableSchema['columns'] = [
+      { name: 'active', type: 'boolean', nullable: false, isPrimary: false },
+    ];
+    const { queryByText } = render(
+      <ColumnList columns={columns} indexes={[]} />
+    );
+    expect(queryByText('boolean')).not.toBeNull();
+  });
+});