@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

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

@@ -3,6 +3,25 @@ import { describe, expect, it } from 'vitest'
 import SegmentedControl from '../../components/SegmentedControl.vue'
 
 describe('SegmentedControl', () => {
+  it('defaults to card while allowing an explicit simple variant', async () => {
+    const wrapper = mount(SegmentedControl, {
+      props: {
+        modelValue: 'table',
+        options: [{ value: 'table', label: 'Table', description: 'View rows' }],
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-segmented-control--card')
+    expect(wrapper.get('button').classes()).toContain('mint-segmented-control__option--card')
+    expect(wrapper.get('.mint-segmented-control__description').text()).toBe('View rows')
+
+    await wrapper.setProps({ variant: 'simple' })
+
+    expect(wrapper.classes()).toContain('mint-segmented-control--simple')
+    expect(wrapper.get('button').classes()).toContain('mint-segmented-control__option--simple')
+    expect(wrapper.find('.mint-segmented-control__description').exists()).toBe(false)
+  })
+
   it('accepts string and number shorthand options', async () => {
     const wrapper = mount(SegmentedControl, {
       props: {
@@ -66,4 +85,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/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__/components/iconButtonIconSizing.test.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// jsdom has no layout, so this pins the stylesheet contract instead: a bare
+// <svg> passed to IconButton's slot must be sized by the icon box, otherwise it
+// collapses to zero width as a flex item (FilePicker source toggles, beta.14).
+describe('IconButton icon sizing', () => {
+  it('should size a bare slot svg to the icon box when the caller passes no dimensions', () => {
+    const css = readFileSync(
+      resolve(__dirname, '../../styles/components/icon-button.css'),
+      'utf8',
+    )
+    expect(css).toMatch(
+      /\.mint-icon-button__icon--sm > svg,\s*\.mint-icon-button__icon--md > svg,\s*\.mint-icon-button__icon--lg > svg \{\s*width: 100%;\s*height: 100%;\s*\}/,
+    )
+  })
+})

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

@@ -3,6 +3,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import { AxiosError, type AxiosRequestConfig, type InternalAxiosRequestConfig } from 'axios'
 
 import { AuthenticationRequiredError, useApi } from '../../composables/useApi'
+import { MintApiError } from '../../apiErrors'
 import { useAuthStore } from '../../stores/auth'
 
 function readAuthorizationHeader(headers: InternalAxiosRequestConfig['headers']): unknown {
@@ -32,6 +33,7 @@ function unauthorizedAdapter(config: AxiosRequestConfig): Promise<never> {
 describe('useApi URL helpers', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
+    useAuthStore().clearToken()
   })
 
   afterEach(() => {
@@ -98,25 +100,35 @@ describe('useApi URL helpers', () => {
     expect(authorization).toBeUndefined()
   })
 
-  it('normalizes authenticated 401 responses and clears the rejected token', async () => {
+  it.each([false, true])('normalizes authenticated 401 responses and clears the rejected token (typedErrors=%s)', async (typedErrors) => {
     const authStore = useAuthStore()
     authStore.setToken('expired-token', 3600)
-    const api = useApi({ baseUrl: '/api' })
+    const api = useApi({ baseUrl: '/api', typedErrors })
 
     const adapter = vi.fn(unauthorizedAdapter)
     const error = await api.get('/protected', { adapter }).catch((reason: unknown) => reason)
 
-    expect({ attempts: adapter.mock.calls.length, errorType: error?.constructor, token: authStore.token }).toEqual({
+    expect({
+      attempts: adapter.mock.calls.length,
+      errorType: error?.constructor,
+      typed: error instanceof MintApiError,
+      status: (error as MintApiError).status,
+      code: (error as MintApiError).code,
+      token: authStore.token,
+    }).toEqual({
       attempts: 1,
       errorType: AuthenticationRequiredError,
+      typed: true,
+      status: 401,
+      code: 'AUTHENTICATION_REQUIRED',
       token: null,
     })
   })
 
-  it('does not clear auth state for public requests that return 401', async () => {
+  it.each([false, true])('does not clear auth state for public requests that return 401 (typedErrors=%s)', async (typedErrors) => {
     const authStore = useAuthStore()
     authStore.setToken('still-valid-token', 3600)
-    const api = useApi({ baseUrl: '/api', withAuth: false })
+    const api = useApi({ baseUrl: '/api', typedErrors, withAuth: false })
 
     const error = await api.get('/public', { adapter: unauthorizedAdapter }).catch((reason: unknown) => reason)
 
@@ -126,10 +138,10 @@ describe('useApi URL helpers', () => {
     })
   })
 
-  it('does not clear a replacement token after an older request returns 401', async () => {
+  it.each([false, true])('does not clear a replacement token after an older request returns 401 (typedErrors=%s)', async (typedErrors) => {
     const authStore = useAuthStore()
     authStore.setToken('rejected-token', 3600)
-    const api = useApi({ baseUrl: '/api' })
+    const api = useApi({ baseUrl: '/api', typedErrors })
 
     await api.get('/protected', {
       adapter: async (config) => {
@@ -141,9 +153,10 @@ describe('useApi URL helpers', () => {
     expect(authStore.token).toBe('replacement-token')
   })
 
-  it('does not clear a token created while an unauthenticated request is in flight', async () => {
+  it.each([false, true])('does not clear a token created while an unauthenticated request is in flight (typedErrors=%s)', async (typedErrors) => {
     const authStore = useAuthStore()
-    const api = useApi({ baseUrl: '/api' })
+    const api = useApi({ baseUrl: '/api', typedErrors })
+    expect(authStore.token).toBeNull()
 
     await api.get('/protected', {
       adapter: async (config) => {
@@ -154,4 +167,74 @@ describe('useApi URL helpers', () => {
 
     expect(authStore.token).toBe('new-login-token')
   })
+
+  it('normalizes a typed response when typed errors are enabled', async () => {
+    const api = useApi({ baseUrl: '/api', typedErrors: true })
+    const adapter = vi.fn(async (config: AxiosRequestConfig) => Promise.reject(new AxiosError(
+      'Not Found',
+      AxiosError.ERR_BAD_REQUEST,
+      config as InternalAxiosRequestConfig,
+      undefined,
+      {
+        data: {
+          code: 'leaf.ARTIFACT_NOT_FOUND',
+          message: 'Artifact is not available',
+          status: 404,
+          request_id: 'req-generated',
+          details: { artifact_id: 67 },
+          detail: 'Artifact is not available',
+        },
+        status: 404,
+        statusText: 'Not Found',
+        headers: { 'x-request-id': 'req-generated' },
+        config: config as InternalAxiosRequestConfig,
+      },
+    )))
+
+    const error = await api.get('/artifacts/67', { adapter }).catch((reason: unknown) => reason)
+
+    const typedError = error as MintApiError
+    expect({ attempts: adapter.mock.calls.length, type: typedError.constructor, code: typedError.code }).toEqual({
+      attempts: 1,
+      type: MintApiError,
+      code: 'leaf.ARTIFACT_NOT_FOUND',
+    })
+  })
+
+  it.each([true, false])('normalizes Blob download errors (JSON=%s)', async (json) => {
+    const api = useApi({ typedErrors: true })
+    const body = { code: 'artifact.unavailable', message: 'No artifact', details: { id: 67 } }
+    const blob = new Blob([json ? JSON.stringify(body) : 'Bad gateway'], {
+      type: json ? 'application/json' : 'text/plain',
+    })
+    let cause: AxiosError | undefined
+    const error = await api.get('/download', {
+      responseType: 'blob',
+      adapter: async (config) => {
+        cause = new AxiosError('Bad gateway', AxiosError.ERR_BAD_RESPONSE, config, undefined, {
+          data: blob, status: 502, statusText: 'Bad gateway',
+          headers: { 'x-request-id': 'blob-request' }, config,
+        })
+        throw cause
+      },
+    }).catch((reason: unknown) => reason)
+
+    expect(error).toBeInstanceOf(MintApiError)
+    expect(error).toMatchObject({
+      code: json ? body.code : 'unknown',
+      message: json ? body.message : 'Bad gateway',
+      status: 502, requestId: 'blob-request', cause,
+    })
+    expect((error as MintApiError).body).toEqual(json ? body : blob)
+  })
+
+  it('leaves cancellations and network failures unchanged in typed mode', async () => {
+    const api = useApi({ typedErrors: true })
+    const cause = new AxiosError('Offline', AxiosError.ERR_NETWORK)
+    await expect(api.get('/offline', { adapter: async () => { throw cause } })).rejects.toBe(cause)
+    const controller = new AbortController()
+    controller.abort()
+    await expect(api.get('/cancelled', { signal: controller.signal })).rejects.toMatchObject({ code: 'ERR_CANCELED' })
+  })
+
 })

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,