@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,1247 @@
+import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest'
+import { h, nextTick } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import Tree, { type NexxtTreeNode } from './Tree.vue'
+
+const NODES: NexxtTreeNode[] = [
+  {
+    id: 'page',
+    label: 'Welkomstpagina',
+    icon: 'file',
+    children: [
+      { id: 'image', label: 'Afbeelding 1', icon: 'image' },
+      {
+        id: 'group',
+        label: 'Groep 1',
+        icon: 'object-group',
+        children: [
+          { id: 'title', label: 'Titel', icon: 'heading' },
+          { id: 'text', label: 'Tekst', icon: 'font' },
+        ],
+      },
+    ],
+  },
+]
+
+const labels = (wrapper: ReturnType<typeof mount>) =>
+  wrapper.findAll('[role="treeitem"]').map((row) => row.text())
+
+const dragEvent = (type: string, properties: Partial<DragEvent> = {}) => {
+  const event = new Event(type, { bubbles: true, cancelable: true }) as DragEvent
+
+  Object.entries(properties).forEach(([key, value]) => {
+    Object.defineProperty(event, key, { configurable: true, value })
+  })
+
+  return event
+}
+const pointerEvent = (type: string, properties: Partial<PointerEvent> = {}) => {
+  const event = new Event(type, { bubbles: true, cancelable: true }) as PointerEvent
+
+  Object.entries(properties).forEach(([key, value]) => {
+    Object.defineProperty(event, key, { configurable: true, value })
+  })
+
+  return event
+}
+
+const dataTransfer = (): DataTransfer =>
+  ({
+    dropEffect: 'none',
+    effectAllowed: 'all',
+    files: [] as unknown as FileList,
+    items: [] as unknown as DataTransferItemList,
+    types: [],
+    clearData: vi.fn(),
+    getData: vi.fn(),
+    setData: vi.fn(),
+    setDragImage: vi.fn(),
+  }) as unknown as DataTransfer
+describe('Tree', () => {
+  it('renders every node as a tree item with its level', () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Pagina structuur' } })
+
+    expect(wrapper.attributes('role')).toBe('tree')
+    expect(wrapper.attributes('aria-label')).toBe('Pagina structuur')
+    expect(labels(wrapper)).toEqual(['Welkomstpagina', 'Afbeelding 1', 'Groep 1', 'Titel', 'Tekst'])
+    expect(wrapper.find('[data-tree-id="title"]').attributes('aria-level')).toBe('3')
+    expect(wrapper.find('[data-tree-id="group"]').attributes('aria-expanded')).toBe('true')
+    expect(wrapper.find('[data-tree-id="image"]').attributes('aria-expanded')).toBeUndefined()
+  })
+
+  it('hides the children of a collapsed node', () => {
+    const wrapper = mount(Tree, {
+      props: { nodes: NODES, label: 'Structuur', collapsed: ['group'] },
+    })
+
+    expect(labels(wrapper)).toEqual(['Welkomstpagina', 'Afbeelding 1', 'Groep 1'])
+    expect(wrapper.find('[data-tree-id="group"]').attributes('aria-expanded')).toBe('false')
+  })
+
+  it('selects a row on click and marks it', async () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur' } })
+
+    await wrapper.find('[data-tree-id="image"]').trigger('click')
+
+    expect(wrapper.emitted('update:selected')).toEqual([['image']])
+  })
+
+  describe('drag and drop', () => {
+    // jsdom lays nothing out: every element in the row list gets a 28px row and a 2px gap, in
+    // document order, which is what the hit-test reads. Leaving elements take no space.
+    const PITCH = 30
+    const native = {
+      offsetTop: Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetTop')!,
+      offsetHeight: Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight')!,
+    }
+
+    beforeEach(() => {
+      Object.defineProperty(HTMLElement.prototype, 'offsetTop', {
+        configurable: true,
+        get(this: HTMLElement) {
+          const flow = Array.from(this.parentElement?.children ?? []).filter(
+            (element) => !element.classList.contains('absolute'),
+          )
+
+          return Math.max(0, flow.indexOf(this)) * PITCH
+        },
+      })
+      Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+        configurable: true,
+        get: () => PITCH - 2,
+      })
+    })
+
+    afterEach(() => {
+      Object.defineProperty(HTMLElement.prototype, 'offsetTop', native.offsetTop)
+      Object.defineProperty(HTMLElement.prototype, 'offsetHeight', native.offsetHeight)
+      vi.useRealTimers()
+    })
+
+    const mountDraggable = (props: Record<string, unknown> = {}) => {
+      const wrapper = mount(Tree, {
+        props: { nodes: NODES, label: 'Structuur', draggable: true, ...props },
+        attachTo: document.body,
+      })
+
+      vi.spyOn(wrapper.element as HTMLElement, 'getBoundingClientRect').mockReturnValue({
+        top: 0,
+        left: 0,
+        right: 200,
+        bottom: 1000,
+      } as DOMRect)
+
+      return wrapper
+    }
+
+    type Wrapper = ReturnType<typeof mountDraggable>
+
+    const rowOf = (wrapper: Wrapper, id: string) =>
+      wrapper.find(`[data-tree-id="${id}"]`).element as HTMLElement
+    const ghost = (wrapper: Wrapper) => wrapper.find('[data-tree-ghost]')
+    /**
+     * The ghost row's indent for `depth`, in the tree's own step: one level is the difference
+     * between the padding of `image` (level 2) and `page` (level 1), so a new indent breaks nothing.
+     */
+    const indentAt = (wrapper: Wrapper, depth: number) => {
+      const padding = (id: string) => parseFloat(rowOf(wrapper, id).style.paddingLeft)
+
+      return `${depth * (padding('image') - padding('page'))}px`
+    }
+    const ghostIndent = (wrapper: Wrapper) =>
+      (ghost(wrapper).element.firstElementChild as HTMLElement).style.marginLeft
+    /** The ids in the row list in document order, with the ghost row as `+`. */
+    const order = (wrapper: Wrapper) =>
+      Array.from(rowOf(wrapper, 'page').parentElement!.children).map((element) =>
+        'treeGhost' in (element as HTMLElement).dataset
+          ? '+'
+          : (element as HTMLElement).dataset.treeId,
+      )
+
+    /** Starts a native drag of `id`; the returned function moves it to `y` within the tree. */
+    const dragNative = (wrapper: Wrapper, id: string) => {
+      const transfer = dataTransfer()
+      rowOf(wrapper, id).dispatchEvent(dragEvent('dragstart', { dataTransfer: transfer }))
+
+      const over = async (y: number, target: Element = wrapper.element) => {
+        const event = dragEvent('dragover', { clientX: 10, clientY: y, dataTransfer: transfer })
+        target.dispatchEvent(event)
+        await nextTick()
+
+        return event
+      }
+      const drop = async () => {
+        const event = dragEvent('drop', { dataTransfer: transfer })
+        ;(ghost(wrapper).exists() ? ghost(wrapper).element : wrapper.element).dispatchEvent(event)
+        rowOf(wrapper, id).dispatchEvent(dragEvent('dragend', { dataTransfer: transfer }))
+        await nextTick()
+      }
+
+      return { over, drop }
+    }
+
+    const touch = (type: string, x: number, y: number) =>
+      pointerEvent(type, { pointerId: 1, pointerType: 'touch', clientX: x, clientY: y })
+
+    it('emits a move for a spot before a sibling', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'text')
+
+      // the top half of `title`
+      const over = await drag.over(3 * PITCH + 5)
+      await drag.drop()
+
+      expect(over.defaultPrevented).toBe(true)
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'text', parentId: 'group', index: 0 }]])
+      wrapper.unmount()
+    })
+
+    it('emits a move for a spot after a sibling', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'title')
+
+      await drag.over(4 * PITCH + 20)
+      await drag.drop()
+
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'title', parentId: 'group', index: 2 }]])
+      wrapper.unmount()
+    })
+
+    it('lands a drop inside a group as its first child', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'image')
+
+      // the middle of `group`, which has two children
+      await drag.over(2 * PITCH + 14)
+      await drag.drop()
+
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'image', parentId: 'group', index: 0 }]])
+      wrapper.unmount()
+    })
+
+    it('treats the spot a node already has as no target', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'title')
+
+      // before `text` is right after `title`, where it already is
+      const over = await drag.over(4 * PITCH + 5)
+
+      expect(over.defaultPrevented).toBe(false)
+      expect(ghost(wrapper).exists()).toBe(false)
+
+      await drag.drop()
+
+      expect(wrapper.emitted('move')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    it('does not allow a node to move onto itself or into its own descendant', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'group')
+
+      for (const y of [2 * PITCH + 14, 3 * PITCH + 5, 4 * PITCH + 20]) {
+        const over = await drag.over(y)
+
+        expect(over.defaultPrevented).toBe(false)
+        expect(ghost(wrapper).exists()).toBe(false)
+      }
+
+      await drag.drop()
+      expect(wrapper.emitted('move')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    it('shows one ghost row, out of the accessibility tree, where the node will land', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'image')
+      const before = wrapper
+        .findAll('[role="treeitem"]')
+        .map((row) => [row.attributes('aria-posinset'), row.attributes('aria-setsize')])
+
+      await drag.over(3 * PITCH + 5)
+
+      expect(order(wrapper)).toEqual(['page', 'image', 'group', '+', 'title', 'text'])
+      expect(wrapper.findAll('[data-tree-ghost]')).toHaveLength(1)
+
+      const element = ghost(wrapper)
+      expect(element.attributes('aria-hidden')).toBe('true')
+      expect(element.attributes('role')).toBeUndefined()
+      expect(element.attributes('tabindex')).toBeUndefined()
+      expect(element.attributes('data-tree-id')).toBeUndefined()
+      expect(element.text()).toBe('Afbeelding 1')
+      // indented as deep as the children of `group`
+      expect(ghostIndent(wrapper)).toBe(indentAt(wrapper, 2))
+      expect(element.element.firstElementChild!.classList).toContain(
+        'motion-reduce:transition-none',
+      )
+
+      // the treeitems are exactly what they were without a drag
+      expect(
+        wrapper
+          .findAll('[role="treeitem"]')
+          .map((row) => [row.attributes('aria-posinset'), row.attributes('aria-setsize')]),
+      ).toEqual(before)
+
+      await drag.drop()
+      expect(ghost(wrapper).exists()).toBe(false)
+      wrapper.unmount()
+    })
+
+    it('puts the ghost row under an open group for inside, and after its subtree for after', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'image')
+
+      await drag.over(2 * PITCH + 14)
+      expect(order(wrapper)).toEqual(['page', 'image', 'group', '+', 'title', 'text'])
+
+      // the bottom of `group`: it lands after the group, so after everything shown inside it
+      await drag.over(2 * PITCH + 26)
+      expect(order(wrapper)).toEqual(['page', 'image', 'group', 'title', 'text', '+'])
+      expect(ghostIndent(wrapper)).toBe(indentAt(wrapper, 1))
+
+      await drag.drop()
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'image', parentId: 'page', index: 2 }]])
+      wrapper.unmount()
+    })
+
+    it('leaves the ghost row alone while the pointer rests, on a row, a gap or the ghost', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'image')
+
+      // after `title`: the ghost row goes in between `title` and `text`
+      await drag.over(3 * PITCH + 20)
+      // let the source dim first: that is a change of its own, and not the ghost row's
+      await new Promise((resolve) => setTimeout(resolve))
+      const placed = ghost(wrapper).element
+      expect(order(wrapper)).toEqual(['page', 'image', 'group', 'title', '+', 'text'])
+
+      const mutations: MutationRecord[] = []
+      const observer = new MutationObserver((records) => mutations.push(...records))
+      observer.observe(wrapper.element, { subtree: true, childList: true, attributes: true })
+
+      // the same point over and over, the gap under `title`, the ghost row itself, and the top
+      // of `text` that now sits below the ghost: before `text` is the very same spot
+      for (const y of [
+        3 * PITCH + 20,
+        3 * PITCH + 20,
+        3 * PITCH + 29,
+        4 * PITCH + 10,
+        5 * PITCH + 5,
+      ]) {
+        await drag.over(y)
+      }
+      await flushPromises()
+      observer.disconnect()
+
+      expect(mutations).toEqual([])
+      expect(ghost(wrapper).element).toBe(placed)
+
+      await drag.drop()
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'image', parentId: 'group', index: 1 }]])
+      wrapper.unmount()
+    })
+
+    it('marks a collapsed group itself instead of showing a ghost row under it', async () => {
+      const wrapper = mountDraggable({ collapsed: ['group'] })
+      const drag = dragNative(wrapper, 'image')
+
+      await drag.over(2 * PITCH + 14)
+
+      const group = wrapper.find('[data-tree-id="group"]')
+      expect(ghost(wrapper).exists()).toBe(false)
+      expect(group.attributes('data-tree-drop')).toBe('inside')
+      expect(group.classes()).toEqual(
+        expect.arrayContaining(['outline-dashed', 'bg-cornflower-blue-50']),
+      )
+      expect(group.attributes('aria-expanded')).toBe('false')
+
+      await drag.drop()
+
+      expect(wrapper.emitted('update:collapsed')).toBeUndefined()
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'image', parentId: 'group', index: 0 }]])
+      expect(group.attributes('data-tree-drop')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    it('dims the dragged rows only once the drag image is taken, and turns hover off', async () => {
+      vi.useFakeTimers()
+      const wrapper = mountDraggable()
+      dragNative(wrapper, 'group')
+      await nextTick()
+
+      // still at full strength while the browser takes the drag image
+      expect(rowOf(wrapper, 'group').classList).not.toContain('opacity-40')
+
+      vi.runAllTimers()
+      await nextTick()
+
+      const dimmed = ['page', 'image', 'group', 'title', 'text'].filter((id) =>
+        rowOf(wrapper, id).classList.contains('opacity-40'),
+      )
+      expect(dimmed).toEqual(['group', 'title', 'text'])
+      expect(rowOf(wrapper, 'image').classList).not.toContain('hover:bg-gray-100')
+
+      rowOf(wrapper, 'group').dispatchEvent(dragEvent('dragend'))
+      await nextTick()
+
+      expect(rowOf(wrapper, 'group').classList).not.toContain('opacity-40')
+      expect(rowOf(wrapper, 'image').classList).toContain('hover:bg-gray-100')
+      wrapper.unmount()
+    })
+
+    it('clears the spot once the pointer leaves the tree, and drops nothing there', async () => {
+      const wrapper = mountDraggable()
+      const outside = document.createElement('div')
+      document.body.append(outside)
+      const drag = dragNative(wrapper, 'image')
+
+      await drag.over(3 * PITCH + 5)
+      expect(ghost(wrapper).exists()).toBe(true)
+
+      await drag.over(0, outside)
+      expect(ghost(wrapper).exists()).toBe(false)
+
+      // Escape and a drop outside the tree both end in a `dragend` without a `drop`
+      rowOf(wrapper, 'image').dispatchEvent(dragEvent('dragend'))
+      await nextTick()
+
+      expect(wrapper.emitted('move')).toBeUndefined()
+      outside.remove()
+      wrapper.unmount()
+    })
+
+    it('emits a move from a touch pointer', async () => {
+      const wrapper = mountDraggable()
+
+      rowOf(wrapper, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      const move = touch('pointermove', 10, 4 * PITCH + 20)
+      wrapper.element.dispatchEvent(move)
+      await nextTick()
+
+      expect(order(wrapper)).toEqual(['page', 'image', 'group', 'title', 'text', '+'])
+      // no drag image to keep at full strength: dimmed at once
+      expect(rowOf(wrapper, 'title').classList).toContain('opacity-40')
+
+      wrapper.element.dispatchEvent(touch('pointerup', 10, 4 * PITCH + 20))
+      await nextTick()
+
+      expect(move.defaultPrevented).toBe(true)
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'title', parentId: 'group', index: 2 }]])
+      expect(ghost(wrapper).exists()).toBe(false)
+      wrapper.unmount()
+    })
+
+    it('cancels a touch drag on Escape and ignores the click that follows', async () => {
+      const wrapper = mountDraggable()
+
+      rowOf(wrapper, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+      await nextTick()
+      expect(ghost(wrapper).exists()).toBe(true)
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(ghost(wrapper).exists()).toBe(false)
+      expect(rowOf(wrapper, 'title').classList).not.toContain('opacity-40')
+
+      wrapper.element.dispatchEvent(touch('pointerup', 10, 4 * PITCH + 20))
+      rowOf(wrapper, 'title').click()
+
+      expect(wrapper.emitted('move')).toBeUndefined()
+      expect(wrapper.emitted('update:selected')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    it('drops nothing when a touch drag is let go outside the tree', async () => {
+      const wrapper = mountDraggable()
+
+      rowOf(wrapper, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+      await nextTick()
+
+      // pointer capture keeps the events coming from the row, wherever the finger goes
+      wrapper.element.dispatchEvent(touch('pointermove', 300, 4 * PITCH + 20))
+      await nextTick()
+      expect(ghost(wrapper).exists()).toBe(false)
+
+      wrapper.element.dispatchEvent(touch('pointerup', 300, 4 * PITCH + 20))
+
+      expect(wrapper.emitted('move')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    it('ends a native drag on Escape without a move: a dragend and no drop', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'image')
+
+      await drag.over(3 * PITCH + 5)
+      expect(ghost(wrapper).exists()).toBe(true)
+
+      rowOf(wrapper, 'image').dispatchEvent(dragEvent('dragend'))
+      await nextTick()
+
+      expect(ghost(wrapper).exists()).toBe(false)
+      expect(wrapper.emitted('move')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    describe('canDrop', () => {
+      it('turns a spot down: no ghost row, no drop and a `none` drop effect', async () => {
+        const canDrop = vi.fn(({ parentId }: { parentId: string | null }) => parentId !== 'group')
+        const wrapper = mountDraggable({ canDrop })
+        const drag = dragNative(wrapper, 'image')
+
+        // before `title`, inside `group`
+        const refused = await drag.over(3 * PITCH + 5)
+
+        expect(canDrop).toHaveBeenLastCalledWith({ id: 'image', parentId: 'group', index: 0 })
+        expect(refused.defaultPrevented).toBe(false)
+        expect(refused.dataTransfer!.dropEffect).toBe('none')
+        expect(ghost(wrapper).exists()).toBe(false)
+
+        await drag.drop()
+        expect(wrapper.emitted('move')).toBeUndefined()
+        wrapper.unmount()
+      })
+
+      it('only turns down the spots it refuses', async () => {
+        const canDrop = ({ parentId }: { parentId: string | null }) => parentId !== 'group'
+        const wrapper = mountDraggable({ canDrop })
+        const drag = dragNative(wrapper, 'image')
+
+        // the bottom of `group`: after it, inside `page`
+        const allowed = await drag.over(2 * PITCH + 26)
+
+        expect(allowed.defaultPrevented).toBe(true)
+        expect(allowed.dataTransfer!.dropEffect).toBe('move')
+        expect(ghost(wrapper).exists()).toBe(true)
+
+        await drag.drop()
+        expect(wrapper.emitted('move')).toEqual([[{ id: 'image', parentId: 'page', index: 2 }]])
+        wrapper.unmount()
+      })
+
+      it('does not mark a collapsed group it refuses', async () => {
+        const wrapper = mountDraggable({ collapsed: ['group'], canDrop: () => false })
+        const drag = dragNative(wrapper, 'image')
+
+        await drag.over(2 * PITCH + 14)
+
+        const group = wrapper.find('[data-tree-id="group"]')
+        expect(group.attributes('data-tree-drop')).toBeUndefined()
+        expect(group.classes()).not.toContain('outline-dashed')
+        wrapper.unmount()
+      })
+
+      it('turns a spot down for a touch drag too', async () => {
+        const wrapper = mountDraggable({ canDrop: () => false })
+
+        rowOf(wrapper, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+        wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+        await nextTick()
+        expect(ghost(wrapper).exists()).toBe(false)
+
+        wrapper.element.dispatchEvent(touch('pointerup', 10, 4 * PITCH + 20))
+        expect(wrapper.emitted('move')).toBeUndefined()
+        wrapper.unmount()
+      })
+    })
+
+    it('offers the end of the last row’s level in the empty space below the rows', async () => {
+      const wrapper = mountDraggable()
+      const drag = dragNative(wrapper, 'image')
+
+      // the tree runs to 1000px, the rows end at 150
+      const over = await drag.over(600)
+
+      expect(over.defaultPrevented).toBe(true)
+      expect(order(wrapper)).toEqual(['page', 'image', 'group', 'title', 'text', '+'])
+      expect(ghostIndent(wrapper)).toBe(indentAt(wrapper, 2))
+
+      await drag.drop()
+      expect(wrapper.emitted('move')).toEqual([[{ id: 'image', parentId: 'group', index: 2 }]])
+      wrapper.unmount()
+    })
+
+    it('leaves that empty space to canDrop as well', async () => {
+      const wrapper = mountDraggable({ canDrop: () => false })
+      const drag = dragNative(wrapper, 'image')
+
+      expect((await drag.over(600)).defaultPrevented).toBe(false)
+      expect(ghost(wrapper).exists()).toBe(false)
+      wrapper.unmount()
+    })
+
+    it('lets the next click through after a pointercancel', async () => {
+      const wrapper = mountDraggable()
+
+      rowOf(wrapper, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+      await nextTick()
+      wrapper.element.dispatchEvent(touch('pointercancel', 10, 4 * PITCH + 20))
+      await nextTick()
+
+      expect(ghost(wrapper).exists()).toBe(false)
+      expect(wrapper.emitted('move')).toBeUndefined()
+
+      rowOf(wrapper, 'image').click()
+      expect(wrapper.emitted('update:selected')).toEqual([['image']])
+      wrapper.unmount()
+    })
+
+    it('does not cost the next click when a drag ends without one', async () => {
+      const wrapper = mountDraggable()
+
+      rowOf(wrapper, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+      wrapper.element.dispatchEvent(touch('pointerup', 10, 4 * PITCH + 20))
+      await nextTick()
+
+      // no click came after the lift; a new press starts a new gesture
+      rowOf(wrapper, 'image').dispatchEvent(pointerEvent('pointerdown', { pointerType: 'mouse' }))
+      rowOf(wrapper, 'image').click()
+
+      expect(wrapper.emitted('update:selected')).toEqual([['image']])
+      wrapper.unmount()
+    })
+
+    it('keeps Escape during a drag from the page, so a dialog around it stays open', async () => {
+      const wrapper = mountDraggable()
+      const page = vi.fn()
+      document.addEventListener('keydown', page)
+
+      const escape = () => {
+        const event = new KeyboardEvent('keydown', {
+          key: 'Escape',
+          bubbles: true,
+          cancelable: true,
+        })
+        document.body.dispatchEvent(event)
+
+        return event
+      }
+
+      // touch
+      rowOf(wrapper, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+      expect(escape().defaultPrevented).toBe(true)
+      wrapper.element.dispatchEvent(touch('pointerup', 10, 4 * PITCH + 20))
+
+      // native
+      dragNative(wrapper, 'image')
+      expect(escape().defaultPrevented).toBe(true)
+      rowOf(wrapper, 'image').dispatchEvent(dragEvent('dragend'))
+
+      expect(page).not.toHaveBeenCalled()
+
+      // without a drag it is the page's again
+      escape()
+      expect(page).toHaveBeenCalledTimes(1)
+
+      document.removeEventListener('keydown', page)
+      wrapper.unmount()
+    })
+
+    describe('node actions', () => {
+      /** A button and a link in every row's actions: one the browser does not drag, one it does. */
+      const mountWithActions = () => {
+        const wrapper = mount(Tree, {
+          props: { nodes: NODES, label: 'Structuur', draggable: true },
+          slots: {
+            'node-actions': ({ node, tabindex }: { node: NexxtTreeNode; tabindex: 0 | -1 }) => [
+              h('button', { type: 'button', tabindex, 'data-button': node.id }, 'Verwijder'),
+              h('a', { href: '#', tabindex, 'data-link': node.id }, 'Open'),
+            ],
+          },
+          attachTo: document.body,
+        })
+
+        vi.spyOn(wrapper.element as HTMLElement, 'getBoundingClientRect').mockReturnValue({
+          top: 0,
+          left: 0,
+          right: 200,
+          bottom: 1000,
+        } as DOMRect)
+
+        return wrapper
+      }
+
+      const mouseDown = (element: Element) =>
+        element.dispatchEvent(pointerEvent('pointerdown', { pointerType: 'mouse' }))
+
+      it('starts no mouse drag from a button or a link in them', async () => {
+        const wrapper = mountWithActions()
+
+        for (const selector of ['[data-button="image"]', '[data-link="image"]']) {
+          const element = wrapper.find(selector).element
+          mouseDown(element)
+
+          // from a button the browser reports the row as the target; a link drags itself
+          const start = dragEvent('dragstart', { dataTransfer: dataTransfer() })
+          ;(selector.startsWith('[data-button') ? rowOf(wrapper, 'image') : element).dispatchEvent(
+            start,
+          )
+          const over = dragEvent('dragover', { clientX: 10, clientY: 3 * PITCH + 5 })
+          wrapper.element.dispatchEvent(over)
+          await nextTick()
+
+          expect(start.defaultPrevented).toBe(true)
+          expect(over.defaultPrevented).toBe(false)
+          expect(ghost(wrapper).exists()).toBe(false)
+        }
+
+        expect(wrapper.emitted('move')).toBeUndefined()
+        wrapper.unmount()
+      })
+
+      it('refuses a dragstart from inside the row that is not the row itself', () => {
+        const wrapper = mountWithActions()
+        // pressed on the row, but the link is what the browser drags
+        mouseDown(rowOf(wrapper, 'image'))
+        const start = dragEvent('dragstart', { dataTransfer: dataTransfer() })
+        wrapper.find('[data-link="image"]').element.dispatchEvent(start)
+
+        expect(start.defaultPrevented).toBe(true)
+        wrapper.unmount()
+      })
+
+      it('starts no touch drag from a button or a link in them', async () => {
+        const wrapper = mountWithActions()
+
+        for (const selector of ['[data-button="title"]', '[data-link="title"]']) {
+          wrapper.find(selector).element.dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+          wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+          await nextTick()
+          wrapper.element.dispatchEvent(touch('pointerup', 10, 4 * PITCH + 20))
+
+          expect(ghost(wrapper).exists()).toBe(false)
+          expect(rowOf(wrapper, 'title').classList).not.toContain('opacity-40')
+        }
+
+        expect(wrapper.emitted('move')).toBeUndefined()
+        wrapper.unmount()
+      })
+
+      it('still runs a click on an action without selecting the row', async () => {
+        const wrapper = mountWithActions()
+        const onClick = vi.fn()
+        const button = wrapper.find('[data-button="image"]').element as HTMLElement
+        button.addEventListener('click', onClick)
+
+        mouseDown(button)
+        button.click()
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+        expect(wrapper.emitted('update:selected')).toBeUndefined()
+        wrapper.unmount()
+      })
+
+      it('still drags the row itself after a press in the actions', async () => {
+        const wrapper = mountWithActions()
+
+        mouseDown(wrapper.find('[data-button="image"]').element)
+        mouseDown(rowOf(wrapper, 'image'))
+        const start = dragEvent('dragstart', { dataTransfer: dataTransfer() })
+        rowOf(wrapper, 'image').dispatchEvent(start)
+
+        expect(start.defaultPrevented).toBe(false)
+        rowOf(wrapper, 'image').dispatchEvent(dragEvent('dragend'))
+        wrapper.unmount()
+      })
+    })
+
+    it('lets go of Escape once the tree unmounts in the middle of a drag', async () => {
+      const escape = () => {
+        const event = new KeyboardEvent('keydown', {
+          key: 'Escape',
+          bubbles: true,
+          cancelable: true,
+        })
+        document.body.dispatchEvent(event)
+
+        return event
+      }
+
+      const native = mountDraggable()
+      const drag = dragNative(native, 'image')
+      await drag.over(3 * PITCH + 5)
+      native.unmount()
+      expect(escape().defaultPrevented).toBe(false)
+
+      const viaTouch = mountDraggable()
+      rowOf(viaTouch, 'title').dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      viaTouch.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+      viaTouch.unmount()
+      expect(escape().defaultPrevented).toBe(false)
+    })
+
+    it('does not drag a node with `draggable: false`', async () => {
+      const nodes = structuredClone(NODES)
+      nodes[0]!.children![1]!.children![0]!.draggable = false
+      const wrapper = mountDraggable({ nodes })
+      const title = rowOf(wrapper, 'title')
+
+      expect(title.getAttribute('draggable')).toBe('false')
+      expect(title.classList).toContain('cursor-pointer')
+
+      // native: the browser starts no drag on it, and a stray dragstart starts none here
+      const drag = dragNative(wrapper, 'title')
+      expect((await drag.over(4 * PITCH + 20)).defaultPrevented).toBe(false)
+
+      // touch
+      title.dispatchEvent(touch('pointerdown', 10, 3 * PITCH + 10))
+      wrapper.element.dispatchEvent(touch('pointermove', 10, 4 * PITCH + 20))
+      await nextTick()
+      wrapper.element.dispatchEvent(touch('pointerup', 10, 4 * PITCH + 20))
+
+      expect(ghost(wrapper).exists()).toBe(false)
+      expect(wrapper.emitted('move')).toBeUndefined()
+      wrapper.unmount()
+    })
+  })
+
+  it('marks the selected row', () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur', selected: 'title' } })
+    const row = wrapper.find('[data-tree-id="title"]')
+
+    expect(row.attributes('aria-selected')).toBe('true')
+    expect(row.attributes('tabindex')).toBe('0')
+    expect(wrapper.findAll('[aria-selected="true"]')).toHaveLength(1)
+  })
+
+  it('fades the highlight out while nothing is selected', async () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur' } })
+    const highlight = wrapper.find('[data-tree-highlight]')
+
+    expect(highlight.classes()).toContain('opacity-0')
+
+    await wrapper.setProps({ selected: 'title' })
+
+    expect(highlight.classes()).not.toContain('opacity-0')
+  })
+
+  it('hides the highlight when the selected row is collapsed away', async () => {
+    const wrapper = mount(Tree, {
+      props: { nodes: NODES, label: 'Structuur', selected: 'title', collapsed: ['group'] },
+    })
+
+    expect(wrapper.find('[data-tree-highlight]').classes()).toContain('opacity-0')
+  })
+
+  it('borrows the row transition when a fold moves the highlight', async () => {
+    const wrapper = mount(Tree, {
+      props: { nodes: NODES, label: 'Structuur', selected: 'title' },
+      attachTo: document.body,
+    })
+
+    // the highlight only takes its transition classes once it has been positioned
+    await flushPromises()
+
+    const highlight = () => wrapper.find('[data-tree-highlight]').classes()
+
+    // a new selection arrives on the row it was clicked on
+    await wrapper.setProps({ selected: 'image' })
+    expect(highlight()).toContain('ease-out-strong')
+
+    // folding drags it along with a row that slides on the `move` transition, so it has to
+    // match that curve or the two visibly come apart on the way
+    await wrapper.setProps({ collapsed: ['group'] })
+    expect(highlight()).toContain('ease-in-out-strong')
+
+    wrapper.unmount()
+  })
+
+  it('opts out of every animation under reduced motion', async () => {
+    const wrapper = mount(Tree, {
+      props: { nodes: NODES, label: 'Structuur', selected: 'title' },
+      attachTo: document.body,
+    })
+
+    // the highlight only takes its transition classes once it has been positioned
+    await flushPromises()
+
+    const optedOut = (selector: string) =>
+      wrapper.find(selector).classes().includes('motion-reduce:transition-none')
+
+    expect(optedOut('[data-tree-highlight]')).toBe(true)
+    expect(optedOut('[data-tree-id="title"]')).toBe(true)
+    expect(optedOut('[data-tree-id="group"] button i')).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('toggles with the chevron without selecting', async () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur' } })
+
+    await wrapper.find('[data-tree-id="group"] button').trigger('click')
+
+    expect(wrapper.emitted('update:collapsed')).toEqual([[['group']]])
+    expect(wrapper.emitted('update:selected')).toBeUndefined()
+  })
+
+  it('never lets the chevron take focus', async () => {
+    const wrapper = mount(Tree, {
+      props: { nodes: NODES, label: 'Structuur' },
+      attachTo: document.body,
+    })
+    const chevron = wrapper.find('[data-tree-id="group"] button')
+    const mousedown = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+
+    chevron.element.dispatchEvent(mousedown)
+    await chevron.trigger('click')
+
+    // the default of a mousedown is what focuses a button, and it sits in `aria-hidden`
+    expect(mousedown.defaultPrevented).toBe(true)
+    expect(document.activeElement).not.toBe(chevron.element)
+
+    wrapper.unmount()
+  })
+
+  it('hands focus to the folding row when the focused row folds away', async () => {
+    const wrapper = mount(Tree, {
+      props: {
+        nodes: NODES,
+        label: 'Structuur',
+        'onUpdate:collapsed': (value: string[]) => wrapper.setProps({ collapsed: value }),
+      },
+      attachTo: document.body,
+    })
+
+    ;(wrapper.find('[data-tree-id="title"]').element as HTMLElement).focus()
+    await wrapper.find('[data-tree-id="group"] button').trigger('click')
+    await flushPromises()
+
+    expect(document.activeElement?.getAttribute('data-tree-id')).toBe('group')
+
+    wrapper.unmount()
+  })
+
+  it('keeps a single tab stop', () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur' } })
+    const stops = wrapper
+      .findAll('[role="treeitem"]')
+      .filter((row) => row.attributes('tabindex') === '0')
+
+    expect(stops).toHaveLength(1)
+    expect(stops[0]!.text()).toBe('Welkomstpagina')
+  })
+
+  it('collapses the focused node with ArrowLeft', async () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur', selected: 'group' } })
+
+    await wrapper.trigger('keydown', { key: 'ArrowLeft' })
+
+    expect(wrapper.emitted('update:collapsed')).toEqual([[['group']]])
+  })
+
+  it('moves focus with the arrow keys and selects with Enter', async () => {
+    const wrapper = mount(Tree, {
+      props: { nodes: NODES, label: 'Structuur', selected: 'group' },
+      attachTo: document.body,
+    })
+
+    await wrapper.trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement?.getAttribute('data-tree-id')).toBe('title')
+
+    await wrapper.trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('update:selected')).toEqual([['title']])
+
+    wrapper.unmount()
+  })
+  it('names each tree item by its label alone', () => {
+    const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur' } })
+
+    wrapper.findAll('[role="treeitem"]').forEach((row) => {
+      const label = wrapper.find(`[id="${row.attributes('aria-labelledby')}"]`)
+
+      expect(label.exists()).toBe(true)
+      expect(row.element.contains(label.element)).toBe(true)
+      expect(label.text()).toBe(row.text())
+    })
+  })
+
+  describe('node actions', () => {
+    const received: { id: string; tabindex: 0 | -1 }[] = []
+
+    const mountWithActions = (props: Record<string, unknown> = {}) => {
+      received.length = 0
+
+      return mount(Tree, {
+        props: { nodes: NODES, label: 'Structuur', ...props },
+        slots: {
+          'node-actions': ({ node, tabindex }: { node: NexxtTreeNode; tabindex: 0 | -1 }) => {
+            received.push({ id: node.id, tabindex })
+
+            return h('button', { type: 'button', tabindex, 'data-action': node.id }, 'Verwijder')
+          },
+        },
+        attachTo: document.body,
+      })
+    }
+
+    it('renders no container without the slot', () => {
+      const wrapper = mount(Tree, { props: { nodes: NODES, label: 'Structuur' } })
+
+      expect(wrapper.find('[data-tree-id="page"]').element.lastElementChild?.tagName).toBe('SPAN')
+    })
+
+    it('gives only the selected row its actions, and makes the others inert', async () => {
+      const wrapper = mountWithActions({ selected: 'group' })
+      /** The rows whose actions can be seen, focused and read. */
+      const reachable = () =>
+        wrapper
+          .findAll('[data-tree-actions]')
+          .filter((actions) => actions.attributes('inert') === undefined)
+          .map((actions) => actions.element.closest<HTMLElement>('[data-tree-id]')!.dataset.treeId)
+      const roomFor = () =>
+        wrapper
+          .findAll('[data-tree-actions]')
+          .filter((actions) => actions.classes('grid-cols-[minmax(0,1fr)]'))
+          .map((actions) => actions.element.closest<HTMLElement>('[data-tree-id]')!.dataset.treeId)
+
+      expect(reachable()).toEqual(['group'])
+      expect(roomFor()).toEqual(['group'])
+
+      await wrapper.setProps({ selected: 'title' })
+      expect(reachable()).toEqual(['title'])
+      expect(roomFor()).toEqual(['title'])
+
+      await wrapper.setProps({ selected: null })
+      expect(reachable()).toEqual([])
+      expect(roomFor()).toEqual([])
+
+      wrapper.unmount()
+    })
+
+    it('lets the label run to the row’s end when no actions sit beside it', () => {
+      const wrapper = mountWithActions()
+      const label = wrapper.find('[data-tree-id="page"] [data-tree-label]')
+      const actions = wrapper.find('[data-tree-id="page"] [data-tree-actions]')
+
+      // the label is the row's flexible part, and the closed track gives back the gap before it
+      expect(label.classes()).toEqual(expect.arrayContaining(['min-w-0', 'flex-1', 'truncate']))
+      expect(actions.classes()).toEqual(
+        expect.arrayContaining(['grid-cols-[minmax(0,0fr)]', '-ml-1.5']),
+      )
+
+      wrapper.unmount()
+    })
+
+    it('hands every row its node and only the tab stop a tabindex of 0', () => {
+      const wrapper = mountWithActions({ selected: 'group' })
+
+      expect(received.map((item) => item.id)).toEqual(['page', 'image', 'group', 'title', 'text'])
+      expect(received.filter((item) => item.tabindex === 0)).toEqual([{ id: 'group', tabindex: 0 }])
+      expect(wrapper.find('[data-action="group"]').attributes('tabindex')).toBe('0')
+      expect(wrapper.find('[data-action="title"]').attributes('tabindex')).toBe('-1')
+
+      wrapper.unmount()
+    })
+
+    it('keeps a click on an action away from the row', async () => {
+      const wrapper = mountWithActions()
+
+      await wrapper.find('[data-action="group"]').trigger('click')
+
+      expect(wrapper.emitted('update:selected')).toBeUndefined()
+      expect(wrapper.emitted('update:collapsed')).toBeUndefined()
+
+      wrapper.unmount()
+    })
+
+    it('keeps keys on an action away from the tree', async () => {
+      const wrapper = mountWithActions()
+      const action = wrapper.find('[data-action="page"]')
+
+      for (const key of ['Enter', ' ', 'ArrowDown', 'ArrowLeft']) {
+        const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
+        action.element.dispatchEvent(event)
+
+        // the tree would have handled it and cancelled the default, eating the native click
+        expect(event.defaultPrevented).toBe(false)
+      }
+
+      expect(wrapper.emitted('update:selected')).toBeUndefined()
+      expect(wrapper.emitted('update:collapsed')).toBeUndefined()
+
+      wrapper.unmount()
+    })
+
+    it('leaves the name of the row to its label', () => {
+      const wrapper = mountWithActions()
+      const row = wrapper.find('[data-tree-id="page"]')
+
+      expect(wrapper.find(`[id="${row.attributes('aria-labelledby')}"]`).text()).toBe(
+        'Welkomstpagina',
+      )
+
+      wrapper.unmount()
+    })
+  })
+
+  describe('focusNode', () => {
+    // jsdom implements neither; the scroll is what these tests watch
+    const scrollIntoView = vi.fn()
+
+    beforeEach(() => {
+      scrollIntoView.mockClear()
+      Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+        configurable: true,
+        value: scrollIntoView,
+      })
+      vi.stubGlobal('matchMedia', () => ({ matches: false }))
+    })
+
+    afterEach(() => {
+      delete (HTMLElement.prototype as Partial<HTMLElement>).scrollIntoView
+      vi.unstubAllGlobals()
+    })
+
+    const scrolledRows = () =>
+      scrollIntoView.mock.contexts.map((row) => (row as HTMLElement).dataset.treeId)
+
+    /** Test utils stub the TransitionGroup; the real one is what runs the unfold hooks. */
+    const mountUnfolding = (collapsed: string[]) => {
+      const wrapper = mount(Tree, {
+        props: {
+          nodes: NODES,
+          label: 'Structuur',
+          collapsed,
+          'onUpdate:collapsed': (value: string[]) => wrapper.setProps({ collapsed: value }),
+        },
+        global: { stubs: { TransitionGroup: false } },
+        attachTo: document.body,
+      })
+
+      return wrapper
+    }
+
+    const landed = (wrapper: ReturnType<typeof mount>, id: string) =>
+      vi.waitFor(() =>
+        expect(
+          (wrapper.find(`[data-tree-id="${id}"]`).element as HTMLElement).style.pointerEvents,
+        ).toBe(''),
+      )
+
+    it('scrolls a visible row to the nearest edge instead of letting focus centre it', async () => {
+      const focus = vi.spyOn(HTMLElement.prototype, 'focus')
+      const wrapper = mount(Tree, {
+        props: { nodes: NODES, label: 'Structuur' },
+        attachTo: document.body,
+      })
+
+      await wrapper.vm.focusNode('text')
+
+      expect(focus).toHaveBeenLastCalledWith({ preventScroll: true })
+      expect(scrollIntoView).toHaveBeenCalledExactlyOnceWith({ block: 'nearest' })
+      expect(scrolledRows()).toEqual(['text'])
+
+      focus.mockRestore()
+      wrapper.unmount()
+    })
+
+    it('holds the scroll of an unfolding row until it has landed', async () => {
+      const wrapper = mountUnfolding(['group'])
+
+      await expect(wrapper.vm.focusNode('title')).resolves.toBe(true)
+
+      // focused at once, but still stacked on its parent: no scroll to that spot
+      expect(document.activeElement?.getAttribute('data-tree-id')).toBe('title')
+      expect(scrollIntoView).not.toHaveBeenCalled()
+
+      await landed(wrapper, 'title')
+
+      expect(scrollIntoView).toHaveBeenCalledExactlyOnceWith({ block: 'nearest' })
+      expect(scrolledRows()).toEqual(['title'])
+
+      wrapper.unmount()
+    })
+
+    it('lets the last of two quick calls win', async () => {
+      const wrapper = mountUnfolding(['group'])
+
+      const results = await Promise.all([
+        wrapper.vm.focusNode('title'),
+        wrapper.vm.focusNode('image'),
+      ])
+      await landed(wrapper, 'title')
+
+      expect(results).toEqual([true, true])
+      expect(document.activeElement?.getAttribute('data-tree-id')).toBe('image')
+      const stops = wrapper
+        .findAll('[role="treeitem"]')
+        .filter((row) => row.attributes('tabindex') === '0')
+      expect(stops.map((row) => row.attributes('data-tree-id'))).toEqual(['image'])
+      // the first row landing later does not pull the panel back to it
+      expect(scrolledRows()).toEqual(['image'])
+
+      wrapper.unmount()
+    })
+
+    it('focuses a visible row and makes it the only tab stop', async () => {
+      const wrapper = mount(Tree, {
+        props: { nodes: NODES, label: 'Structuur' },
+        attachTo: document.body,
+      })
+
+      await expect(wrapper.vm.focusNode('image')).resolves.toBe(true)
+
+      expect(document.activeElement?.getAttribute('data-tree-id')).toBe('image')
+      const stops = wrapper
+        .findAll('[role="treeitem"]')
+        .filter((row) => row.attributes('tabindex') === '0')
+      expect(stops.map((row) => row.attributes('data-tree-id'))).toEqual(['image'])
+
+      wrapper.unmount()
+    })
+
+    it('unfolds the collapsed ancestors of a hidden row before focusing it', async () => {
+      const wrapper = mount(Tree, {
+        props: {
+          nodes: NODES,
+          label: 'Structuur',
+          collapsed: ['page', 'group', 'other'],
+          'onUpdate:collapsed': (value: string[]) => wrapper.setProps({ collapsed: value }),
+        },
+        attachTo: document.body,
+      })
+
+      await expect(wrapper.vm.focusNode('title')).resolves.toBe(true)
+
+      // only the ancestors open up; an unrelated fold is left as it was
+      expect(wrapper.emitted('update:collapsed')).toEqual([[['other']]])
+      expect(document.activeElement?.getAttribute('data-tree-id')).toBe('title')
+
+      wrapper.unmount()
+    })
+
+    it('returns false for an unknown id and changes nothing', async () => {
+      const wrapper = mount(Tree, {
+        props: { nodes: NODES, label: 'Structuur', collapsed: ['group'] },
+        attachTo: document.body,
+      })
+
+      await expect(wrapper.vm.focusNode('missing')).resolves.toBe(false)
+
+      expect(wrapper.emitted('update:collapsed')).toBeUndefined()
+      expect(document.activeElement).toBe(document.body)
+
+      wrapper.unmount()
+    })
+
+    it('leaves the selection alone', async () => {
+      const wrapper = mount(Tree, {
+        props: { nodes: NODES, label: 'Structuur', selected: 'group' },
+        attachTo: document.body,
+      })
+
+      await wrapper.vm.focusNode('text')
+
+      expect(wrapper.emitted('update:selected')).toBeUndefined()
+      expect(wrapper.find('[data-tree-id="group"]').attributes('aria-selected')).toBe('true')
+
+      wrapper.unmount()
+    })
+  })
+})