@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

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

@@ -0,0 +1,91 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import FormActionsInternal from '../../components/internal/FormActionsInternal.vue'
+import FormSchemaInternal from '../../components/internal/FormSchemaInternal.vue'
+import Tooltip from '../../components/Tooltip.vue'
+import { generatedJobFormSchema } from '../../generated/schema'
+import type { GeneratedJsonSchema } from '../../types/generated-ui'
+import type { FormSchema } from '../../types/form-builder'
+
+describe('FormSchemaInternal', () => {
+  it.each([
+    { name: 'nullable tags', items: { type: 'string' }, value: null, component: 'TagsInput', displayed: [], updated: ['1'] },
+    { name: 'nullable enum array', items: { type: 'string', enum: ['a', 'b'] }, value: null, component: 'BaseSelect', displayed: [], updated: ['1'] },
+    { name: 'numeric tags', items: { type: 'number' }, value: [1, 2], component: 'TagsInput', displayed: ['1', '2'], updated: [1] },
+  ])('renders $name without changing its submitted default', async ({ items, value, component, displayed, updated }) => {
+    const field: GeneratedJsonSchema = {
+      anyOf: [{ type: 'array', items }, { type: 'null' }], default: value,
+    }
+    const schema = generatedJobFormSchema({
+      id: 'arrays', title: 'Arrays', description: '', cpu: 1,
+      input_schema: { properties: { values: field } }, output_schema: {},
+    })
+    const wrapper = mount(FormSchemaInternal, { props: { schema } })
+    const control = wrapper.findComponent({ name: component })
+    expect(control.props('modelValue')).toEqual(displayed)
+    wrapper.findComponent(FormActionsInternal).vm.$emit('submit')
+    await flushPromises()
+    expect(wrapper.emitted('submit')?.at(-1)?.[0]).toEqual({ values: value })
+
+    control.vm.$emit('update:modelValue', ['1'])
+    await nextTick()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toEqual({ values: updated })
+  })
+
+  it('renders boolean fields as compact choice rows', async () => {
+    const schema: FormSchema = {
+      sections: [
+        {
+          id: 'display',
+          title: 'Display',
+          fields: [
+            {
+              name: 'showOutliers',
+              label: 'Show outliers',
+              type: 'toggle',
+              defaultValue: true,
+              hint: 'Keep flagged peaks visible',
+              icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'],
+            },
+            {
+              name: 'includeMetadata',
+              label: 'Include metadata',
+              type: 'checkbox',
+              defaultValue: false,
+              hint: 'Add method context',
+              icon: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3z'],
+            },
+          ],
+        },
+      ],
+    }
+
+    const wrapper = mount(FormSchemaInternal, {
+      props: { schema },
+    })
+
+    const toggle = wrapper.get('.mint-toggle--row')
+    const checkbox = wrapper.get('.mint-checkbox--row')
+
+    expect(toggle.text()).toContain('Show outliers')
+    expect(toggle.text()).not.toContain('Keep flagged peaks visible')
+    expect(toggle.find('.mint-toggle__row-svg').exists()).toBe(true)
+    expect(wrapper.findAll('.mint-form-field__label')).toHaveLength(0)
+
+    expect(checkbox.text()).toContain('Include metadata')
+    expect(checkbox.text()).not.toContain('Add method context')
+    expect(checkbox.find('.mint-checkbox__row-svg').exists()).toBe(true)
+    expect(wrapper.findAllComponents(Tooltip).map(tooltip => tooltip.props('text'))).toEqual([
+      'Keep flagged peaks visible',
+      'Add method context',
+    ])
+
+    await toggle.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      showOutliers: false,
+      includeMetadata: false,
+    })
+  })
+})

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

@@ -1,23 +1,28 @@
 import { flushPromises, mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import FileUploader from '../../components/FileUploader.vue'
 import GeneratedPathInput from '../../components/GeneratedPathInput.vue'
 import { GENERATED_JOBS_API_KEY } from '../../components/internal/generatedJobsApi'
-import type { GeneratedAnalysisTransport } from '../../composables/useGeneratedAnalysis'
+import type { GeneratedAnalysisTransport } from '../../composables/useJobsEndpoint'
 import type { PluginJobPathInput } from '../../types/generated-ui'
+import { useExperimentStore } from '../../stores/experiment'
 
 describe('GeneratedPathInput', () => {
+  let pinia: Pinia
+
   beforeEach(() => {
     Object.assign(window, {
       __MINT_PLATFORM__: {
         isIntegrated: true,
         platformApiUrl: '/api',
         theme: 'system',
-        currentExperimentId: 42,
       },
     })
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useExperimentStore().$patch({ currentId: 42 })
   })
 
   afterEach(() => {
@@ -27,7 +32,7 @@ describe('GeneratedPathInput', () => {
 
   it('should preserve selected directory paths for SDK staging', async () => {
     const wrapper = mount(GeneratedPathInput, {
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
     const files = [new File(['a'], 'a.txt'), new File(['b'], 'b.txt')]
 
@@ -50,7 +55,7 @@ describe('GeneratedPathInput', () => {
     const file = new File(['a'], 'a.txt')
     const wrapper = mount(GeneratedPathInput, {
       props: { modelValue: { kind: 'path', files: [file], relativePaths: ['a.txt'] } },
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
     expect(wrapper.find('button[aria-label="Remove a.txt"]').exists()).toBe(true)
     await wrapper.setProps({
@@ -67,7 +72,7 @@ describe('GeneratedPathInput', () => {
   it('should emit one path selection per file when multiple paths are requested', async () => {
     const wrapper = mount(GeneratedPathInput, {
       props: { multiple: true },
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
     const files = [new File(['a'], 'a.txt'), new File(['b'], 'b.txt')]
 
@@ -86,7 +91,7 @@ describe('GeneratedPathInput', () => {
 
   it('should remove a file from the submitted value when the uploader removes it', async () => {
     const wrapper = mount(GeneratedPathInput, {
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
     const uploader = wrapper.findComponent(FileUploader)
     const file = new File(['a'], 'a.txt')
@@ -138,7 +143,7 @@ describe('GeneratedPathInput', () => {
     return mount(GeneratedPathInput, {
       props,
       global: {
-        plugins: [createPinia()],
+        plugins: [pinia],
         stubs: { Teleport: true },
         provide: { [GENERATED_JOBS_API_KEY as symbol]: { baseUrl: '/api/demo', transport } },
       },
@@ -216,7 +221,7 @@ describe('GeneratedPathInput', () => {
     const transport = listing()
     const wrapper = mount(GeneratedPathInput, {
       global: {
-        plugins: [createPinia()],
+        plugins: [pinia],
         stubs: { Teleport: true },
         provide: { [GENERATED_JOBS_API_KEY as symbol]: { baseUrl: '/api/demo/', transport } },
       },
@@ -229,7 +234,7 @@ describe('GeneratedPathInput', () => {
 
   it('should hide the artifact choice outside a generated jobs workspace', () => {
     const wrapper = mount(GeneratedPathInput, {
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
 
     expect(wrapper.text()).not.toContain('Existing artifact')
@@ -238,7 +243,7 @@ describe('GeneratedPathInput', () => {
   it('should show the selected artifact by name when the model holds one', () => {
     const wrapper = mount(GeneratedPathInput, {
       props: { modelValue: artifactSelection },
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
 
     expect(wrapper.get('.mint-generated-path-input__artifact').text()).toContain('matrix.csv')
@@ -247,7 +252,7 @@ describe('GeneratedPathInput', () => {
   it('should clear the model when the selected artifact is removed', async () => {
     const wrapper = mount(GeneratedPathInput, {
       props: { modelValue: artifactSelection },
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
 
     await wrapper.get('button[aria-label="Remove matrix.csv"]').trigger('click')
@@ -269,7 +274,7 @@ describe('GeneratedPathInput', () => {
   it('should keep the selected artifact locked while the input is disabled', () => {
     const wrapper = mount(GeneratedPathInput, {
       props: { modelValue: artifactSelection, disabled: true },
-      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      global: { plugins: [pinia], stubs: { Teleport: true } },
     })
 
     expect(wrapper.get('button[aria-label="Remove matrix.csv"]').attributes('disabled')).toBeDefined()

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

@@ -7,20 +7,23 @@ import GeneratedPluginView from '../../components/GeneratedPluginView.vue'
 import GeneratedResultRenderer from '../../components/GeneratedResultRenderer.vue'
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
 import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+import { pluginIdentity, providePluginIdentity } from '../../composables/pluginIdentity'
 
 const generated = vi.hoisted(() => ({
-  initialize: vi.fn(),
+  refresh: vi.fn(),
   submit: vi.fn(),
-  loadResult: vi.fn(),
+  result: vi.fn(),
   resultForJob: vi.fn(),
   options: undefined as unknown,
   jobs: [] as Array<Record<string, unknown>>,
+  error: null as string | null,
+  ui: {} as Record<string, string>,
 }))
 
-vi.mock('../../composables/useGeneratedAnalysis', async () => {
+vi.mock('../../composables/useJobsEndpoint', async () => {
   const { computed, ref, shallowRef } = await import('vue')
   return {
-    useGeneratedAnalysis: (options: unknown) => {
+    useJobsEndpoint: (options: unknown) => {
       generated.options = options
       const jobs = shallowRef(generated.jobs)
       return ({
@@ -29,7 +32,7 @@ vi.mock('../../composables/useGeneratedAnalysis', async () => {
         plugin: {
           name: 'Demo', version: '1.0.0', description: 'Demo plugin', routes_prefix: '/demo',
         },
-        ui: { title: 'Demo analysis', description: 'Backend-only workspace' },
+        ui: generated.ui,
         jobs: [
           {
             id: 'run',
@@ -59,28 +62,25 @@ vi.mock('../../composables/useGeneratedAnalysis', async () => {
       latestResult: computed(() => ({ kind: 'text', text: 'complete' })),
       isLoading: ref(false),
       isSubmitting: ref(false),
-      error: shallowRef(null),
-      initialize: generated.initialize,
+      error: shallowRef(generated.error),
+      refresh: generated.refresh,
       submit: generated.submit,
-      loadResult: generated.loadResult,
+      result: generated.result,
       resultForJob: generated.resultForJob,
-      refreshJobs: vi.fn(),
       })
     },
   }
 })
 
-vi.mock('../../composables/usePlatformContext', () => ({
-  usePlatformContext: vi.fn(() => ({
-    isIntegrated: computed(() => false),
-    context: ref({ isIntegrated: false, theme: 'system' }),
+vi.mock('../../composables/usePlatform', () => ({
+  usePlatform: vi.fn(() => ({
+    integrated: computed(() => false),
+    isAdmin: computed(() => true),
+    can: () => true,
     plugin: computed(() => undefined),
     user: computed(() => undefined),
     theme: computed(() => 'system'),
     features: computed(() => undefined),
-    navigate: vi.fn(),
-    notify: vi.fn(),
-    sendToPlatform: vi.fn(),
   })),
 }))
 
@@ -121,9 +121,12 @@ describe('GeneratedPluginView', () => {
       { ...baseJob, id: 'job-1', job_id: 'job-1' },
       { ...baseJob, id: 'job-2', job_id: 'job-2', session_id: 'shared-session' },
     ]
-    generated.initialize.mockResolvedValue(undefined)
+    generated.error = null
+    generated.ui = { title: 'Demo analysis', description: 'Backend-only workspace' }
+    providePluginIdentity({ plugin: { name: '' } })
+    generated.refresh.mockResolvedValue(undefined)
     generated.submit.mockResolvedValue(undefined)
-    generated.loadResult.mockResolvedValue({ kind: 'text', text: 'complete' })
+    generated.result.mockResolvedValue({ kind: 'text', text: 'complete' })
     generated.resultForJob.mockReturnValue({ kind: 'text', text: 'complete' })
   })
 
@@ -147,10 +150,11 @@ describe('GeneratedPluginView', () => {
       jobSource: wrapper.findComponent(JobsStatusTray).props('source'),
     }).toMatchObject({
       workspace: {
-        title: 'Demo analysis',
-        subtitle: 'Backend-only workspace',
-        sidebarPosition: 'left',
-        showFormActions: true,
+        spec: {
+          title: 'Demo analysis',
+          subtitle: 'Backend-only workspace',
+          sidebar: { title: 'Parameters', forms: { run: { actions: true } } },
+        },
         values: { threshold: 2.5 },
       },
       result: 'complete',
@@ -159,6 +163,37 @@ describe('GeneratedPluginView', () => {
     })
   })
 
+  it('should seed the top bar identity from the manifest ui subtitle and icon', async () => {
+    generated.ui = {
+      title: 'Demo analysis', subtitle: 'Peak triage', description: 'Backend-only workspace', icon: 'M4 4h16v16H4z',
+    }
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: {
+        plugins: [createPinia()],
+        stubs: { 'router-link': { template: '<a><slot /></a>' }, Teleport: true },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.findComponent(PluginWorkspaceView).props('spec')).toMatchObject({ subtitle: 'Peak triage' })
+    expect(pluginIdentity).toMatchObject({ name: 'Demo analysis', subtitle: 'Peak triage', icon: 'M4 4h16v16H4z' })
+  })
+
+  it('should show the load error text when the workspace fails to load', async () => {
+    generated.error = 'Manifest request failed'
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: {
+        plugins: [createPinia()],
+        stubs: { 'router-link': { template: '<a><slot /></a>' }, Teleport: true },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.find('.mint-alert__message').text()).toBe('Manifest request failed')
+  })
+
   it('submits normalized form values through the current job definition', async () => {
     const wrapper = mount(GeneratedPluginView, {
       props: { baseUrl: '/api/demo' },
@@ -179,7 +214,7 @@ describe('GeneratedPluginView', () => {
     })
     await flushPromises()
 
-    wrapper.findComponent(PluginWorkspaceView).vm.$emit('update:activeView', 'sync')
+    wrapper.findComponent(PluginWorkspaceView).vm.$emit('update:view', 'sync')
     await flushPromises()
 
     expect(wrapper.find('[aria-label="Job resource requirements"]').text()).toBe('Host service')
@@ -213,7 +248,7 @@ describe('GeneratedPluginView', () => {
     })
     await flushPromises()
 
-    expect(generated.loadResult).toHaveBeenCalledWith(expect.objectContaining({ job_id: 'job-1' }))
+    expect(generated.result).toHaveBeenCalledWith(expect.objectContaining({ job_id: 'job-1' }))
   })
 
   it('should display the exact historical job selected from the jobs tray', async () => {
@@ -229,7 +264,7 @@ describe('GeneratedPluginView', () => {
 
     expect({
       result: wrapper.findComponent(GeneratedResultRenderer).text(),
-      loadedJob: generated.loadResult.mock.calls.at(-1)?.[0]?.job_id,
+      loadedJob: generated.result.mock.calls.at(-1)?.[0]?.job_id,
     }).toEqual({ result: 'job-2', loadedJob: 'job-2' })
   })
 })

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

@@ -24,10 +24,12 @@ describe('GeneratedResultRenderer', () => {
 
     expect(wrapper.findComponent(DataFrame).props()).toMatchObject({
       data: [{ sample: 'A', value: 1.5 }],
-      columns: [
-        { key: 'sample', label: 'Sample', sortable: true },
-        { key: 'value', label: 'Value', sortable: true },
-      ],
+      spec: {
+        columns: [
+          { key: 'sample', label: 'Sample', sortable: true },
+          { key: 'value', label: 'Value', sortable: true },
+        ],
+      },
     })
   })
 

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

@@ -18,9 +18,9 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.classes()).toContain('mint-instrument-state--pulse')
   })
 
-  it('should use the info tone when the instrument is running', () => {
+  it('should use the success tone when the instrument is running', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'running' } })
-    expect(wrapper.classes()).toContain('mint-instrument-state--info')
+    expect(wrapper.classes()).toContain('mint-instrument-state--success')
   })
 
   it('should use the success tone when the instrument is connected', () => {
@@ -28,7 +28,7 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.classes()).toContain('mint-instrument-state--success')
   })
 
-  it('should use the dash shape when the instrument never reported', () => {
+  it('should use the hollow square shape when the instrument never reported', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'never' } })
     expect(wrapper.classes()).toContain('mint-instrument-state--never')
   })
@@ -38,7 +38,7 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.text()).toBe('Never reported')
   })
 
-  it('should use the square shape when the instrument is inactive', () => {
+  it('should use the dash shape when the instrument is inactive', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'inactive' } })
     expect(wrapper.classes()).toContain('mint-instrument-state--inactive')
   })

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

@@ -0,0 +1,79 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import BaseTabs from '../../components/BaseTabs.vue'
+import GeneratedResultRenderer from '../../components/GeneratedResultRenderer.vue'
+import InstrumentStatusPanels from '../../components/InstrumentStatusPanels.vue'
+import PlotlyChart from '../../components/PlotlyChart.vue'
+import SegmentedControl from '../../components/SegmentedControl.vue'
+import type { StatusPanel } from '../../types'
+
+vi.mock('plotly.js-dist-min', () => ({ default: { Plots: { resize: vi.fn() }, purge: vi.fn(), react: vi.fn() } }))
+enableAutoUnmount(afterEach)
+
+const KV: StatusPanel = { kind: 'kv', title: 'Pumps', items: [['Pressure', '412 bar'], ['Degasser', null]] }
+const BAR: Extract<StatusPanel, { kind: 'bar' }> = {
+  kind: 'bar',
+  title: 'Pressure per sample',
+  categories: ['S1', 'S2'],
+  series: [
+    { name: 'Max pressure', unit: 'bar', values: [402, 431] },
+    { name: 'Min pressure', unit: 'bar', values: [180, null] },
+  ],
+}
+
+const mountPanels = (panels: StatusPanel[]) => mount(InstrumentStatusPanels, { props: { panels } })
+
+describe('InstrumentStatusPanels', () => {
+  it('should list key/value items with a dash for a null value when the panel is kv', () => {
+    const wrapper = mountPanels([KV])
+    expect(wrapper.findAll('.mint-status-panels__kv-row').map(row => row.text())).toEqual(['Pressure412 bar', 'Degasser—'])
+  })
+
+  it.each([
+    [{ kind: 'table', title: 'Oven', columns: ['zone'], rows: [{ zone: 'Left' }] }, { kind: 'table', columns: ['zone'], rows: [{ zone: 'Left' }] }],
+    [{ kind: 'text', title: 'Notes', text: 'ok' }, { kind: 'text', text: 'ok' }],
+    [{ kind: 'json', title: 'Raw', value: { a: 1 } }, { kind: 'json', value: { a: 1 } }],
+  ] as [StatusPanel, unknown][])('should pass a %o panel to the result renderer without its title', (panel, result) => {
+    expect(mountPanels([panel]).getComponent(GeneratedResultRenderer).props('result')).toEqual(result)
+  })
+
+  it('should chart the first series of a bar panel when none is selected', () => {
+    const chart = mountPanels([BAR]).getComponent(PlotlyChart)
+    expect(chart.props('data')).toEqual([{ type: 'bar', x: ['S1', 'S2'], y: [402, 431], name: 'Max pressure' }])
+  })
+
+  it('should chart the series the user selects', async () => {
+    const wrapper = mountPanels([BAR])
+    await wrapper.getComponent(SegmentedControl).vm.$emit('update:modelValue', 'Min pressure')
+    expect(wrapper.getComponent(PlotlyChart).props('data')).toMatchObject([{ y: [180, null], name: 'Min pressure' }])
+  })
+
+  it('should not offer a series switch when the bar panel has one series', () => {
+    const wrapper = mountPanels([{ ...BAR, series: BAR.series.slice(0, 1) }])
+    expect(wrapper.findComponent(SegmentedControl).exists()).toBe(false)
+  })
+
+  it('should keep the selected tab by title when a live update reorders the panels', async () => {
+    const text: StatusPanel = { kind: 'text', title: 'Notes', text: 'ok' }
+    const wrapper = mountPanels([KV, BAR, text])
+    await wrapper.getComponent(BaseTabs).vm.$emit('update:modelValue', 1)
+    await wrapper.setProps({ panels: [text, KV, BAR] })
+    expect(wrapper.getComponent(BaseTabs).props('modelValue')).toBe(2)
+  })
+
+  it('should show the selected panel when two panels share a title', async () => {
+    const first: StatusPanel = { kind: 'text', title: 'Notes', text: 'first' }
+    const second: StatusPanel = { kind: 'text', title: 'Notes', text: 'second' }
+    const wrapper = mountPanels([first, second])
+    await wrapper.getComponent(BaseTabs).vm.$emit('update:modelValue', 1)
+    expect(wrapper.getComponent(GeneratedResultRenderer).props('result')).toEqual({ kind: 'text', text: 'second' })
+  })
+
+  it('should fall back to the first tab when the selected panel is gone', async () => {
+    const wrapper = mountPanels([KV, BAR])
+    await wrapper.getComponent(BaseTabs).vm.$emit('update:modelValue', 1)
+    await wrapper.setProps({ panels: [KV] })
+    expect(wrapper.find('.mint-status-panels__kv').exists()).toBe(true)
+  })
+})

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

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
-import type { PluginJobCenterSource } from '../../composables/useJobsStatusTray'
+import type { PluginJobCenterSource } from '../../composables/useJobCenter'
 import type { JobState, JobStateInput, JobStatus } from '../../types/jobs'
 
 function job(status: JobStatus, id: string = status): JobStateInput {
@@ -76,8 +76,8 @@ describe('JobsStatusTray', () => {
           { ...job('awaiting_input', 'input'), can_cancel: true },
           { ...job('completed', 'done'), can_delete: true },
         ],
-        cancelJob: vi.fn(async () => undefined),
-        deleteJob: vi.fn(async () => true),
+        cancel: vi.fn(async () => undefined),
+        delete: vi.fn(async () => true),
       },
     })
 
@@ -106,7 +106,7 @@ describe('JobsStatusTray', () => {
     const wrapper = await openTray({
       source: {
         jobs: [{ ...job('awaiting_input'), can_delete: true }],
-        deleteJob: vi.fn(async () => true),
+        delete: vi.fn(async () => true),
       },
     })
 

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

@@ -7,6 +7,34 @@ function lastEmitted(wrapper: ReturnType<typeof mount>) {
 }
 
 describe('NumberInput', () => {
+  it('should emit null when the field is cleared', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5 } })
+    await wrapper.get('input').setValue('')
+    expect(lastEmitted(wrapper)).toBeNull()
+  })
+
+  it.each([
+    ['steppers', {}],
+    ['unit segment', { unit: 'µL', units: [{ value: 'µL', label: 'µL' }] }],
+  ])('should keep a typed value below min until the change event clamps it with the %s', async (_, extra) => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 60, min: 60, ...extra } })
+    const input = wrapper.get('input')
+    ;(input.element as HTMLInputElement).value = '1'
+    await input.trigger('input')
+    const typed = lastEmitted(wrapper)
+    await input.trigger('change')
+    expect({ typed, committed: lastEmitted(wrapper), shown: (input.element as HTMLInputElement).value })
+      .toEqual({ typed: 1, committed: 60, shown: '60' })
+  })
+
+  it('should put the id on the number input and the class on the field', () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5 }, attrs: { id: 'dose', class: 'extra' } })
+    expect({ inputId: wrapper.get('input').attributes('id'), rootClasses: wrapper.classes() }).toEqual({
+      inputId: 'dose',
+      rootClasses: expect.arrayContaining(['mint-number-input', 'extra']),
+    })
+  })
+
   it('should never render a range input, with or without min/max', () => {
     for (const props of [{}, { min: 0 }, { max: 10 }, { min: 0, max: 10 }]) {
       const wrapper = mount(NumberInput, { props: { modelValue: 5, ...props } })

package/src/__tests__/components/{UnitInput.test.ts → NumberInput.units.test.ts}

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
-import UnitInput from '../../components/UnitInput.vue'
+import NumberInput from '../../components/NumberInput.vue'
 import type { UnitOption } from '../../types'
 
 const volume: UnitOption[] = [
@@ -11,7 +11,7 @@ const volume: UnitOption[] = [
 ]
 
 function mountVolume(props: Record<string, unknown> = {}) {
-  return mount(UnitInput, {
+  return mount(NumberInput, {
     props: { modelValue: 250, unit: 'µL', units: volume, ...props },
     attachTo: document.body,
     global: { stubs: { teleport: true } },
@@ -22,9 +22,9 @@ async function openMenu(wrapper: ReturnType<typeof mountVolume>) {
   await wrapper.find('.mint-unit-input__unit').trigger('click')
 }
 
-describe('UnitInput unit segment (4b)', () => {
+describe('NumberInput units: unit segment (4b)', () => {
   it('should teleport the unit menu to the document body when opened', async () => {
-    const wrapper = mount(UnitInput, {
+    const wrapper = mount(NumberInput, {
       props: { modelValue: 250, unit: 'µL', units: volume },
       attachTo: document.body,
     })
@@ -119,7 +119,7 @@ describe('UnitInput unit segment (4b)', () => {
   })
 })
 
-describe('UnitInput conversion hint (4b)', () => {
+describe('NumberInput units: 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')
@@ -141,7 +141,7 @@ describe('UnitInput conversion hint (4b)', () => {
   })
 
   it('should hide the hint when the value is empty', () => {
-    const wrapper = mountVolume({ modelValue: undefined })
+    const wrapper = mountVolume({ modelValue: null })
     expect(wrapper.find('.mint-unit-input__hint').exists()).toBe(false)
   })
 })