@yuno-payments/dashboard-design-system 0.0.1

package/src/components/organisms/dropdown/dropdown.test.tsx

@@ -0,0 +1,390 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import '@testing-library/jest-dom'
+import { Dropdown } from './index'
+
+const mockFn = () => vi.fn()
+
+const mockInitialData = [
+  {
+    header: 'Main Category',
+    type: 'checkbox' as const,
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ],
+  },
+  {
+    header: 'Secondary Category',
+    options: [
+      { label: 'Option A', value: 'optionA' },
+      { label: 'Option B', value: 'optionB' },
+    ],
+  },
+]
+
+const mockRadioButtonData = [
+  {
+    header: 'Radio Options',
+    type: 'radiobutton' as const,
+    options: [
+      { label: 'Juan', value: 'Juan' },
+      { label: 'Rodrigo', value: 'Rodrigo' },
+      { label: 'Federico', value: 'Federico', disabled: true },
+      { label: 'Nahuel', value: 'Nahuel' },
+    ],
+  },
+]
+
+const mockNestedData = [
+  {
+    header: 'Nested Options',
+    options: [
+      {
+        label: 'Cuentas test',
+        value: 'cuentas-test',
+        options: [
+          { label: 'Juan', value: 'Juan' },
+          { label: 'Rodrigo', value: 'Rodrigo' },
+        ],
+      },
+      {
+        label: 'Cuentas Yuno',
+        value: 'cuentas-yuno',
+        options: [
+          { label: 'Omelia', value: 'Omelia' },
+          { label: 'Federico', value: 'Federico', disabled: true },
+        ],
+      },
+    ],
+  },
+]
+
+const mockTwoLevelsData = [
+  {
+    header: 'Two Level Options',
+    options: [
+      {
+        label: 'Cuentas test',
+        value: 'cuentas-test',
+        options: [
+          {
+            label: 'Cuentas Yuno',
+            value: 'cuentas-yuno',
+            options: [
+              { label: 'Omelia', value: 'Omelia' },
+              { label: 'Federico', value: 'Federico' },
+            ],
+          },
+          {
+            label: 'Cuentas Avianca',
+            value: 'cuentas-avianca',
+            options: [
+              { label: 'Tom', value: 'Tom' },
+              { label: 'Bruno', value: 'Bruno', disabled: true },
+              { label: 'Zac', value: 'Zac' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const setup = (props = {}) => {
+  const defaultProps = {
+    onChangeSelected: mockFn(),
+    initialData: mockInitialData,
+    placeholder: 'Select an option',
+    onlyOneValue: true,
+    disabled: false,
+    showSearchBar: false,
+    initialDataSelected: [],
+  }
+  
+  return render(<Dropdown {...defaultProps} {...props} />)
+}
+
+describe('Dropdown', () => {
+  it('renders with placeholder', () => {
+    setup({})
+    expect(screen.getByText('Select an option')).toBeInTheDocument()
+  })
+
+  it('opens dropdown on click', async () => {
+    setup({})
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+    
+    await waitFor(() => {
+      expect(screen.getByTestId('dropdown-list-popper')).toBeInTheDocument()
+    })
+  })
+
+  it('selects an option in single-select mode', async () => {
+    const onChangeSelected = mockFn()
+    setup({ onChangeSelected })
+
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dropdown-list-popper')).toBeInTheDocument()
+    })
+
+    const option = screen.getByText('Option 1')
+    fireEvent.click(option)
+
+    expect(onChangeSelected).toHaveBeenCalledWith(['option1'])
+  })
+
+  it('selects multiple options in multi-select mode', async () => {
+    const onChangeSelected = mockFn()
+    setup({ onChangeSelected, onlyOneValue: false })
+
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dropdown-list-popper')).toBeInTheDocument()
+    })
+
+    const option1 = screen.getByText('Option 1')
+    const option2 = screen.getByText('Option 2')
+    
+    fireEvent.click(option1)
+    fireEvent.click(option2)
+
+    expect(onChangeSelected).toHaveBeenCalledWith(['option1'])
+    expect(onChangeSelected).toHaveBeenCalledWith(['option1', 'option2'])
+  })
+
+  it('disables dropdown when disabled prop is true', () => {
+    setup({ disabled: true })
+    const dropdown = screen.getByTestId('container-textfield')
+    expect(dropdown).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('shows search bar when showSearchBar is true', async () => {
+    setup({ showSearchBar: true })
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+    })
+  })
+
+  it('filters options when searching', async () => {
+    setup({ showSearchBar: true })
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+    })
+
+    const searchInput = screen.getByPlaceholderText('Search...')
+    fireEvent.change(searchInput, { target: { value: 'Option 1' } })
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 1')).toBeInTheDocument()
+      expect(screen.queryByText('Option 2')).not.toBeInTheDocument()
+    })
+  })
+
+  it('handles radiobutton type options', async () => {
+    const onChangeSelected = mockFn()
+    setup({ 
+      onChangeSelected, 
+      initialData: mockRadioButtonData,
+      onlyOneValue: true 
+    })
+
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByText('Juan')).toBeInTheDocument()
+    })
+
+    const option = screen.getByText('Juan')
+    fireEvent.click(option)
+
+    expect(onChangeSelected).toHaveBeenCalledWith(['Juan'])
+  })
+
+  it('handles nested options', async () => {
+    const onChangeSelected = mockFn()
+    setup({ 
+      onChangeSelected, 
+      initialData: mockNestedData,
+      onlyOneValue: false 
+    })
+
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByText('Cuentas test')).toBeInTheDocument()
+    })
+
+    const parentOption = screen.getByText('Cuentas test')
+    fireEvent.click(parentOption)
+
+    expect(onChangeSelected).toHaveBeenCalledWith(['Juan', 'Rodrigo'])
+  })
+
+  it('handles two-level nested options', async () => {
+    const onChangeSelected = mockFn()
+    setup({ 
+      onChangeSelected, 
+      initialData: mockTwoLevelsData,
+      onlyOneValue: false 
+    })
+
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByText('Cuentas test')).toBeInTheDocument()
+    })
+
+    const parentOption = screen.getByText('Cuentas test')
+    fireEvent.click(parentOption)
+
+    expect(onChangeSelected).toHaveBeenCalledWith(['Omelia', 'Federico', 'Tom', 'Zac'])
+  })
+
+  it('shows tags for selected items in multi-select mode', async () => {
+    setup({ 
+      onlyOneValue: false,
+      initialDataSelected: ['option1', 'option2']
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 1')).toBeInTheDocument()
+      expect(screen.getByText('Option 2')).toBeInTheDocument()
+    })
+  })
+
+  it('removes tag when clicking remove button', async () => {
+    const onChangeSelected = mockFn()
+    setup({ 
+      onChangeSelected,
+      onlyOneValue: false,
+      initialDataSelected: ['option1', 'option2']
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 1')).toBeInTheDocument()
+    })
+
+    const removeButtons = screen.getAllByRole('button', { name: /remove/i })
+    fireEvent.click(removeButtons[0])
+
+    expect(onChangeSelected).toHaveBeenCalledWith(['option2'])
+  })
+
+  it('closes dropdown when clicking outside', async () => {
+    setup({})
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dropdown-list-popper')).toBeInTheDocument()
+    })
+
+    fireEvent.mouseDown(document.body)
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('dropdown-list-popper')).not.toBeInTheDocument()
+    })
+  })
+
+  it('closes dropdown when pressing Escape key', async () => {
+    setup({})
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dropdown-list-popper')).toBeInTheDocument()
+    })
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('dropdown-list-popper')).not.toBeInTheDocument()
+    })
+  })
+
+  it('shows "No results found" when search yields no results', async () => {
+    setup({ showSearchBar: true })
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+    })
+
+    const searchInput = screen.getByPlaceholderText('Search...')
+    fireEvent.change(searchInput, { target: { value: 'nonexistent' } })
+
+    await waitFor(() => {
+      expect(screen.getByText('No results found')).toBeInTheDocument()
+    })
+  })
+
+  it('displays section headers when provided', async () => {
+    setup({})
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByText('Main Category')).toBeInTheDocument()
+      expect(screen.getByText('Secondary Category')).toBeInTheDocument()
+    })
+  })
+
+  it('handles disabled options correctly', async () => {
+    setup({ initialData: mockRadioButtonData })
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByText('Federico')).toBeInTheDocument()
+    })
+
+    const disabledOption = screen.getByText('Federico').closest('[role="option"]')
+    expect(disabledOption).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('shows correct display value for single selection', async () => {
+    const onChangeSelected = mockFn()
+    setup({ onChangeSelected, showLabelOrValue: 'label' })
+
+    const dropdown = screen.getByTestId('container-textfield')
+    fireEvent.click(dropdown)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dropdown-list-popper')).toBeInTheDocument()
+    })
+
+    const option = screen.getByText('Option 1')
+    fireEvent.click(option)
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 1')).toBeInTheDocument()
+    })
+  })
+
+  it('shows count for multiple selections', async () => {
+    setup({ 
+      onlyOneValue: false,
+      initialDataSelected: ['option1', 'option2']
+    })
+
+    const dropdown = screen.getByTestId('container-textfield')
+    expect(dropdown.textContent).toContain('2 selected')
+  })
+})