@libredb/studio 0.9.7

package/tests/components/admin/AdminDashboard.test.tsx

@@ -0,0 +1,205 @@
+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();
+
+// Mock child tab components to simplify
+mock.module('@/components/admin/tabs/OverviewTab', () => ({
+  OverviewTab: ({ user }: { user?: unknown }) => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    const u = user as { username?: string } | null;
+    return React.createElement('div', { 'data-testid': 'overview-tab' }, `OverviewTab${u ? ` - ${u.username}` : ''}`);
+  },
+}));
+
+mock.module('@/components/admin/tabs/OperationsTab', () => ({
+  OperationsTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'operations-tab' }, 'OperationsTab');
+  },
+}));
+
+mock.module('@/components/admin/tabs/MonitoringEmbed', () => ({
+  MonitoringEmbed: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'monitoring-embed' }, 'MonitoringEmbed');
+  },
+}));
+
+mock.module('@/components/admin/tabs/SecurityTab', () => ({
+  SecurityTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'security-tab' }, 'SecurityTab');
+  },
+}));
+
+mock.module('@/components/admin/tabs/AuditTab', () => ({
+  AuditTab: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'audit-tab' }, 'AuditTab');
+  },
+}));
+
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, fireEvent, waitFor, act, cleanup } from '@testing-library/react';
+import React from 'react';
+
+import { mockGlobalFetch, restoreGlobalFetch } from '../../helpers/mock-fetch';
+import { mockRouterPush, mockRouterRefresh } from '../../helpers/mock-navigation';
+import { mockToastSuccess } from '../../helpers/mock-sonner';
+
+import AdminDashboard from '@/components/admin/AdminDashboard';
+
+// =============================================================================
+// AdminDashboard Tests
+// =============================================================================
+
+describe('AdminDashboard', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  let fetchMock: ReturnType<typeof mockGlobalFetch>;
+
+  beforeEach(() => {
+    mockRouterPush.mockClear();
+    mockRouterRefresh.mockClear();
+    mockToastSuccess.mockClear();
+
+    fetchMock = mockGlobalFetch({
+      '/api/auth/me': {
+        json: {
+          authenticated: true,
+          user: { username: 'admin', role: 'admin' },
+        },
+      },
+      '/api/auth/logout': { json: { success: true } },
+    });
+  });
+
+  afterEach(() => {
+    restoreGlobalFetch();
+  });
+
+  test('renders admin dashboard title', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AdminDashboard />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('Admin Dashboard')).not.toBeNull();
+  });
+
+  test('fetches user on mount', async () => {
+    await act(async () => {
+      render(<AdminDashboard />);
+    });
+
+    await waitFor(() => {
+      const calls = fetchMock.mock.calls;
+      const authCall = calls.find((c: unknown[]) => {
+        const url = typeof c[0] === 'string' ? c[0] : '';
+        return url.includes('/api/auth/me');
+      });
+      expect(authCall).not.toBeUndefined();
+    });
+  });
+
+  test('shows 5 tab triggers', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AdminDashboard />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('Overview')).not.toBeNull();
+    expect(queryByText('Operations')).not.toBeNull();
+    expect(queryByText('Monitoring')).not.toBeNull();
+    expect(queryByText('Security')).not.toBeNull();
+    expect(queryByText('Audit')).not.toBeNull();
+  });
+
+  test('default tab is overview', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AdminDashboard />);
+    });
+    const { queryByTestId } = renderResult!;
+
+    // The OverviewTab mock content should be visible (default tab content)
+    expect(queryByTestId('overview-tab')).not.toBeNull();
+  });
+
+  test('logout button present', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AdminDashboard />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('Logout')).not.toBeNull();
+  });
+
+  test('editor button links to home', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AdminDashboard />);
+    });
+    const { queryByText, getByText } = renderResult!;
+
+    expect(queryByText('Editor')).not.toBeNull();
+
+    // Click the editor button
+    const editorButton = getByText('Editor').closest('button');
+    expect(editorButton).not.toBeNull();
+    fireEvent.click(editorButton!);
+
+    expect(mockRouterPush).toHaveBeenCalledWith('/');
+  });
+
+  test('shows username greeting after auth fetch', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AdminDashboard />);
+    });
+    const { queryByTestId } = renderResult!;
+
+    // Wait for user data to be fetched and passed to OverviewTab
+    await waitFor(() => {
+      // The OverviewTab mock renders the username if user is provided
+      const overviewTab = queryByTestId('overview-tab');
+      expect(overviewTab).not.toBeNull();
+      expect(overviewTab!.textContent).toContain('admin');
+    });
+  });
+
+  test('logout button triggers logout flow', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AdminDashboard />);
+    });
+    const { getByText } = renderResult!;
+
+    const logoutButton = getByText('Logout').closest('button');
+    expect(logoutButton).not.toBeNull();
+
+    await act(async () => {
+      fireEvent.click(logoutButton!);
+    });
+
+    await waitFor(() => {
+      expect(mockRouterPush).toHaveBeenCalledWith('/login');
+    });
+  });
+});

package/tests/components/admin/AuditTab.test.tsx

@@ -0,0 +1,220 @@
+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();
+
+// Mock date-fns to avoid complex date computations in tests
+mock.module('date-fns', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  format: (date: Date, fmt: string) => 'Mon',
+  subDays: (date: Date, days: number) => new Date(date.getTime() - days * 86400000),
+  startOfDay: (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()),
+}));
+
+mock.module('@/lib/storage', () => ({
+  storage: {
+    getHistory: mock(() => [
+      {
+        id: 'h1',
+        query: 'SELECT 1',
+        executedAt: new Date(),
+        executionTime: 10,
+        rowCount: 1,
+        status: 'success',
+        connectionId: 'c1',
+        connectionName: 'TestDB',
+      },
+      {
+        id: 'h2',
+        query: 'DROP TABLE x',
+        executedAt: new Date(),
+        executionTime: 5,
+        rowCount: 0,
+        status: 'error',
+        error: 'denied',
+        connectionId: 'c1',
+        connectionName: 'TestDB',
+      },
+    ]),
+  },
+}));
+
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, waitFor, act, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { mockGlobalFetch, restoreGlobalFetch } from '../../helpers/mock-fetch';
+
+import { AuditTab } from '@/components/admin/tabs/AuditTab';
+
+// =============================================================================
+// AuditTab Tests
+// =============================================================================
+
+describe('AuditTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  let fetchMock: ReturnType<typeof mockGlobalFetch>;
+
+  beforeEach(() => {
+    fetchMock = mockGlobalFetch({
+      '/api/admin/audit': {
+        json: {
+          events: [
+            {
+              id: 'a1',
+              timestamp: new Date().toISOString(),
+              type: 'maintenance',
+              action: 'VACUUM',
+              target: 'users',
+              connectionName: 'TestDB',
+              user: 'admin',
+              result: 'success',
+              duration: 120,
+            },
+            {
+              id: 'a2',
+              timestamp: new Date().toISOString(),
+              type: 'kill_session',
+              action: 'KILL',
+              target: 'PID:5678',
+              connectionName: 'TestDB',
+              user: 'admin',
+              result: 'failure',
+              duration: 50,
+            },
+          ],
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    restoreGlobalFetch();
+  });
+
+  test('renders 3 tabs (Operations, Queries, Stats)', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AuditTab />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('Operations')).not.toBeNull();
+    expect(queryByText('Queries')).not.toBeNull();
+    expect(queryByText('Stats')).not.toBeNull();
+  });
+
+  test('operations tab fetches audit events', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AuditTab />);
+    });
+    const { queryByText } = renderResult!;
+
+    // Wait for the fetch to complete and events to render
+    await waitFor(() => {
+      const calls = fetchMock.mock.calls;
+      const auditCall = calls.find((c: unknown[]) => {
+        const url = typeof c[0] === 'string' ? c[0] : '';
+        return url.includes('/api/admin/audit');
+      });
+      expect(auditCall).not.toBeUndefined();
+    });
+
+    // Events should render after fetch
+    await waitFor(() => {
+      expect(queryByText('VACUUM')).not.toBeNull();
+      expect(queryByText('KILL')).not.toBeNull();
+    });
+  });
+
+  test('queries tab shows query history', async () => {
+    const user = userEvent.setup();
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AuditTab />);
+    });
+    const { queryByText, container } = renderResult!;
+
+    // Click the Queries tab trigger (must use userEvent for Radix tabs in happy-dom)
+    const allTriggers = container.querySelectorAll('[role="tab"]');
+    const queriesTab = Array.from(allTriggers).find((t) => t.textContent?.includes('Queries')) as HTMLElement;
+    await user.click(queriesTab);
+
+    // Query history from mock storage
+    await waitFor(() => {
+      expect(queryByText('SELECT 1')).not.toBeNull();
+      expect(queryByText('DROP TABLE x')).not.toBeNull();
+    });
+  });
+
+  test('stats tab shows summary cards', async () => {
+    const user = userEvent.setup();
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AuditTab />);
+    });
+    const { queryByText, container } = renderResult!;
+
+    // Click the Stats tab trigger (must use userEvent for Radix tabs in happy-dom)
+    const allTriggers = container.querySelectorAll('[role="tab"]');
+    const statsTab = Array.from(allTriggers).find((t) => t.textContent?.includes('Stats')) as HTMLElement;
+    await user.click(statsTab);
+
+    // Summary cards show total queries, success rate, etc.
+    await waitFor(() => {
+      expect(queryByText('Total Queries')).not.toBeNull();
+      expect(queryByText('Success Rate')).not.toBeNull();
+      expect(queryByText('Avg Duration')).not.toBeNull();
+      expect(queryByText('Failed')).not.toBeNull();
+    });
+  });
+
+  test('search filter works in operations tab', async () => {
+    const user = userEvent.setup();
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AuditTab />);
+    });
+    const { queryByText, getByPlaceholderText } = renderResult!;
+
+    // Wait for events to load
+    await waitFor(() => {
+      expect(queryByText('VACUUM')).not.toBeNull();
+    });
+
+    // Find the search input and type a search query
+    const searchInput = getByPlaceholderText('Search...');
+    expect(searchInput).not.toBeNull();
+
+    // Use userEvent for proper input handling in happy-dom
+    await user.clear(searchInput);
+    await user.type(searchInput, 'VACUUM');
+
+    // VACUUM should still be visible, KILL should be filtered out
+    await waitFor(() => {
+      expect(queryByText('VACUUM')).not.toBeNull();
+      expect(queryByText('KILL')).toBeNull();
+    });
+  });
+
+  test('type filter dropdown present', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<AuditTab />);
+    });
+    const { queryByText } = renderResult!;
+
+    // The type filter select should show "All Types" by default
+    expect(queryByText('All Types')).not.toBeNull();
+  });
+});

package/tests/components/admin/MonitoringEmbed.test.tsx

@@ -0,0 +1,58 @@
+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';
+
+// ── Mock MonitoringDashboard to capture props ───────────────────────────────
+
+let capturedProps: Record<string, unknown> | null = null;
+
+mock.module('@/components/monitoring/MonitoringDashboard', () => ({
+  MonitoringDashboard: (props: Record<string, unknown>) => {
+    capturedProps = props;
+    return React.createElement('div', { 'data-testid': 'monitoring-dashboard' }, 'MonitoringDashboard');
+  },
+}));
+
+// ── Import after mock ───────────────────────────────────────────────────────
+
+import { MonitoringEmbed } from '@/components/admin/tabs/MonitoringEmbed';
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+
+describe('MonitoringEmbed', () => {
+  afterEach(() => {
+    cleanup();
+    capturedProps = null;
+  });
+
+  test('renders MonitoringDashboard inside a full-height container', () => {
+    const { queryByTestId, container } = render(<MonitoringEmbed />);
+    expect(queryByTestId('monitoring-dashboard')).not.toBeNull();
+    // Wrapper div has h-full class
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper).not.toBeNull();
+    expect(wrapper.className).toContain('h-full');
+  });
+
+  test('passes isEmbedded=true to MonitoringDashboard', () => {
+    render(<MonitoringEmbed />);
+    expect(capturedProps).not.toBeNull();
+    expect(capturedProps!.isEmbedded).toBe(true);
+  });
+
+  test('does not pass any other props to MonitoringDashboard', () => {
+    render(<MonitoringEmbed />);
+    expect(capturedProps).not.toBeNull();
+    const keys = Object.keys(capturedProps!);
+    expect(keys).toEqual(['isEmbedded']);
+  });
+
+  test('renders MonitoringDashboard text content', () => {
+    const { queryByText } = render(<MonitoringEmbed />);
+    expect(queryByText('MonitoringDashboard')).not.toBeNull();
+  });
+});