@libredb/studio 0.9.7

package/tests/components/monitoring/SessionsTab.test.tsx

@@ -0,0 +1,154 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import { mock, describe, test, expect, afterEach } from 'bun:test';
+import React from 'react';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { SessionsTab } from '@/components/monitoring/tabs/SessionsTab';
+import type { MonitoringData } from '@/lib/db/types';
+
+mock.module('@/components/ui/tooltip', () => ({
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+  Tooltip: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+  TooltipContent: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+}));
+
+mock.module('@/components/ui/alert-dialog', () => ({
+  AlertDialog: ({ children, open }: { children: React.ReactNode; open?: boolean }) =>
+    (open ? React.createElement('div', { 'data-testid': 'alert-dialog' }, children) : null),
+  AlertDialogContent: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+  AlertDialogHeader: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+  AlertDialogTitle: ({ children }: { children: React.ReactNode }) => React.createElement('h2', {}, children),
+  AlertDialogDescription: ({ children }: { children: React.ReactNode }) => React.createElement('p', {}, children),
+  AlertDialogFooter: ({ children }: { children: React.ReactNode }) => React.createElement('div', {}, children),
+  AlertDialogCancel: ({ children }: { children: React.ReactNode }) => React.createElement('button', { type: 'button' }, children),
+  AlertDialogAction: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) =>
+    React.createElement('button', { type: 'button', onClick }, children),
+}));
+
+function makeData(): MonitoringData {
+  return {
+    timestamp: new Date('2026-02-15T12:00:00Z'),
+    overview: {
+      version: '16.3',
+      uptime: '1s',
+      activeConnections: 3,
+      maxConnections: 100,
+      databaseSize: '1 GB',
+      databaseSizeBytes: 1024 * 1024 * 1024,
+      tableCount: 0,
+      indexCount: 0,
+    },
+    performance: {
+      queriesPerSecond: 12,
+      avgQueryTime: 7,
+      cacheHitRatio: 98,
+      cpuUsage: 15,
+      memoryUsage: 40,
+      memoryTotal: 100,
+      memoryUsed: 40,
+      diskUsage: 33,
+      diskTotal: 100,
+      diskUsed: 33,
+      swapUsage: 0,
+      loadAverage: [0.2, 0.3, 0.4],
+      networkRx: 1,
+      networkTx: 2,
+      transactionsPerSecond: 8,
+      commitsPerSecond: 7,
+      rollbacksPerSecond: 1,
+      tempFilesPerSecond: 0,
+      deadlocksPerSecond: 0,
+      replicationLag: 0,
+      checkpointWriteTime: 0,
+    },
+    slowQueries: [],
+    activeSessions: [
+      {
+        pid: 101,
+        user: 'admin',
+        database: 'db',
+        state: 'active',
+        query: 'SELECT * FROM users',
+        duration: '1.2s',
+        durationMs: 1200,
+      },
+      {
+        pid: 202,
+        user: 'app',
+        database: 'db',
+        state: 'idle in transaction',
+        query: 'UPDATE users SET active = true',
+        duration: '65s',
+        durationMs: 65000,
+        waitEventType: 'Lock',
+      },
+    ],
+  } as unknown as MonitoringData;
+}
+
+describe('SessionsTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders skeleton when loading and data is null', () => {
+    const { queryByText } = render(
+      <SessionsTab data={null} loading onKillSession={mock(async () => true)} />
+    );
+    expect(queryByText('Sessions (')).toBeNull();
+  });
+
+  test('shows empty state when there are no active sessions', () => {
+    const { queryByText } = render(
+      <SessionsTab
+        data={{ ...makeData(), activeSessions: [] } as MonitoringData}
+        loading={false}
+        onKillSession={mock(async () => true)}
+      />
+    );
+    expect(queryByText('No active sessions found.')).not.toBeNull();
+  });
+
+  test('renders stats and session state badges', () => {
+    const { queryByText, queryAllByText } = render(
+      <SessionsTab data={makeData()} loading={false} onKillSession={mock(async () => true)} />
+    );
+
+    expect(queryByText('Sessions (2)')).not.toBeNull();
+    expect(queryAllByText('Active').length).toBeGreaterThan(0);
+    expect(queryByText('Idle in TX')).not.toBeNull();
+    expect(queryByText('65s')).not.toBeNull();
+  });
+
+  test('calls onKillSession after confirming terminate action', async () => {
+    const onKillSession = mock(async () => true);
+    const { container, queryByText } = render(
+      <SessionsTab data={makeData()} loading={false} onKillSession={onKillSession} isAdmin />
+    );
+
+    const killButtons = Array.from(container.querySelectorAll('button')).filter((btn) =>
+      btn.className.includes('text-destructive')
+    );
+    expect(killButtons.length).toBeGreaterThan(0);
+    fireEvent.click(killButtons[0]!);
+
+    expect(queryByText('Terminate Session?')).not.toBeNull();
+    const terminateButton = queryByText('Terminate');
+    expect(terminateButton).not.toBeNull();
+    fireEvent.click(terminateButton!);
+
+    await waitFor(() => {
+      expect(onKillSession).toHaveBeenCalledWith(101);
+    });
+  });
+
+  test('hides admin actions when isAdmin is false', () => {
+    const { queryAllByText } = render(
+      <SessionsTab data={makeData()} loading={false} onKillSession={mock(async () => true)} isAdmin={false} />
+    );
+    expect(queryAllByText('-').length).toBeGreaterThan(0);
+  });
+});

package/tests/components/monitoring/StorageTab.test.tsx

@@ -0,0 +1,127 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import React from 'react';
+import { describe, test, expect, afterEach } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { StorageTab } from '@/components/monitoring/tabs/StorageTab';
+import type { MonitoringData } from '@/lib/db/types';
+
+function makeMonitoringData(): MonitoringData {
+  return {
+    timestamp: new Date('2026-02-15T12:00:00Z'),
+    overview: {
+      version: '16.3',
+      uptime: '1000s',
+      activeConnections: 4,
+      maxConnections: 100,
+      databaseSize: '2.00 GB',
+      databaseSizeBytes: 2 * 1024 * 1024 * 1024,
+      tableCount: 2,
+      indexCount: 1,
+    },
+    performance: {
+      queriesPerSecond: 12,
+      avgQueryTime: 7,
+      cacheHitRatio: 98,
+      cpuUsage: 15,
+      memoryUsage: 40,
+      memoryTotal: 100,
+      memoryUsed: 40,
+      diskUsage: 33,
+      diskTotal: 100,
+      diskUsed: 33,
+      swapUsage: 0,
+      loadAverage: [0.2, 0.3, 0.4],
+      networkRx: 1,
+      networkTx: 2,
+      transactionsPerSecond: 8,
+      commitsPerSecond: 7,
+      rollbacksPerSecond: 1,
+      tempFilesPerSecond: 0,
+      deadlocksPerSecond: 0,
+      replicationLag: 0,
+      checkpointWriteTime: 0,
+    },
+    slowQueries: [],
+    activeSessions: [],
+    storage: [
+      { name: 'pg_default', location: '/var/lib/postgres', size: '1.20 GB', sizeBytes: 1288490188, usagePercent: 60 },
+      { name: 'WAL', location: '/var/lib/postgres/pg_wal', size: '300 MB', sizeBytes: 314572800, usagePercent: 15, walSize: '300 MB', walSizeBytes: 314572800 },
+    ],
+    tables: [
+      {
+        schemaName: 'public',
+        tableName: 'orders',
+        rowCount: 10000,
+        tableSize: '500 MB',
+        tableSizeBytes: 524288000,
+        totalSize: '700 MB',
+        totalSizeBytes: 734003200,
+      },
+      {
+        schemaName: 'public',
+        tableName: 'users',
+        rowCount: 2500,
+        tableSize: '200 MB',
+        tableSizeBytes: 209715200,
+        totalSize: '300 MB',
+        totalSizeBytes: 314572800,
+      },
+    ],
+    indexes: [
+      {
+        schemaName: 'public',
+        tableName: 'orders',
+        indexName: 'idx_orders_created_at',
+        columns: ['created_at'],
+        isUnique: false,
+        isPrimary: false,
+        indexSize: '120 MB',
+        indexSizeBytes: 125829120,
+        scans: 100,
+      },
+    ],
+  } as unknown as MonitoringData;
+}
+
+describe('StorageTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders skeleton when loading without data', () => {
+    const { queryByText } = render(<StorageTab data={null} loading />);
+    expect(queryByText('Storage Breakdown')).toBeNull();
+  });
+
+  test('shows empty states when storage and table lists are missing', () => {
+    const emptyData = {
+      ...makeMonitoringData(),
+      storage: [],
+      tables: [],
+      indexes: [],
+    } as MonitoringData;
+    const { queryByText } = render(<StorageTab data={emptyData} loading={false} />);
+
+    expect(queryByText('No tablespace information available.')).not.toBeNull();
+    expect(queryByText('No table information available.')).not.toBeNull();
+  });
+
+  test('renders storage cards, breakdown, badges and largest tables', () => {
+    const { queryByText, queryAllByText } = render(<StorageTab data={makeMonitoringData()} loading={false} />);
+
+    expect(queryByText('Storage Breakdown')).not.toBeNull();
+    expect(queryByText('Tablespaces')).not.toBeNull();
+    expect(queryByText('Largest Tables')).not.toBeNull();
+    expect(queryByText('2.00 GB')).not.toBeNull();
+    expect(queryAllByText('300 MB').length).toBeGreaterThan(0); // WAL card
+    expect(queryByText('Default')).not.toBeNull();
+    expect(queryAllByText('WAL').length).toBeGreaterThan(0);
+
+    // largest tables are sorted by total size descending
+    expect(queryByText('orders')).not.toBeNull();
+    expect(queryByText('users')).not.toBeNull();
+  });
+});

package/tests/components/monitoring/TablesTab.test.tsx

@@ -0,0 +1,153 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import React from 'react';
+import { describe, test, expect, mock, afterEach } from 'bun:test';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { TablesTab } from '@/components/monitoring/tabs/TablesTab';
+import type { MonitoringData } from '@/lib/db/types';
+
+function makeData(): MonitoringData {
+  return {
+    timestamp: new Date('2026-02-15T12:00:00Z'),
+    overview: {
+      version: '16.3',
+      uptime: '1s',
+      activeConnections: 3,
+      maxConnections: 100,
+      databaseSize: '1 GB',
+      databaseSizeBytes: 1024 * 1024 * 1024,
+      tableCount: 2,
+      indexCount: 2,
+    },
+    performance: {
+      queriesPerSecond: 12,
+      avgQueryTime: 7,
+      cacheHitRatio: 98,
+      cpuUsage: 15,
+      memoryUsage: 40,
+      memoryTotal: 100,
+      memoryUsed: 40,
+      diskUsage: 33,
+      diskTotal: 100,
+      diskUsed: 33,
+      swapUsage: 0,
+      loadAverage: [0.2, 0.3, 0.4],
+      networkRx: 1,
+      networkTx: 2,
+      transactionsPerSecond: 8,
+      commitsPerSecond: 7,
+      rollbacksPerSecond: 1,
+      tempFilesPerSecond: 0,
+      deadlocksPerSecond: 0,
+      replicationLag: 0,
+      checkpointWriteTime: 0,
+    },
+    slowQueries: [],
+    activeSessions: [],
+    tables: [
+      {
+        schemaName: 'public',
+        tableName: 'users',
+        rowCount: 1200,
+        deadRowCount: 10,
+        tableSize: '100 MB',
+        tableSizeBytes: 104857600,
+        indexSize: '20 MB',
+        indexSizeBytes: 20971520,
+        totalSize: '120 MB',
+        totalSizeBytes: 125829120,
+        bloatRatio: 5,
+        lastVacuum: new Date('2026-02-01T00:00:00Z'),
+      },
+      {
+        schemaName: 'public',
+        tableName: 'events',
+        rowCount: 500000,
+        deadRowCount: 30000,
+        tableSize: '600 MB',
+        tableSizeBytes: 629145600,
+        indexSize: '100 MB',
+        indexSizeBytes: 104857600,
+        totalSize: '700 MB',
+        totalSizeBytes: 734003200,
+        bloatRatio: 25,
+      },
+    ],
+  } as unknown as MonitoringData;
+}
+
+describe('TablesTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders skeleton when loading and data is null', () => {
+    const { queryByText } = render(
+      <TablesTab data={null} loading onRunMaintenance={mock(async () => true)} />
+    );
+    expect(queryByText('Table Statistics')).toBeNull();
+  });
+
+  test('shows empty state when no tables match', () => {
+    const { queryByText } = render(
+      <TablesTab
+        data={{ ...makeData(), tables: [] } as MonitoringData}
+        loading={false}
+        onRunMaintenance={mock(async () => true)}
+      />
+    );
+    expect(queryByText('No tables found.')).not.toBeNull();
+  });
+
+  test('updates search query input value', () => {
+    const { queryByText, getByPlaceholderText } = render(
+      <TablesTab data={makeData()} loading={false} onRunMaintenance={mock(async () => true)} />
+    );
+
+    expect(queryByText('users')).not.toBeNull();
+    expect(queryByText('events')).not.toBeNull();
+
+    const input = getByPlaceholderText('Search...');
+    fireEvent.change(input, { target: { value: 'event' } });
+    expect((input as HTMLInputElement).value).toBe('event');
+  });
+
+  test('runs maintenance actions when admin clicks action buttons', async () => {
+    const onRunMaintenance = mock(async () => true);
+    const { container } = render(
+      <TablesTab data={makeData()} loading={false} onRunMaintenance={onRunMaintenance} isAdmin />
+    );
+
+    const analyzeButton = container.querySelector('button[title="Analyze"]');
+    const vacuumButton = container.querySelector('button[title="Vacuum"]');
+    const reindexButton = container.querySelector('button[title="Reindex"]');
+
+    expect(analyzeButton).not.toBeNull();
+    expect(vacuumButton).not.toBeNull();
+    expect(reindexButton).not.toBeNull();
+
+    fireEvent.click(analyzeButton!);
+    await waitFor(() => {
+      expect(onRunMaintenance).toHaveBeenCalledWith('analyze', 'users');
+    });
+
+    fireEvent.click(vacuumButton!);
+    await waitFor(() => {
+      expect(onRunMaintenance).toHaveBeenCalledWith('vacuum', 'users');
+    });
+
+    fireEvent.click(reindexButton!);
+    await waitFor(() => {
+      expect(onRunMaintenance).toHaveBeenCalledWith('reindex', 'users');
+    });
+  });
+
+  test('shows non-admin placeholder for actions', () => {
+    const { queryAllByText } = render(
+      <TablesTab data={makeData()} loading={false} onRunMaintenance={mock(async () => true)} isAdmin={false} />
+    );
+    expect(queryAllByText('-').length).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,105 @@
+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 { ResultCard } from '@/components/results-grid/ResultCard';
+
+mock.module('@/lib/data-masking', () => ({
+  maskValueByPattern: (value: unknown) => {
+    void value;
+    return '***MASKED***';
+  },
+}));
+
+describe('results-grid/ResultCard', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders primary, id and preview fields', () => {
+    const onSelect = mock(() => {});
+    const row = {
+      id: 42,
+      name: 'Alice',
+      email: 'alice@example.com',
+      status: 'active',
+      role: 'admin',
+      city: 'Istanbul',
+      country: 'TR',
+      phone: '+900000',
+    };
+    const fields = ['id', 'name', 'email', 'status', 'role', 'city', 'country', 'phone'];
+    const { queryByText } = render(
+      <ResultCard
+        row={row}
+        fields={fields}
+        primaryColumn="name"
+        idColumn="id"
+        index={0}
+        onSelect={onSelect}
+      />
+    );
+
+    expect(queryByText('Alice')).not.toBeNull();
+    expect(queryByText('#42')).not.toBeNull();
+    expect(queryByText('email')).not.toBeNull();
+    expect(queryByText('status')).not.toBeNull();
+    expect(queryByText('role')).not.toBeNull();
+    expect(queryByText('city')).not.toBeNull();
+    expect(queryByText('+2 more fields')).not.toBeNull();
+  });
+
+  test('calls onSelect when card is clicked', () => {
+    const onSelect = mock(() => {});
+    const { container } = render(
+      <ResultCard
+        row={{ id: 1, name: 'Bob' }}
+        fields={['id', 'name']}
+        primaryColumn="name"
+        idColumn="id"
+        index={0}
+        onSelect={onSelect}
+      />
+    );
+    fireEvent.click(container.firstElementChild as Element);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test('masks primary and preview sensitive values', () => {
+    const sensitiveColumns = new Map<string, unknown>([
+      ['name', { type: 'email' }],
+      ['email', { type: 'email' }],
+    ]);
+    const { queryAllByText } = render(
+      <ResultCard
+        row={{ id: 7, name: 'carol', email: 'carol@example.com', status: 'active' }}
+        fields={['id', 'name', 'email', 'status']}
+        primaryColumn="name"
+        idColumn="id"
+        index={0}
+        onSelect={mock(() => {})}
+        maskingActive
+        sensitiveColumns={sensitiveColumns as never}
+      />
+    );
+
+    expect(queryAllByText('***MASKED***').length).toBeGreaterThan(1);
+  });
+
+  test('falls back to row label when primary value is null', () => {
+    const { queryByText } = render(
+      <ResultCard
+        row={{ id: 9, name: null }}
+        fields={['id', 'name']}
+        primaryColumn="name"
+        idColumn="id"
+        index={3}
+        onSelect={mock(() => {})}
+      />
+    );
+    expect(queryByText('Row 4')).not.toBeNull();
+  });
+});