@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/molecules/ToggleGroup/ToggleGroup.test.ts

@@ -0,0 +1,578 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
+import ToggleGroup from './ToggleGroup.vue'
+import type { NexxtToggleGroupOption } from './ToggleGroup.vue'
+
+const labelOptions = [
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+  { value: 'year', label: 'Year' },
+]
+
+const iconOptions = [
+  { value: 'list', icon: 'list' as IconName },
+  { value: 'grid', icon: 'grid-2' as IconName },
+]
+
+const tooltipOptions = [
+  { value: 'list', icon: 'list' as IconName, tooltip: 'List view' },
+  { value: 'grid', icon: 'grid-2' as IconName, tooltip: 'Grid view' },
+]
+
+beforeEach(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+describe('ToggleGroup', () => {
+  it('renders a button for each option', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    expect(wrapper.findAll('button')).toHaveLength(labelOptions.length)
+  })
+
+  it('renders option labels', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    const buttons = wrapper.findAll('button')
+    expect(buttons[0].text()).toBe('Week')
+    expect(buttons[1].text()).toBe('Month')
+    expect(buttons[2].text()).toBe('Year')
+  })
+
+  it('renders option icons', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: iconOptions, modelValue: 'list' },
+    })
+
+    // each icon appears in both the button layer and the overlay layer
+    expect(wrapper.findAll('i')).toHaveLength(iconOptions.length * 2)
+  })
+
+  it('renders both icon and label when both are set', () => {
+    const combined = [
+      { value: 'list', icon: 'list' as IconName, label: 'List' },
+      { value: 'grid', icon: 'grid-2' as IconName, label: 'Grid' },
+    ]
+    const wrapper = mount(ToggleGroup, {
+      props: { options: combined, modelValue: 'list' },
+    })
+
+    // icons in both layers
+    expect(wrapper.findAll('i')).toHaveLength(combined.length * 2)
+    // labels in both layers
+    expect(wrapper.findAll('span.extra-small-semibold')).toHaveLength(combined.length * 2)
+  })
+
+  it('renders the label prop above the buttons', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week', label: 'Period' },
+    })
+
+    expect(wrapper.find('label').text()).toBe('Period')
+  })
+
+  it('hides the label visually but keeps it as the name with labelHidden', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week', label: 'Period', labelHidden: true },
+    })
+
+    const label = wrapper.get('label')
+    const labelledBy = wrapper.get('[role="toolbar"]').attributes('aria-labelledby')
+    expect(label.classes()).toContain('sr-only')
+    expect(labelledBy).toBe(label.attributes('id'))
+    expect(label.text()).toBe('Period')
+  })
+
+  it('shows the label by default', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week', label: 'Period' },
+    })
+
+    expect(wrapper.get('label').classes()).not.toContain('sr-only')
+  })
+
+  it('does not render a label element when label prop is omitted', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  it('emits update:modelValue with the clicked option value', async () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['month'])
+  })
+
+  // Not typography but contrast: gray-500 on the gray-100 track is about 1.6:1
+  // and reads as disabled; gray-700 reaches AA for the labels and 3:1 for icons.
+  it('draws unselected options in gray-700, gray-900 on hover', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: [...labelOptions.slice(0, 1), ...tooltipOptions], modelValue: 'week' },
+    })
+
+    wrapper.findAll('button').forEach((button) => {
+      expect(button.classes()).toEqual(
+        expect.arrayContaining(['text-gray-700', 'hover:text-gray-900']),
+      )
+      expect(button.classes()).not.toContain('text-gray-500')
+    })
+  })
+
+  it('renders the slider pill', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    expect(wrapper.find('.bg-white.absolute').exists()).toBe(true)
+  })
+
+  it('renders a tooltip when the tooltip property is set', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: tooltipOptions, modelValue: 'list' },
+    })
+
+    // reka-ui TooltipProvider is rendered when tooltip is present
+    expect(wrapper.findComponent({ name: 'TooltipProvider' }).exists()).toBe(true)
+  })
+
+  it('names an icon-only button with its tooltip, so axe finds discernible text', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: tooltipOptions, modelValue: 'list' },
+    })
+
+    const buttons = wrapper.findAll('button')
+    expect(buttons[0].attributes('aria-label')).toBe('List view')
+    expect(buttons[1].attributes('aria-label')).toBe('Grid view')
+  })
+
+  it('leaves a visible label as the accessible name instead of the tooltip', () => {
+    const labelledTooltipOptions = [
+      { value: 'list', icon: 'list' as IconName, label: 'List', tooltip: 'Show as a list' },
+    ]
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelledTooltipOptions, modelValue: 'list' },
+    })
+
+    expect(wrapper.find('button').attributes('aria-label')).toBeUndefined()
+  })
+
+  it('names an icon-only button with ariaLabel when there is no tooltip', () => {
+    const ariaLabelOptions = [
+      { value: 'list', icon: 'list' as IconName, ariaLabel: 'List view' },
+      { value: 'grid', icon: 'grid-2' as IconName, ariaLabel: 'Grid view' },
+    ]
+    const wrapper = mount(ToggleGroup, {
+      props: { options: ariaLabelOptions, modelValue: 'list' },
+    })
+
+    const buttons = wrapper.findAll('button')
+    expect(buttons[0].attributes('aria-label')).toBe('List view')
+    expect(buttons[1].attributes('aria-label')).toBe('Grid view')
+  })
+
+  it('prefers ariaLabel over the tooltip fallback', () => {
+    const bothOptions = [
+      {
+        value: 'list',
+        icon: 'list' as IconName,
+        tooltip: 'Show as a list',
+        ariaLabel: 'List view',
+      },
+    ]
+    const wrapper = mount(ToggleGroup, {
+      props: { options: bothOptions, modelValue: 'list' },
+    })
+
+    expect(wrapper.find('button').attributes('aria-label')).toBe('List view')
+  })
+
+  it('does not render a tooltip when the tooltip property is not set', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: iconOptions, modelValue: 'list' },
+    })
+
+    expect(wrapper.findComponent({ name: 'TooltipProvider' }).exists()).toBe(false)
+  })
+
+  it('does not render a tooltip for options without a tooltip alongside ones that have one', () => {
+    const mixedOptions = [
+      { value: 'list', icon: 'list' as IconName, tooltip: 'List view' },
+      { value: 'grid', icon: 'grid-2' as IconName },
+    ]
+
+    const wrapper = mount(ToggleGroup, {
+      props: { options: mixedOptions, modelValue: 'list' },
+    })
+
+    expect(wrapper.findAllComponents({ name: 'TooltipProvider' })).toHaveLength(1)
+  })
+
+  it('applies flex-1 to buttons when equalWidth is true (default)', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    const buttons = wrapper.findAll('button')
+    buttons.forEach((btn) => expect(btn.classes()).toContain('flex-1'))
+  })
+
+  it('does not apply flex-1 to buttons when equalWidth is false', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week', equalWidth: false },
+    })
+
+    const buttons = wrapper.findAll('button')
+    buttons.forEach((btn) => expect(btn.classes()).not.toContain('flex-1'))
+  })
+
+  it('applies flex-wrap to the container when equalWidth is false', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week', equalWidth: false },
+    })
+
+    expect(wrapper.find('.flex-wrap').exists()).toBe(true)
+  })
+
+  it('does not apply flex-wrap to the container when equalWidth is true (default)', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    expect(wrapper.find('.flex-wrap').exists()).toBe(false)
+  })
+
+  it('applies the default active color class to overlay spans when activeClass is not set', () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+
+    const overlaySpans = wrapper.findAll('[aria-hidden="true"] span[class*="rounded-lg"]')
+    overlaySpans.forEach((span) => expect(span.classes()).toContain('text-cornflower-blue-600'))
+  })
+
+  it('applies a custom activeClass to the matching overlay span', () => {
+    const colorOptions = [
+      { value: 'buy', label: 'Buy', activeClass: 'text-green-600' },
+      { value: 'rent', label: 'Rent', activeClass: 'text-orange-500' },
+    ]
+    const wrapper = mount(ToggleGroup, {
+      props: { options: colorOptions, modelValue: 'buy' },
+    })
+
+    const overlaySpans = wrapper.findAll('[aria-hidden="true"] span[class*="rounded-lg"]')
+    expect(overlaySpans[0].classes()).toContain('text-green-600')
+    expect(overlaySpans[0].classes()).not.toContain('text-cornflower-blue-600')
+    expect(overlaySpans[1].classes()).toContain('text-orange-500')
+    expect(overlaySpans[1].classes()).not.toContain('text-cornflower-blue-600')
+  })
+
+  describe('option slot', () => {
+    const slots = {
+      option: `<template #option="{ option, selected }">
+        <b data-testid="custom" :data-value="option.value" :data-selected="String(selected)" />
+      </template>`,
+    }
+
+    it('replaces the default icon and label in both layers', () => {
+      const wrapper = mount(ToggleGroup, {
+        props: { options: labelOptions, modelValue: 'week' },
+        slots,
+      })
+
+      // Once on the button, once in the overlay that shows the active colour.
+      expect(wrapper.findAll('[data-testid="custom"]')).toHaveLength(labelOptions.length * 2)
+      wrapper.findAll('button').forEach((button) => expect(button.text()).toBe(''))
+    })
+
+    it('passes the option and whether it is the selected one', () => {
+      const wrapper = mount(ToggleGroup, {
+        props: { options: labelOptions, modelValue: 'month' },
+        slots,
+      })
+
+      const onButtons = wrapper
+        .findAll('button [data-testid="custom"]')
+        .map((el) => [el.attributes('data-value'), el.attributes('data-selected')])
+      expect(onButtons).toEqual([
+        ['week', 'false'],
+        ['month', 'true'],
+        ['year', 'false'],
+      ])
+    })
+
+    it('renders inside a tooltip trigger too, and keeps the option names', () => {
+      const wrapper = mount(ToggleGroup, {
+        props: { options: tooltipOptions, modelValue: 'list' },
+        slots,
+      })
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons.map((button) => button.find('[data-testid="custom"]').exists())).toEqual([
+        true,
+        true,
+      ])
+      expect(buttons.map((button) => button.attributes('aria-label'))).toEqual([
+        'List view',
+        'Grid view',
+      ])
+    })
+
+    it('still selects on click', async () => {
+      const wrapper = mount(ToggleGroup, {
+        props: { options: labelOptions, modelValue: 'week' },
+        slots,
+      })
+
+      await wrapper.findAll('button')[2].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['year']])
+    })
+  })
+
+  describe('keyboard (roving tabindex)', () => {
+    const keyed = (modelValue: string, options: NexxtToggleGroupOption[] = labelOptions) =>
+      mount(ToggleGroup, { props: { options, modelValue }, attachTo: document.body })
+
+    const tabindexes = (wrapper: ReturnType<typeof keyed>) =>
+      wrapper.findAll('button').map((button) => button.attributes('tabindex'))
+
+    const press = async (wrapper: ReturnType<typeof keyed>, key: string) => {
+      const target = document.activeElement as HTMLElement
+      target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+      await wrapper.vm.$nextTick()
+    }
+
+    const focused = (wrapper: ReturnType<typeof keyed>) =>
+      wrapper.findAll('button').findIndex((button) => button.element === document.activeElement)
+
+    it('makes the selected option the only tab stop', () => {
+      const wrapper = keyed('month')
+
+      expect(tabindexes(wrapper)).toEqual(['-1', '0', '-1'])
+      wrapper.unmount()
+    })
+
+    it('makes the first option the tab stop when nothing is selected', () => {
+      const wrapper = keyed('none-of-them')
+
+      expect(tabindexes(wrapper)).toEqual(['0', '-1', '-1'])
+      wrapper.unmount()
+    })
+
+    it('moves the tab stop with the selection', async () => {
+      const wrapper = keyed('week')
+
+      await wrapper.setProps({ modelValue: 'year' })
+
+      expect(tabindexes(wrapper)).toEqual(['-1', '-1', '0'])
+      wrapper.unmount()
+    })
+
+    it('moves focus with the arrow keys and wraps at both ends', async () => {
+      const wrapper = keyed('week')
+      ;(wrapper.findAll('button')[0].element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowRight')
+      expect(focused(wrapper)).toBe(1)
+      await press(wrapper, 'ArrowDown')
+      expect(focused(wrapper)).toBe(2)
+      await press(wrapper, 'ArrowRight')
+      expect(focused(wrapper)).toBe(0)
+      await press(wrapper, 'ArrowLeft')
+      expect(focused(wrapper)).toBe(2)
+      await press(wrapper, 'ArrowUp')
+      expect(focused(wrapper)).toBe(1)
+      wrapper.unmount()
+    })
+
+    it('jumps to the first and last option with Home and End', async () => {
+      const wrapper = keyed('month')
+      ;(wrapper.findAll('button')[1].element as HTMLElement).focus()
+
+      await press(wrapper, 'End')
+      expect(focused(wrapper)).toBe(2)
+      await press(wrapper, 'Home')
+      expect(focused(wrapper)).toBe(0)
+      wrapper.unmount()
+    })
+
+    it('selects nothing when focus moves', async () => {
+      const wrapper = keyed('week')
+      ;(wrapper.findAll('button')[0].element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowRight')
+      await press(wrapper, 'End')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    it('carries the tab stop along while focus moves, and hands it back on leaving', async () => {
+      const outside = document.createElement('button')
+      document.body.append(outside)
+      const wrapper = keyed('week')
+      ;(wrapper.findAll('button')[0].element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowRight')
+      // Shift+Tab from here must leave the group, not land on the selected option.
+      expect(tabindexes(wrapper)).toEqual(['-1', '0', '-1'])
+
+      outside.focus()
+      await wrapper.vm.$nextTick()
+      expect(tabindexes(wrapper)).toEqual(['0', '-1', '-1'])
+
+      wrapper.unmount()
+      outside.remove()
+    })
+
+    it('prevents the default of the keys it handles, so the panel does not scroll', () => {
+      const wrapper = keyed('week')
+      const button = wrapper.findAll('button')[0].element as HTMLElement
+      button.focus()
+
+      const arrow = new KeyboardEvent('keydown', {
+        key: 'ArrowDown',
+        bubbles: true,
+        cancelable: true,
+      })
+      const tab = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true })
+      button.dispatchEvent(arrow)
+      button.dispatchEvent(tab)
+
+      expect(arrow.defaultPrevented).toBe(true)
+      expect(tab.defaultPrevented).toBe(false)
+      wrapper.unmount()
+    })
+
+    // Enter and Space reach the button natively as a click; jsdom does not
+    // synthesise that click, so the click is what is asserted here and the
+    // real keys are played in the KeyboardNavigation story.
+    it('selects on the button click that Enter and Space produce', async () => {
+      const wrapper = keyed('week')
+      ;(wrapper.findAll('button')[0].element as HTMLElement).focus()
+      await press(wrapper, 'ArrowRight')
+
+      await wrapper.findAll('button')[focused(wrapper)].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['month']])
+      wrapper.unmount()
+    })
+
+    it('works the same for options with tooltips', async () => {
+      const wrapper = keyed('list', tooltipOptions)
+      expect(tabindexes(wrapper)).toEqual(['0', '-1'])
+      ;(wrapper.findAll('button')[0].element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowRight')
+
+      expect(focused(wrapper)).toBe(1)
+      wrapper.unmount()
+    })
+  })
+
+  describe('semantics', () => {
+    const pressed = (wrapper: ReturnType<typeof mount>) =>
+      wrapper.findAll('button').map((button) => button.attributes('aria-pressed'))
+
+    it('marks the selected option pressed and the others not', () => {
+      const wrapper = mount(ToggleGroup, { props: { options: labelOptions, modelValue: 'month' } })
+
+      expect(pressed(wrapper)).toEqual(['false', 'true', 'false'])
+    })
+
+    it('follows a change of the model from outside', async () => {
+      const wrapper = mount(ToggleGroup, { props: { options: labelOptions, modelValue: 'month' } })
+
+      await wrapper.setProps({ modelValue: 'year' })
+
+      expect(pressed(wrapper)).toEqual(['false', 'false', 'true'])
+    })
+
+    it('follows a click', async () => {
+      const wrapper = mount(ToggleGroup, {
+        props: {
+          options: labelOptions,
+          modelValue: 'week',
+          'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value }),
+        },
+      })
+
+      await wrapper.findAll('button')[2].trigger('click')
+
+      expect(pressed(wrapper)).toEqual(['false', 'false', 'true'])
+    })
+
+    it('marks every option not pressed when nothing is selected', () => {
+      const wrapper = mount(ToggleGroup, { props: { options: labelOptions, modelValue: '' } })
+
+      expect(pressed(wrapper)).toEqual(['false', 'false', 'false'])
+    })
+
+    it('puts aria-pressed on options with a tooltip and with the option slot', () => {
+      const withTooltip = mount(ToggleGroup, {
+        props: { options: tooltipOptions, modelValue: 'grid' },
+      })
+      const withSlot = mount(ToggleGroup, {
+        props: { options: labelOptions, modelValue: 'week' },
+        slots: { option: '<template #option><b /></template>' },
+      })
+
+      expect(pressed(withTooltip)).toEqual(['false', 'true'])
+      expect(pressed(withSlot)).toEqual(['true', 'false', 'false'])
+    })
+
+    it('is a toolbar, not a radiogroup: the arrows move focus, they do not select', () => {
+      const wrapper = mount(ToggleGroup, { props: { options: labelOptions, modelValue: 'week' } })
+
+      expect(wrapper.attributes('role')).toBe('toolbar')
+      expect(wrapper.find('[role="radiogroup"], [role="radio"]').exists()).toBe(false)
+    })
+
+    it('names the toolbar with its visible label', () => {
+      const wrapper = mount(ToggleGroup, {
+        props: { options: labelOptions, modelValue: 'week', label: 'Periode' },
+      })
+      const id = wrapper.attributes('aria-labelledby')!
+
+      expect(wrapper.get(`[id="${id}"]`).text()).toBe('Periode')
+    })
+
+    it('takes a fallthrough aria-label as the toolbar name when there is no label', () => {
+      const wrapper = mount(ToggleGroup, {
+        props: { options: labelOptions, modelValue: 'week' },
+        attrs: { 'aria-label': 'Periode' },
+      })
+
+      expect(wrapper.attributes('aria-label')).toBe('Periode')
+      expect(wrapper.attributes('aria-labelledby')).toBeUndefined()
+    })
+  })
+
+  it('lets the pill and its overlay jump instead of slide under reduced motion', async () => {
+    const wrapper = mount(ToggleGroup, {
+      props: { options: labelOptions, modelValue: 'week' },
+    })
+    await new Promise((resolve) => setTimeout(resolve))
+    await wrapper.vm.$nextTick()
+    const animated = wrapper
+      .findAll('[aria-hidden="true"]')
+      .filter((el) => el.classes().some((name) => name.startsWith('transition-')))
+    expect(animated).toHaveLength(2)
+    animated.forEach((el) => expect(el.classes()).toContain('motion-reduce:transition-none'))
+  })
+})