@libredb/studio 0.9.7 → 0.9.13

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

@@ -1,259 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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');
-  });
-});