@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BioTemplateRenderer from '../../components/BioTemplateRenderer.vue'
+import {
+  createLcmsBatchCollection,
+  createWellPlateScreenCollection,
+} from '../../templates'
+
+describe('BioTemplateRenderer', () => {
+  it('renders SDK components for a biology template collection', () => {
+    const collection = createWellPlateScreenCollection({
+      samples: ['Control', 'Treatment'],
+      compounds: { 'Drug A': [10, 1] },
+    })
+    const wrapper = mount(BioTemplateRenderer, {
+      props: { target: collection },
+      global: {
+        stubs: {
+          DataFrame: true,
+          DoseCalculator: true,
+          PlateMapEditor: true,
+          SampleSelector: true,
+          WellPlate: true,
+        },
+      },
+    })
+
+    expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="PlateMapEditor"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="DoseCalculator"]').exists()).toBe(true)
+    expect(wrapper.findAll('[data-template-component="WellPlate"]')).toHaveLength(2)
+    expect(wrapper.text()).toContain('plate-map')
+    expect(wrapper.text()).toContain('dose-response')
+  })
+
+  it('filters rendered components with include and exclude lists', () => {
+    const collection = createWellPlateScreenCollection()
+    const wrapper = mount(BioTemplateRenderer, {
+      props: {
+        target: collection,
+        include: ['WellPlate', 'DataFrame'],
+        exclude: ['DataFrame'],
+      },
+      global: {
+        stubs: {
+          WellPlate: true,
+        },
+      },
+    })
+
+    const components = wrapper
+      .findAll('[data-template-component]')
+      .map(item => item.attributes('data-template-component'))
+
+    expect(components).toEqual(['WellPlate', 'WellPlate'])
+  })
+
+  it('renders an empty state when no component binding survives filtering', () => {
+    const collection = createLcmsBatchCollection()
+    const wrapper = mount(BioTemplateRenderer, {
+      props: {
+        target: collection,
+        include: ['WellPlate'],
+        emptyText: 'No preview for this preset.',
+      },
+    })
+
+    expect(wrapper.findAll('[data-template-component]')).toHaveLength(0)
+    expect(wrapper.text()).toContain('No preview for this preset.')
+  })
+})

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

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import Breadcrumb from '../../components/Breadcrumb.vue'
+
+describe('Breadcrumb', () => {
+  it('accepts string shorthand items', async () => {
+    const wrapper = mount(Breadcrumb, {
+      props: {
+        items: ['Project', { label: 'Experiment', href: '/experiments/EXP-001' }, 'Analysis'],
+      },
+    })
+
+    expect(wrapper.findAll('.mint-breadcrumb__item').map(item => item.text())).toEqual([
+      'Project',
+      'Experiment',
+      'Analysis',
+    ])
+
+    await wrapper.find('button.mint-breadcrumb__link').trigger('click')
+
+    expect(wrapper.emitted('navigate')).toEqual([[{ label: 'Project' }]])
+  })
+})

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

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
+import type { CalendarGridDay } from '../../composables/useCalendarGrid'
+
+const days: CalendarGridDay[] = [
+  { date: new Date(2026, 3, 20), isCurrentMonth: true, isDisabled: false },
+  { date: new Date(2026, 3, 21), isCurrentMonth: true, isDisabled: false },
+  { date: new Date(2026, 3, 22), isCurrentMonth: true, isDisabled: true },
+]
+
+describe('CalendarGridPanelInternal', () => {
+  it('renders calendar state and emits navigation and selection events', async () => {
+    const wrapper = mount(CalendarGridPanelInternal, {
+      props: {
+        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        monthYear: 'April 2026',
+        days,
+        selectedDate: days[1].date,
+      },
+    })
+
+    expect(wrapper.text()).toContain('April 2026')
+    expect(wrapper.findAll('.mint-date-picker__weekday')).toHaveLength(7)
+    expect(wrapper.find('.mint-date-picker__day--selected').text()).toBe('21')
+
+    const buttons = wrapper.findAll('button')
+    await buttons[0].trigger('click')
+    await buttons[1].trigger('click')
+    await wrapper.findAll('.mint-date-picker__day')[0].trigger('click')
+
+    expect(wrapper.emitted('previous-month')).toHaveLength(1)
+    expect(wrapper.emitted('next-month')).toHaveLength(1)
+    expect(wrapper.emitted('select')?.[0]).toEqual([days[0]])
+  })
+})

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

@@ -0,0 +1,161 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { describe, expect, it } from 'vitest'
+import ComponentBindingRenderer from '../../components/ComponentBindingRenderer.vue'
+
+const WellPlateStub = defineComponent({
+  name: 'WellPlate',
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    readonly: { type: Boolean, default: false },
+    size: { type: String, default: undefined },
+  },
+  template: '<div data-test="well-plate" />',
+})
+
+const DoseCalculatorStub = defineComponent({
+  name: 'DoseCalculator',
+  props: {
+    mode: { type: String, default: undefined },
+    targetWells: { type: Array, default: () => [] },
+  },
+  template: '<div data-test="dose-calculator" />',
+})
+
+const DataFrameStub = defineComponent({
+  name: 'DataFrame',
+  props: {
+    data: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    size: { type: String, default: undefined },
+    maxHeight: { type: String, default: undefined },
+  },
+  template: '<div data-test="data-frame" />',
+})
+
+const PlateMapEditorStub = defineComponent({
+  name: 'PlateMapEditor',
+  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 },
+    size: { type: String, default: undefined },
+  },
+  template: '<div data-test="plate-map-editor" />',
+})
+
+const globalOptions = {
+  stubs: {
+    DataFrame: DataFrameStub,
+    DoseCalculator: DoseCalculatorStub,
+    PlateMapEditor: PlateMapEditorStub,
+    WellPlate: WellPlateStub,
+  },
+}
+
+describe('ComponentBindingRenderer', () => {
+  it('renders known SDK component bindings and skips unsupported names', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        bindings: [
+          {
+            id: 'plate',
+            component: 'WellPlate',
+            props: { modelValue: ['A1'] },
+            description: 'Selected wells',
+          },
+          {
+            id: 'dose',
+            component: 'DoseCalculator',
+            props: { mode: 'serial', targetWells: ['A1'] },
+          },
+          {
+            id: 'custom',
+            component: 'CustomChart',
+            props: { score: 0.5 },
+          },
+        ],
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.find('[data-component-binding-id="plate"]').exists()).toBe(true)
+    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({
+      modelValue: ['A1'],
+      readonly: true,
+      size: 'fill',
+    })
+    expect(wrapper.findComponent(DoseCalculatorStub).props()).toMatchObject({
+      mode: 'serial',
+      targetWells: ['A1'],
+    })
+    expect(wrapper.text()).toContain('Selected wells')
+  })
+
+  it('accepts a single binding and preview-safe dense props', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: {
+          id: 'plate-map',
+          component: 'PlateMapEditor',
+          propsObject: { modelValue: { plates: [] } },
+        },
+        dense: true,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(PlateMapEditorStub).props()).toMatchObject({
+      showToolbar: false,
+      showSidebar: false,
+      allowAddPlates: false,
+      allowAddSamples: false,
+      size: 'md',
+    })
+  })
+
+  it('filters bindings and renders a compact empty state', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        bindings: [
+          {
+            id: 'table',
+            component: 'DataFrame',
+            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+          },
+        ],
+        include: ['WellPlate'],
+        emptyText: 'No components.',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.find('[data-component-binding-id="table"]').exists()).toBe(false)
+    expect(wrapper.text()).toContain('No components.')
+  })
+
+  it('normalizes DataFrame sizing in dense mode', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        bindings: [
+          {
+            id: 'table',
+            component: 'DataFrame',
+            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+          },
+        ],
+        dense: true,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(DataFrameStub).props()).toMatchObject({
+      size: 'sm',
+      maxHeight: '280px',
+    })
+  })
+})

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

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ConcentrationInput from '../../components/ConcentrationInput.vue'
+import UnitInput from '../../components/UnitInput.vue'
+
+describe('ConcentrationInput', () => {
+  it('delegates value and unit selection to UnitInput', async () => {
+    const wrapper = mount(ConcentrationInput, {
+      props: {
+        modelValue: { value: 5, unit: 'µM' },
+        allowedUnits: ['nM', 'µM'],
+        min: 0,
+        max: 10,
+        size: 'sm',
+      },
+    })
+
+    const unitInput = wrapper.findComponent(UnitInput)
+    expect(unitInput.exists()).toBe(true)
+    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 },
+    ])
+
+    await unitInput.vm.$emit('update:modelValue', 8)
+    await unitInput.vm.$emit('update:unit', 'nM')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      [{ value: 8, unit: 'µM' }],
+      [{ value: 5, unit: 'nM' }],
+    ])
+  })
+
+  it('keeps concentration-specific conversion hints', () => {
+    const wrapper = mount(ConcentrationInput, {
+      props: {
+        modelValue: { value: 1000, unit: 'nM' },
+      },
+    })
+
+    expect(wrapper.text()).toContain('1 µM')
+  })
+})