@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

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

@@ -3,11 +3,11 @@ import { describe, expect, it } from 'vitest'
 import BaseTabs from '../../components/BaseTabs.vue'
 
 describe('BaseTabs', () => {
-  it('accepts string shorthand tabs', async () => {
+  it('accepts primitive shorthand options', async () => {
     const wrapper = mount(BaseTabs, {
       props: {
         modelValue: 'Run',
-        tabs: ['Run', 'Results', { id: 'settings', label: 'Settings', disabled: true }],
+        options: ['Run', 'Results', { value: 'settings', label: 'Settings', disabled: true }],
       },
     })
 
@@ -27,9 +27,9 @@ describe('BaseTabs', () => {
     const wrapper = mount(BaseTabs, {
       props: {
         modelValue: 'users',
-        tabs: [
-          { id: 'users', label: 'Users', icon: 'M12 4h8M12 12h8M12 20h8' },
-          { id: 'logs', label: 'Logs', icon: ['M4 4h16v16H4z', 'M8 8h8'] },
+        options: [
+          { value: 'users', label: 'Users', icon: 'M12 4h8M12 12h8M12 20h8' },
+          { value: 'logs', label: 'Logs', icon: ['M4 4h16v16H4z', 'M8 8h8'] },
         ],
       },
     })
@@ -39,17 +39,17 @@ describe('BaseTabs', () => {
   })
 
   describe('keyboard navigation (WAI-ARIA tabs pattern)', () => {
-    const tabs = ['Run', 'Results', { id: 'settings', label: 'Settings', disabled: true }, 'Logs']
+    const tabs = ['Run', 'Results', { value: 'settings', label: 'Settings', disabled: true }, 'Logs']
 
     it('puts tabindex="0" only on the active tab', () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
       const buttons = wrapper.findAll('.mint-tab')
 
       expect(buttons.map(b => b.attributes('tabindex'))).toEqual(['-1', '0', '-1', '-1'])
     })
 
     it('moves to and activates the next enabled tab on ArrowRight, skipping disabled tabs', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[1].trigger('keydown', { key: 'ArrowRight' })
 
@@ -57,7 +57,7 @@ describe('BaseTabs', () => {
     })
 
     it('moves to the previous enabled tab on ArrowLeft, wrapping past the start', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Run', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Run', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[0].trigger('keydown', { key: 'ArrowLeft' })
 
@@ -65,7 +65,7 @@ describe('BaseTabs', () => {
     })
 
     it('wraps past the end on ArrowRight', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Logs', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Logs', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[3].trigger('keydown', { key: 'ArrowRight' })
 
@@ -73,7 +73,7 @@ describe('BaseTabs', () => {
     })
 
     it('jumps to the first tab on Home and the last on End', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[1].trigger('keydown', { key: 'End' })
       expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Logs'])
@@ -84,7 +84,7 @@ describe('BaseTabs', () => {
 
     it('moves DOM focus onto the newly-activated tab', async () => {
       const wrapper = mount(BaseTabs, {
-        props: { modelValue: 'Run', tabs },
+        props: { modelValue: 'Run', options: tabs },
         attachTo: document.body,
       })
 
@@ -97,7 +97,7 @@ describe('BaseTabs', () => {
     })
 
     it('keeps aria-selected and aria-controls consistent with the active tab', () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
       const active = wrapper.findAll('.mint-tab')[1]
 
       expect(active.attributes('aria-selected')).toBe('true')

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

@@ -382,7 +382,7 @@ describe('CollapsibleCard', () => {
       expect(wrapper.get('[role="switch"]').attributes('aria-checked')).toBe('true')
     })
 
-    it('should render the shared BaseToggle when showToggle is true (10a)', () => {
+    it('should render the shared switch when showToggle is true (10a)', () => {
       const wrapper = mount(CollapsibleCard, {
         props: { title: 'Test Card', showToggle: true },
       })

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

@@ -6,9 +6,9 @@ import ComponentBindingRenderer from '../../components/ComponentBindingRenderer.
 const WellPlateStub = defineComponent({
   name: 'WellPlate',
   props: {
+    spec: { type: Object, default: undefined },
     modelValue: { type: Array, default: () => [] },
     readonly: { type: Boolean, default: false },
-    size: { type: String, default: undefined },
   },
   template: '<div data-test="well-plate" />',
 })
@@ -25,10 +25,8 @@ const DoseCalculatorStub = defineComponent({
 const DataFrameStub = defineComponent({
   name: 'DataFrame',
   props: {
+    spec: { type: Object, default: undefined },
     data: { type: Array, default: () => [] },
-    columns: { type: Array, default: () => [] },
-    size: { type: String, default: undefined },
-    maxHeight: { type: String, default: undefined },
   },
   template: '<div data-test="data-frame" />',
 })
@@ -36,24 +34,14 @@ const DataFrameStub = defineComponent({
 const PlateEditorStub = defineComponent({
   name: 'PlateEditor',
   props: {
+    spec: { type: Object, default: undefined },
     modelValue: { type: Array, default: () => [] },
     readonly: { type: Boolean, default: false },
-    size: { type: String, default: undefined },
   },
   emits: ['assign'],
   template: '<div data-test="plate-editor" />',
 })
 
-const ExperimentTimelineStub = defineComponent({
-  name: 'ExperimentTimeline',
-  props: {
-    modelValue: { type: Array, default: () => [] },
-    editable: { type: Boolean, default: true },
-    size: { type: String, default: undefined },
-  },
-  template: '<div data-test="experiment-timeline" />',
-})
-
 const ScheduleCalendarStub = defineComponent({
   name: 'ScheduleCalendar',
   props: {
@@ -67,24 +55,11 @@ const ScheduleCalendarStub = defineComponent({
   template: '<div data-test="schedule-calendar" />',
 })
 
-const SampleSelectorStub = defineComponent({
-  name: 'SampleSelector',
-  props: {
-    samples: { type: Array, default: () => [] },
-    modelValue: { type: Array, default: () => [] },
-    enableGrouping: { type: Boolean, default: true },
-    enableSmartGroup: { type: Boolean, default: true },
-  },
-  template: '<div data-test="sample-selector" />',
-})
-
 const globalOptions = {
   stubs: {
     DataFrame: DataFrameStub,
     DoseCalculator: DoseCalculatorStub,
-    ExperimentTimeline: ExperimentTimelineStub,
     PlateEditor: PlateEditorStub,
-    SampleSelector: SampleSelectorStub,
     ScheduleCalendar: ScheduleCalendarStub,
     WellPlate: WellPlateStub,
   },
@@ -120,9 +95,9 @@ describe('ComponentBindingRenderer', () => {
     expect(wrapper.find('[data-component-binding-id="dose"]').exists()).toBe(true)
     expect(wrapper.find('[data-component-binding-id="custom"]').exists()).toBe(false)
     expect(wrapper.findComponent(WellPlateStub).props()).toMatchObject({
+      spec: { size: 'fill' },
       modelValue: ['A1'],
       readonly: true,
-      size: 'fill',
     })
     expect(wrapper.findComponent(DoseCalculatorStub).props()).toMatchObject({
       mode: 'serial',
@@ -145,8 +120,8 @@ describe('ComponentBindingRenderer', () => {
     })
 
     expect(wrapper.findComponent(PlateEditorStub).props()).toMatchObject({
+      spec: { size: 'md' },
       readonly: true,
-      size: 'md',
     })
   })
 
@@ -157,7 +132,7 @@ describe('ComponentBindingRenderer', () => {
           {
             id: 'table',
             component: 'DataFrame',
-            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+            props: { data: [{ id: 1 }], spec: { columns: [{ key: 'id', label: 'ID' }] } },
           },
         ],
         include: ['WellPlate'],
@@ -177,7 +152,7 @@ describe('ComponentBindingRenderer', () => {
           {
             id: 'table',
             component: 'DataFrame',
-            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+            props: { data: [{ id: 1 }], spec: { columns: [{ key: 'id', label: 'ID' }] } },
           },
         ],
         dense: true,
@@ -186,32 +161,7 @@ describe('ComponentBindingRenderer', () => {
     })
 
     expect(wrapper.findComponent(DataFrameStub).props()).toMatchObject({
-      size: 'sm',
-      maxHeight: '280px',
-    })
-  })
-
-  it('renders ExperimentTimeline bindings with preview-safe props', () => {
-    const wrapper = mount(ComponentBindingRenderer, {
-      props: {
-        binding: {
-          id: 'instrument-run:ExperimentTimeline',
-          component: 'ExperimentTimeline',
-          propsObject: {
-            modelValue: [{ id: 's001-run', name: 'S001', type: 'measurement', status: 'pending', order: 1 }],
-            editable: true,
-          },
-        },
-        dense: true,
-      },
-      global: globalOptions,
-    })
-
-    expect(wrapper.find('[data-component-binding-id="instrument-run:ExperimentTimeline"]').exists()).toBe(true)
-    expect(wrapper.findComponent(ExperimentTimelineStub).props()).toMatchObject({
-      modelValue: [{ id: 's001-run', name: 'S001', type: 'measurement', status: 'pending', order: 1 }],
-      editable: false,
-      size: 'sm',
+      spec: { size: 'sm', maxHeight: '280px' },
     })
   })
 
@@ -247,28 +197,30 @@ describe('ComponentBindingRenderer', () => {
     })
   })
 
-  it('renders SampleSelector bindings with preview-safe grouping props', () => {
+  it('should render no component for the removed template-only bindings', () => {
     const wrapper = mount(ComponentBindingRenderer, {
       props: {
-        binding: {
-          id: 'assay-matrix:SampleSelector',
-          component: 'SampleSelector',
-          propsObject: {
-            samples: ['S001', 'S002'],
-            modelValue: [],
-          },
-        },
+        bindings: ['ReagentList', 'ExperimentTimeline', 'SampleSelector'].map(component => ({ component })),
       },
       global: globalOptions,
     })
 
-    expect(wrapper.find('[data-component-binding-id="assay-matrix:SampleSelector"]').exists()).toBe(true)
-    expect(wrapper.findComponent(SampleSelectorStub).props()).toMatchObject({
-      samples: ['S001', 'S002'],
-      modelValue: [],
-      enableGrouping: false,
-      enableSmartGroup: false,
+    expect(wrapper.find('.mint-component-binding-renderer__empty').exists()).toBe(true)
+  })
+
+  it('should label the header with the binding id and set no template attributes when headers show', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: { id: 'layout', component: 'WellPlate' },
+        showHeaders: true,
+      },
+      global: globalOptions,
     })
+
+    expect({
+      label: wrapper.find('.mint-component-binding-renderer__source').text(),
+      templateAttributes: wrapper.find('[data-template-component], [data-template-id]').exists(),
+    }).toEqual({ label: 'layout', templateAttributes: false })
   })
 
   it('should apply PlateEditor intents to its own copy of the plates when not readonly', async () => {

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

@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import ConcentrationInput from '../../components/ConcentrationInput.vue'
-import UnitInput from '../../components/UnitInput.vue'
+import NumberInput from '../../components/NumberInput.vue'
 
 describe('ConcentrationInput', () => {
-  it('delegates value and unit selection to UnitInput', async () => {
+  it('delegates value and unit selection to NumberInput', async () => {
     const wrapper = mount(ConcentrationInput, {
       props: {
         modelValue: { value: 5, unit: 'µM' },
@@ -15,7 +15,7 @@ describe('ConcentrationInput', () => {
       },
     })
 
-    const unitInput = wrapper.findComponent(UnitInput)
+    const unitInput = wrapper.findComponent(NumberInput)
     expect(unitInput.exists()).toBe(true)
     expect(unitInput.props('modelValue')).toBe(5)
     expect(unitInput.props('unit')).toBe('µM')

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

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseButton from '../../components/BaseButton.vue'
+import ConfirmDialog from '../../components/ConfirmDialog.vue'
+import type { ButtonVariant, Tone } from '../../types'
+
+describe('ConfirmDialog', () => {
+  it.each<[Tone, ButtonVariant]>([
+    ['error', 'danger'],
+    ['warning', 'cta'],
+    ['cta', 'cta'],
+    ['success', 'success'],
+    ['info', 'primary'],
+    ['neutral', 'primary'],
+  ])('should color the confirm button %s → %s', (tone, variant) => {
+    const wrapper = mount(ConfirmDialog, {
+      props: { open: true, tone },
+      global: { stubs: { teleport: true } },
+    })
+    const buttons = wrapper.findAllComponents(BaseButton)
+    expect(buttons.at(-1)!.props('variant')).toBe(variant)
+  })
+})