@libredb/studio 0.9.7 → 0.9.13

package/tests/components/studio/QueryToolbar.test.tsx

@@ -1,321 +0,0 @@
-import '../../setup-dom';
-import '../../helpers/mock-sonner';
-import '../../helpers/mock-navigation';
-
-import { describe, test, expect, mock, afterEach } from 'bun:test';
-import { render, fireEvent, cleanup } from '@testing-library/react';
-import React from 'react';
-
-import { QueryToolbar } from '@/components/studio/QueryToolbar';
-import { mockPostgresConnection } from '../../fixtures/connections';
-import type { ProviderMetadata } from '@/hooks/use-provider-metadata';
-
-// =============================================================================
-// QueryToolbar Tests
-// =============================================================================
-
-const sqlMetadata: ProviderMetadata = {
-  capabilities: {
-    queryLanguage: 'sql',
-    supportsExplain: true,
-    supportsExternalQueryLimiting: true,
-    supportsCreateTable: true,
-    supportsMaintenance: false,
-    maintenanceOperations: [],
-    supportsConnectionString: false,
-    defaultPort: 5432,
-    schemaRefreshPattern: '',
-  },
-  labels: {
-    entityName: 'table',
-    entityNamePlural: 'tables',
-    rowName: 'row',
-    rowNamePlural: 'rows',
-    selectAction: 'SELECT * FROM',
-    generateAction: 'Generate',
-    analyzeAction: 'Analyze',
-    vacuumAction: 'Vacuum',
-    searchPlaceholder: 'Search tables...',
-    analyzeGlobalLabel: 'Analyze All',
-    analyzeGlobalTitle: 'Analyze All Tables',
-    analyzeGlobalDesc: 'Update statistics for all tables',
-    vacuumGlobalLabel: 'Vacuum All',
-    vacuumGlobalTitle: 'Vacuum All Tables',
-    vacuumGlobalDesc: 'Reclaim storage for all tables',
-  },
-};
-
-function createDefaultProps(overrides: Record<string, unknown> = {}) {
-  return {
-    activeConnection: mockPostgresConnection,
-    metadata: sqlMetadata,
-    isExecuting: false,
-    playgroundMode: false,
-    transactionActive: false,
-    editingEnabled: false,
-    onSaveQuery: mock(() => {}),
-    onExecuteQuery: mock(() => {}),
-    onCancelQuery: mock(() => {}),
-    onBeginTransaction: mock(() => {}),
-    onCommitTransaction: mock(() => {}),
-    onRollbackTransaction: mock(() => {}),
-    onTogglePlayground: mock(() => {}),
-    onToggleEditing: mock(() => {}),
-    onImport: mock(() => {}),
-    ...overrides,
-  };
-}
-
-describe('QueryToolbar', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  test('Run button shown when not executing', () => {
-    const props = createDefaultProps({ isExecuting: false });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText('RUN')).not.toBeNull();
-    expect(queryByText('CANCEL')).toBeNull();
-  });
-
-  test('Cancel button shown when executing', () => {
-    const props = createDefaultProps({ isExecuting: true });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText('CANCEL')).not.toBeNull();
-    expect(queryByText('RUN')).toBeNull();
-  });
-
-  test('Transaction BEGIN button visible when not in transaction', () => {
-    const props = createDefaultProps({ transactionActive: false });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText('BEGIN')).not.toBeNull();
-    expect(queryByText('COMMIT')).toBeNull();
-    expect(queryByText('ROLLBACK')).toBeNull();
-  });
-
-  test('COMMIT/ROLLBACK shown when transactionActive', () => {
-    const props = createDefaultProps({ transactionActive: true });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText('COMMIT')).not.toBeNull();
-    expect(queryByText('ROLLBACK')).not.toBeNull();
-    expect(queryByText('TXN')).not.toBeNull();
-    // BEGIN should not be shown when transaction is active
-    expect(queryByText('BEGIN')).toBeNull();
-  });
-
-  test('Sandbox button highlights when playgroundMode true', () => {
-    const { queryByText } = render(<QueryToolbar {...createDefaultProps({ playgroundMode: true })} />);
-
-    // The sandbox mode banner should be shown
-    expect(queryByText(/Sandbox Mode/)).not.toBeNull();
-
-    // Find SANDBOX button and check it has the highlighted class
-    const sandboxText = queryByText('SANDBOX');
-    expect(sandboxText).not.toBeNull();
-    const sandboxButton = sandboxText!.closest('button');
-    expect(sandboxButton).not.toBeNull();
-    expect(sandboxButton?.className.includes('text-emerald-400')).toBe(true);
-  });
-
-  test('Edit button highlights when editingEnabled true', () => {
-    const { queryByText } = render(<QueryToolbar {...createDefaultProps({ editingEnabled: true })} />);
-
-    const editText = queryByText('EDIT');
-    expect(editText).not.toBeNull();
-    const editButton = editText!.closest('button');
-    expect(editButton).not.toBeNull();
-    expect(editButton?.className.includes('text-amber-400')).toBe(true);
-  });
-
-  test('Run button disabled when no activeConnection', () => {
-    const props = createDefaultProps({ activeConnection: null });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    const runText = queryByText('RUN');
-    expect(runText).not.toBeNull();
-    const runButton = runText!.closest('button');
-    expect(runButton).not.toBeNull();
-    expect(runButton?.disabled).toBe(true);
-  });
-
-  test('callbacks fire correctly on click', () => {
-    const onExecuteQuery = mock(() => {});
-    const onCancelQuery = mock(() => {});
-    const onSaveQuery = mock(() => {});
-    const onBeginTransaction = mock(() => {});
-    const onTogglePlayground = mock(() => {});
-    const onToggleEditing = mock(() => {});
-
-    // Test Run button and other action buttons
-    const props = createDefaultProps({
-      onExecuteQuery,
-      onCancelQuery,
-      onSaveQuery,
-      onBeginTransaction,
-      onTogglePlayground,
-      onToggleEditing,
-    });
-    const { getByText, unmount } = render(<QueryToolbar {...props} />);
-
-    // Click RUN
-    fireEvent.click(getByText('RUN').closest('button')!);
-    expect(onExecuteQuery).toHaveBeenCalledTimes(1);
-
-    // Click Save
-    fireEvent.click(getByText('Save').closest('button')!);
-    expect(onSaveQuery).toHaveBeenCalledTimes(1);
-
-    // Click BEGIN
-    fireEvent.click(getByText('BEGIN').closest('button')!);
-    expect(onBeginTransaction).toHaveBeenCalledTimes(1);
-
-    // Click SANDBOX
-    fireEvent.click(getByText('SANDBOX').closest('button')!);
-    expect(onTogglePlayground).toHaveBeenCalledTimes(1);
-
-    // Click EDIT
-    fireEvent.click(getByText('EDIT').closest('button')!);
-    expect(onToggleEditing).toHaveBeenCalledTimes(1);
-
-    unmount();
-
-    // Test Cancel button (requires isExecuting=true)
-    const cancelProps = createDefaultProps({ isExecuting: true, onCancelQuery });
-    const result2 = render(<QueryToolbar {...cancelProps} />);
-    fireEvent.click(result2.getByText('CANCEL').closest('button')!);
-    expect(onCancelQuery).toHaveBeenCalledTimes(1);
-  });
-
-  // ===========================================================================
-  // Additional coverage tests
-  // ===========================================================================
-
-  test('Playground mode banner text when playgroundMode=true', () => {
-    const props = createDefaultProps({ playgroundMode: true });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText(/Sandbox Mode/)).not.toBeNull();
-    expect(queryByText(/All changes will be auto-rolled back/)).not.toBeNull();
-  });
-
-  test('Banner hidden when playgroundMode=false', () => {
-    const props = createDefaultProps({ playgroundMode: false });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText(/Sandbox Mode/)).toBeNull();
-    expect(queryByText(/All changes will be auto-rolled back/)).toBeNull();
-  });
-
-  test('BEGIN button disabled when playgroundMode=true', () => {
-    const props = createDefaultProps({ playgroundMode: true, transactionActive: false });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    const beginText = queryByText('BEGIN');
-    expect(beginText).not.toBeNull();
-    const beginButton = beginText!.closest('button');
-    expect(beginButton).not.toBeNull();
-    expect(beginButton?.disabled).toBe(true);
-  });
-
-  test('SANDBOX button disabled when transactionActive=true', () => {
-    const props = createDefaultProps({ transactionActive: true });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    const sandboxText = queryByText('SANDBOX');
-    expect(sandboxText).not.toBeNull();
-    const sandboxButton = sandboxText!.closest('button');
-    expect(sandboxButton).not.toBeNull();
-    expect(sandboxButton?.disabled).toBe(true);
-  });
-
-  test('COMMIT callback fires', () => {
-    const onCommitTransaction = mock(() => {});
-    const props = createDefaultProps({ transactionActive: true, onCommitTransaction });
-    const { getByText } = render(<QueryToolbar {...props} />);
-
-    fireEvent.click(getByText('COMMIT').closest('button')!);
-    expect(onCommitTransaction).toHaveBeenCalledTimes(1);
-  });
-
-  test('ROLLBACK callback fires', () => {
-    const onRollbackTransaction = mock(() => {});
-    const props = createDefaultProps({ transactionActive: true, onRollbackTransaction });
-    const { getByText } = render(<QueryToolbar {...props} />);
-
-    fireEvent.click(getByText('ROLLBACK').closest('button')!);
-    expect(onRollbackTransaction).toHaveBeenCalledTimes(1);
-  });
-
-  test('IMPORT button callback fires', () => {
-    const onImport = mock(() => {});
-    const props = createDefaultProps({ onImport });
-    const { getByText } = render(<QueryToolbar {...props} />);
-
-    fireEvent.click(getByText('IMPORT').closest('button')!);
-    expect(onImport).toHaveBeenCalledTimes(1);
-  });
-
-  test('No transaction controls when activeConnection=null', () => {
-    const props = createDefaultProps({ activeConnection: null });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText('BEGIN')).toBeNull();
-    expect(queryByText('SANDBOX')).toBeNull();
-    expect(queryByText('EDIT')).toBeNull();
-    expect(queryByText('IMPORT')).toBeNull();
-  });
-
-  test('No transaction controls when metadata=null', () => {
-    const props = createDefaultProps({ metadata: null });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText('BEGIN')).toBeNull();
-    expect(queryByText('SANDBOX')).toBeNull();
-    expect(queryByText('EDIT')).toBeNull();
-    expect(queryByText('IMPORT')).toBeNull();
-  });
-
-  test('No transaction controls for non-SQL queryLanguage', () => {
-    const mongoMetadata: ProviderMetadata = {
-      capabilities: {
-        ...sqlMetadata.capabilities,
-        queryLanguage: 'json',
-      },
-      labels: {
-        ...sqlMetadata.labels,
-        entityName: 'collection',
-        entityNamePlural: 'collections',
-      },
-    };
-    const props = createDefaultProps({ metadata: mongoMetadata });
-    const { queryByText } = render(<QueryToolbar {...props} />);
-
-    expect(queryByText('BEGIN')).toBeNull();
-    expect(queryByText('SANDBOX')).toBeNull();
-    expect(queryByText('EDIT')).toBeNull();
-    expect(queryByText('IMPORT')).toBeNull();
-  });
-
-  test('Query label always shown', () => {
-    // With connection
-    const props1 = createDefaultProps();
-    const { queryByText: q1 } = render(<QueryToolbar {...props1} />);
-    expect(q1('Query')).not.toBeNull();
-    cleanup();
-
-    // Without connection
-    const props2 = createDefaultProps({ activeConnection: null });
-    const { queryByText: q2 } = render(<QueryToolbar {...props2} />);
-    expect(q2('Query')).not.toBeNull();
-    cleanup();
-
-    // Without metadata
-    const props3 = createDefaultProps({ metadata: null });
-    const { queryByText: q3 } = render(<QueryToolbar {...props3} />);
-    expect(q3('Query')).not.toBeNull();
-  });
-});

package/tests/components/studio/StudioDesktopHeader.test.tsx

@@ -1,377 +0,0 @@
-import '../../setup-dom';
-import '../../helpers/mock-sonner';
-import { mockRouterPush } from '../../helpers/mock-navigation';
-
-import React from 'react';
-import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
-import { cleanup, render, fireEvent } from '@testing-library/react';
-
-mock.module('@/components/ui/dropdown-menu', () => ({
-  DropdownMenu: ({ children }: { children: React.ReactNode }) => React.createElement('div', { 'data-testid': 'dropdown-menu' }, children),
-  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => React.createElement('div', { 'data-testid': 'dropdown-trigger' }, children),
-  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => React.createElement('div', { 'data-testid': 'dropdown-content' }, children),
-  DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode; onClick?: () => void; className?: string }) =>
-    React.createElement('div', { onClick, role: 'menuitem', className }, children),
-}));
-
-mock.module('@/components/ui/button', () => ({
-  Button: ({ children, onClick, className, ...rest }: { children: React.ReactNode; onClick?: () => void; className?: string; [k: string]: unknown }) =>
-    React.createElement('button', { onClick, className, ...rest }, children),
-}));
-
-import { StudioDesktopHeader } from '@/components/studio/StudioDesktopHeader';
-import type { DatabaseConnection } from '@/lib/types';
-
-// --- Fixtures ---
-const baseConnection: DatabaseConnection = {
-  id: '1',
-  name: 'staging-db',
-  type: 'postgres',
-  host: 'localhost',
-  port: 5432,
-  database: 'app',
-  user: 'admin',
-  password: 'secret',
-  createdAt: new Date(),
-};
-
-const connectionWithEnv: DatabaseConnection = {
-  ...baseConnection,
-  id: '2',
-  name: 'prod-db',
-  type: 'mysql',
-  environment: 'production' as DatabaseConnection['environment'],
-  color: '#ef4444',
-};
-
-const connectionWithOtherEnv: DatabaseConnection = {
-  ...baseConnection,
-  id: '3',
-  name: 'test-db',
-  type: 'sqlite',
-  environment: 'other' as DatabaseConnection['environment'],
-};
-
-const connectionWithEnvNoColor: DatabaseConnection = {
-  ...baseConnection,
-  id: '4',
-  name: 'dev-db',
-  type: 'postgres',
-  environment: 'development' as DatabaseConnection['environment'],
-  color: undefined,
-};
-
-const defaultProps = {
-  activeConnection: baseConnection,
-  connectionPulse: null as 'healthy' | 'degraded' | 'error' | null,
-  user: { role: 'admin' } as { role?: string } | null,
-  isAdmin: true,
-  onLogout: mock(() => {}),
-};
-
-describe('StudioDesktopHeader', () => {
-  beforeEach(() => {
-    mockRouterPush.mockClear();
-    defaultProps.onLogout = mock(() => {});
-    process.env.NEXT_PUBLIC_APP_VERSION = '1.2.3';
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  // ── Connection Info (Left Section) ──
-
-  describe('connection info', () => {
-    test('renders connection name when connected', () => {
-      const { getByText } = render(<StudioDesktopHeader {...defaultProps} />);
-      expect(getByText('staging-db')).toBeTruthy();
-    });
-
-    test('renders "Quick Access" when no active connection', () => {
-      const { getByText } = render(
-        <StudioDesktopHeader {...defaultProps} activeConnection={null} />
-      );
-      expect(getByText('Quick Access')).toBeTruthy();
-    });
-
-    test('renders database type', () => {
-      const { container } = render(<StudioDesktopHeader {...defaultProps} />);
-      expect(container.textContent).toContain('postgres');
-    });
-
-    test('does not render type subtitle when no connection', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} activeConnection={null} />
-      );
-      expect(container.textContent).not.toContain('postgres');
-      expect(container.textContent).not.toContain('Online');
-    });
-  });
-
-  // ── Environment Tag ──
-
-  describe('environment tag', () => {
-    test('shows environment name with custom color', () => {
-      const { getByText } = render(
-        <StudioDesktopHeader {...defaultProps} activeConnection={connectionWithEnv} />
-      );
-      const envSpan = getByText(/production/i);
-      expect(envSpan).toBeTruthy();
-      expect(envSpan.style.color).toBe('#ef4444');
-    });
-
-    test('uses default green color when no color is set', () => {
-      const { getByText } = render(
-        <StudioDesktopHeader {...defaultProps} activeConnection={connectionWithEnvNoColor} />
-      );
-      const envSpan = getByText(/development/i);
-      expect(envSpan.style.color).toBe('#22c55e');
-    });
-
-    test('does not show environment tag when environment is "other"', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} activeConnection={connectionWithOtherEnv} />
-      );
-      const typeSubtitle = container.querySelector('.font-mono.uppercase');
-      // Neither environment name nor "Online" rendered — both conditions skip "other"
-      expect(typeSubtitle?.textContent).not.toContain('other');
-    });
-
-    test('shows "Online" when no environment is set', () => {
-      const { container } = render(<StudioDesktopHeader {...defaultProps} />);
-      expect(container.textContent).toContain('Online');
-    });
-
-    test('does not show "Online" when valid environment is set', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} activeConnection={connectionWithEnv} />
-      );
-      // "Online" should not appear in the type subtitle (the pulse section is separate)
-      const typeSubtitle = container.querySelector('.font-mono.uppercase');
-      expect(typeSubtitle?.textContent).toContain('production');
-      expect(typeSubtitle?.textContent).not.toContain('Online');
-    });
-  });
-
-  // ── Connection Pulse Indicator ──
-
-  describe('connection pulse', () => {
-    test('does not render pulse indicator when null', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} connectionPulse={null} />
-      );
-      expect(container.querySelector('[title^="Connection:"]')).toBeNull();
-    });
-
-    test('renders healthy pulse with "Online" text and green dot', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} connectionPulse="healthy" />
-      );
-      const pulseContainer = container.querySelector('[title="Connection: healthy"]');
-      expect(pulseContainer).toBeTruthy();
-
-      const dot = pulseContainer!.querySelector('.rounded-full');
-      expect(dot?.className).toContain('bg-emerald-500');
-      expect(dot?.className).toContain('animate-pulse');
-
-      // "Online" text in the pulse section
-      expect(pulseContainer!.textContent).toContain('Online');
-    });
-
-    test('renders degraded pulse with "Slow" text and amber dot', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} connectionPulse="degraded" />
-      );
-      const pulseContainer = container.querySelector('[title="Connection: degraded"]');
-      expect(pulseContainer).toBeTruthy();
-
-      const dot = pulseContainer!.querySelector('.rounded-full');
-      expect(dot?.className).toContain('bg-amber-500');
-      expect(dot?.className).not.toContain('animate-pulse');
-
-      expect(pulseContainer!.textContent).toContain('Slow');
-    });
-
-    test('renders error pulse with "Error" text and red dot', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} connectionPulse="error" />
-      );
-      const pulseContainer = container.querySelector('[title="Connection: error"]');
-      expect(pulseContainer).toBeTruthy();
-
-      const dot = pulseContainer!.querySelector('.rounded-full');
-      expect(dot?.className).toContain('bg-red-500');
-      expect(dot?.className).not.toContain('animate-pulse');
-
-      expect(pulseContainer!.textContent).toContain('Error');
-    });
-  });
-
-  // ── Monitoring Button ──
-
-  describe('monitoring button', () => {
-    test('renders monitoring button', () => {
-      const { getAllByText } = render(<StudioDesktopHeader {...defaultProps} />);
-      // Monitoring appears as standalone button AND in dropdown
-      expect(getAllByText(/Monitoring/).length).toBeGreaterThanOrEqual(1);
-    });
-
-    test('navigates to /monitoring on click', () => {
-      const { getAllByText } = render(<StudioDesktopHeader {...defaultProps} />);
-      // Click the standalone button (the one inside <button>)
-      const monitoringBtn = getAllByText(/Monitoring/).find(
-        (el) => el.closest('button') !== null
-      );
-      expect(monitoringBtn).toBeTruthy();
-      fireEvent.click(monitoringBtn!);
-      expect(mockRouterPush).toHaveBeenCalledWith('/monitoring');
-    });
-  });
-
-  // ── User Dropdown Menu ──
-
-  describe('user dropdown menu', () => {
-    test('renders user dropdown when user exists', () => {
-      const { container } = render(<StudioDesktopHeader {...defaultProps} />);
-      expect(container.querySelector('[data-testid="dropdown-menu"]')).toBeTruthy();
-    });
-
-    test('does not render user dropdown when user is null', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} user={null} />
-      );
-      expect(container.querySelector('[data-testid="dropdown-menu"]')).toBeNull();
-    });
-
-    test('shows Admin Dashboard menu item for admin users', () => {
-      const { getByText } = render(<StudioDesktopHeader {...defaultProps} isAdmin={true} />);
-      expect(getByText('Admin Dashboard')).toBeTruthy();
-    });
-
-    test('hides Admin Dashboard menu item for non-admin users', () => {
-      const { queryByText } = render(
-        <StudioDesktopHeader {...defaultProps} isAdmin={false} />
-      );
-      expect(queryByText('Admin Dashboard')).toBeNull();
-    });
-
-    test('navigates to /admin when Admin Dashboard clicked', () => {
-      const { getByText } = render(<StudioDesktopHeader {...defaultProps} isAdmin={true} />);
-      fireEvent.click(getByText('Admin Dashboard'));
-      expect(mockRouterPush).toHaveBeenCalledWith('/admin');
-    });
-
-    test('shows Monitoring in dropdown menu', () => {
-      const { getAllByText } = render(<StudioDesktopHeader {...defaultProps} />);
-      // Monitoring appears both as standalone button and in dropdown
-      const monitoringElements = getAllByText('Monitoring');
-      expect(monitoringElements.length).toBeGreaterThanOrEqual(2);
-    });
-
-    test('navigates to /monitoring from dropdown menu item', () => {
-      const { getAllByText } = render(<StudioDesktopHeader {...defaultProps} />);
-      // The dropdown Monitoring item is the second one
-      const monitoringItems = getAllByText('Monitoring');
-      const dropdownMonitoring = monitoringItems.find(
-        (el) => el.closest('[role="menuitem"]') !== null
-      );
-      expect(dropdownMonitoring).toBeTruthy();
-      fireEvent.click(dropdownMonitoring!.closest('[role="menuitem"]')!);
-      expect(mockRouterPush).toHaveBeenCalledWith('/monitoring');
-    });
-
-    test('shows Logout menu item', () => {
-      const { getByText } = render(<StudioDesktopHeader {...defaultProps} />);
-      expect(getByText('Logout')).toBeTruthy();
-    });
-
-    test('calls onLogout when Logout clicked', () => {
-      const onLogout = mock(() => {});
-      const { getByText } = render(
-        <StudioDesktopHeader {...defaultProps} onLogout={onLogout} />
-      );
-      fireEvent.click(getByText('Logout'));
-      expect(onLogout).toHaveBeenCalledTimes(1);
-    });
-
-    test('Logout menu item has red styling', () => {
-      const { getByText } = render(<StudioDesktopHeader {...defaultProps} />);
-      const logoutItem = getByText('Logout').closest('[role="menuitem"]');
-      expect(logoutItem?.className).toContain('text-red-400');
-    });
-  });
-
-  // ── Version Badge ──
-
-  describe('version badge', () => {
-    test('renders version from env variable', () => {
-      process.env.NEXT_PUBLIC_APP_VERSION = '2.5.0';
-      const { container } = render(<StudioDesktopHeader {...defaultProps} />);
-      expect(container.textContent).toContain('v2.5.0');
-    });
-
-    test('renders empty version gracefully when env not set', () => {
-      delete process.env.NEXT_PUBLIC_APP_VERSION;
-      const { container } = render(<StudioDesktopHeader {...defaultProps} />);
-      expect(container.textContent).toContain('v');
-    });
-  });
-
-  // ── Combinations / Edge Cases ──
-
-  describe('edge cases', () => {
-    test('renders correctly with no connection and non-admin user', () => {
-      const { getByText, queryByText } = render(
-        <StudioDesktopHeader
-          activeConnection={null}
-          connectionPulse={null}
-          user={{ role: 'user' }}
-          isAdmin={false}
-          onLogout={mock(() => {})}
-        />
-      );
-      expect(getByText('Quick Access')).toBeTruthy();
-      expect(queryByText('Admin Dashboard')).toBeNull();
-      expect(getByText('Logout')).toBeTruthy();
-    });
-
-    test('renders correctly with connection, healthy pulse, admin user', () => {
-      const { getByText, container } = render(
-        <StudioDesktopHeader
-          activeConnection={connectionWithEnv}
-          connectionPulse="healthy"
-          user={{ role: 'admin' }}
-          isAdmin={true}
-          onLogout={mock(() => {})}
-        />
-      );
-      expect(getByText('prod-db')).toBeTruthy();
-      expect(container.textContent).toContain('mysql');
-      expect(container.textContent).toContain('production');
-      expect(container.querySelector('[title="Connection: healthy"]')).toBeTruthy();
-      expect(getByText('Admin Dashboard')).toBeTruthy();
-    });
-
-    test('user with undefined role still renders dropdown', () => {
-      const { container } = render(
-        <StudioDesktopHeader {...defaultProps} user={{}} />
-      );
-      expect(container.querySelector('[data-testid="dropdown-menu"]')).toBeTruthy();
-    });
-
-    test('renders header as sticky with correct z-index class', () => {
-      const { container } = render(<StudioDesktopHeader {...defaultProps} />);
-      const header = container.querySelector('header');
-      expect(header?.className).toContain('sticky');
-      expect(header?.className).toContain('z-30');
-    });
-
-    test('header is hidden on mobile (hidden md:flex)', () => {
-      const { container } = render(<StudioDesktopHeader {...defaultProps} />);
-      const header = container.querySelector('header');
-      expect(header?.className).toContain('hidden');
-      expect(header?.className).toContain('md:flex');
-    });
-  });
-});