@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

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

@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
+import SmartGroupManual from '../../components/SmartGroupManual.vue'
+import SmartGroupModal from '../../components/SmartGroupModal.vue'
+
+describe('SmartGroupModal', () => {
+  it('should open in auto mode with the Field Recipe', () => {
+    const wrapper = shallowMount(SmartGroupModal)
+
+    expect(wrapper.findComponent(SmartGroupFieldRecipe).exists()).toBe(true)
+  })
+
+  it('should render the manual cohort builder when mode is manual', () => {
+    const wrapper = shallowMount(SmartGroupModal, { props: { mode: 'manual' } })
+
+    expect(wrapper.findComponent(SmartGroupManual).exists()).toBe(true)
+  })
+
+  it('should forward the auto prop bag to the Field Recipe', () => {
+    const wrapper = shallowMount(SmartGroupModal, { props: { auto: { experimentLabel: 'EXP-001' } } })
+
+    expect(wrapper.findComponent(SmartGroupFieldRecipe).props('experimentLabel')).toBe('EXP-001')
+  })
+
+  it('should emit update:mode when the Field Recipe asks for manual mode', async () => {
+    const wrapper = shallowMount(SmartGroupModal)
+
+    wrapper.findComponent(SmartGroupFieldRecipe).vm.$emit('manual')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:mode')).toEqual([['manual']])
+  })
+
+  it('should switch back to auto when the cohort builder asks for it', async () => {
+    const wrapper = shallowMount(SmartGroupModal, { props: { mode: 'manual' } })
+
+    wrapper.findComponent(SmartGroupManual).vm.$emit('auto')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:mode')).toEqual([['auto']])
+  })
+
+  it('should re-emit apply from the Field Recipe unchanged', () => {
+    const wrapper = shallowMount(SmartGroupModal)
+    const payload = { groups: [] }
+
+    wrapper.findComponent(SmartGroupFieldRecipe).vm.$emit('apply', payload)
+
+    expect(wrapper.emitted('apply')).toEqual([[payload]])
+  })
+
+  it('should re-emit done from the cohort builder unchanged', () => {
+    const wrapper = shallowMount(SmartGroupModal, { props: { mode: 'manual' } })
+    const payload = { samples: [] }
+
+    wrapper.findComponent(SmartGroupManual).vm.$emit('done', payload)
+
+    expect(wrapper.emitted('done')).toEqual([[payload]])
+  })
+
+  it('should re-emit close from the Field Recipe', () => {
+    const wrapper = shallowMount(SmartGroupModal)
+
+    wrapper.findComponent(SmartGroupFieldRecipe).vm.$emit('close')
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseButton from '../../components/BaseButton.vue'
+import StepWizard from '../../components/StepWizard.vue'
+
+const steps = [
+  { id: 'setup', label: 'Setup' },
+  { id: 'review', label: 'Review' },
+]
+
+function navButton(wrapper: ReturnType<typeof mount>, label: string) {
+  const button = wrapper.findAllComponents(BaseButton).find((b) => b.text() === label)
+  if (!button) throw new Error(`no ${label} button`)
+  return button
+}
+
+describe('StepWizard navigation (2c)', () => {
+  it('should render Cancel as a ghost BaseButton', () => {
+    const wrapper = mount(StepWizard, { props: { steps } })
+
+    expect(navButton(wrapper, 'Cancel').props('variant')).toBe('ghost')
+  })
+
+  it('should render Back as a secondary BaseButton', () => {
+    const wrapper = mount(StepWizard, { props: { steps } })
+
+    expect(navButton(wrapper, 'Back').props('variant')).toBe('secondary')
+  })
+
+  it('should render Next as a primary BaseButton', () => {
+    const wrapper = mount(StepWizard, { props: { steps } })
+
+    expect(navButton(wrapper, 'Next').props('variant')).toBe('primary')
+  })
+
+  it('should render Finish as a primary BaseButton on the last step', () => {
+    const wrapper = mount(StepWizard, { props: { steps, modelValue: 1 } })
+
+    expect(navButton(wrapper, 'Finish').props('variant')).toBe('primary')
+  })
+
+  it('should disable Back on the first step', () => {
+    const wrapper = mount(StepWizard, { props: { steps } })
+
+    expect(navButton(wrapper, 'Back').props('disabled')).toBe(true)
+  })
+
+  it('should pass the wizard size to the nav buttons', () => {
+    const wrapper = mount(StepWizard, { props: { steps, size: 'sm' } })
+
+    expect(navButton(wrapper, 'Next').props('size')).toBe('sm')
+  })
+
+  it('should emit complete when Finish is clicked', async () => {
+    const wrapper = mount(StepWizard, { props: { steps, modelValue: 1 } })
+
+    await navButton(wrapper, 'Finish').trigger('click')
+
+    expect(wrapper.emitted('complete')).toHaveLength(1)
+  })
+
+  it('should emit the next index when Next is clicked', async () => {
+    const wrapper = mount(StepWizard, { props: { steps } })
+
+    await navButton(wrapper, 'Next').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+  })
+
+  it('should show the current step counter in the nav', () => {
+    const wrapper = mount(StepWizard, { props: { steps, modelValue: 1 } })
+
+    expect(wrapper.find('.mint-wizard__counter').text()).toBe('2 / 2')
+  })
+})

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

@@ -72,4 +72,20 @@ describe('TagsInput', () => {
 
     wrapper.unmount()
   })
+
+  it('should mark a categorized tag with the group color of its category', () => {
+    const wrapper = mount(TagsInput, {
+      props: {
+        modelValue: ['col:C18', 'status:done'],
+        categories: [{ name: 'Column', prefix: 'col' }, { name: 'Status', prefix: 'status' }],
+      },
+    })
+    expect(wrapper.findAll('.mint-tags-input__tag .mint-tags-input__tag-dot').map(dot => dot.attributes('style')))
+      .toEqual(['background: var(--mint-sample-1);', 'background: var(--mint-sample-2);'])
+  })
+
+  it('should leave an uncategorized tag without a dot', () => {
+    const wrapper = mount(TagsInput, { props: { modelValue: ['plain'] } })
+    expect(wrapper.find('.mint-tags-input__tag-dot').exists()).toBe(false)
+  })
 })

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

@@ -96,4 +96,70 @@ describe('TimePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('should render the dropdown on the shared popover surface when opened', async () => {
+    const wrapper = mount(TimePicker)
+
+    await wrapper.get('input').trigger('click')
+
+    expect(wrapper.get('.mint-time-picker__dropdown').classes()).toContain('mint-popover')
+  })
+
+  it('should mark the selected slot as a selected menu item when opened', async () => {
+    const wrapper = mount(TimePicker, { props: { modelValue: '00:15' } })
+
+    await wrapper.get('input').trigger('click')
+
+    expect(wrapper.findAll('.mint-time-picker__slot')[1].classes()).toContain('mint-menu-item--selected')
+  })
+
+  it('should reserve the check column on unselected slots when opened', async () => {
+    const wrapper = mount(TimePicker, { props: { modelValue: '00:15' } })
+
+    await wrapper.get('input').trigger('click')
+
+    expect(wrapper.findAll('.mint-time-picker__slot')[0].find('.mint-menu-item__check').exists()).toBe(true)
+  })
+
+  it('should mark a slot unavailable when disabledSlots returns a reason', async () => {
+    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
+
+    await wrapper.get('input').trigger('click')
+
+    expect(wrapper.findAll('.mint-time-picker__slot')[1].attributes('aria-disabled')).toBe('true')
+  })
+
+  it('should render the reason inline when a slot is unavailable', async () => {
+    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
+
+    await wrapper.get('input').trigger('click')
+
+    expect(wrapper.findAll('.mint-time-picker__slot')[1].get('.mint-time-picker__slot-reason').text()).toBe('Booked · HPLC-02')
+  })
+
+  it('should not render a reason when disabledSlots returns true', async () => {
+    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' } })
+
+    await wrapper.get('input').trigger('click')
+
+    expect(wrapper.findAll('.mint-time-picker__slot')[1].find('.mint-time-picker__slot-reason').exists()).toBe(false)
+  })
+
+  it('should not emit a value when an unavailable slot is clicked', async () => {
+    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
+
+    await wrapper.get('input').trigger('click')
+    await wrapper.findAll('.mint-time-picker__slot')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('should skip unavailable slots when moving the highlight with ArrowDown', async () => {
+    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
+
+    await wrapper.get('input').trigger('click')
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
+
+    expect(wrapper.findAll('.mint-time-picker__slot')[2].classes()).toContain('mint-menu-item--active')
+  })
 })

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

@@ -0,0 +1,83 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import TimeRangeInput from '../../components/TimeRangeInput.vue'
+
+describe('TimeRangeInput', () => {
+  it('should render the duration after the end picker when both times are set', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '09:00', end: '10:30' } } })
+
+    expect(wrapper.get('.mint-time-range__end').element.nextElementSibling?.classList.contains('mint-time-range__duration')).toBe(true)
+  })
+
+  it('should spell the duration as hours and minutes when both parts are set', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '09:00', end: '10:30' } } })
+
+    expect(wrapper.get('.mint-time-range__duration').text()).toBe('1 h 30 min')
+  })
+
+  it('should drop the minutes when the duration is whole hours', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '09:00', end: '17:00' } } })
+
+    expect(wrapper.get('.mint-time-range__duration').text()).toBe('8 h')
+  })
+
+  it('should drop the hours when the duration is under an hour', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '09:00', end: '09:45' } } })
+
+    expect(wrapper.get('.mint-time-range__duration').text()).toBe('45 min')
+  })
+
+  it('should show an error message when the end is not after the start', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '10:00', end: '09:30' } } })
+
+    expect(wrapper.get('.mint-time-range__error').text()).toBe('End time must be after start time')
+  })
+
+  it('should put both pickers in the error state when the end equals the start', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '10:00', end: '10:00' } } })
+
+    expect(wrapper.findAll('.mint-time-picker__input--error')).toHaveLength(2)
+  })
+
+  it('should not print a negative duration when the end is before the start', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '10:00', end: '09:30' } } })
+
+    expect(wrapper.get('.mint-time-range__duration').text()).toBe('—')
+  })
+
+  it('should show a placeholder duration when a time is missing', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '10:00', end: '' } } })
+
+    expect(wrapper.get('.mint-time-range__duration').text()).toBe('—')
+  })
+
+  it('should emit validity-change false when the end is not after the start', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '10:00', end: '09:30' } } })
+
+    expect(wrapper.emitted('validity-change')?.at(-1)).toEqual([false])
+  })
+
+  it('should emit validity-change true when the range becomes valid', async () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '10:00', end: '09:30' } } })
+
+    await wrapper.setProps({ modelValue: { start: '10:00', end: '11:00' } })
+
+    expect(wrapper.emitted('validity-change')?.at(-1)).toEqual([true])
+  })
+
+  it('should expose isValid false when the end is not after the start', () => {
+    const wrapper = mount(TimeRangeInput, { props: { modelValue: { start: '10:00', end: '09:30' } } })
+
+    expect((wrapper.vm as unknown as { isValid: boolean }).isValid).toBe(false)
+  })
+
+  it('should forward disabledSlots to the end picker when set', async () => {
+    const wrapper = mount(TimeRangeInput, {
+      props: { modelValue: { start: '09:00', end: '' }, disabledSlots: (time: string) => time === '09:15' && 'Booked' },
+    })
+
+    await wrapper.get('.mint-time-range__end input').trigger('click')
+
+    expect(wrapper.get('.mint-time-range__end .mint-time-picker__slot-reason').text()).toBe('Booked')
+  })
+})

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

@@ -0,0 +1,147 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import UnitInput from '../../components/UnitInput.vue'
+import type { UnitOption } from '../../types'
+
+const volume: UnitOption[] = [
+  { value: 'nL', label: 'nL', factor: 1e-9 },
+  { value: 'µL', label: 'µL', factor: 1e-6 },
+  { value: 'mL', label: 'mL', factor: 1e-3 },
+  { value: 'L', label: 'L', factor: 1 },
+]
+
+function mountVolume(props: Record<string, unknown> = {}) {
+  return mount(UnitInput, {
+    props: { modelValue: 250, unit: 'µL', units: volume, ...props },
+    attachTo: document.body,
+    global: { stubs: { teleport: true } },
+  })
+}
+
+async function openMenu(wrapper: ReturnType<typeof mountVolume>) {
+  await wrapper.find('.mint-unit-input__unit').trigger('click')
+}
+
+describe('UnitInput unit segment (4b)', () => {
+  it('should teleport the unit menu to the document body when opened', async () => {
+    const wrapper = mount(UnitInput, {
+      props: { modelValue: 250, unit: 'µL', units: volume },
+      attachTo: document.body,
+    })
+    await wrapper.find('.mint-unit-input__unit').trigger('click')
+    expect(document.body.querySelector(':scope > .mint-unit-input__menu')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('should render the unit as a listbox button when several units are given', () => {
+    const wrapper = mountVolume()
+    expect(wrapper.find('button.mint-unit-input__unit').attributes('aria-haspopup')).toBe('listbox')
+  })
+
+  it('should show the current unit label in the segment when mounted', () => {
+    const wrapper = mountVolume()
+    expect(wrapper.find('.mint-unit-input__unit').text()).toBe('µL')
+  })
+
+  it('should show a chevron when the unit is selectable', () => {
+    const wrapper = mountVolume()
+    expect(wrapper.find('.mint-unit-input__chevron').exists()).toBe(true)
+  })
+
+  it('should render a static segment without chevron when only one unit is given', () => {
+    const wrapper = mountVolume({ units: [volume[1]] })
+    expect(wrapper.find('.mint-unit-input__chevron').exists()).toBe(false)
+  })
+
+  it('should list units as menu items when the segment is clicked', async () => {
+    const wrapper = mountVolume()
+    await openMenu(wrapper)
+    expect(wrapper.findAll('.mint-unit-input__menu .mint-menu-item')).toHaveLength(4)
+  })
+
+  it('should preview the converted value next to each unit when factors are set', async () => {
+    const wrapper = mountVolume()
+    await openMenu(wrapper)
+    expect(wrapper.findAll('.mint-unit-input__menu .mint-menu-item__meta')[2].text()).toBe('0.25')
+  })
+
+  it('should mark the current unit as selected when the menu is open', async () => {
+    const wrapper = mountVolume()
+    await openMenu(wrapper)
+    expect(wrapper.findAll('[role="option"]')[1].attributes('aria-selected')).toBe('true')
+  })
+
+  it('should emit update:unit when a unit is chosen', async () => {
+    const wrapper = mountVolume()
+    await openMenu(wrapper)
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
+    expect(wrapper.emitted('update:unit')?.[0]).toEqual(['mL'])
+  })
+
+  it('should close the menu when a unit is chosen', async () => {
+    const wrapper = mountVolume()
+    await openMenu(wrapper)
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
+    expect(wrapper.find('.mint-unit-input__menu').exists()).toBe(false)
+  })
+
+  it('should not let Escape reach the document when it closes the unit menu', async () => {
+    const wrapper = mountVolume()
+    await openMenu(wrapper)
+    const onDocumentKeydown = vi.fn()
+    document.addEventListener('keydown', onDocumentKeydown)
+    await wrapper.find('.mint-unit-input__menu').trigger('keydown', { key: 'Escape' })
+    document.removeEventListener('keydown', onDocumentKeydown)
+    expect(onDocumentKeydown).not.toHaveBeenCalled()
+  })
+
+  it('should convert the value when convertOnUnitChange is set', async () => {
+    const wrapper = mountVolume({ convertOnUnitChange: true })
+    await openMenu(wrapper)
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([0.25])
+  })
+
+  it('should not preview units from another group when groups differ', async () => {
+    const units = [
+      { value: 'mM', label: 'mM', factor: 1e-3, group: 'Molar' },
+      { value: 'mg/mL', label: 'mg/mL', factor: 1e-3, group: 'Mass' },
+    ]
+    const wrapper = mountVolume({ unit: 'mM', units })
+    await openMenu(wrapper)
+    expect(wrapper.findAll('.mint-unit-input__menu .mint-menu-item__meta')).toHaveLength(1)
+  })
+
+  it('should render group labels when units carry groups', async () => {
+    const wrapper = mountVolume({ units: volume.map(u => ({ ...u, group: 'Volume' })) })
+    await openMenu(wrapper)
+    expect(wrapper.find('.mint-unit-input__menu-group').text()).toBe('Volume')
+  })
+})
+
+describe('UnitInput conversion hint (4b)', () => {
+  it('should show the neighbour unit nearest to 1–1000 when the value has a factor', () => {
+    const wrapper = mountVolume()
+    expect(wrapper.find('.mint-unit-input__hint').text()).toBe('≈ 0.25 mL')
+  })
+
+  it('should step down a unit when the value is below 1', () => {
+    const wrapper = mountVolume({ modelValue: 0.5 })
+    expect(wrapper.find('.mint-unit-input__hint').text()).toBe('≈ 500 nL')
+  })
+
+  it('should step up a unit when the value is 1000 or more', () => {
+    const wrapper = mountVolume({ modelValue: 1500 })
+    expect(wrapper.find('.mint-unit-input__hint').text()).toBe('≈ 1.5 mL')
+  })
+
+  it('should hide the hint when units carry no factor', () => {
+    const wrapper = mountVolume({ units: volume.map(({ value, label }) => ({ value, label })) })
+    expect(wrapper.find('.mint-unit-input__hint').exists()).toBe(false)
+  })
+
+  it('should hide the hint when the value is empty', () => {
+    const wrapper = mountVolume({ modelValue: undefined })
+    expect(wrapper.find('.mint-unit-input__hint').exists()).toBe(false)
+  })
+})