@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.11

package/src/__tests__/components/SegmentedControl.test.ts

@@ -66,4 +66,92 @@ describe('SegmentedControl', () => {
 
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
   })
+
+  describe('roving tabindex', () => {
+    const options = [
+      { value: 'table', label: 'Table' },
+      { value: 'chart', label: 'Chart' },
+      { value: 'raw', label: 'Raw' },
+    ]
+
+    it('makes only the checked option tabbable', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'chart', options },
+      })
+
+      expect(wrapper.findAll('button').map(button => button.attributes('tabindex')))
+        .toEqual(['-1', '0', '-1'])
+    })
+
+    it('falls back to the first selectable option when nothing matches', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'missing', options },
+      })
+
+      expect(wrapper.findAll('button').map(button => button.attributes('tabindex')))
+        .toEqual(['0', '-1', '-1'])
+    })
+
+    it('activates the adjacent option with the arrow keys, wrapping at the ends', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'chart', options },
+        attachTo: document.body,
+      })
+
+      const buttons = wrapper.findAll('button')
+      await buttons[1].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['raw'])
+
+      await buttons[1].trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['table'])
+
+      await wrapper.setProps({ modelValue: 'raw' })
+      await wrapper.findAll('button')[2].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')?.[2]).toEqual(['table'])
+
+      wrapper.unmount()
+    })
+
+    it('jumps to the first and last option with Home and End', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'chart', options },
+      })
+
+      const buttons = wrapper.findAll('button')
+      await buttons[1].trigger('keydown', { key: 'Home' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['table'])
+
+      await buttons[1].trigger('keydown', { key: 'End' })
+      expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['raw'])
+    })
+
+    it('skips disabled options during arrow navigation', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: {
+          modelValue: 'table',
+          options,
+          disabledValues: ['chart'],
+        },
+      })
+
+      await wrapper.findAll('button')[0].trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['raw'])
+    })
+
+    it('moves focus onto the newly activated option', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'table', options },
+        attachTo: document.body,
+      })
+
+      await wrapper.findAll('button')[0].trigger('keydown', { key: 'ArrowRight' })
+      await wrapper.setProps({ modelValue: 'chart' })
+      await wrapper.vm.$nextTick()
+
+      expect(document.activeElement).toBe(wrapper.findAll('button')[1].element)
+
+      wrapper.unmount()
+    })
+  })
 })

package/src/__tests__/components/TimePicker.test.ts

@@ -35,4 +35,65 @@ describe('TimePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('publishes the highlighted slot through aria-activedescendant', async () => {
+    const wrapper = mount(TimePicker, {
+      props: { modelValue: '14:30' },
+      attachTo: document.body,
+    })
+
+    const input = wrapper.get('input')
+    expect(input.attributes('aria-activedescendant')).toBeUndefined()
+
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.vm.$nextTick()
+
+    const listbox = wrapper.get('.mint-time-picker__list')
+    expect(input.attributes('aria-controls')).toBe(listbox.attributes('id'))
+
+    const activeId = input.attributes('aria-activedescendant')
+    expect(activeId).toBeDefined()
+    expect(wrapper.find(`#${activeId}`).exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('jumps to the first and last selectable slot with Home and End', async () => {
+    const wrapper = mount(TimePicker, {
+      props: { min: '09:00', max: '10:00', step: 30 },
+      attachTo: document.body,
+    })
+
+    const root = wrapper.get('.mint-time-picker')
+    await root.trigger('keydown', { key: 'ArrowDown' })
+    await root.trigger('keydown', { key: 'End' })
+    await wrapper.vm.$nextTick()
+
+    const slots = wrapper.findAll('.mint-time-picker__slot')
+    expect(slots.at(-1)?.classes()).toContain('mint-time-picker__slot--highlighted')
+
+    await root.trigger('keydown', { key: 'Home' })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.mint-time-picker__slot')[0].classes())
+      .toContain('mint-time-picker__slot--highlighted')
+
+    wrapper.unmount()
+  })
+
+  it('returns focus to the input when Escape closes the list', async () => {
+    const wrapper = mount(TimePicker, { attachTo: document.body })
+    const input = wrapper.get<HTMLInputElement>('input').element
+
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(true)
+
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'Escape' })
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(false)
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
 })

package/src/__tests__/components/WellEditPopupInternal.test.ts

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import WellEditPopupInternal from '../../components/internal/WellEditPopupInternal.vue'
+
+function mountPopup(attachTo?: HTMLElement) {
+  return mount(WellEditPopupInternal, {
+    props: {
+      wellId: 'A1',
+      position: { x: 10, y: 10 },
+    },
+    attachTo,
+    global: {
+      stubs: { teleport: true },
+    },
+  })
+}
+
+describe('WellEditPopupInternal focus trap', () => {
+  it('moves focus into the popup on mount', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.mint-well-edit-popup').element.contains(document.activeElement)).toBe(true)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('restores focus to the previously focused element on unmount', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const trigger = document.createElement('button')
+    host.appendChild(trigger)
+    trigger.focus()
+    expect(document.activeElement).toBe(trigger)
+
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement).not.toBe(trigger)
+
+    wrapper.unmount()
+    expect(document.activeElement).toBe(trigger)
+
+    host.remove()
+  })
+
+  it('wraps Tab from the last focusable element back to the first', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    const focusable = (wrapper.element as HTMLElement).querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    )
+    expect(focusable.length).toBeGreaterThan(1)
+    const last = focusable[focusable.length - 1]
+    const first = focusable[0]
+    last.focus()
+
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true })
+    document.dispatchEvent(event)
+
+    expect(document.activeElement).toBe(first)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('wraps Shift+Tab from the first focusable element back to the last', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    const focusable = (wrapper.element as HTMLElement).querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    )
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    first.focus()
+
+    const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true })
+    document.dispatchEvent(event)
+
+    expect(document.activeElement).toBe(last)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('closes on Escape', async () => {
+    const wrapper = mountPopup()
+    await wrapper.vm.$nextTick()
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+    document.dispatchEvent(event)
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+    wrapper.unmount()
+  })
+})

package/src/__tests__/components/WellPlate.interaction.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import {
   nextClickedWellSelection,
   useWellPlateInteraction,
@@ -41,6 +42,14 @@ function dragEvent(data: Record<string, string> = {}): DragEvent {
   } as unknown as DragEvent
 }
 
+function keyEvent(key: string, altKey = true): KeyboardEvent {
+  return {
+    key,
+    altKey,
+    preventDefault: vi.fn(),
+  } as unknown as KeyboardEvent
+}
+
 function createInteraction(overrides: Partial<Parameters<typeof useWellPlateInteraction>[0]> = {}) {
   const emitted: Record<string, unknown[]> = {}
   const selected = { value: [] as string[] }
@@ -168,4 +177,54 @@ describe('WellPlate interaction helpers', () => {
       ['A1', 'A2', 'B1', 'B2'],
     ])
   })
+
+  it('moves a well with the keyboard pick-up/drop chord in drag mode', async () => {
+    const { emitted, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'drag'
+    const source = well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' })
+    const target = well({ id: 'B2', row: 1, col: 1 })
+
+    interaction.handleWellMoveKeydown(source, keyEvent('Enter'))
+    expect(interaction.dragSourceWell.value).toBe('A1')
+
+    interaction.handleWellMoveKeydown(target, keyEvent('Enter'))
+
+    expect(emitted.move).toEqual([['A1', 'B2']])
+    expect(interaction.dragSourceWell.value).toBeNull()
+
+    await nextTick()
+    expect(interaction.moveAnnouncement.value).toBe('Well A1 moved to B2.')
+  })
+
+  it('cancels a keyboard pick-up with Escape and refuses empty wells', () => {
+    const { emitted, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'drag'
+
+    interaction.handleWellMoveKeydown(well({ id: 'A2', row: 0, col: 1 }), keyEvent('Enter'))
+    expect(interaction.dragSourceWell.value).toBeNull()
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Enter'),
+    )
+    expect(interaction.dragSourceWell.value).toBe('A1')
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Escape', false),
+    )
+    expect(interaction.dragSourceWell.value).toBeNull()
+    expect(emitted.move).toBeUndefined()
+  })
+
+  it('ignores the move chord outside drag selection mode', () => {
+    const { interaction } = createInteraction()
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Enter'),
+    )
+
+    expect(interaction.dragSourceWell.value).toBeNull()
+  })
 })

package/src/__tests__/composables/useAuth.test.ts

@@ -57,6 +57,7 @@ describe('useAuth', () => {
         passkey_enabled: true,
         passkey_registered: false,
         registration_enabled: true,
+        database_mode: 'postgresql',
         access: { experiment_visibility_mode: 'restricted' },
       },
     })
@@ -67,6 +68,7 @@ describe('useAuth', () => {
       passkeyEnabled: true,
       passkeyRegistered: false,
       registrationEnabled: true,
+      databaseMode: 'postgresql',
       experimentVisibilityMode: 'restricted',
     }
 

package/src/__tests__/composables/useDropdownState.test.ts

@@ -14,7 +14,7 @@ function mountHarness(options: UseDropdownStateOptions = {}) {
       state = useDropdownState(options)
       return state
     },
-    template: '<div ref="rootRef" class="dropdown-root"><button class="inside">Inside</button></div>',
+    template: '<div ref="rootRef" class="dropdown-root"><button ref="triggerRef" class="trigger">Trigger</button><button class="inside">Inside</button></div>',
   }), { attachTo: document.body })
 
   if (!state) {
@@ -78,6 +78,63 @@ describe('useDropdownState', () => {
     wrapper.unmount()
   })
 
+  it('returns focus to the trigger only when asked', async () => {
+    const { wrapper, state } = mountHarness()
+    const trigger = wrapper.get<HTMLButtonElement>('.trigger').element
+    const inside = wrapper.get<HTMLButtonElement>('.inside').element
+
+    state.open()
+    inside.focus()
+    state.close()
+    await nextTick()
+    expect(document.activeElement).toBe(inside)
+
+    state.open()
+    inside.focus()
+    state.close(true)
+    await nextTick()
+    expect(document.activeElement).toBe(trigger)
+
+    wrapper.unmount()
+  })
+
+  it('returns focus to the trigger when Escape closes the dropdown', async () => {
+    const { wrapper, state } = mountHarness()
+    const trigger = wrapper.get<HTMLButtonElement>('.trigger').element
+
+    state.open()
+    wrapper.get<HTMLButtonElement>('.inside').element.focus()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    await nextTick()
+
+    expect(state.isOpen.value).toBe(false)
+    expect(document.activeElement).toBe(trigger)
+
+    wrapper.unmount()
+  })
+
+  it('closes on scroll and resize only when closeOnScroll is set', async () => {
+    const plain = mountHarness()
+    plain.state.open()
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+    expect(plain.state.isOpen.value).toBe(true)
+    plain.wrapper.unmount()
+
+    const scrolling = mountHarness({ closeOnScroll: true })
+    scrolling.state.open()
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+    expect(scrolling.state.isOpen.value).toBe(false)
+
+    scrolling.state.open()
+    window.dispatchEvent(new Event('resize'))
+    await nextTick()
+    expect(scrolling.state.isOpen.value).toBe(false)
+    scrolling.wrapper.unmount()
+  })
+
   it('can opt out of outside-click and Escape closing', async () => {
     const { wrapper, state } = mountHarness({
       closeOnOutsideClick: false,

package/src/__tests__/composables/useListReorder.test.ts

@@ -0,0 +1,145 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+import {
+  reorderList,
+  useListReorder,
+  useReorderAnnouncer,
+  type ListReorderMove,
+} from '../../composables/useListReorder'
+
+interface Row { id: string; name: string }
+
+function mountHarness(onReorder: (move: ListReorderMove<Row>) => void, disabled = false) {
+  const items = ref<Row[]>([
+    { id: 'a', name: 'Alpha' },
+    { id: 'b', name: 'Beta' },
+    { id: 'c', name: 'Gamma' },
+  ])
+
+  const wrapper = mount(defineComponent({
+    setup() {
+      const reorder = useListReorder<Row>({
+        items: () => items.value,
+        getId: (row) => row.id,
+        getLabel: (row) => row.name,
+        disabled: () => disabled,
+        itemNoun: 'Row',
+        onReorder,
+      })
+      return { items, ...reorder }
+    },
+    template: `
+      <ul>
+        <li v-for="(row, index) in items" :key="row.id" :data-id="row.id"
+            @keydown="onKeydown($event, row, index)"
+            @dragstart="onDragStart($event, row, index)"
+            @dragover="onDragOver($event, row, index)"
+            @drop="onDrop($event, row, index)">{{ row.name }}</li>
+      </ul>
+      <p class="announcement">{{ announcement }}</p>
+    `,
+  }), { attachTo: document.body })
+
+  return { wrapper, items }
+}
+
+describe('reorderList', () => {
+  it('returns a copy with the item moved, leaving the source untouched', () => {
+    const source = ['a', 'b', 'c']
+
+    expect(reorderList(source, 0, 2)).toEqual(['b', 'c', 'a'])
+    expect(source).toEqual(['a', 'b', 'c'])
+  })
+})
+
+describe('useReorderAnnouncer', () => {
+  it('publishes messages and re-announces an identical message', async () => {
+    const { announcement, announce } = useReorderAnnouncer()
+
+    announce('Alpha moved.')
+    await nextTick()
+    expect(announcement.value).toBe('Alpha moved.')
+
+    announce('Alpha moved.')
+    expect(announcement.value).toBe('')
+    await nextTick()
+    expect(announcement.value).toBe('Alpha moved.')
+  })
+})
+
+describe('useListReorder', () => {
+  it('moves an item one position later on Alt+ArrowDown and announces it', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(onReorder).toHaveBeenCalledTimes(1)
+    const move = onReorder.mock.calls[0][0] as ListReorderMove<Row>
+    expect(move.fromIndex).toBe(0)
+    expect(move.toIndex).toBe(1)
+    expect(move.source).toBe('keyboard')
+    expect(move.items.map(row => row.id)).toEqual(['b', 'a', 'c'])
+
+    await nextTick()
+    expect(wrapper.get('.announcement').text()).toBe('Alpha moved to position 2 of 3.')
+
+    wrapper.unmount()
+  })
+
+  it('moves an item one position earlier on Alt+ArrowUp and Alt+ArrowLeft', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    await wrapper.get('[data-id="c"]').trigger('keydown', { key: 'ArrowUp', altKey: true })
+    await wrapper.get('[data-id="c"]').trigger('keydown', { key: 'ArrowLeft', altKey: true })
+
+    expect(onReorder.mock.calls.map(call => (call[0] as ListReorderMove<Row>).toIndex)).toEqual([1, 1])
+
+    wrapper.unmount()
+  })
+
+  it('ignores arrow keys without Alt and moves past either end', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowUp', altKey: true })
+    await wrapper.get('[data-id="c"]').trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(onReorder).not.toHaveBeenCalled()
+
+    wrapper.unmount()
+  })
+
+  it('reorders through a drag and clears its drag state', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder)
+
+    const dataTransfer = { effectAllowed: '', dropEffect: '', setData: vi.fn() }
+    await wrapper.get('[data-id="a"]').trigger('dragstart', { dataTransfer })
+    await wrapper.get('[data-id="c"]').trigger('dragover', { dataTransfer })
+    await wrapper.get('[data-id="c"]').trigger('drop', { dataTransfer })
+
+    const move = onReorder.mock.calls[0][0] as ListReorderMove<Row>
+    expect(move).toMatchObject({ fromIndex: 0, toIndex: 2, source: 'drag' })
+    expect(move.items.map(row => row.id)).toEqual(['b', 'c', 'a'])
+    expect(dataTransfer.setData).toHaveBeenCalledWith('text/plain', 'a')
+
+    wrapper.unmount()
+  })
+
+  it('blocks every reorder while disabled', async () => {
+    const onReorder = vi.fn()
+    const { wrapper } = mountHarness(onReorder, true)
+
+    await wrapper.get('[data-id="a"]').trigger('keydown', { key: 'ArrowDown', altKey: true })
+    await wrapper.get('[data-id="a"]').trigger('dragstart', { dataTransfer: { setData: vi.fn() } })
+    await wrapper.get('[data-id="b"]').trigger('drop', { dataTransfer: { setData: vi.fn() } })
+
+    expect(onReorder).not.toHaveBeenCalled()
+
+    wrapper.unmount()
+  })
+})