@libredb/studio 0.9.7

package/tests/components/schema-explorer/TableItem.test.tsx

@@ -0,0 +1,415 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
+import { cleanup, fireEvent, render, within } from '@testing-library/react';
+
+// ── Mocks ───────────────────────────────────────────────────────────────────
+
+const mockToastSuccess = mock((msg: string) => { void msg; });
+
+mock.module('sonner', () => ({
+  toast: { success: mockToastSuccess, error: mock(() => {}), info: mock(() => {}) },
+}));
+
+mock.module('framer-motion', () => ({
+  motion: new Proxy({}, {
+    get: () => (props: Record<string, unknown>) =>
+      React.createElement('div', props, props.children as React.ReactNode),
+  }),
+  AnimatePresence: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', {}, children),
+}));
+
+mock.module('@/components/ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', {}, children),
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', {}, children),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', { 'data-testid': 'dropdown' }, children),
+  DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) =>
+    React.createElement('div', { onClick, role: 'menuitem' }, children),
+  DropdownMenuSeparator: () => React.createElement('hr'),
+}));
+
+mock.module('@/components/ui/context-menu', () => ({
+  ContextMenu: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', {}, children),
+  ContextMenuTrigger: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', {}, children),
+  ContextMenuContent: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', { 'data-testid': 'context-menu' }, children),
+  ContextMenuItem: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) =>
+    React.createElement('div', { onClick, role: 'menuitem' }, children),
+  ContextMenuSeparator: () => React.createElement('hr'),
+}));
+
+mock.module('@/components/schema-explorer/ColumnList', () => ({
+  ColumnList: ({ columns, indexes }: { columns: unknown[]; indexes: unknown[] }) =>
+    React.createElement('div', { 'data-testid': 'column-list' }, `${columns.length} cols, ${indexes.length} idx`),
+}));
+
+// ── Imports after mocks ─────────────────────────────────────────────────────
+
+import { TableItem } from '@/components/schema-explorer/TableItem';
+import type { TableSchema } from '@/lib/types';
+
+// ── Test data ───────────────────────────────────────────────────────────────
+
+const largeTable: TableSchema = {
+  name: 'users',
+  rowCount: 1500,
+  indexes: [{ name: 'idx_users_email', columns: ['email'], unique: true }],
+  columns: [
+    { name: 'id', type: 'SERIAL', nullable: false, isPrimary: true },
+    { name: 'email', type: 'VARCHAR(255)', nullable: true, isPrimary: false },
+  ],
+};
+
+const smallTable: TableSchema = {
+  name: 'settings',
+  rowCount: 42,
+  indexes: [],
+  columns: [
+    { name: 'key', type: 'TEXT', nullable: false, isPrimary: true },
+    { name: 'value', type: 'TEXT', nullable: true, isPrimary: false },
+  ],
+};
+
+const noRowCountTable: TableSchema = {
+  name: 'logs',
+  indexes: [],
+  columns: [
+    { name: 'id', type: 'SERIAL', nullable: false, isPrimary: true },
+  ],
+};
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+
+describe('TableItem', () => {
+  let mockWriteText: ReturnType<typeof mock>;
+
+  beforeEach(() => {
+    mockWriteText = mock(async (text: string) => { void text; });
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: { writeText: mockWriteText },
+      configurable: true,
+    });
+    mockToastSuccess.mockClear();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  // ── Rendering ─────────────────────────────────────────────────────────────
+
+  test('renders table name', () => {
+    const { queryByText } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    expect(queryByText('users')).not.toBeNull();
+  });
+
+  test('renders row count formatted as K for >= 1000', () => {
+    const { queryByText } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    expect(queryByText('1.5k')).not.toBeNull();
+  });
+
+  test('renders raw row count for < 1000', () => {
+    const { queryByText } = render(
+      <TableItem table={smallTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    expect(queryByText('42')).not.toBeNull();
+  });
+
+  test('does not render row count when undefined', () => {
+    const { queryByText } = render(
+      <TableItem table={noRowCountTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    // No row count text should be rendered
+    expect(queryByText(/^\d/)).toBeNull();
+  });
+
+  // ── Expand / Collapse ─────────────────────────────────────────────────────
+
+  test('hides ColumnList when collapsed', () => {
+    const { queryByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    expect(queryByTestId('column-list')).toBeNull();
+  });
+
+  test('shows ColumnList with columns and indexes when expanded', () => {
+    const { queryByTestId } = render(
+      <TableItem table={largeTable} isExpanded onToggle={mock(() => {})} isAdmin={false} />
+    );
+    const columnList = queryByTestId('column-list');
+    expect(columnList).not.toBeNull();
+    expect(columnList!.textContent).toContain('2 cols');
+    expect(columnList!.textContent).toContain('1 idx');
+  });
+
+  test('applies bg-accent/50 class when expanded', () => {
+    const { container } = render(
+      <TableItem table={largeTable} isExpanded onToggle={mock(() => {})} isAdmin={false} />
+    );
+    const row = container.querySelector('.bg-accent\\/50');
+    expect(row).not.toBeNull();
+  });
+
+  // ── onToggle ──────────────────────────────────────────────────────────────
+
+  test('calls onToggle when row is clicked', () => {
+    const onToggle = mock(() => {});
+    const { queryByText } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={onToggle} isAdmin={false} />
+    );
+    fireEvent.click(queryByText('users')!);
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Dropdown action callbacks ─────────────────────────────────────────────
+
+  test('onTableClick fires with table name on "Select Top 100" click', () => {
+    const onTableClick = mock((name: string) => { void name; });
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} onTableClick={onTableClick} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Select Top 100'));
+    expect(onTableClick).toHaveBeenCalledTimes(1);
+    expect(onTableClick.mock.calls[0][0]).toBe('users');
+  });
+
+  test('onGenerateSelect fires with table name on "Generate Query" click', () => {
+    const onGenerateSelect = mock((name: string) => { void name; });
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} onGenerateSelect={onGenerateSelect} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Generate Query'));
+    expect(onGenerateSelect).toHaveBeenCalledTimes(1);
+    expect(onGenerateSelect.mock.calls[0][0]).toBe('users');
+  });
+
+  test('copyToClipboard copies table name and shows toast on "Copy Name" click', () => {
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Copy Name'));
+    expect(mockWriteText).toHaveBeenCalledTimes(1);
+    expect(mockWriteText.mock.calls[0][0]).toBe('users');
+    expect(mockToastSuccess).toHaveBeenCalledTimes(1);
+    expect(mockToastSuccess.mock.calls[0][0]).toContain('copied to clipboard');
+  });
+
+  test('onProfileTable fires with table name on "Profile Table" click', () => {
+    const onProfileTable = mock((name: string) => { void name; });
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} onProfileTable={onProfileTable} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Profile Table'));
+    expect(onProfileTable).toHaveBeenCalledTimes(1);
+    expect(onProfileTable.mock.calls[0][0]).toBe('users');
+  });
+
+  test('onGenerateCode fires with table name on "Generate Code" click', () => {
+    const onGenerateCode = mock((name: string) => { void name; });
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} onGenerateCode={onGenerateCode} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Generate Code'));
+    expect(onGenerateCode).toHaveBeenCalledTimes(1);
+    expect(onGenerateCode.mock.calls[0][0]).toBe('users');
+  });
+
+  test('onGenerateTestData fires with table name on "Generate Test Data" click', () => {
+    const onGenerateTestData = mock((name: string) => { void name; });
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} onGenerateTestData={onGenerateTestData} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Generate Test Data'));
+    expect(onGenerateTestData).toHaveBeenCalledTimes(1);
+    expect(onGenerateTestData.mock.calls[0][0]).toBe('users');
+  });
+
+  // ── Admin-only actions ────────────────────────────────────────────────────
+
+  test('shows Analyze and Vacuum actions for admin', () => {
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    expect(dropdown.queryByText('Analyze Table')).not.toBeNull();
+    expect(dropdown.queryByText('Vacuum Table')).not.toBeNull();
+  });
+
+  test('hides Analyze and Vacuum actions for non-admin', () => {
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    expect(dropdown.queryByText('Analyze Table')).toBeNull();
+    expect(dropdown.queryByText('Vacuum Table')).toBeNull();
+  });
+
+  test('onOpenMaintenance fires with "tables" and table name on Analyze click', () => {
+    const onOpenMaintenance = mock((tab?: string, tbl?: string) => { void tab; void tbl; });
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin onOpenMaintenance={onOpenMaintenance} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Analyze Table'));
+    expect(onOpenMaintenance).toHaveBeenCalledTimes(1);
+    expect(onOpenMaintenance.mock.calls[0][0]).toBe('tables');
+    expect(onOpenMaintenance.mock.calls[0][1]).toBe('users');
+  });
+
+  test('onOpenMaintenance fires on Vacuum click', () => {
+    const onOpenMaintenance = mock((tab?: string, tbl?: string) => { void tab; void tbl; });
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin onOpenMaintenance={onOpenMaintenance} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Vacuum Table'));
+    expect(onOpenMaintenance).toHaveBeenCalledTimes(1);
+    expect(onOpenMaintenance.mock.calls[0][0]).toBe('tables');
+    expect(onOpenMaintenance.mock.calls[0][1]).toBe('users');
+  });
+
+  // ── Custom labels ─────────────────────────────────────────────────────────
+
+  test('uses custom labels from provider metadata', () => {
+    const labels = {
+      selectAction: 'Run db.find()',
+      generateAction: 'Build Aggregation',
+      entityName: 'Collection',
+      entityNamePlural: 'Collections',
+      rowName: 'document',
+      rowNamePlural: 'documents',
+      analyzeAction: 'Run Stats',
+      vacuumAction: 'Compact',
+      searchPlaceholder: 'Search collections...',
+      analyzeGlobalLabel: 'Analyze All',
+      analyzeGlobalTitle: 'Analyze',
+      analyzeGlobalDesc: 'Run stats on all',
+      vacuumGlobalLabel: 'Compact All',
+      vacuumGlobalTitle: 'Compact',
+      vacuumGlobalDesc: 'Compact all',
+    };
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin labels={labels} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    expect(dropdown.queryByText('Run db.find()')).not.toBeNull();
+    expect(dropdown.queryByText('Build Aggregation')).not.toBeNull();
+    expect(dropdown.queryByText('Run Stats')).not.toBeNull();
+    expect(dropdown.queryByText('Compact')).not.toBeNull();
+    // Default labels should not appear
+    expect(dropdown.queryByText('Select Top 100')).toBeNull();
+    expect(dropdown.queryByText('Generate Query')).toBeNull();
+  });
+
+  test('copyToClipboard uses custom entityName in toast', () => {
+    const labels = {
+      entityName: 'Collection',
+      entityNamePlural: 'Collections',
+      rowName: 'document',
+      rowNamePlural: 'documents',
+      selectAction: 'Select Top 100',
+      generateAction: 'Generate Query',
+      analyzeAction: 'Analyze Table',
+      vacuumAction: 'Vacuum Table',
+      searchPlaceholder: 'Search...',
+      analyzeGlobalLabel: 'Analyze All',
+      analyzeGlobalTitle: 'Analyze',
+      analyzeGlobalDesc: 'Run stats',
+      vacuumGlobalLabel: 'Compact All',
+      vacuumGlobalTitle: 'Compact',
+      vacuumGlobalDesc: 'Compact all',
+    };
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} labels={labels} />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    fireEvent.click(dropdown.getByText('Copy Name'));
+    expect(mockToastSuccess.mock.calls[0][0]).toContain('Collection');
+  });
+
+  // ── Callbacks not provided (optional chaining safety) ─────────────────────
+
+  test('does not crash when optional callbacks are not provided', () => {
+    const { getByTestId } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin />
+    );
+    const dropdown = within(getByTestId('dropdown'));
+    // Click all menu items without providing callbacks - should not throw
+    fireEvent.click(dropdown.getByText('Select Top 100'));
+    fireEvent.click(dropdown.getByText('Generate Query'));
+    fireEvent.click(dropdown.getByText('Profile Table'));
+    fireEvent.click(dropdown.getByText('Generate Code'));
+    fireEvent.click(dropdown.getByText('Generate Test Data'));
+    fireEvent.click(dropdown.getByText('Analyze Table'));
+    fireEvent.click(dropdown.getByText('Vacuum Table'));
+    // If we got here, no crash occurred
+    expect(true).toBe(true);
+  });
+
+  // ── Expanded state styling ────────────────────────────────────────────────
+
+  test('table name has text-foreground class when expanded', () => {
+    const { queryByText } = render(
+      <TableItem table={largeTable} isExpanded onToggle={mock(() => {})} isAdmin={false} />
+    );
+    const nameSpan = queryByText('users');
+    expect(nameSpan).not.toBeNull();
+    expect(nameSpan!.className).toContain('text-foreground');
+  });
+
+  test('table name has text-muted-foreground class when collapsed', () => {
+    const { queryByText } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    const nameSpan = queryByText('users');
+    expect(nameSpan).not.toBeNull();
+    expect(nameSpan!.className).toContain('text-muted-foreground');
+  });
+
+  // ── Context menu ──────────────────────────────────────────────────────────
+
+  test('renders context menu with same actions as dropdown', () => {
+    const { queryAllByText } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin />
+    );
+    // Each action should appear twice: once in dropdown, once in context menu
+    expect(queryAllByText('Select Top 100').length).toBe(2);
+    expect(queryAllByText('Generate Query').length).toBe(2);
+    expect(queryAllByText('Copy Name').length).toBe(2);
+    expect(queryAllByText('Profile Table').length).toBe(2);
+    expect(queryAllByText('Generate Code').length).toBe(2);
+    expect(queryAllByText('Generate Test Data').length).toBe(2);
+    expect(queryAllByText('Analyze Table').length).toBe(2);
+    expect(queryAllByText('Vacuum Table').length).toBe(2);
+  });
+
+  test('context menu actions are not duplicated for non-admin', () => {
+    const { queryAllByText } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />
+    );
+    // Standard actions appear twice (dropdown + context menu)
+    expect(queryAllByText('Select Top 100').length).toBe(2);
+    // Admin-only actions should not appear at all
+    expect(queryAllByText('Analyze Table').length).toBe(0);
+    expect(queryAllByText('Vacuum Table').length).toBe(0);
+  });
+});

package/tests/components/sidebar/ConnectionItem.test.tsx

@@ -0,0 +1,201 @@
+import '../../setup-dom';
+import '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import { mock } from 'bun:test';
+
+// Mock framer-motion with proper React elements (not plain objects)
+mock.module('framer-motion', () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const React = require('react');
+  const handler = {
+    get(_target: unknown, prop: string) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const MotionComponent = React.forwardRef(({ children, initial, animate, exit, variants, whileHover, whileTap, layoutId, transition, ...rest }: Record<string, unknown>, ref: React.Ref<HTMLElement>) => {
+        return React.createElement(prop, { ...rest, ref }, children);
+      });
+      MotionComponent.displayName = `Motion${prop}`;
+      return MotionComponent;
+    }
+  };
+  const MockAnimatePresence = ({ children }: Record<string, unknown>) => children;
+  MockAnimatePresence.displayName = 'AnimatePresence';
+  return {
+    motion: new Proxy({}, handler),
+    AnimatePresence: MockAnimatePresence,
+    useAnimation: () => ({ start: mock(() => {}), stop: mock(() => {}) }),
+    useInView: () => true,
+  };
+});
+
+// Mock db-ui-config
+mock.module('@/lib/db-ui-config', () => ({
+  getDBIcon: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    const MockDBIcon = (props: Record<string, unknown>) => React.createElement('span', { ...props, 'data-testid': 'db-icon' });
+    MockDBIcon.displayName = 'MockDBIcon';
+    return MockDBIcon;
+  },
+  getDBConfig: () => ({ icon: () => null, color: 'text-blue-400', label: 'PostgreSQL', defaultPort: '5432' }),
+  getDBColor: () => 'text-blue-400',
+}));
+
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import React from 'react';
+
+import { ConnectionItem } from '@/components/sidebar/ConnectionItem';
+import { mockPostgresConnection } from '../../fixtures/connections';
+
+// =============================================================================
+// ConnectionItem Tests
+// =============================================================================
+
+describe('ConnectionItem', () => {
+  const defaultOnSelect = mock(() => {});
+  const defaultOnDelete = mock(() => {});
+  const defaultOnEdit = mock(() => {});
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    defaultOnSelect.mockClear();
+    defaultOnDelete.mockClear();
+    defaultOnEdit.mockClear();
+  });
+
+  test('renders connection name', () => {
+    const { queryByText } = render(
+      <ConnectionItem
+        connection={mockPostgresConnection}
+        isActive={false}
+        onSelect={defaultOnSelect}
+        onDelete={defaultOnDelete}
+      />
+    );
+
+    expect(queryByText('Test PostgreSQL')).not.toBeNull();
+  });
+
+  test('shows environment badge for non-other environments', () => {
+    // mockPostgresConnection has environment: 'development' => ENVIRONMENT_LABELS['development'] = 'DEV'
+    const { queryByText } = render(
+      <ConnectionItem
+        connection={mockPostgresConnection}
+        isActive={false}
+        onSelect={defaultOnSelect}
+        onDelete={defaultOnDelete}
+      />
+    );
+
+    expect(queryByText('DEV')).not.toBeNull();
+  });
+
+  test('does not show environment badge for "other" environment', () => {
+    const otherConn = {
+      ...mockPostgresConnection,
+      id: 'other-conn',
+      environment: 'other' as const,
+    };
+
+    const { queryByText } = render(
+      <ConnectionItem
+        connection={otherConn}
+        isActive={false}
+        onSelect={defaultOnSelect}
+        onDelete={defaultOnDelete}
+      />
+    );
+
+    // environment === 'other' is checked and badge won't render
+    expect(queryByText('PROD')).toBeNull();
+    expect(queryByText('DEV')).toBeNull();
+    expect(queryByText('STAGING')).toBeNull();
+    expect(queryByText('LOCAL')).toBeNull();
+  });
+
+  test('active state applies correct styling classes', () => {
+    const { container } = render(
+      <ConnectionItem
+        connection={mockPostgresConnection}
+        isActive={true}
+        onSelect={defaultOnSelect}
+        onDelete={defaultOnDelete}
+      />
+    );
+
+    // The active connection's outer div should contain the active class
+    const connectionDiv = container.firstElementChild;
+    expect(connectionDiv).not.toBeNull();
+    const className = connectionDiv?.className || '';
+    expect(className.includes('bg-blue-600/10')).toBe(true);
+  });
+
+  test('onSelect fires on click', () => {
+    const { container } = render(
+      <ConnectionItem
+        connection={mockPostgresConnection}
+        isActive={false}
+        onSelect={defaultOnSelect}
+        onDelete={defaultOnDelete}
+      />
+    );
+
+    // Click the outermost connection element (first child of container)
+    const connectionEl = container.firstElementChild!;
+    fireEvent.click(connectionEl);
+
+    expect(defaultOnSelect).toHaveBeenCalledTimes(1);
+    expect(defaultOnSelect).toHaveBeenCalledWith(mockPostgresConnection);
+  });
+
+  test('onEdit fires on edit button click with stopPropagation', () => {
+    const { container } = render(
+      <ConnectionItem
+        connection={mockPostgresConnection}
+        isActive={false}
+        onSelect={defaultOnSelect}
+        onDelete={defaultOnDelete}
+        onEdit={defaultOnEdit}
+      />
+    );
+
+    // Find buttons within this component's container
+    const buttons = container.querySelectorAll('button');
+    // First button is edit (Pencil), second is delete (Trash2)
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+    const editButton = buttons[0];
+    fireEvent.click(editButton);
+
+    expect(defaultOnEdit).toHaveBeenCalledTimes(1);
+    expect(defaultOnEdit).toHaveBeenCalledWith(mockPostgresConnection);
+    // onSelect should NOT have been called (stopPropagation)
+    expect(defaultOnSelect).toHaveBeenCalledTimes(0);
+  });
+
+  test('onDelete fires on delete button click with stopPropagation', () => {
+    const { container } = render(
+      <ConnectionItem
+        connection={mockPostgresConnection}
+        isActive={false}
+        onSelect={defaultOnSelect}
+        onDelete={defaultOnDelete}
+        onEdit={defaultOnEdit}
+      />
+    );
+
+    const buttons = container.querySelectorAll('button');
+    // Second button is delete (Trash2)
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+    const deleteButton = buttons[1];
+    fireEvent.click(deleteButton);
+
+    expect(defaultOnDelete).toHaveBeenCalledTimes(1);
+    expect(defaultOnDelete).toHaveBeenCalledWith(mockPostgresConnection.id);
+    // onSelect should NOT have been called (stopPropagation)
+    expect(defaultOnSelect).toHaveBeenCalledTimes(0);
+  });
+});