@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/organisms/DropdownButton/DropdownButton.test.ts

@@ -0,0 +1,379 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
+import DropdownButton, { type NexxtDropdownButtonProps } from './DropdownButton.vue'
+
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-start'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+const Teleport = { template: '<div><slot /></div>' }
+const stubs = {
+  NexxtIcon: { template: '<span :data-name="name" />', props: ['name'] },
+  Teleport,
+}
+
+const defaultProps: NexxtDropdownButtonProps = {
+  label: 'Actions',
+  action: '/main-action',
+  options: [
+    { label: 'Edit', action: '/edit', icon: 'pencil' as IconName },
+    { label: 'Delete', action: '/delete', icon: 'trash-can' as IconName },
+  ],
+}
+
+const mountDropdown = (props: Partial<NexxtDropdownButtonProps> = {}) =>
+  mount(DropdownButton, {
+    props: { ...defaultProps, ...props } as typeof defaultProps,
+    global: { stubs },
+  })
+
+const iconOnlyDefaults = {
+  iconOnly: true as const,
+  triggerIcon: 'ellipsis-vertical' as IconName,
+  options: [
+    { label: 'Edit', action: '/edit', icon: 'pencil' as IconName },
+    { label: 'Delete', action: '/delete', icon: 'trash-can' as IconName },
+  ],
+}
+
+const mountIconOnly = (props: Partial<NexxtDropdownButtonProps> = {}) =>
+  mount(DropdownButton, {
+    props: { ...iconOnlyDefaults, ...props } as typeof iconOnlyDefaults,
+    global: { stubs },
+  })
+
+describe('DropdownButton', () => {
+  describe('checkbox options are controlled by the selected prop', () => {
+    const optionsWith = (selected: boolean) => [{ label: 'A', checkbox: true, selected }]
+
+    const openMenu = async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { label: 'Filter', options: optionsWith(true) } as never,
+        global: { stubs: { Teleport } },
+      })
+      await wrapper.find('button').trigger('click')
+      return wrapper
+    }
+
+    const checkedState = (wrapper: ReturnType<typeof mount>) =>
+      wrapper.findAll('[role="menuitemcheckbox"]')[0]?.attributes('aria-checked')
+
+    it('lets the parent reset an option the user toggled', async () => {
+      const wrapper = await openMenu()
+      expect(checkedState(wrapper)).toBe('true')
+
+      await wrapper.findAll('[role="menuitemcheckbox"]')[0]?.trigger('click')
+      expect(checkedState(wrapper)).toBe('false')
+
+      // The parent insists the option is selected again. Internal toggle state
+      // used to shadow the prop permanently, so this stayed 'false' and a
+      // filter menu could never be reset from outside.
+      await wrapper.setProps({ options: optionsWith(true) } as never)
+      expect(checkedState(wrapper)).toBe('true')
+    })
+
+    it('still responds immediately to a click before the parent echoes it back', async () => {
+      const wrapper = await openMenu()
+      await wrapper.findAll('[role="menuitemcheckbox"]')[0]?.trigger('click')
+      expect(checkedState(wrapper)).toBe('false')
+    })
+  })
+
+  describe('accessible name of the trigger', () => {
+    const ariaLabelOf = (props: Record<string, unknown>) =>
+      mount(DropdownButton, {
+        props: props as never,
+        global: { stubs: { Teleport } },
+      })
+        .find('button')
+        .attributes('aria-label')
+
+    it('never renders undefined when iconOnly has no label', () => {
+      const name = ariaLabelOf({ iconOnly: true, icon: 'ellipsis', options: [{ label: 'A' }] })
+      expect(name).toBeTruthy()
+      expect(name).not.toContain('undefined')
+      expect(name).toBe('Menu openen')
+    })
+
+    it('uses the visible label when there is one', () => {
+      expect(ariaLabelOf({ iconOnly: true, label: 'Acties', options: [{ label: 'A' }] })).toBe(
+        'Acties menu openen',
+      )
+    })
+
+    it('lets a consumer supply the accessible name', () => {
+      expect(
+        ariaLabelOf({ iconOnly: true, ariaLabel: 'Meer opties', options: [{ label: 'A' }] }),
+      ).toBe('Meer opties')
+    })
+  })
+
+  describe('rendering', () => {
+    it('renders the main label', () => {
+      const wrapper = mountDropdown()
+      expect(wrapper.text()).toContain('Actions')
+    })
+
+    it('renders the main icon when provided', () => {
+      const wrapper = mountDropdown({ icon: 'download' })
+      expect(wrapper.find('[data-name="download"]').exists()).toBe(true)
+    })
+
+    it('renders the primary variant by default', () => {
+      const wrapper = mountDropdown()
+      expect(wrapper.find('.bg-button-bg-primary-default').exists()).toBe(true)
+    })
+
+    it('renders the secondary variant when specified', () => {
+      const wrapper = mountDropdown({ variant: 'secondary' })
+      expect(wrapper.find('.bg-button-bg-secondary-default').exists()).toBe(true)
+    })
+
+    it('does not show the dropdown menu by default', () => {
+      const wrapper = mountDropdown()
+      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
+    })
+  })
+
+  describe('interactions', () => {
+    it('emits navigate when main button is clicked with a string action', async () => {
+      const wrapper = mountDropdown()
+      const mainButton = wrapper.findAll('button')[0]
+      await mainButton.trigger('click')
+
+      expect(wrapper.emitted('navigate')).toBeTruthy()
+      expect(wrapper.emitted('navigate')?.[0]).toEqual(['/main-action'])
+    })
+
+    it('executes function when main button is clicked with function action', async () => {
+      const action = vi.fn()
+      const wrapper = mountDropdown({ action })
+      const mainButton = wrapper.findAll('button')[0]
+      await mainButton.trigger('click')
+
+      expect(action).toHaveBeenCalled()
+      expect(wrapper.emitted('navigate')).toBeFalsy()
+    })
+
+    it('toggles the dropdown menu when chevron is clicked', async () => {
+      const wrapper = mountDropdown()
+      const toggleButton = wrapper.findAll('button')[1]
+
+      await toggleButton.trigger('click')
+      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
+      expect(toggleButton.attributes('aria-expanded')).toBe('true')
+
+      await toggleButton.trigger('click')
+      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
+      expect(toggleButton.attributes('aria-expanded')).toBe('false')
+    })
+
+    it('applies selected style to selected options', async () => {
+      const wrapper = mountDropdown({
+        options: [
+          { label: 'Edit', action: '/edit', selected: true },
+          { label: 'Delete', action: '/delete' },
+        ],
+      })
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const items = wrapper.findAll('[role="menuitem"]')
+      expect(items[0].classes()).toContain('bg-cornflower-blue-100')
+      expect(items[1].classes()).not.toContain('bg-cornflower-blue-100')
+    })
+
+    it('closes the dropdown and emits navigate when an option is clicked', async () => {
+      const wrapper = mountDropdown()
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const option = wrapper.find('[role="menuitem"]')
+      await option.trigger('click')
+
+      expect(wrapper.emitted('navigate')).toBeTruthy()
+      expect(wrapper.emitted('navigate')?.[0]).toEqual(['/edit'])
+      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
+    })
+  })
+
+  describe('placement', () => {
+    it('uses bottom-end placement by default (right-aligned)', () => {
+      const wrapper = mountDropdown()
+      const panelEl = wrapper.findComponent({ name: 'NexxtFloatingPanel' })
+      expect(panelEl.props('placement')).toBe('bottom-end')
+    })
+
+    it('uses bottom-start placement when placement is set to left', () => {
+      const wrapper = mountDropdown({ placement: 'left' })
+      const panelEl = wrapper.findComponent({ name: 'NexxtFloatingPanel' })
+      expect(panelEl.props('placement')).toBe('bottom-start')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has correct ARIA roles', async () => {
+      const wrapper = mountDropdown()
+      await wrapper.findAll('button')[1].trigger('click')
+
+      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
+      expect(wrapper.find('[role="menuitem"]').exists()).toBe(true)
+    })
+
+    it('has aria-haspopup on the toggle button', () => {
+      const wrapper = mountDropdown()
+      const toggleButton = wrapper.findAll('button')[1]
+      expect(toggleButton.attributes('aria-haspopup')).toBe('menu')
+    })
+  })
+
+  describe('grouped options', () => {
+    const groupedProps: Partial<NexxtDropdownButtonProps> = {
+      options: [
+        {
+          title: 'File',
+          items: [
+            { label: 'Download PDF', action: '/pdf', icon: 'file-pdf' as IconName },
+            { label: 'Download CSV', action: '/csv', icon: 'file-csv' as IconName },
+          ],
+        },
+        {
+          title: 'Manage',
+          items: [
+            { label: 'Edit', action: '/edit', icon: 'pencil' as IconName },
+            { label: 'Delete', action: '/delete', icon: 'trash-can' as IconName },
+          ],
+        },
+      ],
+    }
+
+    it('renders group titles', async () => {
+      const wrapper = mountDropdown(groupedProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const text = wrapper.text()
+      expect(text).toContain('File')
+      expect(text).toContain('Manage')
+    })
+
+    it('renders all items across groups', async () => {
+      const wrapper = mountDropdown(groupedProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const items = wrapper.findAll('[role="menuitem"]')
+      expect(items).toHaveLength(4)
+    })
+
+    it('emits navigate when a grouped option is clicked', async () => {
+      const wrapper = mountDropdown(groupedProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      await wrapper.find('[role="menuitem"]').trigger('click')
+
+      expect(wrapper.emitted('navigate')?.[0]).toEqual(['/pdf'])
+    })
+  })
+
+  describe('checkbox options', () => {
+    const checkboxProps: Partial<NexxtDropdownButtonProps> = {
+      options: [
+        { label: 'Name', action: vi.fn(), checkbox: true },
+        { label: 'Email', action: vi.fn(), checkbox: true },
+      ] as NexxtDropdownButtonProps['options'],
+    }
+
+    it('renders menuitemcheckbox role', async () => {
+      const wrapper = mountDropdown(checkboxProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      expect(wrapper.findAll('[role="menuitemcheckbox"]')).toHaveLength(2)
+    })
+
+    it('starts unchecked', async () => {
+      const wrapper = mountDropdown(checkboxProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const items = wrapper.findAll('[role="menuitemcheckbox"]')
+      expect(items[0].attributes('aria-checked')).toBe('false')
+      expect(items[1].attributes('aria-checked')).toBe('false')
+    })
+
+    it('toggles checked state on click', async () => {
+      const wrapper = mountDropdown(checkboxProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const item = wrapper.find('[role="menuitemcheckbox"]')
+      expect(item.attributes('aria-checked')).toBe('false')
+
+      await item.trigger('click')
+      expect(item.attributes('aria-checked')).toBe('true')
+
+      await item.trigger('click')
+      expect(item.attributes('aria-checked')).toBe('false')
+    })
+
+    it('keeps the dropdown open after clicking a checkbox item', async () => {
+      const wrapper = mountDropdown(checkboxProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      await wrapper.find('[role="menuitemcheckbox"]').trigger('click')
+
+      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
+    })
+
+    it('calls the action when a checkbox item is clicked', async () => {
+      const action = vi.fn()
+      const wrapper = mountDropdown({
+        options: [{ label: 'Name', action, checkbox: true }] as NexxtDropdownButtonProps['options'],
+      })
+      await wrapper.findAll('button')[1].trigger('click')
+      await wrapper.find('[role="menuitemcheckbox"]').trigger('click')
+
+      expect(action).toHaveBeenCalled()
+    })
+
+    it('emits checkboxChange with label and new checked value', async () => {
+      const wrapper = mountDropdown(checkboxProps)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const item = wrapper.find('[role="menuitemcheckbox"]')
+      await item.trigger('click')
+      expect(wrapper.emitted('checkboxChange')?.[0]).toEqual(['Name', true])
+
+      await item.trigger('click')
+      expect(wrapper.emitted('checkboxChange')?.[1]).toEqual(['Name', false])
+    })
+  })
+
+  describe('iconOnly', () => {
+    it('renders only a single button', () => {
+      const wrapper = mountIconOnly()
+      expect(wrapper.findAll('button')).toHaveLength(1)
+    })
+
+    it('does not render a label', () => {
+      const wrapper = mountIconOnly()
+      expect(wrapper.text()).toBe('')
+    })
+
+    it('does not render a separator', () => {
+      const wrapper = mountIconOnly()
+      expect(wrapper.find('.w-px').exists()).toBe(false)
+    })
+
+    it('toggles the dropdown when the button is clicked', async () => {
+      const wrapper = mountIconOnly()
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
+    })
+  })
+})