@carto/ps-react-ui 5.3.0 → 6.1.0

package/src/widgets/toolbar-actions/toolbar-actions.test.tsx

@@ -1,691 +0,0 @@
-import { describe, test, expect } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { ToolbarActions } from './toolbar-actions'
-import { IconButton, Divider } from '@mui/material'
-import { Tooltip } from '../../components/tooltip/tooltip'
-import {
-  FileDownloadOutlined,
-  ShareOutlined,
-  EditOutlined,
-  FilterListOutlined,
-} from '@mui/icons-material'
-
-describe('ToolbarActions', () => {
-  const createAction = (
-    key: string,
-    label: string,
-    Icon: React.ComponentType,
-  ) => (
-    <Tooltip key={key} title={label}>
-      <IconButton size='small' aria-label={label}>
-        <Icon />
-      </IconButton>
-    </Tooltip>
-  )
-
-  describe('data-toolbar-hidden filtering', () => {
-    test('filters children with data-toolbar-hidden from visible count', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        <Divider
-          key='divider-1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('share', 'Share', ShareOutlined),
-        <Divider
-          key='divider-2'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      // Should show trigger button because there are 3 visible actions (download, share, edit)
-      // even though total children count is 5
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButton).toBeTruthy()
-
-      // Preview should include first 2 visible actions plus divider between them
-      // (Download, Divider, Share - stops after counting 2 non-hidden actions)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-
-      // Edit button should also be present (in the expanded section)
-      const editButtons = screen.getAllByLabelText('Edit')
-      expect(editButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('includes data-toolbar-hidden children in preview between visible actions', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        <Divider
-          key='divider-1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-          data-testid='divider-1'
-        />,
-        createAction('share', 'Share', ShareOutlined),
-        <Divider
-          key='divider-2'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-          data-testid='divider-2'
-        />,
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      const { container } = render(
-        <ToolbarActions visibleCount={2}>{children}</ToolbarActions>,
-      )
-
-      // With visibleCount={2}, preview should include:
-      // Download, Divider-1, Share (counting 2 visible actions, including divider between them)
-      // Hidden: Divider-2, Edit
-
-      // First divider should be visible (in both preview and expanded)
-      const allDividers = container.querySelectorAll(
-        '[data-toolbar-hidden="true"]',
-      )
-      expect(allDividers.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('includes hidden children in expanded view', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        <Divider
-          key='divider-1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('share', 'Share', ShareOutlined),
-        <Divider
-          key='divider-2'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      const { container } = render(
-        <ToolbarActions visibleCount={2}>{children}</ToolbarActions>,
-      )
-
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      fireEvent.click(triggerButton)
-
-      // After expanding, all children including dividers should be present
-      // Check for dividers with data-toolbar-hidden attribute
-      // Note: dividers appear in both preview and expanded sections
-      // Preview: Divider-1 (between Download and Share)
-      // Expanded: Divider-1 and Divider-2 (all dividers)
-      // Total: 3 dividers with data-toolbar-hidden attribute
-      const dividers = container.querySelectorAll(
-        '[data-toolbar-hidden="true"]',
-      )
-      expect(dividers.length).toBe(3) // Divider-1 (preview) + Divider-1 + Divider-2 (expanded)
-    })
-
-    test('does not show trigger when only hidden children exceed visibleCount', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        <Divider
-          key='divider-1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        <Divider
-          key='divider-2'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      // Should not show trigger button because there are only 2 visible actions
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-
-      // Both visible actions should be shown (appear in both preview and hidden expanded sections)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-    })
-  })
-
-  describe('visibleCount behavior', () => {
-    test('shows all actions when visibleCount is undefined', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-        createAction('filter', 'Filter', FilterListOutlined),
-      ]
-
-      render(
-        <ToolbarActions visibleCount={undefined}>{children}</ToolbarActions>,
-      )
-
-      // Should not show trigger button
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-
-      // All actions should be visible (appear in both preview and hidden expanded sections)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      const editButtons = screen.getAllByLabelText('Edit')
-      const filterButtons = screen.getAllByLabelText('Filter')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-      expect(editButtons.length).toBeGreaterThanOrEqual(1)
-      expect(filterButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('shows trigger when visibleCount is 1 and there are 2+ actions', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={1}>{children}</ToolbarActions>)
-
-      // Should show trigger button
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButton).toBeTruthy()
-
-      // Download action should be visible (appears in both preview and expanded)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-
-      // Share button exists in the expanded section
-      const shareButtons = screen.getAllByLabelText('Share')
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('shows trigger when visibleCount is 2 and there are 3+ actions', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      // Should show trigger button
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButton).toBeTruthy()
-
-      // First two actions should be visible (appear in both preview and expanded)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('does not show trigger when actions equal visibleCount', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      // Should not show trigger button
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-
-      // Both actions should be visible (appear in both preview and hidden expanded sections)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('does not show trigger when actions are less than visibleCount', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      // Should not show trigger button
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-
-      // Single action should be visible (appears in both preview and hidden expanded sections)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-    })
-  })
-
-  describe('trigger button behavior', () => {
-    test('trigger button appears when there are more visible actions than visibleCount', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButton).toBeTruthy()
-    })
-
-    test('trigger button does not appear when visibleCount is undefined', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(
-        <ToolbarActions visibleCount={undefined}>{children}</ToolbarActions>,
-      )
-
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-    })
-
-    test('clicking trigger button expands the actions panel', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-
-      // Before clicking, trigger button should not have data-active
-      expect(triggerButton.getAttribute('data-active')).toBe('false')
-
-      fireEvent.click(triggerButton)
-
-      // After clicking, trigger button should have data-active
-      expect(triggerButton.getAttribute('data-active')).toBe('true')
-
-      // Button should now show close label
-      const closeButton = screen.getByRole('button', { name: /close/i })
-      expect(closeButton).toBeTruthy()
-    })
-
-    test('clicking trigger button again collapses the actions panel', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-
-      // Expand
-      fireEvent.click(triggerButton)
-      expect(triggerButton.getAttribute('data-active')).toBe('true')
-
-      // Collapse
-      fireEvent.click(triggerButton)
-      expect(triggerButton.getAttribute('data-active')).toBe('false')
-
-      // Button should show trigger label again
-      const reopenButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      expect(reopenButton).toBeTruthy()
-    })
-
-    test('uses custom labels when provided', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(
-        <ToolbarActions
-          visibleCount={2}
-          labels={{ trigger: 'Show options', close: 'Hide options' }}
-        >
-          {children}
-        </ToolbarActions>,
-      )
-
-      const triggerButton = screen.getByRole('button', {
-        name: /show options/i,
-      })
-      expect(triggerButton).toBeTruthy()
-
-      fireEvent.click(triggerButton)
-
-      const closeButton = screen.getByRole('button', { name: /hide options/i })
-      expect(closeButton).toBeTruthy()
-    })
-  })
-
-  describe('childrenPreview behavior', () => {
-    test('childrenPreview shows only visible children up to visibleCount', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-        createAction('filter', 'Filter', FilterListOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={2}>{children}</ToolbarActions>)
-
-      // Only first 2 should be in preview
-      // Note: Download and Share appear in both preview and expanded sections
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-
-      // Edit and Filter should also be in expanded section
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      fireEvent.click(triggerButton)
-
-      // Now all should be visible
-      const editButtons = screen.getAllByLabelText('Edit')
-      const filterButtons = screen.getAllByLabelText('Filter')
-      expect(editButtons.length).toBeGreaterThanOrEqual(1)
-      expect(filterButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('childrenPreview includes hidden children but does not count them', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        <Divider
-          key='divider-1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      const { container } = render(
-        <ToolbarActions visibleCount={2}>{children}</ToolbarActions>,
-      )
-
-      // Preview should show: Download, Divider, Share (2 visible actions counted, divider included)
-      // Hidden: Edit action
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-
-      // Divider with data-toolbar-hidden should be in preview (appears in both preview and expanded)
-      const allDividers = container.querySelectorAll(
-        '[data-toolbar-hidden="true"]',
-      )
-      expect(allDividers.length).toBeGreaterThanOrEqual(1)
-
-      // Edit button should also be present in expanded section
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      fireEvent.click(triggerButton)
-
-      const editButtons = screen.getAllByLabelText('Edit')
-      expect(editButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('childrenPreview shows all visible children when visibleCount is undefined', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-        createAction('edit', 'Edit', EditOutlined),
-      ]
-
-      render(
-        <ToolbarActions visibleCount={undefined}>{children}</ToolbarActions>,
-      )
-
-      // All actions should be in preview (no trigger button)
-      // Actions appear in both preview and hidden expanded sections
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      const editButtons = screen.getAllByLabelText('Edit')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-      expect(editButtons.length).toBeGreaterThanOrEqual(1)
-
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-    })
-  })
-
-  describe('edge cases', () => {
-    test('renders nothing when children array is empty', () => {
-      const { container } = render(<ToolbarActions>{[]}</ToolbarActions>)
-      expect(container.firstChild).toBeNull()
-    })
-
-    test('renders nothing when children is null', () => {
-      const { container } = render(<ToolbarActions>{null}</ToolbarActions>)
-      expect(container.firstChild).toBeNull()
-    })
-
-    test('handles single child (not array)', () => {
-      const child = createAction('download', 'Download', FileDownloadOutlined)
-
-      render(<ToolbarActions visibleCount={2}>{child}</ToolbarActions>)
-
-      // Should appear in both preview and expanded sections (even though expanded is hidden)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-    })
-
-    test('handles all children being hidden', () => {
-      const children = [
-        <Divider
-          key='divider-1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        <Divider
-          key='divider-2'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-      ]
-
-      const { container } = render(
-        <ToolbarActions visibleCount={2}>{children}</ToolbarActions>,
-      )
-
-      // Component still renders container even when no visible children
-      // (it only checks children.length, not visibleChildren.length)
-      // This test documents the current behavior
-      expect(container.firstChild).toBeTruthy()
-
-      // But there should be no trigger button since visibleChildren.length is 0
-      const triggerButtons = screen.queryAllByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButtons.length).toBe(0)
-    })
-
-    test('correctly counts when mix of hidden and visible children', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        <Divider
-          key='d1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('share', 'Share', ShareOutlined),
-        <Divider
-          key='d2'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('edit', 'Edit', EditOutlined),
-        <Divider
-          key='d3'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('filter', 'Filter', FilterListOutlined),
-      ]
-
-      render(<ToolbarActions visibleCount={3}>{children}</ToolbarActions>)
-
-      // Should show trigger because there are 4 visible actions > 3
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButton).toBeTruthy()
-
-      // Preview should show first 3 visible actions + dividers between them
-      // (Download, Divider, Share, Divider, Edit - stops after counting 3 non-hidden)
-      const downloadButtons = screen.getAllByLabelText('Download')
-      const shareButtons = screen.getAllByLabelText('Share')
-      const editButtons = screen.getAllByLabelText('Edit')
-      expect(downloadButtons.length).toBeGreaterThanOrEqual(1)
-      expect(shareButtons.length).toBeGreaterThanOrEqual(1)
-      expect(editButtons.length).toBeGreaterThanOrEqual(1)
-    })
-
-    test('documentation example: visibleCount={2} with [Action1, Divider, Action2, Divider, Action3]', () => {
-      const children = [
-        createAction('action1', 'Action 1', FileDownloadOutlined),
-        <Divider
-          key='divider-1'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('action2', 'Action 2', ShareOutlined),
-        <Divider
-          key='divider-2'
-          orientation='vertical'
-          flexItem
-          data-toolbar-hidden
-        />,
-        createAction('action3', 'Action 3', EditOutlined),
-      ]
-
-      const { container } = render(
-        <ToolbarActions visibleCount={2}>{children}</ToolbarActions>,
-      )
-
-      // Expected preview: Action1, Divider, Action2 (2 actions counted, divider included)
-      // Hidden: Divider, Action3
-
-      // Should show trigger button since we have 3 visible actions > 2
-      const triggerButton = screen.getByRole('button', {
-        name: /more actions/i,
-      })
-      expect(triggerButton).toBeTruthy()
-
-      // Action1 and Action2 should be visible
-      const action1Buttons = screen.getAllByLabelText('Action 1')
-      const action2Buttons = screen.getAllByLabelText('Action 2')
-      expect(action1Buttons.length).toBeGreaterThanOrEqual(1)
-      expect(action2Buttons.length).toBeGreaterThanOrEqual(1)
-
-      // At least one divider with data-toolbar-hidden should be rendered
-      const dividers = container.querySelectorAll(
-        '[data-toolbar-hidden="true"]',
-      )
-      expect(dividers.length).toBeGreaterThanOrEqual(1)
-
-      // Action3 should be in expanded section
-      const action3Buttons = screen.getAllByLabelText('Action 3')
-      expect(action3Buttons.length).toBeGreaterThanOrEqual(1)
-    })
-  })
-
-  describe('direction prop', () => {
-    test('applies correct flex direction for left expansion', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-      ]
-
-      const { container } = render(
-        <ToolbarActions direction='left'>{children}</ToolbarActions>,
-      )
-
-      const root = container.firstChild as HTMLElement
-      expect(root).toBeTruthy()
-      // Check that the style contains row-reverse
-      const style = window.getComputedStyle(root)
-      expect(style.flexDirection).toBe('row-reverse')
-    })
-
-    test('applies correct flex direction for right expansion (default)', () => {
-      const children = [
-        createAction('download', 'Download', FileDownloadOutlined),
-        createAction('share', 'Share', ShareOutlined),
-      ]
-
-      const { container } = render(
-        <ToolbarActions direction='right'>{children}</ToolbarActions>,
-      )
-
-      const root = container.firstChild as HTMLElement
-      expect(root).toBeTruthy()
-      const style = window.getComputedStyle(root)
-      expect(style.flexDirection).toBe('row')
-    })
-  })
-})