@libredb/studio 0.9.7

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

@@ -0,0 +1,259 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import { mock } from 'bun:test';
+import { setupRechartssMock, setupFramerMotionMock } from '../../helpers/mock-monaco';
+
+setupRechartssMock();
+setupFramerMotionMock();
+
+const mockSetAutoRefresh = mock(() => {});
+const mockSetRefreshInterval = mock(() => {});
+const mockRefresh = mock(() => {});
+const mockKillSession = mock(async () => true);
+const mockRunMaintenance = mock(async () => true);
+
+mock.module('@/hooks/use-monitoring-data', () => ({
+  useMonitoringData: mock(() => ({
+    data: {
+      overview: {
+        version: '15.4',
+        uptime: 86400,
+        connections: { active: 5, total: 15, max: 100 },
+        databaseSize: '256 MB',
+      },
+      performance: {
+        queriesPerSecond: 150,
+        avgQueryTime: 2.5,
+        cacheHitRatio: 99.1,
+      },
+      slowQueries: [],
+      activeSessions: [],
+    },
+    loading: false,
+    error: null,
+    lastUpdated: new Date(),
+    autoRefresh: true,
+    refreshInterval: 10000,
+    history: [],
+    setAutoRefresh: mockSetAutoRefresh,
+    setRefreshInterval: mockSetRefreshInterval,
+    refresh: mockRefresh,
+    killSession: mockKillSession,
+    runMaintenance: mockRunMaintenance,
+  })),
+}));
+
+mock.module('@/lib/storage', () => ({
+  storage: {
+    getConnections: mock(() => [
+      {
+        id: 'c1',
+        name: 'PG Dev',
+        type: 'postgres',
+        host: 'localhost',
+        port: 5432,
+        database: 'dev',
+        createdAt: new Date(),
+      },
+    ]),
+    getActiveConnectionId: mock(() => 'c1'),
+  },
+}));
+
+// Mock all 7 monitoring tab sub-components
+mock.module('@/components/monitoring/tabs/OverviewTab', () => ({
+  OverviewTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-overviewtab' }, 'OverviewTab');
+  },
+}));
+
+mock.module('@/components/monitoring/tabs/PerformanceTab', () => ({
+  PerformanceTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-performancetab' }, 'PerformanceTab');
+  },
+}));
+
+mock.module('@/components/monitoring/tabs/QueriesTab', () => ({
+  QueriesTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-queriestab' }, 'QueriesTab');
+  },
+}));
+
+mock.module('@/components/monitoring/tabs/SessionsTab', () => ({
+  SessionsTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-sessionstab' }, 'SessionsTab');
+  },
+}));
+
+mock.module('@/components/monitoring/tabs/TablesTab', () => ({
+  TablesTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-tablestab' }, 'TablesTab');
+  },
+}));
+
+mock.module('@/components/monitoring/tabs/StorageTab', () => ({
+  StorageTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-storagetab' }, 'StorageTab');
+  },
+}));
+
+mock.module('@/components/monitoring/tabs/PoolTab', () => ({
+  PoolTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-pooltab' }, 'PoolTab');
+  },
+}));
+
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, act, cleanup, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { mockRouterPush } from '../../helpers/mock-navigation';
+
+import { MonitoringDashboard } from '@/components/monitoring/MonitoringDashboard';
+
+// =============================================================================
+// MonitoringDashboard Tests
+// =============================================================================
+
+describe('MonitoringDashboard', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    mockRouterPush.mockClear();
+    mockRefresh.mockClear();
+    mockSetAutoRefresh.mockClear();
+    mockSetRefreshInterval.mockClear();
+  });
+
+  test('renders monitoring title', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('Monitoring')).not.toBeNull();
+  });
+
+  test('shows connection selector', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard />);
+    });
+    const { queryByText } = renderResult!;
+
+    // The connection selector shows the selected connection name
+    expect(queryByText('PG Dev')).not.toBeNull();
+  });
+
+  test('shows 7 tab triggers', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('Overview')).not.toBeNull();
+    expect(queryByText('Performance')).not.toBeNull();
+    expect(queryByText('Queries')).not.toBeNull();
+    expect(queryByText('Sessions')).not.toBeNull();
+    expect(queryByText('Tables')).not.toBeNull();
+    expect(queryByText('Storage')).not.toBeNull();
+    expect(queryByText('Pool')).not.toBeNull();
+  });
+
+  test('refresh button present', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard />);
+    });
+    const { container } = renderResult!;
+
+    // Refresh button has title "Refresh now"
+    const refreshButton = container.querySelector('[title="Refresh now"]');
+    expect(refreshButton).not.toBeNull();
+  });
+
+  test('auto-refresh toggle present', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard />);
+    });
+    const { container } = renderResult!;
+
+    // Auto-refresh toggle button has title containing "auto-refresh"
+    const autoRefreshButton = container.querySelector('[title="Pause auto-refresh"]');
+    expect(autoRefreshButton).not.toBeNull();
+  });
+
+  test('no connection shows empty state', async () => {
+    // Override storage to return empty connections
+    const storageModule = await import('@/lib/storage');
+    const originalGetConnections = (storageModule.storage as unknown as Record<string, unknown>).getConnections;
+    (storageModule.storage as unknown as Record<string, unknown>).getConnections = mock(() => []);
+
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('No Connection Selected')).not.toBeNull();
+    expect(queryByText('Select a database connection to view monitoring data.')).not.toBeNull();
+
+    // Restore
+    (storageModule.storage as unknown as Record<string, unknown>).getConnections = originalGetConnections;
+  });
+
+  test('isEmbedded=true hides back button', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard isEmbedded={true} />);
+    });
+    const { queryByText } = renderResult!;
+
+    // When embedded, the Back button should not be present
+    expect(queryByText('Back')).toBeNull();
+  });
+
+  test('tab switching works', async () => {
+    const user = userEvent.setup();
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<MonitoringDashboard />);
+    });
+    const { queryByTestId, container } = renderResult!;
+
+    // Default tab is overview
+    expect(queryByTestId('monitoring-overviewtab')).not.toBeNull();
+
+    // Click on Performance tab (must use userEvent for Radix tabs in happy-dom)
+    const allTriggers = container.querySelectorAll('[role="tab"]');
+    const perfTrigger = Array.from(allTriggers).find((t) => t.textContent?.includes('Performance')) as HTMLElement;
+    await user.click(perfTrigger);
+
+    // Performance tab content should now be visible
+    await waitFor(() => {
+      expect(queryByTestId('monitoring-performancetab')).not.toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,78 @@
+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, render } from '@testing-library/react';
+import { OverviewTab } from '@/components/monitoring/tabs/OverviewTab';
+import type { MonitoringData } from '@/lib/db/types';
+import type { TimeSeriesPoint } from '@/lib/time-series-buffer';
+
+mock.module('@/components/monitoring/tabs/MetricChart', () => ({
+  MetricChart: ({ title }: { title: string }) => React.createElement('div', { 'data-testid': 'metric-chart' }, title),
+}));
+
+function makeData(): MonitoringData {
+  return {
+    timestamp: new Date('2026-02-15T12:00:00Z'),
+    overview: {
+      version: 'PostgreSQL 16.3',
+      uptime: '2h 5m',
+      activeConnections: 8,
+      maxConnections: 100,
+      databaseSize: '1.8 GB',
+      databaseSizeBytes: 1932735283,
+      tableCount: 24,
+      indexCount: 61,
+    },
+    performance: {
+      cacheHitRatio: 95.7,
+      bufferPoolUsage: 62,
+      deadlocks: 1,
+      checkpointWriteTime: '18ms',
+    },
+    slowQueries: [{ query: 'SELECT 1', calls: 10, totalTime: 100, avgTime: 10, rows: 10 }],
+    activeSessions: [
+      { pid: 1, user: 'admin', database: 'db', state: 'active', query: 'SELECT 1', duration: '1s', durationMs: 1000 },
+      { pid: 2, user: 'app', database: 'db', state: 'idle', query: '', duration: '2s', durationMs: 2000 },
+    ],
+  } as unknown as MonitoringData;
+}
+
+function makeHistory(): TimeSeriesPoint<MonitoringData>[] {
+  return [
+    { timestamp: new Date('2026-02-15T12:00:00Z'), data: makeData() },
+    { timestamp: new Date('2026-02-15T12:01:00Z'), data: { ...makeData(), overview: { ...makeData().overview, activeConnections: 12 } } as MonitoringData },
+  ] as unknown as TimeSeriesPoint<MonitoringData>[];
+}
+
+describe('OverviewTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders skeleton while loading without data', () => {
+    const { queryByText } = render(<OverviewTab data={null} loading />);
+    expect(queryByText('Connections')).toBeNull();
+  });
+
+  test('renders key overview cards and quick stats', () => {
+    const { queryByText, container } = render(<OverviewTab data={makeData()} loading={false} />);
+    expect(queryByText('PostgreSQL 16.3')).not.toBeNull();
+    expect(queryByText('2h 5m')).not.toBeNull();
+    expect(container.textContent).toContain('8/100');
+    expect(queryByText('8% used')).not.toBeNull();
+    expect(queryByText('24')).not.toBeNull();
+    expect(queryByText('61 indexes')).not.toBeNull();
+    expect(queryByText('Quick Stats')).not.toBeNull();
+  });
+
+  test('renders connection trend when history has enough points', () => {
+    const { queryByText, queryByTestId } = render(
+      <OverviewTab data={makeData()} loading={false} history={makeHistory()} />
+    );
+    expect(queryByText('Connection Trend')).not.toBeNull();
+    expect(queryByTestId('metric-chart')).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,87 @@
+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, render } from '@testing-library/react';
+import { PerformanceTab } from '@/components/monitoring/tabs/PerformanceTab';
+import type { MonitoringData } from '@/lib/db/types';
+import type { TimeSeriesPoint } from '@/lib/time-series-buffer';
+
+mock.module('@/components/monitoring/tabs/MetricChart', () => ({
+  MetricChart: ({ title }: { title: string }) => React.createElement('div', { 'data-testid': 'metric-chart' }, title),
+}));
+
+function makeData(overrides: Partial<MonitoringData['performance']> = {}): MonitoringData {
+  return {
+    timestamp: new Date('2026-02-15T12:00:00Z'),
+    overview: {
+      version: '16.3',
+      uptime: '2h',
+      activeConnections: 3,
+      maxConnections: 100,
+      databaseSize: '1 GB',
+      databaseSizeBytes: 1024 * 1024 * 1024,
+      tableCount: 2,
+      indexCount: 3,
+    },
+    performance: {
+      cacheHitRatio: 98.2,
+      bufferPoolUsage: 65,
+      deadlocks: 0,
+      checkpointWriteTime: '12ms',
+      ...overrides,
+    },
+    slowQueries: [],
+    activeSessions: [],
+  } as unknown as MonitoringData;
+}
+
+function makeHistory(): TimeSeriesPoint<MonitoringData>[] {
+  return [
+    { timestamp: new Date('2026-02-15T12:00:00Z'), data: makeData() },
+    { timestamp: new Date('2026-02-15T12:01:00Z'), data: makeData({ cacheHitRatio: 96.1, bufferPoolUsage: 72, deadlocks: 1 }) },
+  ] as unknown as TimeSeriesPoint<MonitoringData>[];
+}
+
+describe('PerformanceTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders skeleton while loading without data', () => {
+    const { queryByText } = render(<PerformanceTab data={null} loading />);
+    expect(queryByText('Cache Hit')).toBeNull();
+  });
+
+  test('renders healthy metrics and positive tip', () => {
+    const { queryByText } = render(<PerformanceTab data={makeData()} loading={false} />);
+    expect(queryByText('Cache Hit')).not.toBeNull();
+    expect(queryByText('Buffer')).not.toBeNull();
+    expect(queryByText('Deadlocks')).not.toBeNull();
+    expect(queryByText('Performing well!')).not.toBeNull();
+  });
+
+  test('renders warning tips for low cache and deadlocks', () => {
+    const { queryByText, queryAllByText } = render(
+      <PerformanceTab
+        data={makeData({ cacheHitRatio: 72, deadlocks: 3, bufferPoolUsage: 88 })}
+        loading={false}
+      />
+    );
+    expect(queryByText('Low Cache Hit')).not.toBeNull();
+    expect(queryAllByText('Deadlocks').length).toBeGreaterThan(0);
+    expect(queryByText('Attention')).not.toBeNull();
+  });
+
+  test('shows trend charts when history has at least 2 points', () => {
+    const { queryByText, queryAllByTestId } = render(
+      <PerformanceTab data={makeData()} loading={false} history={makeHistory()} />
+    );
+    expect(queryByText('Cache Hit Trend')).not.toBeNull();
+    expect(queryByText('Buffer Pool Trend')).not.toBeNull();
+    expect(queryByText('Deadlock Trend')).not.toBeNull();
+    expect(queryAllByTestId('metric-chart').length).toBeGreaterThanOrEqual(3);
+  });
+});

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

@@ -0,0 +1,42 @@
+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, render, waitFor } from '@testing-library/react';
+import { PoolTab } from '@/components/monitoring/tabs/PoolTab';
+
+const mockFetch = mock(() =>
+  Promise.resolve(new Response(JSON.stringify({ total: 10, idle: 6, active: 3, waiting: 1 }), { status: 200, headers: { 'Content-Type': 'application/json' } }))
+);
+globalThis.fetch = mockFetch as never;
+
+const conn = { id: '1', name: 'test', type: 'postgres' as const, host: 'localhost', port: 5432, database: 'db', user: 'u', password: 'p', createdAt: new Date() };
+
+describe('PoolTab', () => {
+  afterEach(() => { cleanup(); mockFetch.mockClear(); });
+
+  test('shows empty state when no connection', () => {
+    const { queryByText } = render(<PoolTab connection={null} />);
+    expect(queryByText('Select a connection to view pool statistics')).not.toBeNull();
+  });
+
+  test('renders pool stats after fetch', async () => {
+    const { queryByText } = render(<PoolTab connection={conn} />);
+    await waitFor(() => {
+      expect(queryByText('Connection Pool')).not.toBeNull();
+      expect(queryByText('10')).not.toBeNull();
+    });
+  });
+
+  test('shows error state on fetch failure', async () => {
+    mockFetch.mockImplementationOnce(() =>
+      Promise.resolve(new Response(JSON.stringify({ error: 'Pool not available' }), { status: 500, headers: { 'Content-Type': 'application/json' } }))
+    );
+    const { queryByText } = render(<PoolTab connection={conn} />);
+    await waitFor(() => {
+      expect(queryByText('Pool not available')).not.toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,80 @@
+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 { QueriesTab } from '@/components/monitoring/tabs/QueriesTab';
+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),
+}));
+
+function makeData(): MonitoringData {
+  return {
+    timestamp: new Date('2026-02-15T12:00:00Z'),
+    overview: {
+      version: '16.3',
+      uptime: '2h',
+      activeConnections: 3,
+      maxConnections: 100,
+      databaseSize: '1 GB',
+      databaseSizeBytes: 1024 * 1024 * 1024,
+      tableCount: 2,
+      indexCount: 3,
+    },
+    performance: { cacheHitRatio: 98, queriesPerSecond: 10, avgQueryTime: 40 },
+    slowQueries: [
+      { queryId: 'q1', query: 'SELECT * FROM users', calls: 10, totalTime: 1200, avgTime: 120, rows: 300 },
+      { queryId: 'q2', query: 'SELECT * FROM events', calls: 200, totalTime: 900, avgTime: 4.5, rows: 100000 },
+      { queryId: 'q3', query: 'VACUUM users', calls: 2, totalTime: 3000, avgTime: 1500, rows: 0 },
+    ],
+    activeSessions: [],
+  } as unknown as MonitoringData;
+}
+
+describe('QueriesTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders skeleton while loading without data', () => {
+    const { queryByText } = render(<QueriesTab data={null} loading />);
+    expect(queryByText('Slowest Queries')).toBeNull();
+  });
+
+  test('shows empty state when no slow queries exist', () => {
+    const { queryByText } = render(
+      <QueriesTab data={{ ...makeData(), slowQueries: [] } as MonitoringData} loading={false} />
+    );
+    expect(queryByText('No query statistics available.')).not.toBeNull();
+    expect(queryByText('pg_stat_statements required')).not.toBeNull();
+  });
+
+  test('renders stats cards and slow query rows', () => {
+    const { queryByText, queryAllByText } = render(<QueriesTab data={makeData()} loading={false} />);
+
+    expect(queryByText('Slowest Queries')).not.toBeNull();
+    expect(queryAllByText('SELECT * FROM users').length).toBeGreaterThan(0);
+    expect(queryAllByText('SELECT * FROM events').length).toBeGreaterThan(0);
+    expect(queryAllByText('VACUUM users').length).toBeGreaterThan(0);
+    expect(queryByText('Slow')).not.toBeNull();
+  });
+
+  test('sorts by calls when Calls header is clicked', () => {
+    const { container, queryByText } = render(<QueriesTab data={makeData()} loading={false} />);
+
+    const callsSortButton = queryByText('Calls');
+    expect(callsSortButton).not.toBeNull();
+    fireEvent.click(callsSortButton!);
+
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows.length).toBeGreaterThan(0);
+    expect(rows[0]?.textContent).toContain('SELECT * FROM events');
+  });
+});