@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,873 @@
+import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest'
+import { ref } from 'vue'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import FontPicker, { type NexxtFontPickerFont } from './FontPicker.vue'
+
+// Positioning is FloatingPanel's concern and has its own tests; here the panel is simply placed
+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: () => () => {},
+  }
+})
+
+/** Records what the component observes, so a test can play the browser's part. */
+class FakeIntersectionObserver {
+  static instances: FakeIntersectionObserver[] = []
+  observed: Element[] = []
+  constructor(
+    public callback: IntersectionObserverCallback,
+    public options?: IntersectionObserverInit,
+  ) {
+    FakeIntersectionObserver.instances.push(this)
+  }
+  /**
+   * Families the "browser" shows. When set, every new observer reports its rows once, right after
+   * observing them, as a real IntersectionObserver does: a re-observe re-reports what is in view.
+   */
+  static visible: Set<string> | null = null
+  private initialReport = false
+  observe(element: Element) {
+    this.observed.push(element)
+    const visible = FakeIntersectionObserver.visible
+    if (!visible || this.initialReport) return
+    this.initialReport = true
+    queueMicrotask(() => {
+      const entries = this.observed.map(
+        (target) =>
+          ({
+            target,
+            isIntersecting: visible.has((target as HTMLElement).dataset.fontFamily ?? ''),
+          }) as IntersectionObserverEntry,
+      )
+      if (entries.length) this.callback(entries, this as unknown as IntersectionObserver)
+    })
+  }
+  unobserve() {}
+  disconnected = false
+  disconnect() {
+    this.observed = []
+    this.disconnected = true
+  }
+  /** Reports the rows of these families as in view (or out of it). */
+  report(families: string[], isIntersecting = true) {
+    const entries = this.observed
+      .filter((element) => families.includes((element as HTMLElement).dataset.fontFamily ?? ''))
+      .map((target) => ({ target, isIntersecting }) as IntersectionObserverEntry)
+    this.callback(entries, this as unknown as IntersectionObserver)
+  }
+}
+
+const FONTS: NexxtFontPickerFont[] = [
+  { family: 'Arial', source: 'web-safe' },
+  { family: 'Georgia', source: 'web-safe' },
+  { family: 'Courier New', source: 'web-safe' },
+  { family: 'Roboto', source: 'google' },
+  { family: 'Montserrat', source: 'google' },
+  { family: 'Lato', source: 'google' },
+]
+
+const WEB_SAFE = FONTS.filter(({ source }) => source === 'web-safe')
+
+type Props = Partial<InstanceType<typeof FontPicker>['$props']>
+
+const mounted: VueWrapper[] = []
+
+const mountPicker = (props: Props = {}) => {
+  const holder: { wrapper?: VueWrapper } = {}
+  const wrapper = mount(FontPicker, {
+    props: {
+      fonts: FONTS,
+      'onUpdate:modelValue': (value: string | null) =>
+        holder.wrapper?.setProps({ modelValue: value }),
+      ...props,
+    },
+    attachTo: document.body,
+  })
+  holder.wrapper = wrapper
+  mounted.push(wrapper)
+  return wrapper
+}
+
+const triggerOf = (wrapper: VueWrapper) => wrapper.find('button[aria-haspopup="listbox"]')
+const inputOf = (wrapper: VueWrapper) => wrapper.find('input')
+const listboxOf = (wrapper: VueWrapper) => wrapper.find('[role="listbox"]')
+const optionOf = (wrapper: VueWrapper, name: string) =>
+  wrapper.findAll('[role="option"]').find((option) => option.text().startsWith(name))!
+const activeOption = (wrapper: VueWrapper) =>
+  document.getElementById(inputOf(wrapper).attributes('aria-activedescendant')!)
+const descriptionOf = (option: Element) =>
+  document.getElementById(option.getAttribute('aria-describedby') ?? '')?.textContent
+
+const open = async (wrapper: VueWrapper) => {
+  await triggerOf(wrapper).trigger('click')
+  await flushPromises()
+}
+
+const keydown = async (target: Element, key: string) => {
+  target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+  await flushPromises()
+}
+
+/** Focusable elements in tab order (no positive tabindex in use here). */
+const tabStops = (root: Element) =>
+  Array.from(root.querySelectorAll<HTMLElement>('input, button, a[href], [tabindex]')).filter(
+    (element) => element.tabIndex >= 0 && !(element as HTMLButtonElement).disabled,
+  )
+
+describe('FontPicker', () => {
+  beforeEach(() => {
+    FakeIntersectionObserver.instances = []
+    FakeIntersectionObserver.visible = null
+    vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
+  })
+
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+    vi.unstubAllGlobals()
+    vi.useRealTimers()
+  })
+
+  describe('trigger', () => {
+    it('shows the chosen family in its own font, with the sans stack as fallback', () => {
+      const wrapper = mountPicker({ modelValue: 'Lato' })
+      const value = triggerOf(wrapper).find('[id$="-value"]')
+
+      expect(value.text()).toBe('Lato')
+      expect((value.element as HTMLElement).style.fontFamily).toContain('Lato')
+      expect((value.element as HTMLElement).style.fontFamily).toContain('var(--font-sans)')
+    })
+
+    it('shows the inherit label and its family, in that family', () => {
+      const wrapper = mountPicker({ inherit: { label: 'Huisstijl', family: 'Montserrat' } })
+      const value = triggerOf(wrapper).find('[id$="-value"]')
+
+      expect(value.text().replace(/\s+/g, ' ')).toBe('Huisstijl · Montserrat')
+      expect((value.element as HTMLElement).style.fontFamily).toContain('Montserrat')
+    })
+
+    it('shows only the inherit label, in the sans font, when the house style has no font', () => {
+      const wrapper = mountPicker({ inherit: { label: 'Huisstijl' } })
+      const value = triggerOf(wrapper).find('[id$="-value"]')
+
+      expect(value.text()).toBe('Huisstijl')
+      expect((value.element as HTMLElement).style.fontFamily).toBe('')
+    })
+
+    it('shows the placeholder when nothing is chosen, for null and the empty string', async () => {
+      const wrapper = mountPicker({ modelValue: null })
+      expect(triggerOf(wrapper).text()).toBe('Kies een lettertype')
+
+      await wrapper.setProps({ modelValue: '', placeholder: 'Kies…' })
+      expect(triggerOf(wrapper).text()).toBe('Kies…')
+    })
+
+    // Only the "Huisstijl" part may not shrink; the family behind it truncates
+    it('lets a long family truncate instead of widening the trigger', () => {
+      const wrapper = mountPicker({ inherit: { label: 'Huisstijl', family: 'A'.repeat(80) } })
+      const [primary, detail] = triggerOf(wrapper).findAll('[id$="-value"] > span')
+
+      expect(primary.classes()).toContain('shrink-0')
+      expect(detail.classes()).toEqual(expect.arrayContaining(['min-w-0', 'truncate']))
+    })
+
+    it('names itself with the label and the value in the editor', () => {
+      const wrapper = mountPicker({
+        ariaLabel: 'Lettertype',
+        inherit: { label: 'Huisstijl', family: 'Montserrat' },
+      })
+
+      expect(triggerOf(wrapper).attributes('aria-label')).toBe('Lettertype, Huisstijl · Montserrat')
+    })
+
+    it('is labelled by the visible label and the value in a form', () => {
+      const wrapper = mountPicker({ label: 'Lettertype', modelValue: 'Georgia' })
+      const label = wrapper.find('label')
+      const value = triggerOf(wrapper).find('[id$="-value"]')
+
+      expect(label.text()).toBe('Lettertype')
+      expect(label.attributes('for')).toBe(triggerOf(wrapper).attributes('id'))
+      expect(triggerOf(wrapper).attributes('aria-labelledby')).toBe(
+        `${label.attributes('id')} ${value.attributes('id')}`,
+      )
+      expect(triggerOf(wrapper).attributes('aria-label')).toBeUndefined()
+    })
+
+    it('is a button that announces a listbox popup', async () => {
+      const wrapper = mountPicker()
+      const trigger = triggerOf(wrapper)
+
+      expect(trigger.attributes('type')).toBe('button')
+      expect(trigger.attributes('aria-expanded')).toBe('false')
+
+      await open(wrapper)
+      expect(trigger.attributes('aria-expanded')).toBe('true')
+    })
+
+    it('opens on ArrowDown', async () => {
+      const wrapper = mountPicker()
+
+      await keydown(triggerOf(wrapper).element, 'ArrowDown')
+
+      expect(listboxOf(wrapper).exists()).toBe(true)
+      expect(wrapper.emitted('open')).toHaveLength(1)
+    })
+
+    it('does not open while disabled', async () => {
+      const wrapper = mountPicker({ disabled: true })
+
+      await open(wrapper)
+
+      expect(triggerOf(wrapper).attributes('disabled')).toBeDefined()
+      expect(triggerOf(wrapper).classes()).toEqual(
+        expect.arrayContaining(['opacity-50', 'cursor-not-allowed']),
+      )
+      expect(listboxOf(wrapper).exists()).toBe(false)
+      expect(wrapper.emitted('open')).toBeUndefined()
+    })
+  })
+
+  describe('panel', () => {
+    it('emits open, focuses the search field and highlights the current value', async () => {
+      const wrapper = mountPicker({ modelValue: 'Montserrat' })
+
+      await open(wrapper)
+
+      expect(wrapper.emitted('open')).toHaveLength(1)
+      expect(document.activeElement).toBe(inputOf(wrapper).element)
+      expect(activeOption(wrapper)?.textContent).toContain('Montserrat')
+    })
+
+    it('marks the current value with a check and the description "Huidige keuze"', async () => {
+      const wrapper = mountPicker({ modelValue: 'Georgia' })
+      await open(wrapper)
+
+      const current = optionOf(wrapper, 'Georgia')
+      expect(current.find('i[aria-hidden="true"]').exists()).toBe(true)
+      expect(descriptionOf(current.element)).toBe('Huidige keuze')
+      expect(optionOf(wrapper, 'Arial').attributes('aria-describedby')).toBeUndefined()
+    })
+
+    it('lists inherit first without a group, then "Standaard", then "Google Fonts"', async () => {
+      const wrapper = mountPicker({ inherit: { label: 'Huisstijl', family: 'Montserrat' } })
+      await open(wrapper)
+
+      const listbox = listboxOf(wrapper).element
+      const first = listbox.firstElementChild!
+      expect(first.getAttribute('role')).toBe('option')
+      expect(first.textContent?.replace(/\s+/g, ' ')).toContain('Huisstijl · Montserrat')
+
+      const groups = wrapper.findAll('[role="group"] [role="presentation"]').map((h) => h.text())
+      expect(groups).toEqual(['Standaard', 'Google Fonts'])
+    })
+
+    // A collapsible group carries aria-expanded on its role="group"
+    it('renders the groups as not collapsible', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+
+      const groups = listboxOf(wrapper).findAll('[role="group"]')
+      expect(groups).toHaveLength(2)
+      groups.forEach((group) => expect(group.attributes('aria-expanded')).toBeUndefined())
+    })
+
+    it('renders every row in its own font', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+
+      for (const { family } of FONTS) {
+        const row = optionOf(wrapper, family).find('[data-font-family]')
+        expect((row.element as HTMLElement).style.fontFamily).toContain(family)
+      }
+    })
+
+    // Same step as the grouped options of NexxtComboboxPanel; ungrouped rows stay level
+    it('indents grouped rows, and leaves inherit and an off-catalogue value level', async () => {
+      const wrapper = mountPicker({
+        modelValue: 'Comic Neue',
+        inherit: { label: 'Huisstijl', family: 'Montserrat' },
+      })
+      await open(wrapper)
+
+      const rowOf = (name: string) => optionOf(wrapper, name).find('[data-font-family]')
+      expect(rowOf('Huisstijl').classes()).not.toContain('pl-3')
+      expect(rowOf('Comic Neue').classes()).not.toContain('pl-3')
+      expect(rowOf('Arial').classes()).toContain('pl-3')
+      expect(rowOf('Roboto').classes()).toContain('pl-3')
+    })
+
+    it('finds the inherit option on its family name too', async () => {
+      const wrapper = mountPicker({ inherit: { label: 'Huisstijl', family: 'Montserrat' } })
+      await open(wrapper)
+
+      await inputOf(wrapper).setValue('montser')
+
+      // the visible row only: the description sits in a `hidden` span inside the option
+      const labels = wrapper
+        .findAll('[role="option"] > span:not([hidden])')
+        .map((row) => row.text().replace(/\s+/g, ' '))
+      expect(labels).toEqual(['Huisstijl · Montserrat', 'Montserrat'])
+    })
+
+    it('joins the current and the inherit description on the inherit option', async () => {
+      const wrapper = mountPicker({ inherit: { label: 'Huisstijl', family: 'Montserrat' } })
+      await open(wrapper)
+
+      expect(descriptionOf(optionOf(wrapper, 'Huisstijl').element)).toBe(
+        'Huidige keuze. Volgt de huisstijl, ook als die later verandert',
+      )
+    })
+
+    it('keeps a current value that is not in the catalogue at the top', async () => {
+      const wrapper = mountPicker({ modelValue: 'Comic Neue' })
+      await open(wrapper)
+
+      const first = listboxOf(wrapper).element.firstElementChild!
+      expect(first.textContent).toContain('Comic Neue')
+      expect(activeOption(wrapper)).toBe(first)
+    })
+
+    it('names the listbox, the search field and the panel', async () => {
+      const wrapper = mountPicker({ ariaLabel: 'Lettertype' })
+      await open(wrapper)
+
+      expect(listboxOf(wrapper).attributes('aria-label')).toBe('Lettertypes')
+      expect(inputOf(wrapper).attributes('aria-label')).toBe('Lettertype zoeken')
+      expect(inputOf(wrapper).attributes('placeholder')).toBe('Lettertype zoeken')
+      expect(wrapper.find('[role="group"][aria-label]').attributes('aria-label')).toBe('Lettertype')
+    })
+
+    it('merges custom messages per key', async () => {
+      const wrapper = mountPicker({
+        messages: { groupWebSafe: 'Web-safe', listLabel: 'Fonts' },
+      })
+      await open(wrapper)
+
+      expect(listboxOf(wrapper).attributes('aria-label')).toBe('Fonts')
+      const groups = wrapper.findAll('[role="group"] [role="presentation"]').map((h) => h.text())
+      expect(groups).toEqual(['Web-safe', 'Google Fonts'])
+    })
+  })
+
+  describe('choosing', () => {
+    it('writes the family on click, closes and puts focus back on the trigger', async () => {
+      const wrapper = mountPicker({ modelValue: 'Arial' })
+      await open(wrapper)
+
+      await optionOf(wrapper, 'Lato').trigger('click')
+      await flushPromises()
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['Lato']])
+      expect(listboxOf(wrapper).exists()).toBe(false)
+      expect(wrapper.emitted('close')).toHaveLength(1)
+      expect(document.activeElement).toBe(triggerOf(wrapper).element)
+    })
+
+    it('writes the highlighted family on Enter, and never on a highlight move', async () => {
+      const wrapper = mountPicker({ modelValue: 'Arial' })
+      await open(wrapper)
+
+      await keydown(inputOf(wrapper).element, 'ArrowDown')
+      await keydown(inputOf(wrapper).element, 'ArrowDown')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+
+      await keydown(inputOf(wrapper).element, 'Enter')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['Courier New']])
+      expect(document.activeElement).toBe(triggerOf(wrapper).element)
+    })
+
+    it('writes null for the inherit option', async () => {
+      const wrapper = mountPicker({ modelValue: 'Arial', inherit: { label: 'Huisstijl' } })
+      await open(wrapper)
+
+      await optionOf(wrapper, 'Huisstijl').trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
+    })
+
+    it('clears the search on the first Escape and closes on the second', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      await inputOf(wrapper).setValue('rob')
+
+      await keydown(inputOf(wrapper).element, 'Escape')
+      expect((inputOf(wrapper).element as HTMLInputElement).value).toBe('')
+      expect(listboxOf(wrapper).exists()).toBe(true)
+
+      await keydown(inputOf(wrapper).element, 'Escape')
+      expect(listboxOf(wrapper).exists()).toBe(false)
+      expect(document.activeElement).toBe(triggerOf(wrapper).element)
+    })
+
+    it('closes without moving focus when focus leaves panel and trigger', async () => {
+      const outside = document.createElement('button')
+      document.body.append(outside)
+      const wrapper = mountPicker()
+      await open(wrapper)
+
+      outside.focus()
+      await flushPromises()
+
+      expect(listboxOf(wrapper).exists()).toBe(false)
+      expect(document.activeElement).toBe(outside)
+      outside.remove()
+    })
+
+    it('stays open while focus moves inside the panel', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+
+      ;(listboxOf(wrapper).element as HTMLElement).focus()
+      await flushPromises()
+
+      expect(listboxOf(wrapper).exists()).toBe(true)
+    })
+  })
+
+  describe('states', () => {
+    it('shows web-safe families and six skeleton rows under "Google Fonts" while loading', async () => {
+      const wrapper = mountPicker({ fonts: WEB_SAFE, catalogueStatus: 'loading' })
+      await open(wrapper)
+
+      const listbox = listboxOf(wrapper)
+      expect(listbox.attributes('aria-busy')).toBe('true')
+      expect(wrapper.findAll('[role="option"]').map((o) => o.text())).toEqual([
+        'Arial',
+        'Georgia',
+        'Courier New',
+      ])
+
+      const placeholder = listbox.element.lastElementChild!
+      expect(placeholder.getAttribute('aria-hidden')).toBe('true')
+      expect(placeholder.textContent).toContain('Google Fonts')
+      expect(placeholder.querySelectorAll('.animate-pulse')).toHaveLength(6)
+    })
+
+    it('keeps the skeletons instead of the empty state for a search without results while loading', async () => {
+      const wrapper = mountPicker({ fonts: WEB_SAFE, catalogueStatus: 'loading' })
+      await open(wrapper)
+
+      await inputOf(wrapper).setValue('zzz')
+
+      expect(wrapper.text()).not.toContain('Geen lettertypes gevonden')
+      expect(listboxOf(wrapper).findAll('.animate-pulse')).toHaveLength(6)
+    })
+
+    it('shows only web-safe families and a notice with a retry button on error', async () => {
+      const wrapper = mountPicker({ fonts: WEB_SAFE, catalogueStatus: 'error' })
+      await open(wrapper)
+
+      expect(wrapper.findAll('[role="option"]')).toHaveLength(3)
+      const notice = wrapper.find('[role="status"]:not([aria-live])')
+      expect(notice.text()).toContain('Google Fonts konden niet worden geladen.')
+      // outside the listbox: the notice is no option
+      expect(listboxOf(wrapper).element.contains(notice.element)).toBe(false)
+
+      await notice.find('button').trigger('click')
+      expect(wrapper.emitted('retry')).toHaveLength(1)
+    })
+
+    it('shows the empty state with a clear button for a search without results', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+
+      await inputOf(wrapper).setValue('zzz')
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      expect(wrapper.text()).toContain('Geen lettertypes gevonden')
+      expect(wrapper.text()).toContain('Niets gevonden voor ‘zzz’.')
+      const clear = wrapper.findAll('button').find((b) => b.text() === 'Zoekopdracht wissen')!
+      await clear.trigger('click')
+      expect((inputOf(wrapper).element as HTMLInputElement).value).toBe('')
+    })
+
+    // search field, listbox, and the one button of the state that is showing
+    it.each([
+      ['ready', '', 2],
+      ['error', '', 3],
+      ['ready', 'zzz', 2],
+    ] as const)('has at most three tab stops (%s, search "%s")', async (status, term, count) => {
+      const wrapper = mountPicker({ catalogueStatus: status })
+      await open(wrapper)
+      if (term) await inputOf(wrapper).setValue(term)
+      await flushPromises()
+
+      const panel = wrapper.find('.z-50').element
+      expect(tabStops(panel)).toHaveLength(count)
+    })
+  })
+
+  // The status only adds skeletons or a notice; it never takes away what `fonts` holds
+  describe('catalogue status with a filled catalogue', () => {
+    const groupOf = (wrapper: VueWrapper, name: string) =>
+      optionOf(wrapper, name).element.closest('[role="group"]')?.textContent ?? null
+
+    it.each(['loading', 'error'] as const)(
+      'keeps every family, and the chosen Google font in its group, while %s',
+      async (catalogueStatus) => {
+        const wrapper = mountPicker({ modelValue: 'Lato', catalogueStatus })
+        await open(wrapper)
+
+        expect(wrapper.findAll('[role="option"]')).toHaveLength(FONTS.length)
+        expect(groupOf(wrapper, 'Lato')).toContain('Google Fonts')
+        expect(activeOption(wrapper)?.textContent).toContain('Lato')
+      },
+    )
+
+    it('marks the list busy but shows no skeletons next to a Google group that is there', async () => {
+      const wrapper = mountPicker({ catalogueStatus: 'loading' })
+      await open(wrapper)
+
+      expect(listboxOf(wrapper).attributes('aria-busy')).toBe('true')
+      expect(listboxOf(wrapper).findAll('.animate-pulse')).toHaveLength(0)
+    })
+
+    it('does not move the chosen font or the highlight on a refresh that fails', async () => {
+      const wrapper = mountPicker({ modelValue: 'Lato' })
+      await open(wrapper)
+      const before = activeOption(wrapper)
+
+      await wrapper.setProps({ catalogueStatus: 'loading' })
+      await wrapper.setProps({ catalogueStatus: 'error' })
+      await flushPromises()
+
+      expect(groupOf(wrapper, 'Lato')).toContain('Google Fonts')
+      expect(activeOption(wrapper)).toBe(before)
+      expect(wrapper.find('[role="status"]:not([aria-live])').exists()).toBe(true)
+    })
+  })
+
+  it('lists a family that occurs twice in the catalogue once', async () => {
+    const wrapper = mountPicker({
+      fonts: [
+        ...FONTS,
+        { family: 'Lato', source: 'google' },
+        { family: 'Arial', source: 'google' },
+      ],
+    })
+    await open(wrapper)
+
+    const labels = wrapper.findAll('[role="option"] [data-font-family]').map((row) => row.text())
+    expect(labels.filter((label) => label === 'Lato')).toHaveLength(1)
+    // the first occurrence wins, group included
+    expect(optionOf(wrapper, 'Arial').element.closest('[role="group"]')?.textContent).toContain(
+      'Standaard',
+    )
+    expect(labels).toHaveLength(FONTS.length)
+  })
+
+  it('keeps the search term and the highlight when the catalogue arrives with the panel open', async () => {
+    const wrapper = mountPicker({ fonts: WEB_SAFE, catalogueStatus: 'loading' })
+    await open(wrapper)
+    // "o": Georgia and Courier New now, Roboto, Montserrat and Lato once the catalogue is in
+    await inputOf(wrapper).setValue('o')
+    await keydown(inputOf(wrapper).element, 'ArrowDown')
+    expect(activeOption(wrapper)?.textContent).toContain('Courier New')
+
+    await wrapper.setProps({ fonts: FONTS, catalogueStatus: 'ready' })
+    await flushPromises()
+
+    expect((inputOf(wrapper).element as HTMLInputElement).value).toBe('o')
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(5)
+    expect(activeOption(wrapper)?.textContent).toContain('Courier New')
+  })
+
+  it('emits nothing when the inherit option is chosen on a null model', async () => {
+    const wrapper = mountPicker({ modelValue: null, inherit: { label: 'Huisstijl' } })
+    await open(wrapper)
+
+    await optionOf(wrapper, 'Huisstijl').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(listboxOf(wrapper).exists()).toBe(false)
+  })
+
+  // `''` is a stored value from before; the component itself writes `null`
+  it('writes null when the inherit option is chosen on a stored empty string', async () => {
+    const wrapper = mountPicker({ modelValue: '', inherit: { label: 'Huisstijl' } })
+    await open(wrapper)
+
+    await optionOf(wrapper, 'Huisstijl').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
+  })
+
+  describe('accessible name warning', () => {
+    it('warns once in development when neither label nor ariaLabel is given', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+
+      mountPicker()
+
+      expect(warn).toHaveBeenCalledOnce()
+      expect(warn.mock.calls[0][0]).toContain('[NexxtFontPicker]')
+      warn.mockRestore()
+    })
+
+    it.each([{ label: 'Lettertype' }, { ariaLabel: 'Lettertype' }])(
+      'stays silent with %o',
+      (props) => {
+        const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+
+        mountPicker(props)
+
+        expect(warn).not.toHaveBeenCalled()
+        warn.mockRestore()
+      },
+    )
+  })
+
+  describe('loading faces', () => {
+    it('requests the family of the current value on mount', async () => {
+      const loadFont = vi.fn()
+      mountPicker({ modelValue: 'Lato', loadFont })
+      await flushPromises()
+
+      expect(loadFont).toHaveBeenCalledWith('Lato')
+    })
+
+    it('requests the inherit family on mount when the model is null', async () => {
+      const loadFont = vi.fn()
+      mountPicker({ inherit: { label: 'Huisstijl', family: 'Montserrat' }, loadFont })
+      await flushPromises()
+
+      expect(loadFont).toHaveBeenCalledWith('Montserrat')
+    })
+
+    it('observes the rows with the listbox as root and a 150px margin', async () => {
+      const wrapper = mountPicker({ loadFont: vi.fn() })
+      await open(wrapper)
+
+      const observer = FakeIntersectionObserver.instances.at(-1)!
+      expect(observer.options?.root).toBe(listboxOf(wrapper).element)
+      expect(observer.options?.rootMargin).toBe('150px 0px')
+      expect(observer.observed).toHaveLength(FONTS.length)
+    })
+
+    it('requests the rows in view 100ms after scrolling rests, each family once', async () => {
+      const loadFont = vi.fn()
+      const wrapper = mountPicker({ loadFont })
+      await open(wrapper)
+      vi.useFakeTimers()
+      const observer = FakeIntersectionObserver.instances.at(-1)!
+
+      observer.report(['Arial', 'Roboto'])
+      vi.advanceTimersByTime(50)
+      // scrolled on: Arial left the view before scrolling came to rest
+      observer.report(['Arial'], false)
+      observer.report(['Lato'])
+      vi.advanceTimersByTime(99)
+      expect(loadFont).not.toHaveBeenCalled()
+
+      vi.advanceTimersByTime(1)
+      expect(loadFont.mock.calls.map(([family]) => family).sort()).toEqual(['Lato', 'Roboto'])
+
+      observer.report(['Lato'])
+      vi.advanceTimersByTime(100)
+      expect(loadFont).toHaveBeenCalledTimes(2)
+    })
+
+    it('starts once a loader arrives after mount: the current family and the rows in view', async () => {
+      const wrapper = mountPicker({ modelValue: 'Lato' })
+      await open(wrapper)
+      expect(FakeIntersectionObserver.instances).toHaveLength(0)
+
+      const loadFont = vi.fn()
+      await wrapper.setProps({ loadFont })
+      await flushPromises()
+      expect(loadFont).toHaveBeenCalledWith('Lato')
+
+      vi.useFakeTimers()
+      FakeIntersectionObserver.instances.at(-1)!.report(['Arial', 'Lato'])
+      vi.advanceTimersByTime(100)
+      expect(loadFont.mock.calls.map(([family]) => family)).toEqual(['Lato', 'Arial'])
+    })
+
+    it('does not ask a new loader again for families already requested', async () => {
+      const first = vi.fn()
+      const wrapper = mountPicker({ modelValue: 'Lato', loadFont: first })
+      await flushPromises()
+
+      const second = vi.fn()
+      await wrapper.setProps({ loadFont: second })
+      await open(wrapper)
+      vi.useFakeTimers()
+      FakeIntersectionObserver.instances.at(-1)!.report(['Lato', 'Roboto'])
+      vi.advanceTimersByTime(100)
+
+      expect(first).toHaveBeenCalledWith('Lato')
+      expect(second.mock.calls.map(([family]) => family)).toEqual(['Roboto'])
+    })
+
+    it('ignores a loader that fails', async () => {
+      const loadFont = vi.fn(() => Promise.reject(new Error('offline')))
+      const wrapper = mountPicker({ modelValue: 'Lato', loadFont })
+      await flushPromises()
+
+      expect(loadFont).toHaveBeenCalledOnce()
+      expect(triggerOf(wrapper).text()).toBe('Lato')
+    })
+
+    it('asks again for a family whose load failed, once its row is back in view', async () => {
+      let robotoCalls = 0
+      const loadFont = vi.fn((family: string) => {
+        if (family !== 'Roboto') return Promise.resolve()
+        robotoCalls++
+        return robotoCalls === 1 ? Promise.reject(new Error('offline')) : Promise.resolve()
+      })
+      const wrapper = mountPicker({ loadFont })
+      await open(wrapper)
+      vi.useFakeTimers()
+      const observer = FakeIntersectionObserver.instances.at(-1)!
+
+      observer.report(['Roboto'])
+      vi.advanceTimersByTime(100)
+      await vi.runAllTimersAsync()
+
+      observer.report(['Roboto'], false)
+      observer.report(['Roboto'])
+      vi.advanceTimersByTime(100)
+
+      expect(robotoCalls).toBe(2)
+    })
+
+    // A real observer re-reports every row in view when it is created, and every search, item
+    // change or new loader identity creates one; that alone must not retry a failed family
+    describe('a loader that keeps failing', () => {
+      const settle = () => new Promise((resolve) => setTimeout(resolve, 150))
+
+      const mountFailing = async () => {
+        FakeIntersectionObserver.visible = new Set(['Roboto'])
+        const calls: string[] = []
+        const failing = (family: string) => {
+          calls.push(family)
+          return Promise.reject(new Error('offline'))
+        }
+        const wrapper = mountPicker({ ariaLabel: 'Lettertype', loadFont: failing })
+        await open(wrapper)
+        await settle()
+        return { wrapper, calls, failing }
+      }
+
+      it('is asked once while the row stays in view, however much is typed', async () => {
+        const { wrapper, calls } = await mountFailing()
+        expect(calls).toEqual(['Roboto'])
+
+        for (const term of ['r', 'ro', 'rob', 'robo']) {
+          await inputOf(wrapper).setValue(term)
+          await settle()
+        }
+
+        expect(FakeIntersectionObserver.instances.length).toBeGreaterThan(4)
+        expect(calls).toEqual(['Roboto'])
+      })
+
+      it('is asked once while the row stays in view, with a new loader identity', async () => {
+        const { wrapper, calls, failing } = await mountFailing()
+
+        await wrapper.setProps({ loadFont: (family: string) => failing(family) })
+        await settle()
+        await wrapper.setProps({ loadFont: (family: string) => failing(family) })
+        await settle()
+
+        expect(calls).toEqual(['Roboto'])
+      })
+
+      it('is asked again after the row has been out of view and comes back', async () => {
+        const { calls } = await mountFailing()
+        const observer = FakeIntersectionObserver.instances.at(-1)!
+
+        observer.report(['Roboto'], false)
+        observer.report(['Roboto'])
+        await settle()
+
+        expect(calls).toEqual(['Roboto', 'Roboto'])
+      })
+
+      it('is asked again when the panel opens again', async () => {
+        const { wrapper, calls } = await mountFailing()
+
+        await keydown(inputOf(wrapper).element, 'Escape')
+        await open(wrapper)
+        await settle()
+
+        expect(calls).toEqual(['Roboto', 'Roboto'])
+      })
+    })
+
+    it('does not ask again for a family that loaded', async () => {
+      const loadFont = vi.fn(() => Promise.resolve())
+      const wrapper = mountPicker({ loadFont })
+      await open(wrapper)
+      vi.useFakeTimers()
+      const observer = FakeIntersectionObserver.instances.at(-1)!
+
+      observer.report(['Roboto'])
+      vi.advanceTimersByTime(100)
+      await vi.runAllTimersAsync()
+      observer.report(['Roboto'], false)
+      observer.report(['Roboto'])
+      vi.advanceTimersByTime(100)
+
+      expect(loadFont).toHaveBeenCalledOnce()
+    })
+
+    it('keeps a row choosable and in its fallback stack when the loader throws', async () => {
+      const loadFont = vi.fn(() => {
+        throw new Error('blocked')
+      })
+      const wrapper = mountPicker({ modelValue: 'Arial', loadFont })
+      await open(wrapper)
+      vi.useFakeTimers()
+      FakeIntersectionObserver.instances.at(-1)!.report(['Lato'])
+      vi.advanceTimersByTime(100)
+      vi.useRealTimers()
+      await flushPromises()
+
+      expect(loadFont).toHaveBeenCalledWith('Lato')
+      const row = optionOf(wrapper, 'Lato').find('[data-font-family]').element as HTMLElement
+      expect(row.style.fontFamily).toContain('var(--font-sans)')
+
+      await optionOf(wrapper, 'Lato').trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toEqual([['Lato']])
+    })
+
+    it('disconnects the observer when the panel closes', async () => {
+      const wrapper = mountPicker({ loadFont: vi.fn() })
+      await open(wrapper)
+      const observer = FakeIntersectionObserver.instances.at(-1)!
+
+      await keydown(inputOf(wrapper).element, 'Escape')
+
+      expect(observer.disconnected).toBe(true)
+    })
+
+    it('calls no loader after unmount for a debounce that was still running', async () => {
+      const loadFont = vi.fn()
+      const wrapper = mountPicker({ loadFont })
+      await open(wrapper)
+      vi.useFakeTimers()
+
+      FakeIntersectionObserver.instances.at(-1)!.report(['Roboto'])
+      vi.advanceTimersByTime(50)
+      wrapper.unmount()
+      mounted.splice(mounted.indexOf(wrapper), 1)
+      vi.advanceTimersByTime(100)
+
+      expect(loadFont).not.toHaveBeenCalled()
+    })
+
+    it('observes nothing without a loader', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+
+      expect(FakeIntersectionObserver.instances).toHaveLength(0)
+    })
+  })
+})