@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

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

@@ -0,0 +1,176 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AuditTrail from '../../components/AuditTrail.vue'
+import BatchProgressList from '../../components/BatchProgressList.vue'
+import ExperimentTimeline from '../../components/ExperimentTimeline.vue'
+import LcmsSequenceTable from '../../components/LcmsSequenceTable.vue'
+import ReagentList from '../../components/ReagentList.vue'
+import SampleHierarchyTree from '../../components/SampleHierarchyTree.vue'
+import ScheduleCalendar from '../../components/ScheduleCalendar.vue'
+import WellPlate from '../../components/WellPlate.vue'
+
+/**
+ * The `loading` / `error` props and the `#empty` / `#error` / `#loading` slots
+ * are one contract shared by the data components, so they are asserted in one
+ * place. Each entry pairs a component with the props that leave it empty and a
+ * selector that only its populated rendering produces.
+ */
+const cases = [
+  {
+    name: 'AuditTrail',
+    component: AuditTrail,
+    emptyProps: { entries: [] },
+    filledProps: {
+      entries: [{ id: 'a', type: 'created', action: 'Created', timestamp: '2026-01-01T00:00:00Z' }],
+    },
+    contentSelector: '.mint-audit-trail__list',
+  },
+  {
+    name: 'BatchProgressList',
+    component: BatchProgressList,
+    emptyProps: { items: [] },
+    filledProps: { items: [{ id: '1', label: 'One', status: 'pending' }] },
+    contentSelector: '.mint-batch-progress__list',
+  },
+  {
+    name: 'ExperimentTimeline',
+    component: ExperimentTimeline,
+    emptyProps: { modelValue: [] },
+    filledProps: { modelValue: [{ id: 's1', name: 'Step 1', order: 1, type: 'incubation' }] },
+    contentSelector: '.mint-timeline__step',
+  },
+  {
+    name: 'LcmsSequenceTable',
+    component: LcmsSequenceTable,
+    emptyProps: { items: [] },
+    filledProps: {
+      items: [{
+        file_name: 'a.raw',
+        position: 'A1',
+        sample_type: 'Unknown',
+        instrument_method: 'm',
+        injection_volume: 1,
+      }],
+    },
+    contentSelector: '.mint-lcms-sequence-table__scroller',
+  },
+  {
+    name: 'ReagentList',
+    component: ReagentList,
+    emptyProps: { modelValue: [] },
+    filledProps: { modelValue: [{ id: 'r1', name: 'Water' }] },
+    contentSelector: '.mint-reagent-list__table',
+  },
+  {
+    name: 'SampleHierarchyTree',
+    component: SampleHierarchyTree,
+    emptyProps: { nodes: [] },
+    filledProps: { nodes: [{ id: 'n1', label: 'Study', type: 'study' }] },
+    contentSelector: '.mint-sample-tree__node',
+  },
+] as const
+
+describe('shared data component states', () => {
+  describe.each(cases)('$name', ({ component, emptyProps, filledProps, contentSelector }) => {
+    it('renders its content when neither loading nor error is passed', () => {
+      const wrapper = mount(component, { props: { ...filledProps } as never })
+
+      expect(wrapper.find(contentSelector).exists()).toBe(true)
+      expect(wrapper.find('[data-state]').exists()).toBe(false)
+    })
+
+    it('renders an empty state instead of content when there is nothing to show', () => {
+      const wrapper = mount(component, { props: { ...emptyProps } as never })
+
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
+      expect(wrapper.find(contentSelector).exists()).toBe(false)
+    })
+
+    it('renders a loading state that replaces the content', () => {
+      const wrapper = mount(component, { props: { ...filledProps, loading: true } as never })
+
+      expect(wrapper.find('[data-state="loading"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-spinner').exists()).toBe(true)
+      expect(wrapper.find(contentSelector).exists()).toBe(false)
+    })
+
+    it('renders an error state that wins over content and loading', () => {
+      const wrapper = mount(component, {
+        props: { ...filledProps, loading: true, error: 'Request failed' } as never,
+      })
+
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
+      expect(wrapper.find('[data-state="loading"]').exists()).toBe(false)
+      expect(wrapper.find('.mint-empty-state__title').text()).toBe('Request failed')
+      expect(wrapper.find(contentSelector).exists()).toBe(false)
+    })
+
+    it('lets the empty slot replace the default placeholder', () => {
+      const wrapper = mount(component, {
+        props: { ...emptyProps } as never,
+        slots: { empty: '<p class="slot-empty">custom</p>' },
+      })
+
+      expect(wrapper.find('.slot-empty').exists()).toBe(true)
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(false)
+    })
+
+    it('lets the error slot replace the default placeholder', () => {
+      const wrapper = mount(component, {
+        props: { ...filledProps, error: 'Boom' } as never,
+        slots: { error: '<p class="slot-error">custom</p>' },
+      })
+
+      expect(wrapper.find('.slot-error').exists()).toBe(true)
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(false)
+    })
+  })
+
+  describe('opt-in empty states', () => {
+    it('keeps the WellPlate grid when no emptyMessage is given', () => {
+      const wrapper = mount(WellPlate, { props: { wells: {} } })
+
+      expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(true)
+      expect(wrapper.find('[data-state]').exists()).toBe(false)
+    })
+
+    it('replaces the WellPlate grid once an emptyMessage is given', () => {
+      const wrapper = mount(WellPlate, {
+        props: { wells: {}, emptyMessage: 'No plate loaded' },
+      })
+
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(false)
+    })
+
+    it('replaces the WellPlate grid on error', () => {
+      const wrapper = mount(WellPlate, { props: { error: 'Boom' } })
+
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(false)
+    })
+
+    it('keeps the ScheduleCalendar grid when no emptyMessage is given', () => {
+      const wrapper = mount(ScheduleCalendar, { props: { events: [] } })
+
+      expect(wrapper.find('.mint-schedule__body').exists()).toBe(true)
+      expect(wrapper.find('[data-state]').exists()).toBe(false)
+    })
+
+    it('replaces the ScheduleCalendar grid once an emptyMessage is given', () => {
+      const wrapper = mount(ScheduleCalendar, {
+        props: { events: [], emptyMessage: 'Nothing scheduled' },
+      })
+
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-schedule__body').exists()).toBe(false)
+    })
+
+    it('replaces the ScheduleCalendar grid while loading', () => {
+      const wrapper = mount(ScheduleCalendar, { props: { loading: true } })
+
+      expect(wrapper.find('[data-state="loading"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-schedule__body').exists()).toBe(false)
+    })
+  })
+})

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

@@ -42,4 +42,80 @@ describe('DatePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('opens from the input with Enter, Space and ArrowDown', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    for (const key of ['Enter', ' ', 'ArrowDown']) {
+      await wrapper.get('input').trigger('keydown', { key })
+      expect(dropdown()).not.toBeNull()
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(dropdown()).toBeNull()
+    }
+
+    wrapper.unmount()
+  })
+
+  it('moves focus into the calendar grid and back to the input on close', async () => {
+    const wrapper = mount(DatePicker, {
+      props: { modelValue: '2026-04-22' },
+      attachTo: document.body,
+    })
+    const input = wrapper.get<HTMLInputElement>('input').element
+
+    await wrapper.get('input').trigger('click')
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(
+      document.body.querySelector('.mint-date-picker__day--selected'),
+    )
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
+
+  it('marks the panel as a non-modal dialog', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+
+    const panel = dropdown()
+    expect(panel?.getAttribute('role')).toBe('dialog')
+    expect(panel?.hasAttribute('aria-modal')).toBe(false)
+    expect(wrapper.get('input').attributes('aria-haspopup')).toBe('dialog')
+    expect(wrapper.get('input').attributes('aria-expanded')).toBe('true')
+
+    wrapper.unmount()
+  })
+
+  it('keeps the panel open while the page scrolls, repositioning instead', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+
+    expect(dropdown()).not.toBeNull()
+
+    wrapper.unmount()
+  })
+
+  it('does not open from the keyboard while disabled', async () => {
+    const wrapper = mount(DatePicker, { props: { disabled: true }, attachTo: document.body })
+
+    await wrapper.get('input').trigger('keydown', { key: 'Enter' })
+
+    expect(dropdown()).toBeNull()
+
+    wrapper.unmount()
+  })
 })

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

@@ -45,4 +45,40 @@ describe('DateTimePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('opens from the keyboard, focuses the calendar, and restores focus on close', async () => {
+    const wrapper = mount(DateTimePicker, {
+      props: { modelValue: '2026-04-22T14:30' },
+      attachTo: document.body,
+    })
+    const input = wrapper.get<HTMLInputElement>('input').element
+
+    await wrapper.get('input').trigger('keydown', { key: 'ArrowDown' })
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(true)
+    expect(document.activeElement).toBe(wrapper.get('.mint-date-picker__day--selected').element)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
+
+  it('marks the panel as a non-modal dialog', async () => {
+    const wrapper = mount(DateTimePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+
+    const panel = wrapper.get('.mint-datetime-picker__dropdown')
+    expect(panel.attributes('role')).toBe('dialog')
+    expect(panel.attributes('aria-modal')).toBeUndefined()
+
+    wrapper.unmount()
+  })
 })

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

@@ -458,6 +458,140 @@ describe('DropdownButton', () => {
     })
   })
 
+  describe('listbox keyboard handling', () => {
+    it('opens and focuses the first enabled option on ArrowDown', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { options: mockOptions },
+        attachTo: document.body,
+      })
+
+      await wrapper.get('.mint-dropdown-button__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.mint-dropdown-button__menu').exists()).toBe(true)
+      expect(document.activeElement).toBe(wrapper.findAll('.mint-dropdown-button__option')[0].element)
+
+      wrapper.unmount()
+    })
+
+    it('opens and focuses the last option on ArrowUp', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { options: mockOptions },
+        attachTo: document.body,
+      })
+
+      await wrapper.get('.mint-dropdown-button__trigger').trigger('keydown', { key: 'ArrowUp' })
+      await wrapper.vm.$nextTick()
+
+      // Option C is disabled and excluded from the navigable set, so the last
+      // navigable option is Option B even though it renders second-to-last.
+      const options = wrapper.findAll('.mint-dropdown-button__option')
+      expect(document.activeElement).toBe(options[1].element)
+
+      wrapper.unmount()
+    })
+
+    it('cycles option focus with ArrowDown/ArrowUp, skipping disabled options, wrapping at the ends', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { options: mockOptions },
+        attachTo: document.body,
+      })
+
+      await wrapper.get('.mint-dropdown-button__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      const options = wrapper.findAll('.mint-dropdown-button__option')
+      const menu = wrapper.get('.mint-dropdown-button__menu')
+
+      expect(document.activeElement).toBe(options[0].element)
+
+      // Option C is disabled and excluded from the navigable set entirely.
+      await menu.trigger('keydown', { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(options[1].element)
+
+      await menu.trigger('keydown', { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(options[0].element)
+
+      await menu.trigger('keydown', { key: 'ArrowUp' })
+      expect(document.activeElement).toBe(options[1].element)
+
+      wrapper.unmount()
+    })
+
+    it('jumps to the first option on Home and the last on End', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { options: mockOptions },
+        attachTo: document.body,
+      })
+
+      await wrapper.get('.mint-dropdown-button__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      const options = wrapper.findAll('.mint-dropdown-button__option')
+      const menu = wrapper.get('.mint-dropdown-button__menu')
+
+      await menu.trigger('keydown', { key: 'End' })
+      expect(document.activeElement).toBe(options[1].element)
+
+      await menu.trigger('keydown', { key: 'Home' })
+      expect(document.activeElement).toBe(options[0].element)
+
+      wrapper.unmount()
+    })
+
+    it('selects the focused option on Enter', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { options: mockOptions },
+        attachTo: document.body,
+      })
+
+      await wrapper.get('.mint-dropdown-button__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+      await wrapper.get('.mint-dropdown-button__option').trigger('keydown', { key: 'Enter' })
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['a'])
+      expect(wrapper.find('.mint-dropdown-button__menu').exists()).toBe(false)
+
+      wrapper.unmount()
+    })
+
+    it('closes on Escape and returns focus to the trigger', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { options: mockOptions },
+        attachTo: document.body,
+      })
+
+      const trigger = wrapper.get('.mint-dropdown-button__trigger')
+      await trigger.trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      await wrapper.get('.mint-dropdown-button__menu').trigger('keydown', { key: 'Escape' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.mint-dropdown-button__menu').exists()).toBe(false)
+      expect(document.activeElement).toBe(trigger.element)
+
+      wrapper.unmount()
+    })
+
+    it('closes on Tab without forcing focus', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: { options: mockOptions },
+        attachTo: document.body,
+      })
+
+      await wrapper.get('.mint-dropdown-button__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      await wrapper.get('.mint-dropdown-button__menu').trigger('keydown', { key: 'Tab' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.mint-dropdown-button__menu').exists()).toBe(false)
+
+      wrapper.unmount()
+    })
+  })
+
   describe('edge cases', () => {
     it('should handle empty options array', () => {
       const wrapper = mount(DropdownButton, {

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

@@ -21,6 +21,36 @@ describe('ExperimentPopover', () => {
     document.body.innerHTML = ''
   })
 
+  it('requests experiment selection on the first click when no experiment is selected', async () => {
+    const wrapper = mountPopover()
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { experimentName: 'Dose response run' },
+    { experimentCode: 'EXP-001' },
+    { isResolving: true },
+    { error: 'Experiment not found' },
+  ])('keeps the popover interaction for bound experiment state %o', async (props) => {
+    const wrapper = mountPopover(props)
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(true)
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
   it('prefers the experiment name in the trigger when both name and code are available', () => {
     const wrapper = mountPopover({
       experimentName: 'Dose response run',

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

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ExperimentTimeline from '../../components/ExperimentTimeline.vue'
+import type { ProtocolStep } from '../../types'
+
+function makeSteps(): ProtocolStep[] {
+  return [
+    { id: 's1', name: 'Thaw', type: 'incubation', status: 'pending', order: 0 },
+    { id: 's2', name: 'Quench', type: 'incubation', status: 'pending', order: 1 },
+    { id: 's3', name: 'Extract', type: 'incubation', status: 'pending', order: 2 },
+  ]
+}
+
+describe('ExperimentTimeline', () => {
+  it('renders steps in order', () => {
+    const wrapper = mount(ExperimentTimeline, { props: { modelValue: makeSteps() } })
+
+    expect(wrapper.findAll('.mint-timeline__title').map(title => title.text()))
+      .toEqual(['Thaw', 'Quench', 'Extract'])
+  })
+
+  it('reorders a step with Alt and the arrow keys while editable', async () => {
+    const wrapper = mount(ExperimentTimeline, {
+      props: { modelValue: makeSteps(), editable: true },
+    })
+
+    const first = wrapper.findAll('.mint-timeline__step')[0]
+    expect(first.attributes('tabindex')).toBe('0')
+    expect(first.attributes('aria-label')).toContain('Press Alt with the arrow keys')
+
+    await first.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('step-reorder')?.[0]).toEqual(['s1', 1])
+    const steps = wrapper.emitted('update:modelValue')?.[0]?.[0] as ProtocolStep[]
+    expect(steps.map(step => step.id)).toEqual(['s2', 's1', 's3'])
+    expect(steps.map(step => step.order)).toEqual([0, 1, 2])
+  })
+
+  it('announces the move politely', async () => {
+    const wrapper = mount(ExperimentTimeline, {
+      props: { modelValue: makeSteps(), editable: true },
+    })
+
+    await wrapper.findAll('.mint-timeline__step')[2]
+      .trigger('keydown', { key: 'ArrowUp', altKey: true })
+    await wrapper.vm.$nextTick()
+
+    const liveRegion = wrapper.get('[role="status"]')
+    expect(liveRegion.attributes('aria-live')).toBe('polite')
+    expect(liveRegion.text()).toBe('Extract moved to position 2 of 3.')
+  })
+
+  it('is not keyboard reorderable when not editable', async () => {
+    const wrapper = mount(ExperimentTimeline, { props: { modelValue: makeSteps() } })
+
+    const first = wrapper.findAll('.mint-timeline__step')[0]
+    expect(first.attributes('tabindex')).toBeUndefined()
+
+    await first.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('step-reorder')).toBeUndefined()
+  })
+})