@libredb/studio 0.9.7 → 0.9.12

package/tests/components/ConnectionModal.test.tsx

@@ -1,570 +0,0 @@
-import '../setup-dom';
-import '../helpers/mock-sonner';
-import '../helpers/mock-navigation';
-
-import { mock } from 'bun:test';
-import React from 'react';
-
-// ── Mock framer-motion before component imports ─────────────────────────────
-mock.module('framer-motion', () => {
-  const passthrough = ({ children, ...props }: Record<string, unknown>) =>
-    React.createElement('div', props, children as React.ReactNode);
-
-  return {
-    motion: new Proxy({}, {
-      get: () => passthrough,
-    }),
-    AnimatePresence: ({ children }: { children: React.ReactNode }) => children,
-    useAnimation: () => ({ start: mock(() => {}), stop: mock(() => {}) }),
-    useInView: () => true,
-  };
-});
-
-// ── Mock Drawer (vaul) ──────────────────────────────────────────────────────
-mock.module('@/components/ui/drawer', () => ({
-  Drawer: ({ open, children }: { open?: boolean; children: React.ReactNode }) => {
-    if (!open) return null;
-    return React.createElement('div', { 'data-testid': 'drawer' }, children);
-  },
-  DrawerContent: ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    React.createElement('div', { 'data-testid': 'drawer-content', className }, children),
-  DrawerHeader: ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    React.createElement('div', { 'data-testid': 'drawer-header', className }, children),
-  DrawerTitle: ({ children }: { children: React.ReactNode }) =>
-    React.createElement('h2', null, children),
-  DrawerDescription: ({ children }: { children: React.ReactNode }) =>
-    React.createElement('p', null, children),
-  DrawerFooter: ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    React.createElement('div', { 'data-testid': 'drawer-footer', className }, children),
-}));
-
-// ── Mock useIsMobile — tests always use Dialog (desktop) path ───────────────
-mock.module('@/hooks/use-mobile', () => ({
-  useIsMobile: () => false,
-}));
-
-// ── Mock Radix Dialog via @/components/ui/dialog ────────────────────────────
-mock.module('@/components/ui/dialog', () => ({
-  Dialog: ({ open, children }: { open?: boolean; children: React.ReactNode; onOpenChange?: (open: boolean) => void }) => {
-    if (!open) return null;
-    return React.createElement('div', { 'data-testid': 'dialog', 'data-open': open }, children);
-  },
-  DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    React.createElement('div', { 'data-testid': 'dialog-content', className }, children),
-  DialogHeader: ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    React.createElement('div', { 'data-testid': 'dialog-header', className }, children),
-  DialogTitle: ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    React.createElement('h2', { 'data-testid': 'dialog-title', className }, children),
-  DialogFooter: ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    React.createElement('div', { 'data-testid': 'dialog-footer', className }, children),
-  DialogDescription: ({ children }: { children: React.ReactNode }) =>
-    React.createElement('p', null, children),
-  DialogClose: ({ children }: { children: React.ReactNode }) =>
-    React.createElement('button', null, children),
-  DialogTrigger: ({ children }: { children: React.ReactNode }) => children,
-  DialogPortal: ({ children }: { children: React.ReactNode }) => children,
-  DialogOverlay: () => null,
-}));
-
-// ── Mock Shadcn UI primitives ───────────────────────────────────────────────
-mock.module('@/components/ui/button', () => ({
-  Button: ({ children, onClick, className, disabled, ...rest }: Record<string, unknown>) =>
-    React.createElement('button', { onClick: onClick as (() => void), className, disabled, ...rest }, children as React.ReactNode),
-}));
-
-mock.module('@/components/ui/input', () => ({
-  Input: (props: Record<string, unknown>) =>
-    React.createElement('input', props),
-}));
-
-mock.module('@/components/ui/label', () => ({
-  Label: ({ children, className, htmlFor }: Record<string, unknown>) =>
-    React.createElement('label', { className, htmlFor }, children as React.ReactNode),
-}));
-
-// ── Mock useConnectionForm hook ─────────────────────────────────────────────
-const mockSetType = mock(() => {});
-const mockSetName = mock(() => {});
-const mockSetHost = mock(() => {});
-const mockSetPort = mock(() => {});
-const mockSetUser = mock(() => {});
-const mockSetPassword = mock(() => {});
-const mockSetDatabase = mock(() => {});
-const mockSetConnectionString = mock(() => {});
-const mockSetMongoConnectionMode = mock(() => {});
-const mockSetEnvironment = mock(() => {});
-const mockSetTestResult = mock(() => {});
-const mockSetPasteInput = mock(() => {});
-const mockSetShowPasteInput = mock(() => {});
-const mockSetShowSSL = mock(() => {});
-const mockSetSSLMode = mock(() => {});
-const mockSetCaCert = mock(() => {});
-const mockSetClientCert = mock(() => {});
-const mockSetClientKey = mock(() => {});
-const mockSetShowAdvanced = mock(() => {});
-const mockSetServiceName = mock(() => {});
-const mockSetInstanceName = mock(() => {});
-const mockSetShowSSH = mock(() => {});
-const mockSetSSHEnabled = mock(() => {});
-const mockSetSSHHost = mock(() => {});
-const mockSetSSHPort = mock(() => {});
-const mockSetSSHUsername = mock(() => {});
-const mockSetSSHAuthMethod = mock(() => {});
-const mockSetSSHPassword = mock(() => {});
-const mockSetSSHPrivateKey = mock(() => {});
-const mockSetSSHPassphrase = mock(() => {});
-const mockHandleTestConnection = mock(async () => {});
-const mockHandleConnect = mock(async () => {});
-const mockHandlePasteConnectionString = mock(() => {});
-
-let mockFormOverrides: Record<string, unknown> = {};
-
-function getDefaultForm() {
-  return {
-    type: 'postgres' as const,
-    setType: mockSetType,
-    name: '',
-    setName: mockSetName,
-    host: 'localhost',
-    setHost: mockSetHost,
-    port: '5432',
-    setPort: mockSetPort,
-    user: '',
-    setUser: mockSetUser,
-    password: '',
-    setPassword: mockSetPassword,
-    database: '',
-    setDatabase: mockSetDatabase,
-    connectionString: '',
-    setConnectionString: mockSetConnectionString,
-    mongoConnectionMode: 'host' as const,
-    setMongoConnectionMode: mockSetMongoConnectionMode,
-    environment: 'local' as const,
-    setEnvironment: mockSetEnvironment,
-    isTesting: false,
-    testResult: null,
-    setTestResult: mockSetTestResult,
-    pasteInput: '',
-    setPasteInput: mockSetPasteInput,
-    showPasteInput: false,
-    setShowPasteInput: mockSetShowPasteInput,
-    isEditMode: false,
-    showSSL: false,
-    setShowSSL: mockSetShowSSL,
-    sslMode: 'disable' as const,
-    setSSLMode: mockSetSSLMode,
-    caCert: '',
-    setCaCert: mockSetCaCert,
-    clientCert: '',
-    setClientCert: mockSetClientCert,
-    clientKey: '',
-    setClientKey: mockSetClientKey,
-    showAdvanced: false,
-    setShowAdvanced: mockSetShowAdvanced,
-    serviceName: '',
-    setServiceName: mockSetServiceName,
-    instanceName: '',
-    setInstanceName: mockSetInstanceName,
-    showSSH: false,
-    setShowSSH: mockSetShowSSH,
-    sshEnabled: false,
-    setSSHEnabled: mockSetSSHEnabled,
-    sshHost: '',
-    setSSHHost: mockSetSSHHost,
-    sshPort: '22',
-    setSSHPort: mockSetSSHPort,
-    sshUsername: '',
-    setSSHUsername: mockSetSSHUsername,
-    sshAuthMethod: 'password' as const,
-    setSSHAuthMethod: mockSetSSHAuthMethod,
-    sshPassword: '',
-    setSSHPassword: mockSetSSHPassword,
-    sshPrivateKey: '',
-    setSSHPrivateKey: mockSetSSHPrivateKey,
-    sshPassphrase: '',
-    setSSHPassphrase: mockSetSSHPassphrase,
-    handleTestConnection: mockHandleTestConnection,
-    handleConnect: mockHandleConnect,
-    handlePasteConnectionString: mockHandlePasteConnectionString,
-    dbTypes: [
-      { value: 'postgres', label: 'PostgreSQL', icon: () => React.createElement('span', null, 'PG'), color: 'text-blue-400' },
-      { value: 'mysql', label: 'MySQL', icon: () => React.createElement('span', null, 'MY'), color: 'text-amber-400' },
-      { value: 'sqlite', label: 'SQLite', icon: () => React.createElement('span', null, 'SL'), color: 'text-cyan-400' },
-      { value: 'mongodb', label: 'MongoDB', icon: () => React.createElement('span', null, 'MG'), color: 'text-emerald-400' },
-      { value: 'redis', label: 'Redis', icon: () => React.createElement('span', null, 'RD'), color: 'text-red-400' },
-    ],
-    ...mockFormOverrides,
-  };
-}
-
-mock.module('@/hooks/use-connection-form', () => ({
-  useConnectionForm: mock(() => getDefaultForm()),
-}));
-
-// ── Mock @/lib/db-ui-config ─────────────────────────────────────────────────
-mock.module('@/lib/db-ui-config', () => ({
-  getDBConfig: (type: string) => ({
-    icon: () => null,
-    color: 'text-blue-400',
-    label: type,
-    defaultPort: type === 'mysql' ? '3306' : type === 'mongodb' ? '27017' : '5432',
-    showConnectionStringToggle: type === 'mongodb',
-    connectionFields: ['host', 'port', 'user', 'password', 'database'],
-  }),
-  getDBIcon: () => () => null,
-  getDBColor: () => 'text-blue-400',
-  DB_UI_CONFIG: {},
-}));
-
-// ── Mock lucide-react icons as simple spans ─────────────────────────────────
-mock.module('lucide-react', () => {
-  return new Proxy({}, {
-    get: (_target, prop) => {
-      if (prop === '__esModule') return true;
-      return (props: Record<string, unknown>) =>
-        React.createElement('span', { 'data-icon': prop, className: props.className as string });
-    },
-  });
-});
-
-// ── Imports AFTER mocks ─────────────────────────────────────────────────────
-import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
-import { render, fireEvent, cleanup } from '@testing-library/react';
-import { ConnectionModal } from '@/components/ConnectionModal';
-
-// =============================================================================
-// ConnectionModal Tests
-// =============================================================================
-
-function createDefaultProps(overrides: Partial<Parameters<typeof ConnectionModal>[0]> = {}) {
-  return {
-    isOpen: true,
-    onClose: mock(() => {}),
-    onConnect: mock(() => {}),
-    editConnection: null,
-    ...overrides,
-  };
-}
-
-describe('ConnectionModal', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  beforeEach(() => {
-    mockFormOverrides = {};
-    mockSetType.mockClear();
-    mockSetName.mockClear();
-    mockSetHost.mockClear();
-    mockSetPort.mockClear();
-    mockSetShowPasteInput.mockClear();
-    mockSetShowSSL.mockClear();
-    mockHandleTestConnection.mockClear();
-    mockHandleConnect.mockClear();
-  });
-
-  // ── 1. Does not render when isOpen=false ────────────────────────────────────
-
-  test('does not render dialog content when isOpen is false', () => {
-    const props = createDefaultProps({ isOpen: false });
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('New Connection')).toBeNull();
-    expect(queryByText('Establish Connection')).toBeNull();
-  });
-
-  // ── 2. Renders dialog when isOpen=true ──────────────────────────────────────
-
-  test('renders dialog content when isOpen is true', () => {
-    const props = createDefaultProps({ isOpen: true });
-    const { queryAllByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryAllByText('New Connection').length).toBeGreaterThan(0);
-  });
-
-  // ── 3. Shows "New Connection" title for new connection ──────────────────────
-
-  test('shows "New Connection" title for new connection', () => {
-    const props = createDefaultProps({ editConnection: null });
-    const { queryAllByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryAllByText('New Connection').length).toBeGreaterThan(0);
-  });
-
-  // ── 4. Shows "Edit Connection" title when editConnection provided ───────────
-
-  test('shows "Edit Connection" title when editConnection provided', () => {
-    mockFormOverrides = { isEditMode: true };
-
-    const editConn = {
-      id: 'e1',
-      name: 'My PG',
-      type: 'postgres' as const,
-      host: 'localhost',
-      port: 5432,
-      createdAt: new Date(),
-    };
-    const props = createDefaultProps({ editConnection: editConn });
-    const { queryAllByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryAllByText('Edit Connection').length).toBeGreaterThan(0);
-  });
-
-  // ── 5. Database type buttons render ─────────────────────────────────────────
-
-  test('database type buttons render', () => {
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('PostgreSQL')).not.toBeNull();
-    expect(queryByText('MySQL')).not.toBeNull();
-    expect(queryByText('SQLite')).not.toBeNull();
-    expect(queryByText('MongoDB')).not.toBeNull();
-    expect(queryByText('Redis')).not.toBeNull();
-  });
-
-  // ── 6. Name input renders ──────────────────────────────────────────────────
-
-  test('connection name input renders', () => {
-    const props = createDefaultProps();
-    const { queryByText, container } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('Connection Name')).not.toBeNull();
-    const nameInput = container.querySelector('#name');
-    expect(nameInput).not.toBeNull();
-  });
-
-  // ── 7. Host/Port inputs render ─────────────────────────────────────────────
-
-  test('host and port inputs render', () => {
-    const props = createDefaultProps();
-    const { queryByText, container } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('Host & Instance')).not.toBeNull();
-    const hostInput = container.querySelector('#host');
-    const portInput = container.querySelector('#port');
-    expect(hostInput).not.toBeNull();
-    expect(portInput).not.toBeNull();
-  });
-
-  // ── 8. Test Connection button renders ──────────────────────────────────────
-
-  test('Test Connection button renders', () => {
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('Test Connection')).not.toBeNull();
-  });
-
-  // ── 9. Connect button renders ──────────────────────────────────────────────
-
-  test('Establish Connection button renders', () => {
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('Establish Connection')).not.toBeNull();
-  });
-
-  // ── 10. Save Changes button renders in edit mode ───────────────────────────
-
-  test('shows Save Changes button in edit mode', () => {
-    mockFormOverrides = { isEditMode: true };
-    const editConn = {
-      id: 'e1',
-      name: 'My PG',
-      type: 'postgres' as const,
-      host: 'localhost',
-      port: 5432,
-      createdAt: new Date(),
-    };
-    const props = createDefaultProps({ editConnection: editConn });
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('Save Changes')).not.toBeNull();
-  });
-
-  // ── 11. onClose fires when Cancel clicked ──────────────────────────────────
-
-  test('onClose fires when Cancel button clicked', () => {
-    const onClose = mock(() => {});
-    const props = createDefaultProps({ onClose });
-    const { getByText } = render(React.createElement(ConnectionModal, props));
-
-    const cancelBtn = getByText('Cancel');
-    fireEvent.click(cancelBtn);
-
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  // ── 12. SSL section expandable ─────────────────────────────────────────────
-
-  test('SSL / TLS section toggle button renders', () => {
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('SSL / TLS')).not.toBeNull();
-  });
-
-  // ── 13. SSH Tunnel section renders ─────────────────────────────────────────
-
-  test('SSH Tunnel section toggle button renders', () => {
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('SSH Tunnel')).not.toBeNull();
-  });
-
-  // ── 14. Paste URL button renders for new connection ────────────────────────
-
-  test('Paste URL button renders for new connection', () => {
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('Paste URL')).not.toBeNull();
-  });
-
-  // ── 15. Environment selector renders ───────────────────────────────────────
-
-  test('Environment selector renders with environment options', () => {
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-
-    expect(queryByText('Environment')).not.toBeNull();
-    expect(queryByText('PROD')).not.toBeNull();
-    expect(queryByText('STAGING')).not.toBeNull();
-    expect(queryByText('DEV')).not.toBeNull();
-    expect(queryByText('LOCAL')).not.toBeNull();
-  });
-
-  // ── 16. Paste URL shows input area when clicked ─────────────────────────
-
-  test('Paste URL shows paste input area when showPasteInput is true', () => {
-    mockFormOverrides = { showPasteInput: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Paste Connection URL')).not.toBeNull();
-    expect(queryByText('Parse')).not.toBeNull();
-  });
-
-  // ── 17. SSL expanded shows SSL fields ───────────────────────────────────
-
-  test('SSL section shows fields when expanded', () => {
-    mockFormOverrides = { showSSL: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('SSL Mode')).not.toBeNull();
-  });
-
-  // ── 18. SSH expanded shows SSH fields ───────────────────────────────────
-
-  test('SSH section shows fields when expanded', () => {
-    mockFormOverrides = { showSSH: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Enable SSH Tunnel')).not.toBeNull();
-  });
-
-  // ── 19. SSH enabled shows all SSH fields ─────────────────────────────────
-
-  test('SSH enabled shows SSH connection fields', () => {
-    mockFormOverrides = { showSSH: true, sshEnabled: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Enable SSH Tunnel')).not.toBeNull();
-  });
-
-  // ── 20. Test result success displayed ──────────────────────────────────
-
-  test('test result success message displayed', () => {
-    mockFormOverrides = { testResult: { success: true, message: 'Connection successful' } };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Connection successful')).not.toBeNull();
-  });
-
-  // ── 21. Test result failure displayed ──────────────────────────────────
-
-  test('test result failure message displayed', () => {
-    mockFormOverrides = { testResult: { success: false, message: 'Connection failed: timeout' } };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Connection failed: timeout')).not.toBeNull();
-  });
-
-  // ── 22. isTesting shows spinner state ─────────────────────────────────
-
-  test('Test Connection button shows testing state', () => {
-    mockFormOverrides = { isTesting: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Testing...')).not.toBeNull();
-  });
-
-  // ── 24. MongoDB connection string mode ──────────────────────────────────
-
-  test('MongoDB shows connection mode toggle', () => {
-    mockFormOverrides = { type: 'mongodb' };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Host / Port')).not.toBeNull();
-    expect(queryByText('Connection String')).not.toBeNull();
-  });
-
-  // ── 25. MongoDB connection string mode shows URI field ─────────────────
-
-  test('MongoDB connection string mode shows URI field', () => {
-    mockFormOverrides = { type: 'mongodb', mongoConnectionMode: 'connectionString' };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Connection URI')).not.toBeNull();
-  });
-
-  // ── 26. Advanced section for Oracle ────────────────────────────────────
-
-  test('Oracle type shows advanced section', () => {
-    mockFormOverrides = { type: 'oracle', showAdvanced: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Service Name')).not.toBeNull();
-  });
-
-  // ── 27. Advanced section for MSSQL ─────────────────────────────────────
-
-  test('MSSQL type shows instance name in advanced section', () => {
-    mockFormOverrides = { type: 'mssql', showAdvanced: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Instance Name')).not.toBeNull();
-  });
-
-  // ── 28. Paste URL hidden in edit mode ────────────────────────────────
-
-  test('Paste URL button hidden in edit mode', () => {
-    mockFormOverrides = { isEditMode: true };
-    const editConn = {
-      id: 'e1', name: 'My PG', type: 'postgres' as const,
-      host: 'localhost', port: 5432, createdAt: new Date(),
-    };
-    const props = createDefaultProps({ editConnection: editConn });
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('Paste URL')).toBeNull();
-  });
-
-  // ── 29. Supports URL text shown in paste area ────────────────────────
-
-  test('paste area shows supported URL protocols', () => {
-    mockFormOverrides = { showPasteInput: true };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText(/postgres:\/\//)).not.toBeNull();
-  });
-
-  // ── 30. SSL section for verify-ca shows client cert fields ─────────────
-
-  test('SSL verify-ca mode renders SSL section', () => {
-    mockFormOverrides = { showSSL: true, sslMode: 'verify-ca' };
-    const props = createDefaultProps();
-    const { queryByText } = render(React.createElement(ConnectionModal, props));
-    expect(queryByText('SSL Mode')).not.toBeNull();
-  });
-});