@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

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/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)
   })
 })