@jmruthers/pace-core 0.6.10 → 0.6.12

package/src/components/DataTable/ui/shared/ActionButtons.test.tsx

@@ -0,0 +1,921 @@
+/**
+ * @file ActionButtons Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for ActionButtons component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ActionButtons } from './ActionButtons';
+import type { Row } from '@tanstack/react-table';
+import type { DataTableAction, DataRecord } from '../../types';
+
+// Mock lucide-react icons - need to include ChevronDown for Select
+vi.mock('lucide-react', async () => {
+  const actual = await vi.importActual('lucide-react');
+  return {
+    ...actual,
+    MoreHorizontal: ({ className }: { className?: string }) => (
+      <div data-testid="more-horizontal-icon" className={className}>More</div>
+    ),
+  };
+});
+
+// Mock logger
+vi.mock('../../../utils/core/logger', () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, disabled, 'aria-label': ariaLabel, 'data-testid': testId, ...props }: any) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Mock Select components - use importActual to avoid missing icons
+vi.mock('../../Select/Select', async () => {
+  const actual = await vi.importActual('../../Select/Select');
+  return {
+    ...actual,
+    Select: ({ children }: { children: React.ReactNode }) => (
+      <form data-testid="select-root">{children}</form>
+    ),
+    SelectTrigger: ({ children, asChild, className, ...props }: any) =>
+      asChild
+        ? React.cloneElement(children as React.ReactElement, { ...props, 'data-testid': 'select-trigger' })
+        : <button data-testid="select-trigger" className={className}>{children}</button>,
+    SelectContent: ({ children, className }: any) => (
+      <div data-testid="select-content" className={className}>{children}</div>
+    ),
+    SelectItem: ({ children, onClick, value, 'data-testid': testId, className }: any) => (
+      <button
+        data-testid={testId || `select-item-action-${value?.replace('action-', '') || 'unknown'}`}
+        onClick={onClick}
+        value={value}
+        className={className}
+      >
+        {children}
+      </button>
+    ),
+  };
+});
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  active: boolean;
+}
+
+const createMockRow = (data: TestData): Row<TestData> => ({
+  original: data,
+  id: data.id,
+  index: 0,
+  depth: 0,
+  getValue: vi.fn(),
+  renderValue: vi.fn(),
+  getUniqueValues: vi.fn(),
+  toggleSelected: vi.fn(),
+  getIsSelected: vi.fn(() => false),
+  getIsSomeSelected: vi.fn(() => false),
+  getIsAllSubRowsSelected: vi.fn(() => false),
+  getCanSelect: vi.fn(() => true),
+  getCanSelectSubRows: vi.fn(() => false),
+  getCanMultiSelect: vi.fn(() => true),
+  getToggleSelectedHandler: vi.fn(),
+  getParentRow: vi.fn(),
+  getParentRows: vi.fn(),
+  subRows: [],
+  getLeafValues: vi.fn(),
+  getAllCells: vi.fn(),
+  getLeftVisibleCells: vi.fn(),
+  getRightVisibleCells: vi.fn(),
+  getVisibleCells: vi.fn(),
+  getCenterVisibleCells: vi.fn(),
+} as unknown as Row<TestData>);
+
+describe('[component] ActionButtons', () => {
+  const mockRow = createMockRow({ id: '1', name: 'Test User', active: true });
+  const defaultPermissions = {
+    canRead: { can: true, isLoading: false },
+    canCreate: { can: true, isLoading: false },
+    canUpdate: { can: true, isLoading: false },
+    canDelete: { can: true, isLoading: false },
+    canExport: { can: true, isLoading: false },
+    canImport: { can: true, isLoading: false },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('returns null when no actions provided', () => {
+      const { container } = render(
+        <ActionButtons row={mockRow} actions={[]} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders action buttons when actions are provided', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          testId: 'edit-action',
+        },
+        {
+          label: 'Delete',
+          onClick: vi.fn(),
+          testId: 'delete-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      expect(screen.getByTestId('edit-action')).toBeInTheDocument();
+      expect(screen.getByTestId('delete-action')).toBeInTheDocument();
+    });
+
+    it('renders action buttons with icons', () => {
+      const MockIcon = ({ className }: { className?: string }) => (
+        <span data-testid="edit-icon" className={className}>Icon</span>
+      );
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          icon: MockIcon,
+          onClick: vi.fn(),
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      expect(screen.getByTestId('edit-action')).toBeInTheDocument();
+      expect(screen.getByTestId('edit-icon')).toBeInTheDocument();
+    });
+
+    it('returns null when all actions are filtered out', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          hidden: true,
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onClick handler when action button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: handleClick,
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      const editButton = screen.getByTestId('edit-action');
+      await user.click(editButton);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(handleClick).toHaveBeenCalledWith(mockRow.original);
+    });
+
+    it('does not call onClick when action is disabled', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: handleClick,
+          disabled: true,
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      const editButton = screen.getByTestId('edit-action');
+      expect(editButton).toBeDisabled();
+      
+      await user.click(editButton);
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('handles multiple action clicks correctly', async () => {
+      const user = userEvent.setup();
+      const handleEdit = vi.fn();
+      const handleDelete = vi.fn();
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: handleEdit,
+          testId: 'edit-action',
+        },
+        {
+          label: 'Delete',
+          onClick: handleDelete,
+          testId: 'delete-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      await user.click(screen.getByTestId('edit-action'));
+      await user.click(screen.getByTestId('delete-action'));
+
+      expect(handleEdit).toHaveBeenCalledTimes(1);
+      expect(handleDelete).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Action Visibility', () => {
+    it('filters actions based on hidden property', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          hidden: false,
+          testId: 'edit-action',
+        },
+        {
+          label: 'Delete',
+          onClick: vi.fn(),
+          hidden: true,
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      expect(screen.getByTestId('edit-action')).toBeInTheDocument();
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+
+    it('filters Edit action when user lacks update permission', () => {
+      const permissions = {
+        ...defaultPermissions,
+        canUpdate: { can: false, isLoading: false },
+      };
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          testId: 'edit-action',
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          permissions={permissions}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('filters Delete action when user lacks delete permission', () => {
+      const permissions = {
+        ...defaultPermissions,
+        canDelete: { can: false, isLoading: false },
+      };
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Delete',
+          onClick: vi.fn(),
+          testId: 'delete-action',
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          permissions={permissions}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('evaluates visible condition function correctly', () => {
+      const visibleAction: DataTableAction<TestData> = {
+        label: 'Edit',
+        onClick: vi.fn(),
+        visible: (row) => row.active === true,
+        testId: 'edit-action',
+      };
+      const hiddenAction: DataTableAction<TestData> = {
+        label: 'Delete',
+        onClick: vi.fn(),
+        visible: (row) => row.active === false,
+      };
+
+      render(
+        <ActionButtons row={mockRow} actions={[visibleAction, hiddenAction]} />
+      );
+
+      expect(screen.getByTestId('edit-action')).toBeInTheDocument();
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+
+    it('evaluates visible boolean condition correctly', () => {
+      const visibleAction: DataTableAction<TestData> = {
+        label: 'Edit',
+        onClick: vi.fn(),
+        visible: true,
+        testId: 'edit-action',
+      };
+      const hiddenAction: DataTableAction<TestData> = {
+        label: 'Delete',
+        onClick: vi.fn(),
+        visible: false,
+      };
+
+      render(
+        <ActionButtons row={mockRow} actions={[visibleAction, hiddenAction]} />
+      );
+
+      expect(screen.getByTestId('edit-action')).toBeInTheDocument();
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Action Disabled State', () => {
+    it('evaluates disabled condition function correctly', () => {
+      const inactiveRow = createMockRow({ id: '2', name: 'Inactive User', active: false });
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          disabled: (row) => !row.active,
+          testId: 'edit-action',
+        },
+      ];
+
+      const { rerender } = render(
+        <ActionButtons row={inactiveRow} actions={mockActions} />
+      );
+      expect(screen.getByTestId('edit-action')).toBeDisabled();
+
+      rerender(<ActionButtons row={mockRow} actions={mockActions} />);
+      expect(screen.getByTestId('edit-action')).not.toBeDisabled();
+    });
+
+    it('evaluates disabled boolean condition correctly', () => {
+      const disabledAction: DataTableAction<TestData> = {
+        label: 'Edit',
+        onClick: vi.fn(),
+        disabled: true,
+        testId: 'edit-action',
+      };
+      const enabledAction: DataTableAction<TestData> = {
+        label: 'View',
+        onClick: vi.fn(),
+        disabled: false,
+        testId: 'view-action',
+      };
+
+      render(
+        <ActionButtons row={mockRow} actions={[disabledAction, enabledAction]} />
+      );
+
+      expect(screen.getByTestId('edit-action')).toBeDisabled();
+      expect(screen.getByTestId('view-action')).not.toBeDisabled();
+    });
+  });
+
+  describe('Hierarchical Actions', () => {
+    it('shows parent-specific actions only for parent rows', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Parent Action',
+          onClick: vi.fn(),
+          showForParent: true,
+          testId: 'parent-action',
+        },
+      ];
+
+      render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isParent={true}
+          hierarchical={true}
+        />
+      );
+
+      expect(screen.getByTestId('parent-action')).toBeInTheDocument();
+    });
+
+    it('hides parent-specific actions for child rows', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Parent Action',
+          onClick: vi.fn(),
+          showForParent: true,
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isParent={false}
+          hierarchical={true}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('shows child-specific actions only for child rows', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Child Action',
+          onClick: vi.fn(),
+          showForChild: true,
+          testId: 'child-action',
+        },
+      ];
+
+      render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isParent={false}
+          hierarchical={true}
+        />
+      );
+
+      expect(screen.getByTestId('child-action')).toBeInTheDocument();
+    });
+
+    it('hides child-specific actions for parent rows', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Child Action',
+          onClick: vi.fn(),
+          showForChild: true,
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isParent={true}
+          hierarchical={true}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('uses parent icon when provided for parent rows', () => {
+      const ParentIcon = () => <span data-testid="parent-icon">Parent</span>;
+      const ChildIcon = () => <span data-testid="child-icon">Child</span>;
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Action',
+          icon: ChildIcon,
+          parentIcon: ParentIcon,
+          onClick: vi.fn(),
+          showForParent: true,
+          testId: 'action',
+        },
+      ];
+
+      render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isParent={true}
+          hierarchical={true}
+        />
+      );
+
+      expect(screen.getByTestId('parent-icon')).toBeInTheDocument();
+      expect(screen.queryByTestId('child-icon')).not.toBeInTheDocument();
+    });
+
+    it('uses parent label when provided for parent rows', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Default Label',
+          parentLabel: 'Parent Label',
+          onClick: vi.fn(),
+          showForParent: true,
+          testId: 'action',
+        },
+      ];
+
+      render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isParent={true}
+          hierarchical={true}
+        />
+      );
+
+      const button = screen.getByTestId('action');
+      expect(button).toHaveAttribute('aria-label', 'Parent Label');
+    });
+  });
+
+  describe('Edit Mode Behavior', () => {
+    it('shows actions with showInEditMode true when in edit mode', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Save',
+          onClick: vi.fn(),
+          showInEditMode: true,
+          testId: 'save-action',
+        },
+      ];
+
+      render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isEditing={true}
+        />
+      );
+
+      expect(screen.getByTestId('save-action')).toBeInTheDocument();
+    });
+
+    it('hides actions with showInEditMode false when in edit mode', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          showInEditMode: false,
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isEditing={true}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('shows actions with hideInViewMode false when in view mode', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          hideInViewMode: false,
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isEditing={false}
+        />
+      );
+
+      expect(screen.getByTestId('edit-action')).toBeInTheDocument();
+    });
+
+    it('hides actions with hideInViewMode true when in view mode', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Save',
+          onClick: vi.fn(),
+          hideInViewMode: true,
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          isEditing={false}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe('Dropdown Menu for Many Actions', () => {
+    it('renders dropdown menu when more than 6 actions', () => {
+      const mockActions: DataTableAction<TestData>[] = Array.from({ length: 7 }, (_, i) => ({
+        label: `Action ${i + 1}`,
+        onClick: vi.fn(),
+        testId: `action-${i + 1}`,
+      }));
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      // Select component renders as form with select-root test ID
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+      expect(screen.getByText('Open menu')).toBeInTheDocument();
+    });
+
+    it('renders individual buttons when 6 or fewer actions', () => {
+      const mockActions: DataTableAction<TestData>[] = Array.from({ length: 6 }, (_, i) => ({
+        label: `Action ${i + 1}`,
+        onClick: vi.fn(),
+        testId: `action-${i + 1}`,
+      }));
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      expect(screen.queryByTestId('select')).not.toBeInTheDocument();
+      expect(screen.getByTestId('action-1')).toBeInTheDocument();
+      expect(screen.getByTestId('action-6')).toBeInTheDocument();
+    });
+
+    it('calls onClick when action in dropdown is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      const mockActions: DataTableAction<TestData>[] = Array.from({ length: 7 }, (_, i) => ({
+        label: `Action ${i + 1}`,
+        onClick: handleClick,
+        testId: `action-${i + 1}`,
+      }));
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      // Open the dropdown
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      // Wait for items to appear and find by text content
+      const firstAction = await screen.findByText('Action 1');
+      await user.click(firstAction);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(handleClick).toHaveBeenCalledWith(mockRow.original);
+    });
+  });
+
+  describe('Action Variants', () => {
+    it('applies destructive variant for destructive actions', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Delete',
+          onClick: vi.fn(),
+          variant: 'destructive',
+          testId: 'delete-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      const deleteButton = screen.getByTestId('delete-action');
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    it('applies default variant for non-destructive actions', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          variant: 'default',
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      const editButton = screen.getByTestId('edit-action');
+      expect(editButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides aria-label for action buttons', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      const editButton = screen.getByTestId('edit-action');
+      expect(editButton).toHaveAttribute('aria-label', 'Edit');
+    });
+
+    it('provides aria-disabled for disabled buttons', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          disabled: true,
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      const editButton = screen.getByTestId('edit-action');
+      expect(editButton).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('provides screen reader text for dropdown trigger', () => {
+      const mockActions: DataTableAction<TestData>[] = Array.from({ length: 7 }, (_, i) => ({
+        label: `Action ${i + 1}`,
+        onClick: vi.fn(),
+      }));
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      expect(screen.getByText('Open menu')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles undefined actions array gracefully', () => {
+      const { container } = render(
+        <ActionButtons row={mockRow} actions={undefined} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles actions with missing onClick gracefully', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Action',
+          onClick: undefined as any,
+          testId: 'action',
+        },
+      ];
+
+      // Should not throw error
+      expect(() => {
+        render(<ActionButtons row={mockRow} actions={mockActions} />);
+      }).not.toThrow();
+    });
+
+    it('handles rapid successive clicks', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: handleClick,
+          testId: 'edit-action',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      const editButton = screen.getByTestId('edit-action');
+      await user.click(editButton);
+      await user.click(editButton);
+      await user.click(editButton);
+
+      expect(handleClick).toHaveBeenCalledTimes(3);
+    });
+
+    it('handles complex visibility and disabled conditions together', () => {
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Visible Enabled',
+          onClick: vi.fn(),
+          visible: true,
+          disabled: false,
+          testId: 'visible-enabled',
+        },
+        {
+          label: 'Visible Disabled',
+          onClick: vi.fn(),
+          visible: true,
+          disabled: true,
+          testId: 'visible-disabled',
+        },
+        {
+          label: 'Hidden Action',
+          onClick: vi.fn(),
+          visible: false,
+          testId: 'hidden',
+        },
+      ];
+
+      render(
+        <ActionButtons row={mockRow} actions={mockActions} />
+      );
+
+      expect(screen.getByTestId('visible-enabled')).toBeInTheDocument();
+      expect(screen.getByTestId('visible-disabled')).toBeInTheDocument();
+      expect(screen.queryByTestId('hidden')).not.toBeInTheDocument();
+    });
+
+    it('respects permissions even when action is visible', () => {
+      const permissions = {
+        ...defaultPermissions,
+        canUpdate: { can: false, isLoading: false },
+      };
+
+      const mockActions: DataTableAction<TestData>[] = [
+        {
+          label: 'Edit',
+          onClick: vi.fn(),
+          visible: true,
+          testId: 'edit-action',
+        },
+      ];
+
+      const { container } = render(
+        <ActionButtons 
+          row={mockRow} 
+          actions={mockActions}
+          permissions={permissions}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+  });
+});