@carto/ps-react-ui 5.0.0-widgets.9 → 5.1.0

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

@@ -0,0 +1,691 @@
+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')
+    })
+  })
+})