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

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

@@ -0,0 +1,64 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import PlateEditor from '../../components/PlateEditor.vue'
+import PlateEditorBindingInternal from '../../components/internal/PlateEditorBindingInternal.vue'
+import type { Rack } from '../../types'
+
+function rack(id: string): Rack {
+  return { id, name: id, format: 96, slot: 'R', injectionVolume: 5, wells: {} }
+}
+
+function mountBinding(props: { modelValue: Rack[]; activeRackId?: string }) {
+  return mount(PlateEditorBindingInternal, { props, global: { stubs: { teleport: true } } })
+}
+
+describe('PlateEditorBindingInternal', () => {
+  it('should offer undo once an intent changed the plates', async () => {
+    const wrapper = mountBinding({ modelValue: [rack('r1')] })
+
+    wrapper.findComponent(PlateEditor).vm.$emit('update:slot', 'r1', 'B')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.findComponent(PlateEditor).props('canUndo')).toBe(true)
+  })
+
+  it('should show the history buttons', () => {
+    const wrapper = mountBinding({ modelValue: [rack('r1')] })
+
+    expect(wrapper.findComponent(PlateEditor).props('history')).toBe(true)
+  })
+
+  it('should follow a changed activeRackId', async () => {
+    const wrapper = mountBinding({ modelValue: [rack('r1'), rack('r2')], activeRackId: 'r1' })
+
+    await wrapper.setProps({ activeRackId: 'r2' })
+
+    expect(wrapper.findComponent(PlateEditor).props('activeRackId')).toBe('r2')
+  })
+
+  it('should select a rack that arrives with the reloaded plates', async () => {
+    const wrapper = mountBinding({ modelValue: [rack('r1')], activeRackId: 'r1' })
+
+    await wrapper.setProps({ modelValue: [rack('r1'), rack('r9')], activeRackId: 'r9' })
+
+    expect(wrapper.findComponent(PlateEditor).props('activeRackId')).toBe('r9')
+  })
+
+  it('should select a reloaded rack when activeRackId is passed before the plates', async () => {
+    const wrapper = mountBinding({ activeRackId: 'r1', modelValue: [rack('r1')] })
+
+    await wrapper.setProps({ modelValue: [rack('r1'), rack('r9')], activeRackId: 'r9' })
+
+    expect(wrapper.findComponent(PlateEditor).props('activeRackId')).toBe('r9')
+  })
+
+  it('should not undo into the plates of a previous binding', async () => {
+    const wrapper = mountBinding({ modelValue: [rack('r1')] })
+    wrapper.findComponent(PlateEditor).vm.$emit('update:slot', 'r1', 'B')
+    await wrapper.vm.$nextTick()
+
+    await wrapper.setProps({ modelValue: [rack('r9')] })
+
+    expect(wrapper.findComponent(PlateEditor).props('canUndo')).toBe(false)
+  })
+})

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

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import { reactive } from 'vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -82,6 +84,13 @@ describe('PlotlyChart', () => {
     expect(plotly.react).toHaveBeenCalledTimes(2)
   })
 
+  // Plotly fills the hover name box from plot/paper bgcolor over white; no hoverlabel option reaches it.
+  it('should paint the hover label name box with the card surface token', () => {
+    const source = readFileSync(resolve(process.cwd(), 'src/components/PlotlyChart.vue'), 'utf8')
+    const rule = source.match(/:deep\(\.hovertext rect\)\s*\{([^}]*)\}/)?.[1]
+    expect(rule).toContain('fill: var(--bg-card) !important')
+  })
+
   it('should rerender when the MINT dark theme changes', async () => {
     let themeChanged: MutationCallback | undefined
     vi.stubGlobal('MutationObserver', class {
@@ -252,7 +261,7 @@ describe('PlotlyChart', () => {
     mount(PlotlyChart, { attachTo: document.body, props: { data, layout } })
     await flushPromises()
     expect(plotly.react.mock.lastCall?.[2].font.color).toBe('#f8fafc')
-    expect(plotly.react.mock.lastCall?.[2].xaxis.gridcolor).toBe('#334155')
+    expect(plotly.react.mock.lastCall?.[2].xaxis.linecolor).toBe('#334155')
     expect(data[0].x).toEqual([1])
     expect(layout.title.text).toBe('Original')
     expect(layout.xaxis.title.text).toBe('Sample')
@@ -351,3 +360,140 @@ describe('PlotlyChart', () => {
     expect(plotly.react).toHaveBeenCalledOnce()
   })
 })
+
+describe('PlotlyChart MINT template and header legend (9a)', () => {
+  const traces = [
+    { type: 'scatter' as const, name: 'Control', x: [1], y: [2] },
+    { type: 'scatter' as const, name: 'Treatment A', x: [1], y: [3] },
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    plotly.react.mockReset().mockResolvedValue(undefined)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    document.documentElement.classList.remove('dark')
+    document.documentElement.removeAttribute('style')
+  })
+
+  it('should apply the MINT colorway when the caller sets none', async () => {
+    document.documentElement.style.setProperty('--mint-sample-1', '#3B82F6')
+    mount(PlotlyChart, { props: { data: traces } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[2].colorway[0]).toBe('#3B82F6')
+  })
+
+  it('should keep the caller colorway when the layout sets one', async () => {
+    mount(PlotlyChart, { props: { data: traces, layout: { colorway: ['#000000'] } } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[2].colorway).toEqual(['#000000'])
+  })
+
+  it('should hide the modebar when the config does not set it', async () => {
+    mount(PlotlyChart, { props: { data: traces } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[3].displayModeBar).toBe(false)
+  })
+
+  it('should show the modebar when the config enables it', async () => {
+    mount(PlotlyChart, { props: { data: traces, config: { displayModeBar: true } } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[3].displayModeBar).toBe(true)
+  })
+
+  it('should hide the Plotly Cloud upload button when the modebar is shown', async () => {
+    mount(PlotlyChart, { props: { data: traces, config: { displayModeBar: true } } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[3].showSendToCloud).toBe(false)
+  })
+
+  it('should list each trace in the header legend when there are several traces', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: traces } })
+    await flushPromises()
+    expect(wrapper.findAll('.mint-chart__header .mint-chart__legend-item').map(item => item.text()))
+      .toEqual(['Control', 'Treatment A'])
+  })
+
+  it('should hide the Plotly legend when the header legend is shown', async () => {
+    mount(PlotlyChart, { props: { data: traces } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[2].showlegend).toBe(false)
+  })
+
+  it('should hide a trace when its header legend item is clicked', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: traces } })
+    await flushPromises()
+    await wrapper.findAll('.mint-chart__legend-item')[1].trigger('click')
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[1][1].visible).toBe('legendonly')
+  })
+
+  it('should not render a header legend when there is a single trace', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [traces[0]] } })
+    await flushPromises()
+    expect(wrapper.find('.mint-chart__legend-item').exists()).toBe(false)
+  })
+
+  it('should keep the Plotly legend when headerLegend is false', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: traces, headerLegend: false } })
+    await flushPromises()
+    expect(wrapper.find('.mint-chart__legend-item').exists()).toBe(false)
+  })
+
+  it('should keep the Plotly legend when the layout asks for it', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: traces, layout: { showlegend: true } } })
+    await flushPromises()
+    expect(wrapper.find('.mint-chart__legend-item').exists()).toBe(false)
+  })
+
+  it('should not render a header legend when the layout turns the legend off', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: traces, layout: { showlegend: false } } })
+    await flushPromises()
+    expect(wrapper.find('.mint-chart__legend-item').exists()).toBe(false)
+  })
+
+  it('should not hide a different trace when the data changes after a trace was hidden', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: traces } })
+    await flushPromises()
+    await wrapper.findAll('.mint-chart__legend-item')[1].trigger('click')
+    await wrapper.setProps({ data: [traces[1], { ...traces[0], name: 'Vehicle' }] })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[1][1].visible).toBeUndefined()
+  })
+
+  it('should hide only the clicked trace when two traces share a name', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [{ ...traces[0], name: 'Replicate' }, { ...traces[1], name: 'Replicate' }] } })
+    await flushPromises()
+    await wrapper.findAll('.mint-chart__legend-item')[1].trigger('click')
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[1][0].visible).toBeUndefined()
+  })
+
+  it('should show a legendonly trace when its header legend item is clicked', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [traces[0], { ...traces[1], visible: 'legendonly' as const }] } })
+    await flushPromises()
+    await wrapper.findAll('.mint-chart__legend-item')[1].trigger('click')
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[1][1].visible).toBe(true)
+  })
+
+  it('should re-read the group tokens when the theme class changes', async () => {
+    let themeChanged: MutationCallback | undefined
+    vi.stubGlobal('MutationObserver', class {
+      constructor(callback: MutationCallback) { themeChanged = callback }
+      observe(): void {}
+      disconnect(): void {}
+      takeRecords(): MutationRecord[] { return [] }
+    })
+    document.documentElement.style.setProperty('--mint-sample-1', '#3B82F6')
+    mount(PlotlyChart, { props: { data: traces } })
+    await flushPromises()
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.setProperty('--mint-sample-1', '#60A5FA')
+    themeChanged?.([], {} as MutationObserver)
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[2].colorway[0]).toBe('#60A5FA')
+  })
+})

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

@@ -15,4 +15,22 @@ describe('ProgressBar', () => {
     expect(progress.attributes('aria-valuenow')).toBe('100')
     expect(progress.attributes('aria-label')).toBe('Connection pool usage')
   })
+
+  it('should not declare the removed segmented variant prop (2c)', () => {
+    expect(ProgressBar.props).not.toHaveProperty('variant')
+  })
+
+  it('should not declare the removed step labels prop (2c)', () => {
+    expect(ProgressBar.props).not.toHaveProperty('steps')
+  })
+
+  it('should not declare the removed current step prop (2c)', () => {
+    expect(ProgressBar.props).not.toHaveProperty('currentStep')
+  })
+
+  it('should render the rail track when indeterminate', () => {
+    const wrapper = mount(ProgressBar, { props: { indeterminate: true } })
+
+    expect(wrapper.find('.mint-progress__bar--indeterminate').exists()).toBe(true)
+  })
 })

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

@@ -1,33 +1,121 @@
 import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
+import BaseButton from '../../components/BaseButton.vue'
+import BaseInput from '../../components/BaseInput.vue'
+import BaseTextarea from '../../components/BaseTextarea.vue'
 import ProtocolStepEditor from '../../components/ProtocolStepEditor.vue'
+import SearchableSelect from '../../components/SearchableSelect.vue'
+import type { StepTemplate } from '../../composables/useProtocolTemplates'
 
-describe('ProtocolStepEditor', () => {
-  afterEach(() => {
-    document.body.innerHTML = ''
+const templates: StepTemplate[] = [
+  { id: 'inc', name: 'Incubation', type: 'incubation', description: 'Hold at temperature', parameters: [] },
+  { id: 'wash', name: 'Wash', type: 'wash', parameters: [] },
+]
+
+async function mountEditor(props: Record<string, unknown> = {}) {
+  const wrapper = mount(ProtocolStepEditor, { props: { templates, ...props } })
+  await nextTick()
+  return wrapper
+}
+
+describe('ProtocolStepEditor (6c)', () => {
+  it('should name the template picker by its label and its value', async () => {
+    const wrapper = await mountEditor()
+    const trigger = wrapper.get('.mint-searchable-select__trigger')
+    const names = trigger.attributes('aria-labelledby')!.split(' ').map(id => wrapper.get(`[id="${id}"]`).text())
+
+    expect(names).toEqual(['Template', 'Incubation'])
+  })
+
+  it.each([
+    ['Step name', 'input'],
+    ['Description', 'textarea'],
+  ])('should link the %s label to its %s', async (label, tag) => {
+    const wrapper = await mountEditor()
+    const labelEl = wrapper.findAll('label').find(item => item.text().startsWith(label))!
+
+    expect(wrapper.get(`[id="${labelEl.attributes('for')}"]`).element.tagName.toLowerCase()).toBe(tag)
   })
 
-  it('uses shared dropdown state for the template picker', async () => {
-    const wrapper = mount(ProtocolStepEditor, {
-      attachTo: document.body,
+  it('should pick the template with SearchableSelect', async () => {
+    const wrapper = await mountEditor()
+
+    expect(wrapper.findComponent(SearchableSelect).props('modelValue')).toBe('inc')
+  })
+
+  it('should offer each template with its description in the SearchableSelect', async () => {
+    const wrapper = await mountEditor()
+
+    expect(wrapper.findComponent(SearchableSelect).props('options')[0]).toMatchObject({
+      value: 'inc', label: 'Incubation', description: 'Hold at temperature',
     })
-    await nextTick()
+  })
 
-    await wrapper.get('.mint-protocol-editor__template-btn').trigger('click')
-    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(true)
+  it('should switch the step to the template chosen in the SearchableSelect', async () => {
+    const wrapper = await mountEditor()
 
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    wrapper.findComponent(SearchableSelect).vm.$emit('update:modelValue', 'wash')
     await nextTick()
-    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(false)
 
-    await wrapper.get('.mint-protocol-editor__template-btn').trigger('click')
-    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(true)
+    expect(wrapper.findComponent(BaseInput).props('modelValue')).toBe('Wash')
+  })
 
-    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-    await nextTick()
-    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(false)
+  it('should name the mode in the title', async () => {
+    const wrapper = await mountEditor({ mode: 'edit' })
+
+    expect(wrapper.get('.mint-protocol-editor__title').text()).toBe('Edit step')
+  })
+
+  it('should not render a mode badge', async () => {
+    const wrapper = await mountEditor({ mode: 'edit' })
+
+    expect(wrapper.find('[class*="mode-badge"]').exists()).toBe(false)
+  })
+
+  it('should edit the description with BaseTextarea', async () => {
+    const wrapper = await mountEditor()
+
+    expect(wrapper.findComponent(BaseTextarea).exists()).toBe(true)
+  })
+
+  it('should render the save action as a primary BaseButton', async () => {
+    const wrapper = await mountEditor()
+    const save = wrapper.findAllComponents(BaseButton).find((b) => b.text() === 'Add step')
+
+    expect(save?.props('variant')).toBe('primary')
+  })
+
+  it('should emit save with the step name typed into BaseInput', async () => {
+    const wrapper = await mountEditor()
+
+    await wrapper.findComponent(BaseInput).get('input').setValue('Warm up')
+    await wrapper.findAllComponents(BaseButton).find((b) => b.text() === 'Add step')!.trigger('click')
+
+    expect((wrapper.emitted('save')?.[0]?.[0] as { name: string }).name).toBe('Warm up')
+  })
+
+  it('should size the template picker to the 32px control height', async () => {
+    const wrapper = await mountEditor()
+
+    expect(wrapper.findComponent(SearchableSelect).props('size')).toBe('sm')
+  })
+
+  it('should size the step name field to the 32px control height', async () => {
+    const wrapper = await mountEditor()
+
+    expect(wrapper.findComponent(BaseInput).props('size')).toBe('sm')
+  })
+
+  it('should show the step ordinal beside the title when stepNumber and stepCount are set', async () => {
+    const wrapper = await mountEditor({ stepNumber: 3, stepCount: 7 })
+
+    expect(wrapper.find('.mint-protocol-editor__counter').text()).toBe('3 / 7')
+  })
+
+  it('should hide the step ordinal when stepCount is not set', async () => {
+    const wrapper = await mountEditor({ stepNumber: 3 })
 
-    wrapper.unmount()
+    expect(wrapper.find('.mint-protocol-editor__counter').exists()).toBe(false)
   })
 })

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

@@ -1,44 +1,89 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
+import BaseInput from '../../components/BaseInput.vue'
+import BaseSelect from '../../components/BaseSelect.vue'
+import FormField from '../../components/FormField.vue'
 import ProtocolStepParameterField from '../../components/ProtocolStepParameterField.vue'
 import type { ParameterDefinition } from '../../composables/useProtocolTemplates'
 
+const temperature: ParameterDefinition = {
+  key: 'temperature',
+  label: 'Temperature',
+  type: 'temperature',
+  unit: '°C',
+}
+
+const buffer: ParameterDefinition = {
+  key: 'buffer',
+  label: 'Buffer',
+  type: 'select',
+  options: [{ value: 'PBS', label: 'PBS' }],
+}
+
 describe('ProtocolStepParameterField', () => {
-  it('emits numeric parameter changes with valueAsNumber', async () => {
-    const parameter: ParameterDefinition = {
-      key: 'temperature',
-      label: 'Temperature',
-      type: 'temperature',
-      unit: 'C',
-    }
-
-    const wrapper = mount(ProtocolStepParameterField, {
-      props: {
-        parameter,
-        modelValue: 37,
-      },
-    })
+  it.each([
+    [temperature, 'input'],
+    [buffer, 'select'],
+  ])('should link the $label label to its control', (parameter, tag) => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter } })
+
+    expect(wrapper.get(`[id="${wrapper.get('label').attributes('for')}"]`).element.tagName.toLowerCase()).toBe(tag)
+  })
+
+  it('should emit numeric parameter changes as numbers', async () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })
 
     await wrapper.get('input').setValue('25')
+
     expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([25])
   })
 
-  it('renders field validation errors', () => {
-    const parameter: ParameterDefinition = {
-      key: 'buffer',
-      label: 'Buffer',
-      type: 'select',
-      options: [{ value: 'PBS', label: 'PBS' }],
-    }
+  it('should show the unit in the BaseInput suffix segment (6c)', () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })
+
+    expect(wrapper.get('.mint-input-group__suffix').text()).toBe('°C')
+  })
+
+  it('should render text parameters with BaseInput (6c)', () => {
+    const parameter: ParameterDefinition = { key: 'note', label: 'Note', type: 'text' }
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter } })
+
+    expect(wrapper.findComponent(BaseInput).exists()).toBe(true)
+  })
+
+  it('should render select parameters with BaseSelect (6c)', () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer } })
+
+    expect(wrapper.findComponent(BaseSelect).exists()).toBe(true)
+  })
+
+  it('should mark the BaseSelect as errored when the parameter has an error (6c)', () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, error: 'Buffer is required' } })
+
+    expect(wrapper.findComponent(BaseSelect).props('error')).toBe(true)
+  })
+
+  it('should show the validation error through FormField (6c)', () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, error: 'Buffer is required' } })
+
+    expect(wrapper.findComponent(FormField).props('error')).toBe('Buffer is required')
+  })
+
+  it('should lay the field out as a FormField row (6c)', () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature } })
+
+    expect(wrapper.findComponent(FormField).props('layout')).toBe('row')
+  })
+
+  it('should size a numeric parameter to the 32px control height', () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })
+
+    expect(wrapper.findComponent(BaseInput).props('size')).toBe('sm')
+  })
 
-    const wrapper = mount(ProtocolStepParameterField, {
-      props: {
-        parameter,
-        error: 'Buffer is required',
-      },
-    })
+  it('should size a select parameter to the 32px control height', () => {
+    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, modelValue: 'PBS' } })
 
-    expect(wrapper.text()).toContain('Buffer is required')
-    expect(wrapper.get('select').classes()).toContain('mint-protocol-editor__input--error')
+    expect(wrapper.findComponent(BaseSelect).props('size')).toBe('sm')
   })
 })

package/src/__tests__/components/ReagentList.presentation.test.ts

@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import type { Reagent } from '../../types'
 import {
+  formatReagentExpiresIn,
   formatReagentExpiryDate,
   getReagentColumnValue,
   getReagentRowClasses,
-  getReagentStockFillClass,
   getReagentStockLevel,
   isReagentExpired,
   isReagentExpiringSoon,
@@ -37,12 +37,17 @@ describe('ReagentList presentation helpers', () => {
     expect(isReagentExpired({ ...reagent, expiryDate: '2026-05-01T00:00:00.000Z' }, now)).toBe(true)
   })
 
-  it('classifies low stock and stock fill tone', () => {
+  it('should count whole days left when a reagent expires soon', () => {
+    expect(formatReagentExpiresIn(reagent, new Date('2026-05-29T12:00:00.000Z'))).toBe('3 days left')
+  })
+
+  it('should use the singular when one day is left', () => {
+    expect(formatReagentExpiresIn(reagent, new Date('2026-05-31T12:00:00.000Z'))).toBe('1 day left')
+  })
+
+  it('classifies low stock', () => {
     expect(isReagentLowStock(reagent, 15)).toBe(true)
     expect(getReagentStockLevel({ id: 'missing', name: 'Missing' })).toBe(0)
-    expect(getReagentStockFillClass(70)).toBe('mint-reagent-list__stock-fill--good')
-    expect(getReagentStockFillClass(30)).toBe('mint-reagent-list__stock-fill--warning')
-    expect(getReagentStockFillClass(10)).toBe('mint-reagent-list__stock-fill--low')
   })
 
   it('formats missing and present expiry dates', () => {

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

@@ -141,4 +141,27 @@ describe('ReagentList', () => {
     expect(liveRegion.attributes('aria-live')).toBe('polite')
     expect(liveRegion.text()).toBe('Glucose moved to position 2 of 2.')
   })
+
+  it('should mark low stock with a dot and text when stock is under the threshold', () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: [{ id: 'r', name: 'Acetonitrile', stockLevel: 8 }], readonly: true },
+    })
+
+    expect(wrapper.find('.mint-reagent-list__stock-text').text()).toMatch(/^Low ·\s*8%$/)
+  })
+
+  it('should state days left when a reagent expires soon', () => {
+    const soon = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000 - 60_000).toISOString()
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: [{ id: 'r', name: 'Formic acid', expiryDate: soon }], readonly: true },
+    })
+
+    expect(wrapper.find('.mint-reagent-list__badge--warning').text()).toBe('3 days left')
+  })
+
+  it('should render the add action as a BaseButton when editable', () => {
+    const wrapper = mount(ReagentList, { props: { modelValue: reagents } })
+
+    expect(wrapper.find('.mint-reagent-list__add-btn').classes()).toContain('mint-button')
+  })
 })