@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/organisms/IconPicker/_IconPickerGrid.test.ts

@@ -0,0 +1,184 @@
+import { afterAll, afterEach, beforeAll, describe, it, expect } from 'vitest'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import IconPickerGrid from './_IconPickerGrid.vue'
+import type { NexxtIconPickerIcon } from './IconPicker.vue'
+import type { GridPosition, GridRow } from './useIconPickerCatalogue'
+import type { IconPickerGridHandle } from './useIconPickerNavigation'
+
+// jsdom lays nothing out: the grid gets the height of about five rows of the fallback 63px
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+    configurable: true,
+    get(this: HTMLElement) {
+      return this.getAttribute('role') === 'grid' ? 320 : 0
+    },
+  })
+})
+afterAll(() => {
+  delete (HTMLElement.prototype as { clientHeight?: number }).clientHeight
+})
+
+const icon = (index: number): NexxtIconPickerIcon => ({
+  name: `icon-${index}`,
+  label: `Icon ${index}`,
+  terms: [],
+  styles: ['light'],
+})
+
+/** A heading, then rows of six icons. */
+const makeRows = (count: number): GridRow[] => [
+  { kind: 'heading', key: 'heading', label: 'Alle iconen' },
+  ...Array.from({ length: count }, (_, row) => ({
+    kind: 'icons' as const,
+    key: `row-${row}`,
+    icons: Array.from({ length: 6 }, (_, col) => icon(row * 6 + col)),
+  })),
+]
+
+const BASE = {
+  gridId: 'p-grid',
+  labelledby: 'p-tab-0',
+  cellIdPrefix: 'p-cell',
+  currentDescriptionId: 'p-current',
+  highlight: null as GridPosition | null,
+  focused: false,
+  selected: null as GridPosition | null,
+  glyphClass: (item: NexxtIconPickerIcon) => ['style-light', `glyph-${item.name}`],
+}
+
+type Props = Partial<InstanceType<typeof IconPickerGrid>['$props']>
+
+const mounted: VueWrapper[] = []
+
+/** The grid in a host that holds its ref, so the exposed handle is what a parent really gets. */
+const mountGrid = async (props: Props = {}) => {
+  const handle = ref<IconPickerGridHandle | null>(null)
+  const state = ref({ rows: makeRows(3), ...BASE, ...props })
+  const Host = defineComponent({
+    setup: () => () => h(IconPickerGrid, { ...state.value, ref: handle }),
+  })
+  const wrapper = mount(Host, { attachTo: document.body })
+  mounted.push(wrapper)
+  const grid = wrapper.findComponent(IconPickerGrid)
+  // the virtual list measures its container after mounting
+  await flushPromises()
+  const update = async (next: Props) => {
+    state.value = { ...state.value, ...next }
+    await flushPromises()
+  }
+  return { wrapper, grid, handle, update }
+}
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+})
+
+const gridOf = (wrapper: VueWrapper) => wrapper.find('[role="grid"]')
+const cells = (wrapper: VueWrapper) => wrapper.findAll('[role="gridcell"]')
+
+describe('IconPickerGrid', () => {
+  it('shows a busy grid of 6×6 hidden skeleton cells', async () => {
+    const { wrapper } = await mountGrid({ skeleton: true })
+    const grid = gridOf(wrapper)
+    expect(grid.attributes('aria-busy')).toBe('true')
+    expect(grid.attributes('id')).toBe('p-grid')
+    expect(grid.attributes('aria-labelledby')).toBe('p-tab-0')
+    expect(grid.findAll('.animate-pulse')).toHaveLength(36)
+    expect(cells(wrapper)).toHaveLength(0)
+  })
+
+  it('renders headings as rowheaders and icons as named cells with ids', async () => {
+    const { wrapper } = await mountGrid()
+    const grid = gridOf(wrapper)
+    expect(grid.attributes('tabindex')).toBe('0')
+    expect(grid.attributes('aria-rowcount')).toBe('4')
+    expect(grid.attributes('aria-colcount')).toBe('6')
+    expect(wrapper.find('[role="rowheader"]').text()).toBe('Alle iconen')
+    const first = cells(wrapper)[0]!
+    expect(first.attributes('id')).toBe('p-cell-1-0')
+    expect(first.attributes('aria-label')).toBe('Icon 0')
+    expect(first.attributes('aria-colindex')).toBe('1')
+    expect(first.find('i').classes()).toEqual(['style-light', 'glyph-icon-0'])
+    expect(first.element.closest('[role="row"]')!.getAttribute('aria-rowindex')).toBe('2')
+  })
+
+  it('renders only a window of a long list', async () => {
+    const { wrapper } = await mountGrid({ rows: makeRows(700) })
+    expect(gridOf(wrapper).attributes('aria-rowcount')).toBe('701')
+    expect(cells(wrapper).length).toBeGreaterThan(0)
+    expect(cells(wrapper).length).toBeLessThanOrEqual(150)
+  })
+
+  it('marks the one selected cell, described as the current choice', async () => {
+    const { wrapper } = await mountGrid({ selected: { row: 2, col: 3 } })
+    const selected = wrapper.findAll('[aria-selected="true"]')
+    expect(selected).toHaveLength(1)
+    expect(selected[0]!.attributes('id')).toBe('p-cell-2-3')
+    expect(selected[0]!.attributes('aria-describedby')).toBe('p-current')
+    expect(selected[0]!.classes()).toContain('ring-2')
+  })
+
+  it('draws the highlight and points aria-activedescendant at it only while focused', async () => {
+    const { wrapper, update } = await mountGrid({ highlight: { row: 1, col: 2 } })
+    expect(gridOf(wrapper).attributes('aria-activedescendant')).toBeUndefined()
+    expect(wrapper.find('#p-cell-1-2').classes()).not.toContain('-outline-offset-2')
+
+    await update({ focused: true })
+    expect(gridOf(wrapper).attributes('aria-activedescendant')).toBe('p-cell-1-2')
+    expect(wrapper.find('#p-cell-1-2').classes()).toContain('-outline-offset-2')
+
+    // a highlight on a heading, or outside the rows, points nowhere
+    await update({ highlight: { row: 0, col: 0 } })
+    expect(gridOf(wrapper).attributes('aria-activedescendant')).toBeUndefined()
+  })
+
+  it('moves the highlight outline in on a selected cell', async () => {
+    const { wrapper } = await mountGrid({
+      highlight: { row: 1, col: 0 },
+      selected: { row: 1, col: 0 },
+      focused: true,
+    })
+    await nextTick()
+    expect(wrapper.find('#p-cell-1-0').classes()).toContain('-outline-offset-4')
+  })
+
+  it('emits focus, blur, keydown, hover and choose', async () => {
+    const { wrapper, grid } = await mountGrid()
+    await gridOf(wrapper).trigger('focus')
+    await gridOf(wrapper).trigger('blur')
+    await gridOf(wrapper).trigger('keydown', { key: 'ArrowRight' })
+    await cells(wrapper)[7]!.trigger('mouseenter')
+    await cells(wrapper)[7]!.trigger('click')
+    expect(grid.emitted('focus')).toHaveLength(1)
+    expect(grid.emitted('blur')).toHaveLength(1)
+    expect((grid.emitted('keydown')![0]![0] as KeyboardEvent).key).toBe('ArrowRight')
+    expect(grid.emitted('hover')).toEqual([[{ row: 2, col: 1 }]])
+    expect(grid.emitted('choose')).toEqual([[icon(7)]])
+  })
+
+  it('exposes focus, reveal, inView, pageRows and scrollToTop to its parent', async () => {
+    const { wrapper, handle, update } = await mountGrid({ rows: makeRows(700) })
+    const element = gridOf(wrapper).element as HTMLElement
+    expect(handle.value).not.toBeNull()
+
+    handle.value!.focus()
+    expect(document.activeElement).toBe(element)
+
+    // 320px over rows of 63px: five rows fit, a page is four
+    expect(handle.value!.pageRows()).toBe(4)
+    expect(handle.value!.inView(1)).toBe(true)
+    expect(handle.value!.inView(500)).toBe(false)
+
+    // reveal renders the far row at once, so the active descendant exists
+    handle.value!.reveal(500)
+    await update({ highlight: { row: 500, col: 0 }, focused: true })
+    expect(element.scrollTop).toBeGreaterThan(0)
+    const id = element.getAttribute('aria-activedescendant')
+    expect(id).toBe('p-cell-500-0')
+    expect(document.getElementById(id!)).not.toBeNull()
+
+    handle.value!.scrollToTop()
+    expect(element.scrollTop).toBe(0)
+  })
+})

package/src/components/organisms/IconPicker/_IconPickerRail.test.ts

@@ -0,0 +1,102 @@
+import { afterEach, describe, it, expect } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import IconPickerRail from './_IconPickerRail.vue'
+
+const TABS = [
+  { id: null, label: 'Alle iconen' },
+  { id: 'buildings', label: 'Gebouwen' },
+  { id: 'nature', label: 'Natuur' },
+]
+
+const mounted: VueWrapper[] = []
+
+const mountRail = (props: Partial<InstanceType<typeof IconPickerRail>['$props']> = {}) => {
+  const wrapper = mount(IconPickerRail, {
+    props: {
+      tabs: TABS,
+      activeIndex: 0,
+      label: 'Categorieën',
+      panelId: 'p-panel',
+      tabId: (index: number) => `p-tab-${index}`,
+      // play the parent: a selection moves the active tab
+      onSelect: (id: string | null) =>
+        wrapper.setProps({ activeIndex: TABS.findIndex((tab) => tab.id === id) }),
+      ...props,
+    },
+    attachTo: document.body,
+  })
+  mounted.push(wrapper)
+  return wrapper
+}
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+})
+
+const tabsOf = (wrapper: VueWrapper) => wrapper.findAll('[role="tab"]')
+
+describe('IconPickerRail', () => {
+  it('renders a vertical, named tablist of tabs that control the panel', () => {
+    const wrapper = mountRail()
+    const list = wrapper.find('[role="tablist"]')
+    expect(list.attributes('aria-orientation')).toBe('vertical')
+    expect(list.attributes('aria-label')).toBe('Categorieën')
+    expect(tabsOf(wrapper).map((tab) => tab.text())).toEqual(['Alle iconen', 'Gebouwen', 'Natuur'])
+    expect(tabsOf(wrapper).map((tab) => tab.attributes('id'))).toEqual([
+      'p-tab-0',
+      'p-tab-1',
+      'p-tab-2',
+    ])
+    expect(tabsOf(wrapper).every((tab) => tab.attributes('aria-controls') === 'p-panel')).toBe(true)
+  })
+
+  it('has one tab stop: the selected tab', () => {
+    const wrapper = mountRail({ activeIndex: 1 })
+    expect(tabsOf(wrapper).map((tab) => tab.attributes('tabindex'))).toEqual(['-1', '0', '-1'])
+    expect(tabsOf(wrapper).map((tab) => tab.attributes('aria-selected'))).toEqual([
+      'false',
+      'true',
+      'false',
+    ])
+  })
+
+  it('gives every label the full name as title, in a truncating span', () => {
+    const wrapper = mountRail()
+    const tab = tabsOf(wrapper)[1]!
+    expect(tab.attributes('title')).toBe('Gebouwen')
+    expect(tab.find('span').classes()).toContain('truncate')
+  })
+
+  it('emits the id of a clicked tab', async () => {
+    const wrapper = mountRail()
+    await tabsOf(wrapper)[2]!.trigger('click')
+    expect(wrapper.emitted('select')).toEqual([['nature']])
+  })
+
+  it('moves and chooses with the arrow keys, Home and End, and focuses the tab', async () => {
+    const wrapper = mountRail()
+    const list = wrapper.find('[role="tablist"]')
+    await list.trigger('keydown', { key: 'ArrowDown' })
+    expect(wrapper.emitted('select')!.at(-1)).toEqual(['buildings'])
+    expect(document.activeElement?.id).toBe('p-tab-1')
+    await list.trigger('keydown', { key: 'End' })
+    expect(wrapper.emitted('select')!.at(-1)).toEqual(['nature'])
+    expect(document.activeElement?.id).toBe('p-tab-2')
+    await list.trigger('keydown', { key: 'ArrowDown' })
+    expect(wrapper.emitted('select')!.at(-1)).toEqual(['nature'])
+    await list.trigger('keydown', { key: 'Home' })
+    expect(wrapper.emitted('select')!.at(-1)).toEqual([null])
+    await list.trigger('keydown', { key: 'ArrowUp' })
+    expect(wrapper.emitted('select')!.at(-1)).toEqual([null])
+    await list.trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('select')).toHaveLength(5)
+  })
+
+  it('shows eight hidden skeleton bars after the tabs while loading', () => {
+    const wrapper = mountRail({ tabs: [TABS[0]!], loading: true })
+    expect(tabsOf(wrapper)).toHaveLength(1)
+    const bars = wrapper.findAll('[aria-hidden="true"]')
+    expect(bars).toHaveLength(8)
+    expect(wrapper.findAll('.animate-pulse')).toHaveLength(8)
+  })
+})

package/src/components/organisms/IconPicker/useIconPickerNavigation.test.ts

@@ -0,0 +1,215 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { computed, effectScope, nextTick, ref, type EffectScope } from 'vue'
+import type { NexxtIconPickerIcon } from './IconPicker.vue'
+import type { GridPosition, GridRow } from './useIconPickerCatalogue'
+import { useIconPickerNavigation, type IconPickerGridHandle } from './useIconPickerNavigation'
+
+const icon = (index: number): NexxtIconPickerIcon => ({
+  name: `icon-${index}`,
+  label: `Icon ${index}`,
+  terms: [],
+  styles: ['light'],
+})
+
+/** A heading, three full rows, and a last row of two. */
+const ROWS: GridRow[] = [
+  { kind: 'heading', key: 'h', label: 'Alle iconen' },
+  ...[0, 1, 2].map((row) => ({
+    kind: 'icons' as const,
+    key: `r${row}`,
+    icons: Array.from({ length: 6 }, (_, col) => icon(row * 6 + col)),
+  })),
+  { kind: 'icons', key: 'r3', icons: [icon(18), icon(19)] },
+]
+
+const scopes: EffectScope[] = []
+
+afterEach(() => {
+  scopes.splice(0).forEach((scope) => scope.stop())
+  vi.useRealTimers()
+})
+
+const setup = (
+  options: { current?: GridPosition | null; inView?: boolean; page?: number } = {},
+) => {
+  const grid: IconPickerGridHandle = {
+    focus: vi.fn(),
+    reveal: vi.fn(),
+    inView: vi.fn(() => options.inView ?? true),
+    pageRows: vi.fn(() => options.page ?? 2),
+    scrollToTop: vi.fn(),
+  }
+  const search = ref('')
+  const category = ref<string | null>(null)
+  const isOpen = ref(true)
+  const empty = ref(false)
+  const focusSearch = vi.fn()
+  const choose = vi.fn()
+  const iconAt = (position: GridPosition | null) => {
+    const row = position ? ROWS[position.row] : undefined
+    return row?.kind === 'icons' ? (row.icons[position!.col] ?? null) : null
+  }
+  const rowLength = (row: number | undefined) => {
+    const entry = row === undefined ? undefined : ROWS[row]
+    return entry?.kind === 'icons' ? entry.icons.length : 0
+  }
+  const scope = effectScope()
+  scopes.push(scope)
+  const navigation = scope.run(() =>
+    useIconPickerNavigation({
+      iconRows: computed(() => [1, 2, 3, 4]),
+      currentPosition: computed(() => options.current ?? null),
+      iconCount: computed(() => 20),
+      catalogueEmpty: computed(() => empty.value),
+      iconAt,
+      rowLength,
+      search,
+      term: computed(() => search.value.trim()),
+      category,
+      isOpen,
+      grid: () => grid,
+      focusSearch,
+      choose,
+      results: () => (count: number) => `${count} iconen`,
+    }),
+  )!
+  const key = (name: string, init: KeyboardEventInit = {}) => {
+    const event = new KeyboardEvent('keydown', { key: name, cancelable: true, ...init })
+    navigation.onGridKeydown(event)
+    return event
+  }
+  return { navigation, grid, search, category, isOpen, empty, focusSearch, choose, key }
+}
+
+describe('useIconPickerNavigation', () => {
+  it('highlights the current icon on opening, after the reset', () => {
+    const { navigation, search } = setup({ current: { row: 2, col: 3 } })
+    search.value = 'house'
+    navigation.open(() => {
+      search.value = ''
+    })
+    expect(navigation.highlight.value).toEqual({ row: 2, col: 3 })
+    expect(navigation.highlightedIcon.value).toEqual(icon(9))
+  })
+
+  it('enters the grid on the current icon when it is in view, the first cell otherwise', () => {
+    const inView = setup({ current: { row: 3, col: 1 } })
+    inView.navigation.onSearchKeydown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+    expect(inView.navigation.highlight.value).toEqual({ row: 3, col: 1 })
+    expect(inView.grid.focus).toHaveBeenCalled()
+
+    const outOfView = setup({ current: { row: 3, col: 1 }, inView: false })
+    outOfView.navigation.onSearchKeydown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+    expect(outOfView.navigation.highlight.value).toEqual({ row: 1, col: 0 })
+    expect(outOfView.grid.reveal).toHaveBeenCalledWith(1)
+  })
+
+  it('highlights the first cell when the grid takes focus without one', () => {
+    const { navigation } = setup()
+    navigation.onGridFocus()
+    expect(navigation.gridFocused.value).toBe(true)
+    expect(navigation.highlight.value).toEqual({ row: 1, col: 0 })
+    navigation.onGridBlur()
+    expect(navigation.gridFocused.value).toBe(false)
+  })
+
+  it('walks the rows, skipping headings, and reveals every row it moves to', () => {
+    const { navigation, grid, key, focusSearch } = setup()
+    navigation.onGridFocus()
+    key('End')
+    expect(navigation.highlight.value).toEqual({ row: 1, col: 5 })
+    key('ArrowRight')
+    expect(navigation.highlight.value).toEqual({ row: 2, col: 0 })
+    key('ArrowLeft')
+    expect(navigation.highlight.value).toEqual({ row: 1, col: 5 })
+    key('ArrowDown')
+    key('ArrowDown')
+    key('ArrowDown')
+    // the last row is short: the column clamps
+    expect(navigation.highlight.value).toEqual({ row: 4, col: 1 })
+    key('Home', { ctrlKey: true })
+    expect(navigation.highlight.value).toEqual({ row: 1, col: 0 })
+    key('End', { metaKey: true })
+    expect(navigation.highlight.value).toEqual({ row: 4, col: 1 })
+    expect(grid.reveal).toHaveBeenLastCalledWith(4)
+    key('PageUp')
+    expect(navigation.highlight.value).toEqual({ row: 2, col: 1 })
+    key('PageDown')
+    expect(navigation.highlight.value).toEqual({ row: 4, col: 1 })
+    key('Home', { ctrlKey: true })
+    key('ArrowUp')
+    expect(focusSearch).toHaveBeenCalledOnce()
+  })
+
+  it('chooses with Enter and Space, and leaves other keys alone', () => {
+    const { navigation, key, choose } = setup()
+    navigation.onGridFocus()
+    expect(key('Enter').defaultPrevented).toBe(true)
+    key(' ')
+    expect(choose).toHaveBeenCalledTimes(2)
+    expect(choose).toHaveBeenCalledWith(icon(0))
+    expect(key('Tab').defaultPrevented).toBe(false)
+  })
+
+  it('sends a letter typed in the grid to the search field', () => {
+    const { navigation, key, search, focusSearch } = setup()
+    navigation.onGridFocus()
+    key('h')
+    key('o')
+    expect(search.value).toBe('ho')
+    expect(focusSearch).toHaveBeenCalledTimes(2)
+    key('c', { ctrlKey: true })
+    expect(search.value).toBe('ho')
+  })
+
+  it('chooses the first result with Enter in the field, only with a search', () => {
+    const { navigation, search, choose } = setup()
+    navigation.onSearchKeydown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(choose).not.toHaveBeenCalled()
+    search.value = 'icon'
+    navigation.onSearchKeydown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(choose).toHaveBeenCalledWith(icon(0))
+  })
+
+  it('resets highlight and scroll on a new list, and announces it after 500ms', async () => {
+    vi.useFakeTimers()
+    const { navigation, grid, category } = setup({ current: { row: 2, col: 0 } })
+    navigation.onGridFocus()
+    category.value = 'nature'
+    await nextTick()
+    expect(navigation.highlight.value).toBeNull()
+    expect(grid.scrollToTop).toHaveBeenCalledOnce()
+    vi.advanceTimersByTime(500)
+    expect(navigation.announcement.value).toBe('20 iconen')
+
+    category.value = null
+    await nextTick()
+    expect(navigation.highlight.value).toEqual({ row: 2, col: 0 })
+  })
+
+  it('does not announce the reset on opening, and announces the next change', async () => {
+    vi.useFakeTimers()
+    const { navigation, search, category } = setup()
+    category.value = 'nature'
+    await nextTick()
+    vi.advanceTimersByTime(500)
+    navigation.open(() => {
+      category.value = null
+    })
+    await nextTick()
+    vi.advanceTimersByTime(500)
+    expect(navigation.announcement.value).toBe('')
+
+    search.value = 'a'
+    await nextTick()
+    vi.advanceTimersByTime(500)
+    expect(navigation.announcement.value).toBe('20 iconen')
+  })
+
+  it('forgets grid focus on closing', () => {
+    const { navigation } = setup()
+    navigation.onGridFocus()
+    navigation.close()
+    expect(navigation.gridFocused.value).toBe(false)
+  })
+})