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

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import ComponentBindingRenderer from '../../components/ComponentBindingRenderer.vue'
 
@@ -33,17 +33,15 @@ const DataFrameStub = defineComponent({
   template: '<div data-test="data-frame" />',
 })
 
-const PlateMapEditorStub = defineComponent({
-  name: 'PlateMapEditor',
+const PlateEditorStub = defineComponent({
+  name: 'PlateEditor',
   props: {
-    modelValue: { type: Object, default: () => ({}) },
-    showToolbar: { type: Boolean, default: true },
-    showSidebar: { type: Boolean, default: true },
-    allowAddPlates: { type: Boolean, default: true },
-    allowAddSamples: { type: Boolean, default: true },
+    modelValue: { type: Array, default: () => [] },
+    readonly: { type: Boolean, default: false },
     size: { type: String, default: undefined },
   },
-  template: '<div data-test="plate-map-editor" />',
+  emits: ['assign'],
+  template: '<div data-test="plate-editor" />',
 })
 
 const ExperimentTimelineStub = defineComponent({
@@ -85,7 +83,7 @@ const globalOptions = {
     DataFrame: DataFrameStub,
     DoseCalculator: DoseCalculatorStub,
     ExperimentTimeline: ExperimentTimelineStub,
-    PlateMapEditor: PlateMapEditorStub,
+    PlateEditor: PlateEditorStub,
     SampleSelector: SampleSelectorStub,
     ScheduleCalendar: ScheduleCalendarStub,
     WellPlate: WellPlateStub,
@@ -138,19 +136,16 @@ describe('ComponentBindingRenderer', () => {
       props: {
         binding: {
           id: 'plate-map',
-          component: 'PlateMapEditor',
-          propsObject: { modelValue: { plates: [] } },
+          component: 'PlateEditor',
+          propsObject: { modelValue: [] },
         },
         dense: true,
       },
       global: globalOptions,
     })
 
-    expect(wrapper.findComponent(PlateMapEditorStub).props()).toMatchObject({
-      showToolbar: false,
-      showSidebar: false,
-      allowAddPlates: false,
-      allowAddSamples: false,
+    expect(wrapper.findComponent(PlateEditorStub).props()).toMatchObject({
+      readonly: true,
       size: 'md',
     })
   })
@@ -275,4 +270,37 @@ describe('ComponentBindingRenderer', () => {
       enableSmartGroup: false,
     })
   })
+
+  it('should apply PlateEditor intents to its own copy of the plates when not readonly', async () => {
+    const plates = [{ id: 'p1', name: 'P1', format: 96, slot: 'R', injectionVolume: 0, wells: {} }]
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: { id: 'plate-map', component: 'PlateEditor', propsObject: { modelValue: plates } },
+        readonly: false,
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(PlateEditorStub).vm.$emit('assign', 'p1', ['A1'], 'ctrl')
+    await nextTick()
+
+    expect((wrapper.findComponent(PlateEditorStub).props('modelValue') as Array<{ wells: Record<string, unknown> }>)[0].wells.A1)
+      .toMatchObject({ group: 'ctrl' })
+  })
+
+  it('should leave the binding plates untouched when an intent is applied', async () => {
+    const plates = [{ id: 'p1', name: 'P1', format: 96, slot: 'R', injectionVolume: 0, wells: {} }]
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: { id: 'plate-map', component: 'PlateEditor', propsObject: { modelValue: plates } },
+        readonly: false,
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(PlateEditorStub).vm.$emit('assign', 'p1', ['A1'], 'ctrl')
+    await nextTick()
+
+    expect(plates[0].wells).toEqual({})
+  })
 })

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

@@ -20,8 +20,8 @@ describe('ConcentrationInput', () => {
     expect(unitInput.props('modelValue')).toBe(5)
     expect(unitInput.props('unit')).toBe('µM')
     expect(unitInput.props('units')).toEqual([
-      { value: 'nM', label: 'nM', group: undefined },
-      { value: 'µM', label: 'µM', group: undefined },
+      { value: 'nM', label: 'nM', group: undefined, factor: 1e-9 },
+      { value: 'µM', label: 'µM', group: undefined, factor: 1e-6 },
     ])
 
     await unitInput.vm.$emit('update:modelValue', 8)
@@ -42,4 +42,19 @@ describe('ConcentrationInput', () => {
 
     expect(wrapper.text()).toContain('1 µM')
   })
+
+  it('should render the approximation sign as text when a hint is shown', () => {
+    const wrapper = mount(ConcentrationInput, { props: { modelValue: { value: 1000, unit: 'nM' } } })
+    expect(wrapper.find('.mint-unit-input__hint').text()).toBe('≈ 1 µM')
+  })
+
+  it('should show the nearest-unit hint when the value is 250 µM', () => {
+    const wrapper = mount(ConcentrationInput, { props: { modelValue: { value: 250, unit: 'µM' } } })
+    expect(wrapper.find('.mint-unit-input__hint').text()).toBe('≈ 0.25 mM')
+  })
+
+  it('should hide the hint when showConversion is false', () => {
+    const wrapper = mount(ConcentrationInput, { props: { modelValue: { value: 250, unit: 'µM' }, showConversion: false } })
+    expect(wrapper.find('.mint-unit-input__hint').exists()).toBe(false)
+  })
 })

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

@@ -433,7 +433,7 @@ describe('DataFrame', () => {
       const wrapper = mount(DataFrame, {
         props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
       })
-      const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox')
+      const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox input')
       await rowCheckboxes[0].trigger('change')
 
       expect(wrapper.emitted('update:selectedKeys')).toHaveLength(1)
@@ -451,7 +451,7 @@ describe('DataFrame', () => {
           selectedKeys: [1],
         },
       })
-      const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox')
+      const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox input')
       await rowCheckboxes[0].trigger('change')
 
       const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
@@ -462,7 +462,7 @@ describe('DataFrame', () => {
       const wrapper = mount(DataFrame, {
         props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
       })
-      const headerCheckbox = wrapper.find('.mint-dataframe__th--checkbox .mint-dataframe__checkbox')
+      const headerCheckbox = wrapper.find('.mint-dataframe__th--checkbox .mint-dataframe__checkbox input')
       await headerCheckbox.trigger('change')
 
       const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
@@ -482,6 +482,30 @@ describe('DataFrame', () => {
       const selectedRow = wrapper.find('.mint-dataframe__row--selected')
       expect(selectedRow.exists()).toBe(true)
     })
+
+    it('should render row checkboxes as BaseCheckbox sm when selectable', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
+      })
+      expect(wrapper.find('.mint-dataframe__td--checkbox .mint-checkbox__box--sm').exists()).toBe(true)
+    })
+
+    it('should mark the header checkbox mixed when some rows are selected', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id', selectedKeys: [1] },
+      })
+      const header = wrapper.find('.mint-dataframe__th--checkbox input')
+      expect(header.attributes('aria-checked')).toBe('mixed')
+    })
+
+    it('should select all rows when the mixed header checkbox is clicked', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id', selectedKeys: [1] },
+      })
+      await wrapper.find('.mint-dataframe__th--checkbox input').setValue(true)
+      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
+      expect(keys).toHaveLength(3)
+    })
   })
 
   describe('events', () => {
@@ -850,7 +874,7 @@ describe('DataFrame', () => {
           rowKey: 'id',
         },
       })
-      const checkbox = wrapper.find('.mint-dataframe__td--checkbox .mint-dataframe__checkbox')
+      const checkbox = wrapper.find('.mint-dataframe__td--checkbox .mint-dataframe__checkbox input')
       await checkbox.trigger('click')
 
       // Row click should not be emitted
@@ -1084,4 +1108,83 @@ describe('DataFrame', () => {
       expect(wrapper.find('.mint-dataframe__td--lg').exists()).toBe(true)
     })
   })
+
+  describe('column unit, type and precision (2a)', () => {
+    const measureData = [{ id: 1, sample: 'A-01', conc: 12.5, rt: 2.4 }]
+    const measureColumns: DataFrameColumn[] = [
+      { key: 'sample', label: 'Sample' },
+      { key: 'conc', label: 'Conc', unit: 'µM', type: 'number' },
+      { key: 'rt', label: 'RT', unit: 'min', type: 'number', precision: 2 },
+    ]
+    const mountMeasures = () => mount(DataFrame, { props: { data: measureData, columns: measureColumns } })
+
+    it('should render the unit in its own element when a column declares a unit', () => {
+      const header = mountMeasures().findAll('.mint-dataframe__th')[1]
+      expect(header.find('.mint-dataframe__th-unit').text()).toBe('µM')
+    })
+
+    it('should keep the label text free of the unit when a column declares a unit', () => {
+      const header = mountMeasures().findAll('.mint-dataframe__th')[1]
+      expect(header.find('.mint-dataframe__th-label').text()).toBe('Conc')
+    })
+
+    it('should render no unit element when a column has no unit', () => {
+      const header = mountMeasures().findAll('.mint-dataframe__th')[0]
+      expect(header.find('.mint-dataframe__th-unit').exists()).toBe(false)
+    })
+
+    it('should mark cells as numeric when the column type is number', () => {
+      const cell = mountMeasures().findAll('.mint-dataframe__td')[1]
+      expect(cell.classes()).toContain('mint-dataframe__td--number')
+    })
+
+    it('should right-align cells when the column type is number', () => {
+      const cell = mountMeasures().findAll('.mint-dataframe__td')[1]
+      expect(cell.classes()).toContain('mint-dataframe__td--align-right')
+    })
+
+    it('should right-align the header when the column type is number', () => {
+      const header = mountMeasures().findAll('.mint-dataframe__th')[1]
+      expect(header.classes()).toContain('mint-dataframe__th--align-right')
+    })
+
+    it('should keep an explicit align when the column type is number', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: measureData, columns: [{ key: 'conc', label: 'Conc', type: 'number', align: 'center' }] },
+      })
+      expect(wrapper.find('.mint-dataframe__td').classes()).toContain('mint-dataframe__td--align-center')
+    })
+
+    it('should not mark cells as numeric when the column has no type', () => {
+      const cell = mountMeasures().findAll('.mint-dataframe__td')[0]
+      expect(cell.classes()).not.toContain('mint-dataframe__td--number')
+    })
+
+    it('should format numbers to the given precision when a column declares precision', () => {
+      const cell = mountMeasures().findAll('.mint-dataframe__td')[2]
+      expect(cell.text()).toBe('2.40')
+    })
+
+    it('should leave numbers unformatted when a column declares no precision', () => {
+      const cell = mountMeasures().findAll('.mint-dataframe__td')[1]
+      expect(cell.text()).toBe('12.5')
+    })
+
+    it('should let the formatter win when a column declares both formatter and precision', () => {
+      const wrapper = mount(DataFrame, {
+        props: {
+          data: measureData,
+          columns: [{ key: 'rt', label: 'RT', precision: 2, formatter: (v: unknown) => `~${String(v)}` }],
+        },
+      })
+      expect(wrapper.find('.mint-dataframe__td').text()).toBe('~2.4')
+    })
+
+    it('should leave non-numeric values untouched when a column declares precision', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: [{ rt: 'n/a' }], columns: [{ key: 'rt', label: 'RT', type: 'number', precision: 2 }] },
+      })
+      expect(wrapper.find('.mint-dataframe__td').text()).toBe('n/a')
+    })
+  })
 })

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

@@ -3,7 +3,6 @@ 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'
@@ -39,21 +38,6 @@ const cases = [
     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,

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

@@ -118,4 +118,14 @@ describe('DatePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('should render the calendar on the shared popover surface when opened', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+
+    expect(dropdown()?.classList.contains('mint-popover')).toBe(true)
+
+    wrapper.unmount()
+  })
 })

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

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import BaseButton from '../../components/BaseButton.vue'
+import BaseInput from '../../components/BaseInput.vue'
+import DoseCalculator from '../../components/DoseCalculator.vue'
+
+async function mountSerial(props: Record<string, unknown> = {}) {
+  const wrapper = mount(DoseCalculator, { props: { mode: 'serial', ...props } })
+  await nextTick()
+  return wrapper
+}
+
+describe('DoseCalculator (6c)', () => {
+  it('should enter the dilution factor in a BaseInput with a × suffix', async () => {
+    const wrapper = await mountSerial()
+
+    expect(wrapper.findAll('.mint-input-group__suffix').map((s) => s.text())).toContain('×')
+  })
+
+  it('should enter the number of dilutions in a BaseInput', async () => {
+    const wrapper = await mountSerial()
+
+    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('modelValue'))).toContain(8)
+  })
+
+  it('should recalculate when the dilution factor changes', async () => {
+    const wrapper = await mountSerial()
+
+    wrapper.findAllComponents(BaseInput).find((i) => i.props('modelValue') === 3)!.vm.$emit('update:modelValue', 2)
+    await nextTick()
+
+    expect(wrapper.emitted('calculate')?.at(-1)?.[0]).toMatchObject({ steps: expect.any(Array) })
+  })
+
+  it('should apply to wells with a primary BaseButton', async () => {
+    const wrapper = await mountSerial({ targetWells: ['A1', 'A2'] })
+
+    expect(wrapper.findComponent(BaseButton).props('variant')).toBe('primary')
+  })
+
+  it('should size the serial row fields to the 32px control height', async () => {
+    const wrapper = await mountSerial()
+
+    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('size'))).toEqual(['sm', 'sm'])
+  })
+})

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

@@ -1,53 +1,56 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import DoseCalculatorVolumeField from '../../components/DoseCalculatorVolumeField.vue'
+import FormField from '../../components/FormField.vue'
+import UnitInput from '../../components/UnitInput.vue'
+import type { VolumeUnit } from '../../composables/useDoseCalculator'
+
+const units: VolumeUnit[] = ['µL', 'mL', 'L']
+
+function mountField(modelValue = { value: 1, unit: 'mL' as VolumeUnit }) {
+  return mount(DoseCalculatorVolumeField, { props: { label: 'Final Volume', modelValue, units } })
+}
 
 describe('DoseCalculatorVolumeField', () => {
-  it('emits value updates while preserving the current unit', async () => {
-    const wrapper = mount(DoseCalculatorVolumeField, {
-      props: {
-        label: 'Final Volume',
-        modelValue: { value: 1, unit: 'mL' },
-        units: ['µL', 'mL', 'L'],
-      },
-    })
+  it('should emit value updates while preserving the current unit', async () => {
+    const wrapper = mountField()
 
     await wrapper.get('input').setValue('2.5')
 
-    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([
-      { value: 2.5, unit: 'mL' },
-    ])
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ value: 2.5, unit: 'mL' }])
   })
 
-  it('emits unit updates while preserving the current value', async () => {
-    const wrapper = mount(DoseCalculatorVolumeField, {
-      props: {
-        label: 'Volume per Well',
-        modelValue: { value: 100, unit: 'µL' },
-        units: ['µL', 'mL', 'L'],
-      },
-    })
+  it('should emit unit updates while preserving the current value', () => {
+    const wrapper = mountField({ value: 100, unit: 'µL' })
 
-    await wrapper.get('select').setValue('mL')
+    wrapper.findComponent(UnitInput).vm.$emit('update:unit', 'mL')
 
-    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([
-      { value: 100, unit: 'mL' },
-    ])
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ value: 100, unit: 'mL' }])
   })
 
-  it('ignores non-numeric value input', async () => {
-    const wrapper = mount(DoseCalculatorVolumeField, {
-      props: {
-        label: 'Final Volume',
-        modelValue: { value: 1, unit: 'mL' },
-        units: ['µL', 'mL', 'L'],
-      },
-    })
+  it('should ignore an emptied value', async () => {
+    const wrapper = mountField()
 
-    const input = wrapper.get('input')
-    ;(input.element as HTMLInputElement).value = ''
-    await input.trigger('input')
+    await wrapper.get('input').setValue('')
 
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
   })
+
+  it('should offer every volume unit in the UnitInput segment (6c)', () => {
+    const wrapper = mountField()
+
+    expect(wrapper.findComponent(UnitInput).props('units').map((u: { value: string }) => u.value)).toEqual(units)
+  })
+
+  it('should lay the field out as a FormField row (6c)', () => {
+    const wrapper = mountField()
+
+    expect(wrapper.findComponent(FormField).props('layout')).toBe('row')
+  })
+
+  it('should size the volume field to the 32px control height', () => {
+    const wrapper = mountField()
+
+    expect(wrapper.findComponent(UnitInput).props('size')).toBe('sm')
+  })
 })

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

@@ -13,11 +13,26 @@ describe('EmptyState', () => {
 
     const button = wrapper.find('.mint-button')
     expect(button.exists()).toBe(true)
-    expect(button.classes()).toContain('mint-button--primary')
+    expect(button.classes()).toContain('mint-button--secondary')
     expect(button.text()).toBe('Create experiment')
 
     await button.trigger('click')
 
     expect(wrapper.emitted('action')).toHaveLength(1)
   })
+
+  it('should wrap default-slot content in the spaced content block', () => {
+    const wrapper = mount(EmptyState, {
+      props: { title: 'No instruments yet', description: 'Add the lab systems.' },
+      slots: { default: '<button class="slot-action">New instrument</button>' },
+    })
+
+    expect(wrapper.find('.mint-empty-state__content .slot-action').exists()).toBe(true)
+  })
+
+  it('should not render the content block without default-slot content', () => {
+    const wrapper = mount(EmptyState, { props: { title: 'Empty' } })
+
+    expect(wrapper.find('.mint-empty-state__content').exists()).toBe(false)
+  })
 })

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

@@ -104,7 +104,7 @@ describe('ExperimentSelectorModal', () => {
     experiments.value = [record]
     const wrapper = mountModal({ modelValue: true })
 
-    await wrapper.find('.mint-experiment-selector__row').trigger('click')
+    await wrapper.find('.mint-resource-picker__row').trigger('click')
 
     const store = useExperimentStore()
     expect(store.current).toEqual(record)
@@ -115,7 +115,7 @@ describe('ExperimentSelectorModal', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true })
 
-    await wrapper.find('.mint-experiment-selector__row').trigger('click')
+    await wrapper.find('.mint-resource-picker__row').trigger('click')
 
     expect(wrapper.emitted('select')).toBeUndefined()
   })
@@ -124,11 +124,39 @@ describe('ExperimentSelectorModal', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true })
 
-    await wrapper.find('.mint-experiment-selector__row').trigger('click')
+    await wrapper.find('.mint-resource-picker__row').trigger('click')
 
     expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
   })
 
+  it('should show the experiment code as a pill on the second line', () => {
+    experiments.value = [experiment()]
+    const wrapper = mountModal({ modelValue: true })
+
+    expect(wrapper.get('.mint-resource-picker__code').text()).toBe('EXP-007')
+  })
+
+  it('should state the status as text in the right-hand column', () => {
+    experiments.value = [experiment()]
+    const wrapper = mountModal({ modelValue: true })
+
+    expect(wrapper.get('.mint-resource-picker__aside').text()).toContain('Ongoing')
+  })
+
+  it('should tint the status with the experiment status variant', () => {
+    experiments.value = [experiment()]
+    const wrapper = mountModal({ modelValue: true })
+
+    expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--primary')
+  })
+
+  it('should fill the current experiment row', () => {
+    experiments.value = [experiment()]
+    const wrapper = mountModal({ modelValue: true, currentExperimentId: 7 })
+
+    expect(wrapper.find('.mint-resource-picker__row--selected').exists()).toBe(true)
+  })
+
   it('clears the shared store from the clear-selection footer', async () => {
     const store = useExperimentStore()
     store.select(experiment())

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

@@ -60,4 +60,49 @@ describe('ExperimentTimeline', () => {
 
     expect(wrapper.emitted('step-reorder')).toBeUndefined()
   })
+
+  describe('step progress (3d)', () => {
+    function mountWith(step: Partial<ProtocolStep>) {
+      const steps: ProtocolStep[] = [
+        { id: 'run', name: 'LC-MS', type: 'incubation', status: 'in_progress', order: 0, ...step },
+      ]
+      return mount(ExperimentTimeline, { props: { modelValue: steps } })
+    }
+
+    it('should render a progress bar when the in-progress step has progress', () => {
+      expect(mountWith({ progress: 35 }).find('[role="progressbar"]').exists()).toBe(true)
+    })
+
+    it('should expose the value on the progress bar when the step has progress', () => {
+      expect(mountWith({ progress: 35 }).find('[role="progressbar"]').attributes('aria-valuenow')).toBe('35')
+    })
+
+    it('should size the fill to the percent when the step has progress', () => {
+      expect(mountWith({ progress: 35 }).find('.mint-timeline__progress-fill').attributes('style')).toContain('width: 35%')
+    })
+
+    it('should show the percent as text when the step has progress', () => {
+      expect(mountWith({ progress: 35 }).find('.mint-timeline__progress-value').text()).toBe('35%')
+    })
+
+    it('should round the percent text when progress is fractional', () => {
+      expect(mountWith({ progress: 34.6 }).find('.mint-timeline__progress-value').text()).toBe('35%')
+    })
+
+    it('should clamp the percent when progress exceeds 100', () => {
+      expect(mountWith({ progress: 140 }).find('.mint-timeline__progress-value').text()).toBe('100%')
+    })
+
+    it('should clamp the percent when progress is negative', () => {
+      expect(mountWith({ progress: -5 }).find('.mint-timeline__progress-value').text()).toBe('0%')
+    })
+
+    it('should render no progress bar when the in-progress step has no progress', () => {
+      expect(mountWith({}).find('[role="progressbar"]').exists()).toBe(false)
+    })
+
+    it('should render no progress bar when the step is not in progress', () => {
+      expect(mountWith({ status: 'completed', progress: 100 }).find('[role="progressbar"]').exists()).toBe(false)
+    })
+  })
 })

package/src/__tests__/components/FilePicker.state.test.ts

@@ -31,7 +31,7 @@ function adapter(): PickerAdapter {
 }
 async function setup(data = adapter(), extra: Record<string, unknown> = {}) {
   const wrapper = mount(FilePicker, {
-    props: { open: true, adapter: data, ...extra },
+    props: { open: true, adapter: data, view: 'tree', ...extra },
     global: { stubs: { teleport: true } },
   })
   await flushPromises()
@@ -131,7 +131,7 @@ it('late server responses cannot overwrite browser source metadata', async () =>
     }),
   )
   const wrapper = await setup(data, { sources: ['server', 'localFile'] })
-  await wrapper.get('[aria-label="Local files"]').trigger('click')
+  await wrapper.findAll('[aria-label="Data source"] button').at(-1)!.trigger('click')
   await flushPromises()
   release([folder])
   await flushPromises()