@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,145 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import PickerGroup from './PickerGroup.vue'
+
+const slots = {
+  default: '<div role="option" id="a">Afbeelding</div><div role="option" id="b">Video</div>',
+}
+
+const headingOf = (wrapper: ReturnType<typeof mount>) => wrapper.find('[role="presentation"]')
+
+const stubReducedMotion = (reduce: boolean) =>
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    matches: reduce && query.includes('reduce'),
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }))
+
+describe('PickerGroup', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('is a group labelled by its heading, expanded by default', () => {
+    const wrapper = mount(PickerGroup, { props: { label: 'Media' }, slots })
+    const labelledBy = wrapper.attributes('aria-labelledby')!
+
+    expect(wrapper.attributes('role')).toBe('group')
+    expect(wrapper.find(`[id="${labelledBy}"]`).text()).toBe('Media')
+    expect(wrapper.attributes('aria-expanded')).toBe('true')
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(2)
+  })
+
+  it('renders the heading as a presentation element without a tab stop or a control', () => {
+    const wrapper = mount(PickerGroup, { props: { label: 'Media' }, slots })
+    const heading = headingOf(wrapper)
+
+    expect(heading.attributes('tabindex')).toBeUndefined()
+    expect(heading.find('button, a, [tabindex]').exists()).toBe(false)
+  })
+
+  it('toggles the model from the heading', async () => {
+    const wrapper = mount(PickerGroup, { props: { label: 'Media' }, slots })
+
+    await headingOf(wrapper).trigger('click')
+
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+  })
+
+  it('keeps the options out of the DOM while closed', () => {
+    const wrapper = mount(PickerGroup, { props: { label: 'Media', open: false }, slots })
+
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
+    expect(wrapper.attributes('aria-expanded')).toBe('false')
+  })
+
+  it('turns the heading into a plain label when not collapsible', async () => {
+    const wrapper = mount(PickerGroup, {
+      props: { label: 'Media', collapsible: false, open: true },
+      slots,
+    })
+
+    await headingOf(wrapper).trigger('click')
+
+    expect(wrapper.emitted('update:open')).toBeUndefined()
+    expect(wrapper.attributes('aria-expanded')).toBeUndefined()
+    expect(wrapper.attributes('aria-labelledby')).toBeDefined()
+    expect(wrapper.find('i').exists()).toBe(false)
+    expect(
+      headingOf(wrapper)
+        .classes()
+        .some((name) => name.startsWith('hover:')),
+    ).toBe(false)
+  })
+
+  it('shows a chevron only when collapsible, turned while closed', async () => {
+    const wrapper = mount(PickerGroup, { props: { label: 'Media' }, slots })
+    const chevron = () => wrapper.find('i')
+
+    expect(chevron().attributes('aria-hidden')).toBe('true')
+    expect(chevron().classes()).not.toContain('-rotate-90')
+
+    await wrapper.setProps({ open: false })
+
+    expect(chevron().classes()).toContain('-rotate-90')
+  })
+
+  it('prevents the mousedown default on the heading', () => {
+    const wrapper = mount(PickerGroup, { props: { label: 'Media' }, slots })
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+
+    headingOf(wrapper).element.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(true)
+  })
+
+  it('unfolds over 160ms with a reduced-motion fallback', async () => {
+    stubReducedMotion(false)
+    const wrapper = mount(PickerGroup, {
+      props: { label: 'Media', open: false },
+      slots,
+      global: { stubs: { transition: false } },
+    })
+
+    await wrapper.setProps({ open: true })
+
+    const classes = wrapper.find('.grid').classes()
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'transition-[grid-template-rows,opacity]',
+        'duration-160',
+        'motion-reduce:transition-none',
+        'grid-rows-[0fr]',
+      ]),
+    )
+  })
+
+  it('keeps leaving options inert while they fold away', async () => {
+    stubReducedMotion(false)
+    const wrapper = mount(PickerGroup, {
+      props: { label: 'Media', open: true },
+      slots,
+      global: { stubs: { transition: false } },
+    })
+
+    await wrapper.setProps({ open: false })
+
+    // still in the DOM for the 120ms leave, but no longer reachable
+    expect(wrapper.find('.grid').attributes('inert')).toBeDefined()
+  })
+
+  it('removes the options synchronously under reduced motion', async () => {
+    stubReducedMotion(true)
+    const wrapper = mount(PickerGroup, {
+      props: { label: 'Media', open: true },
+      slots,
+      global: { stubs: { transition: false } },
+    })
+
+    await wrapper.setProps({ open: false })
+    await nextTick()
+
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
+  })
+})

package/src/components/molecules/PickerList/PickerList.stories.ts

@@ -0,0 +1,436 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import PickerList, { type NexxtPickerGroupData, type NexxtPickerItemData } from './PickerList.vue'
+
+const GROUPS: NexxtPickerGroupData[] = [
+  { id: 'basis', label: 'Basis', defaultOpen: true },
+  { id: 'media', label: 'Media', defaultOpen: true },
+]
+
+const ITEMS: NexxtPickerItemData[] = [
+  { id: 'intro', label: 'Introductie', icon: 'sparkles', keywords: ['welkom'] },
+  { id: 'title', label: 'Titel', icon: 'heading', group: 'basis', keywords: ['kop', 'heading'] },
+  { id: 'text', label: 'Tekst', icon: 'font', group: 'basis', keywords: ['alinea', 'paragraaf'] },
+  {
+    id: 'table',
+    label: 'Tabel',
+    icon: 'table',
+    group: 'basis',
+    disabled: true,
+    description: 'Nog niet beschikbaar.',
+  },
+  { id: 'quote', label: 'Citaat', icon: 'quote-left', group: 'basis', keywords: ['quote'] },
+  { id: 'image', label: 'Afbeelding', icon: 'image', group: 'media', keywords: ['foto'] },
+  { id: 'video', label: 'Video', icon: 'video', group: 'media', keywords: ['film'] },
+  { id: 'gallery', label: 'Galerij', icon: 'images', group: 'media', keywords: ['album'] },
+]
+
+const MANY_GROUPS: NexxtPickerGroupData[] = [
+  { id: 'a', label: 'Tekst' },
+  { id: 'b', label: 'Media' },
+  { id: 'c', label: 'Indeling' },
+]
+
+const MANY_ITEMS: NexxtPickerItemData[] = MANY_GROUPS.flatMap((group) =>
+  Array.from({ length: 11 }, (_, index) => ({
+    id: `${group.id}-${index + 1}`,
+    label: `${group.label} ${index + 1}`,
+    icon: 'square' as const,
+    group: group.id,
+  })),
+)
+
+const COPY = {
+  ariaLabel: 'Onderdelen',
+  emptyTitle: 'Geen onderdelen gevonden',
+  emptyDescription: (search: string) => `Geen resultaat voor '${search}'.`,
+  clearLabel: 'Wis zoekopdracht',
+  resultsAnnouncement: (count: number) =>
+    count === 1 ? '1 onderdeel gevonden' : `${count} onderdelen gevonden`,
+}
+
+export default {
+  title: 'Components/Molecules/PickerList',
+  component: PickerList,
+  args: {
+    items: ITEMS,
+    groups: GROUPS,
+    ...COPY,
+    onSelect: fn(),
+    onClear: fn(),
+    onClose: fn(),
+  },
+} satisfies Meta<typeof PickerList>
+
+type Story = StoryObj<typeof PickerList>
+
+const FRAME_CLASSES =
+  'flex h-80 w-66 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white'
+
+/** The list in a 264×320 frame, with a field of the consumer's own bound to `search`. */
+const renderStandalone =
+  (initialSearch = '') =>
+  (args: Story['args']) => ({
+    components: { PickerList },
+    setup() {
+      const search = ref(initialSearch)
+      const highlighted = ref<string | null>(null)
+      // `args.onClear` rides along through v-bind; this only resets the story's own term
+      const clear = () => (search.value = '')
+      return { args, search, highlighted, clear, frame: FRAME_CLASSES }
+    },
+    template: `
+    <div class="flex flex-col gap-3">
+      <label class="flex w-66 flex-col gap-1 small-normal text-gray-700">
+        Zoeken
+        <input v-model="search" type="text" class="h-10 rounded-lg px-3 ring ring-gray-200 focus:ring-cornflower-blue-500 focus:outline-none" />
+      </label>
+      <div :class="frame">
+        <PickerList v-bind="args" v-model:highlighted="highlighted" :search="search" class="h-full" @clear="clear" />
+      </div>
+      <p class="extra-small-normal text-gray-700">highlighted: <code data-testid="highlighted">{{ highlighted }}</code></p>
+    </div>
+  `,
+  })
+
+const listboxOf = (canvasElement: HTMLElement) => within(canvasElement).getByRole('listbox')
+
+/** The visible label of an option, without its hidden description. */
+const labelOf = (option: Element | null) =>
+  Array.from(option?.querySelectorAll(':scope > span:not([hidden])') ?? [])
+    .at(-1)
+    ?.textContent?.trim() ?? null
+
+const activeLabel = (canvasElement: HTMLElement) => {
+  const id = listboxOf(canvasElement).getAttribute('aria-activedescendant')
+  return id ? labelOf(document.getElementById(id)) : null
+}
+
+/**
+ * Tab from the field into the list: the listbox is the only tab stop in it. Every key in the
+ * list works from there: arrows, Home/End, PageUp/PageDown, ←/→, Enter, Space, Escape and
+ * type-ahead.
+ */
+export const Standalone: Story = {
+  render: renderStandalone(),
+  play: async ({ args, canvasElement }) => {
+    const listbox = listboxOf(canvasElement)
+
+    await userEvent.click(within(canvasElement).getByRole('textbox'))
+    await userEvent.tab()
+    await expect(listbox).toHaveFocus()
+    await expect(activeLabel(canvasElement)).toBe('Introductie')
+
+    // the list overflows its 320px frame, and the ungrouped option still keeps its full 36px
+    await expect(listbox.scrollHeight).toBeGreaterThan(listbox.clientHeight)
+    const intro = document.getElementById(listbox.getAttribute('aria-activedescendant')!)!
+    await expect(intro.getBoundingClientRect().height).toBe(36)
+
+    // across the group boundary, never wrapping
+    await userEvent.keyboard('{ArrowUp}')
+    await expect(activeLabel(canvasElement)).toBe('Introductie')
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}')
+    await expect(activeLabel(canvasElement)).toBe('Tekst')
+    await userEvent.keyboard('{End}')
+    await expect(activeLabel(canvasElement)).toBe('Galerij')
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(activeLabel(canvasElement)).toBe('Galerij')
+    await userEvent.keyboard('{Home}')
+    await expect(activeLabel(canvasElement)).toBe('Introductie')
+
+    // Enter and Space select; a disabled item never does
+    await userEvent.keyboard('{ArrowDown}{Enter}')
+    await userEvent.keyboard(' ')
+    await expect(args.onSelect).toHaveBeenCalledTimes(2)
+    await expect(args.onSelect).toHaveBeenLastCalledWith(ITEMS[1])
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}{Enter} ')
+    await expect(activeLabel(canvasElement)).toBe('Tabel')
+    await expect(args.onSelect).toHaveBeenCalledTimes(2)
+
+    // a click selects as well, and keeps focus where it was
+    await userEvent.click(within(canvasElement).getByText('Video'))
+    await expect(args.onSelect).toHaveBeenLastCalledWith(ITEMS[6])
+    await expect(listbox).toHaveFocus()
+
+    // ← folds the group of the highlight, → opens it again
+    await userEvent.keyboard('{End}{ArrowLeft}')
+    // out of the DOM once the 120ms fold has played; inert until then
+    await waitFor(() => expect(within(canvasElement).queryByText('Video')).toBeNull())
+    await expect(activeLabel(canvasElement)).toBe('Citaat')
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(activeLabel(canvasElement)).toBe('Afbeelding')
+
+    await userEvent.keyboard('{Escape}')
+    await expect(args.onClose).toHaveBeenCalledOnce()
+  },
+}
+
+/** Type a letter while the list has focus; the buffer resets after 800ms. */
+export const TypeAhead: Story = {
+  render: renderStandalone(),
+  play: async ({ canvasElement }) => {
+    listboxOf(canvasElement).focus()
+
+    await userEvent.keyboard('t')
+    await expect(activeLabel(canvasElement)).toBe('Titel')
+    await userEvent.keyboard('a')
+    // disabled items are type-ahead targets too
+    await expect(activeLabel(canvasElement)).toBe('Tabel')
+
+    await new Promise((resolve) => setTimeout(resolve, 900))
+    await userEvent.keyboard('v')
+    await expect(activeLabel(canvasElement)).toBe('Video')
+  },
+}
+
+/** Filtering ignores case and diacritics, matches keywords, and never leaves the list without a highlight. */
+export const Filtering: Story = {
+  render: renderStandalone(),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const field = canvas.getByRole('textbox')
+    const labels = () => canvas.queryAllByRole('option').map(labelOf)
+
+    // highlight something the next search removes
+    listboxOf(canvasElement).focus()
+    await userEvent.keyboard('{End}')
+    await expect(activeLabel(canvasElement)).toBe('Galerij')
+
+    await userEvent.type(field, 'afbeeldíng')
+    await expect(labels()).toEqual(['Afbeelding'])
+    await expect(activeLabel(canvasElement)).toBe('Afbeelding')
+    await expect(canvas.getByTestId('highlighted')).toHaveTextContent('image')
+
+    await userEvent.clear(field)
+    await userEvent.type(field, 'KOP')
+    await expect(labels()).toEqual(['Titel'])
+    // groups without results are gone
+    await expect(canvas.getAllByRole('group')).toHaveLength(1)
+
+    // one live region, filled 500ms after the last change
+    const regions = canvasElement.querySelectorAll('[aria-live]')
+    await expect(regions).toHaveLength(1)
+    await expect(regions[0]).toHaveTextContent('')
+    await waitFor(() => expect(regions[0]).toHaveTextContent('1 onderdeel gevonden'), {
+      timeout: 1500,
+    })
+  },
+}
+
+/** 33 items in three groups: the keyboard scrolls the highlight into view, the pointer does not. */
+export const ManyItems: Story = {
+  args: { items: MANY_ITEMS, groups: MANY_GROUPS },
+  render: renderStandalone(),
+  play: async ({ canvasElement }) => {
+    const listbox = listboxOf(canvasElement)
+    const inView = (label: string) => {
+      const option = within(listbox).getByText(label).closest<HTMLElement>('[role="option"]')!
+      const box = listbox.getBoundingClientRect()
+      const rect = option.getBoundingClientRect()
+      return rect.top >= box.top - 0.5 && rect.bottom <= box.bottom + 0.5
+    }
+
+    listbox.focus()
+    await userEvent.keyboard('{PageDown}')
+    await expect(activeLabel(canvasElement)).toBe('Tekst 9')
+    await expect(inView('Tekst 9')).toBe(true)
+
+    await userEvent.keyboard('{End}')
+    await expect(activeLabel(canvasElement)).toBe('Indeling 11')
+    await waitFor(() => expect(inView('Indeling 11')).toBe(true))
+    await userEvent.keyboard('{PageDown}')
+    await expect(activeLabel(canvasElement)).toBe('Indeling 11')
+
+    await userEvent.keyboard('{PageUp}')
+    await expect(activeLabel(canvasElement)).toBe('Indeling 3')
+    await waitFor(() => expect(inView('Indeling 3')).toBe(true))
+
+    await userEvent.keyboard('{Home}')
+    await waitFor(() => expect(listbox.scrollTop).toBe(0))
+
+    // a pointer highlight on a half-visible row leaves the scroll position alone
+    const rows = within(listbox).getAllByRole('option')
+    const partial = rows.find((row) => {
+      const box = listbox.getBoundingClientRect()
+      const rect = row.getBoundingClientRect()
+      return rect.top < box.bottom && rect.bottom > box.bottom
+    })!
+    const { left, top } = partial.getBoundingClientRect()
+    partial.dispatchEvent(
+      new PointerEvent('pointermove', { bubbles: true, clientX: left + 5, clientY: top + 2 }),
+    )
+    partial.dispatchEvent(
+      new PointerEvent('pointermove', { bubbles: true, clientX: left + 6, clientY: top + 3 }),
+    )
+
+    await waitFor(() => expect(partial).toHaveAttribute('aria-selected', 'true'))
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    await expect(listbox.scrollTop).toBe(0)
+  },
+}
+
+/**
+ * Folding with ← deep in a scrolled list: the heading of the folded group comes into view, the
+ * rows fold up under it, and the next group's first item ends up in view once they settle.
+ */
+export const FoldWhileScrolled: Story = {
+  args: { items: MANY_ITEMS, groups: MANY_GROUPS },
+  render: renderStandalone(),
+  play: async ({ canvasElement }) => {
+    const listbox = listboxOf(canvasElement)
+    const inView = (element: Element) => {
+      const box = listbox.getBoundingClientRect()
+      const rect = element.getBoundingClientRect()
+      return rect.top >= box.top - 0.5 && rect.bottom <= box.bottom + 0.5
+    }
+    const option = (label: string) =>
+      within(listbox).getByText(label).closest<HTMLElement>('[role="option"]')!
+    const settled = () => new Promise((resolve) => setTimeout(resolve, 300))
+
+    listbox.focus()
+    await userEvent.keyboard('{Home}{PageDown}{ArrowDown}')
+    await expect(activeLabel(canvasElement)).toBe('Tekst 10')
+    await expect(listbox.scrollTop).toBeGreaterThan(0)
+
+    await userEvent.keyboard('{ArrowLeft}')
+    await expect(activeLabel(canvasElement)).toBe('Media 1')
+    await settled()
+    await expect(inView(option('Media 1'))).toBe(true)
+    await expect(inView(within(listbox).getAllByRole('group')[0].firstElementChild!)).toBe(true)
+
+    // → opens the folded group again, and its first item is in view once it has unfolded
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(activeLabel(canvasElement)).toBe('Tekst 1')
+    await settled()
+    await expect(inView(option('Tekst 1'))).toBe(true)
+  },
+}
+
+/**
+ * Clearing a search puts every row back at its full-list position. The highlighted item stays
+ * in view, also when the pointer highlighted it.
+ */
+export const ClearSearchKeepsHighlightInView: Story = {
+  args: { items: MANY_ITEMS, groups: MANY_GROUPS },
+  render: renderStandalone(),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const field = canvas.getByRole('textbox')
+    const listbox = listboxOf(canvasElement)
+    const active = () => document.getElementById(listbox.getAttribute('aria-activedescendant')!)!
+    const inView = (element: Element) => {
+      const box = listbox.getBoundingClientRect()
+      const rect = element.getBoundingClientRect()
+      return rect.top >= box.top - 0.5 && rect.bottom <= box.bottom + 0.5
+    }
+
+    // highlighted by the search itself
+    await userEvent.type(field, 'Indeling 7')
+    await expect(activeLabel(canvasElement)).toBe('Indeling 7')
+    await userEvent.clear(field)
+    await expect(canvas.getAllByRole('option')).toHaveLength(MANY_ITEMS.length)
+    await expect(activeLabel(canvasElement)).toBe('Indeling 7')
+    await waitFor(() => expect(inView(active())).toBe(true))
+
+    // highlighted by the pointer: the scroll follows the search, so it still happens
+    listbox.scrollTop = 0
+    await userEvent.type(field, 'Indeling')
+    const target = canvas.getByText('Indeling 9').closest('[role="option"]')!
+    const { left, top } = target.getBoundingClientRect()
+    target.dispatchEvent(
+      new PointerEvent('pointermove', { bubbles: true, clientX: left + 5, clientY: top + 2 }),
+    )
+    target.dispatchEvent(
+      new PointerEvent('pointermove', { bubbles: true, clientX: left + 6, clientY: top + 3 }),
+    )
+    await waitFor(() => expect(activeLabel(canvasElement)).toBe('Indeling 9'))
+    await userEvent.clear(field)
+    await expect(activeLabel(canvasElement)).toBe('Indeling 9')
+    await waitFor(() => expect(inView(active())).toBe(true))
+  },
+}
+
+/** No results: the list leaves the tab order and the clear button takes over. */
+export const SearchEmpty: Story = {
+  render: renderStandalone('zwembad'),
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement)
+    const listbox = listboxOf(canvasElement)
+
+    await expect(canvas.getByText('Geen onderdelen gevonden')).toBeVisible()
+    await expect(canvas.getByText("Geen resultaat voor 'zwembad'.")).toBeVisible()
+    await expect(listbox).toHaveAttribute('tabindex', '-1')
+    await expect(listbox).not.toHaveAttribute('aria-activedescendant')
+
+    await userEvent.click(canvas.getByRole('textbox'))
+    await userEvent.tab()
+    await expect(canvas.getByRole('button', { name: 'Wis zoekopdracht' })).toHaveFocus()
+
+    await userEvent.keyboard('{Enter}')
+    await expect(args.onClear).toHaveBeenCalledOnce()
+    await waitFor(() => expect(canvas.getAllByRole('option')).toHaveLength(ITEMS.length))
+  },
+}
+
+export const CustomEmptySlot: Story = {
+  render: (args) => ({
+    components: { PickerList },
+    setup: () => ({ args, search: ref('zwembad'), frame: FRAME_CLASSES }),
+    template: `
+      <div :class="frame">
+        <PickerList v-bind="args" :search="search" class="h-full" @clear="search = ''">
+          <template #empty="{ search: term, clear }">
+            <div class="flex flex-1 flex-col items-center justify-center gap-2 p-4 text-center">
+              <p class="small-normal text-gray-900">Niets voor „{{ term }}".</p>
+              <button type="button" class="small-semibold text-cornflower-blue-700 underline" @click="clear">
+                Opnieuw zoeken
+              </button>
+            </div>
+          </template>
+        </PickerList>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await expect(canvas.getByText('Niets voor „zwembad".')).toBeVisible()
+    await userEvent.click(canvas.getByRole('button', { name: 'Opnieuw zoeken' }))
+    await waitFor(() => expect(canvas.getAllByRole('option')).toHaveLength(ITEMS.length))
+  },
+}
+
+/** Every group folded: nothing is highlighted until → or ↓ opens the first group. */
+export const AllGroupsClosed: Story = {
+  args: {
+    items: ITEMS.filter((item) => item.group),
+    groups: GROUPS.map((group) => ({ ...group, defaultOpen: false })),
+  },
+  render: renderStandalone(),
+  play: async ({ canvasElement }) => {
+    const listbox = listboxOf(canvasElement)
+
+    await expect(listbox).not.toHaveAttribute('aria-activedescendant')
+    await expect(listbox).toHaveAttribute('tabindex', '0')
+
+    listbox.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(activeLabel(canvasElement)).toBe('Titel')
+  },
+}
+
+/** Headings are labels only: no chevrons, and every group stays open. */
+export const NotCollapsible: Story = {
+  args: {
+    collapsible: false,
+    groups: GROUPS.map((group) => ({ ...group, defaultOpen: false })),
+  },
+  render: renderStandalone(),
+  play: async ({ canvasElement }) => {
+    const groups = within(canvasElement).getAllByRole('group')
+
+    await expect(groups.every((group) => !group.hasAttribute('aria-expanded'))).toBe(true)
+    await expect(within(canvasElement).getAllByRole('option')).toHaveLength(ITEMS.length)
+  },
+}