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

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

@@ -305,6 +305,17 @@ describe('DataFrame', () => {
       expect(rows).toHaveLength(0)
     })
 
+    it('should treat whitespace-only search as empty', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, searchable: true },
+      })
+      const searchInput = wrapper.find('.mint-dataframe__search')
+      await searchInput.setValue('   ')
+
+      const rows = wrapper.findAll('.mint-dataframe__row')
+      expect(rows).toHaveLength(3)
+    })
+
     it('should be case-insensitive', async () => {
       const wrapper = mount(DataFrame, {
         props: { data: mockData, columns: mockColumns, searchable: true },

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

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import DatePicker from '../../components/DatePicker.vue'
+
+function dropdown(): HTMLElement | null {
+  return document.body.querySelector('.mint-date-picker__dropdown')
+}
+
+describe('DatePicker', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('uses shared dropdown state with teleported calendar content', async () => {
+    const wrapper = mount(DatePicker, {
+      props: {
+        modelValue: '2026-04-22',
+      },
+      attachTo: document.body,
+    })
+
+    await wrapper.get('input').trigger('click')
+    expect(dropdown()).not.toBeNull()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    expect(dropdown()).toBeNull()
+
+    await wrapper.get('input').trigger('click')
+    expect(dropdown()).not.toBeNull()
+
+    const nextButton = document.body.querySelector<HTMLButtonElement>('[aria-label="Next month"]')
+    expect(nextButton).not.toBeNull()
+    nextButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    expect(dropdown()).not.toBeNull()
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    expect(dropdown()).toBeNull()
+
+    wrapper.unmount()
+  })
+})

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

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
+import DateTimePicker from '../../components/DateTimePicker.vue'
+
+describe('DateTimePicker', () => {
+  it('uses the shared calendar panel and keeps time selection working', async () => {
+    const wrapper = mount(DateTimePicker, {
+      props: {
+        modelValue: '2026-04-22T14:30',
+      },
+    })
+
+    await wrapper.find('input').trigger('click')
+    await nextTick()
+
+    expect(wrapper.findComponent(CalendarGridPanelInternal).exists()).toBe(true)
+    expect(wrapper.find('.mint-date-picker__day--selected').text()).toBe('22')
+
+    const timeButton = wrapper.findAll('.mint-datetime-picker__time-chip')
+      .find((button) => button.text() === '09:00')
+    expect(timeButton).toBeDefined()
+
+    await timeButton?.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-04-22T09:00'])
+  })
+
+  it('uses shared dropdown state for Escape close behavior', async () => {
+    const wrapper = mount(DateTimePicker, {
+      props: {
+        modelValue: '2026-04-22T14:30',
+      },
+      attachTo: document.body,
+    })
+
+    await wrapper.find('input').trigger('click')
+    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(true)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+
+    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+})

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

@@ -0,0 +1,185 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { computed, defineComponent, h, ref, nextTick } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import AppLayout from '../../components/AppLayout.vue'
+import AppSidebar from '../../components/AppSidebar.vue'
+import DoseDesignWorkspaceView from '../../components/DoseDesignWorkspaceView.vue'
+
+vi.mock('../../composables/usePlatformContext', () => ({
+  usePlatformContext: vi.fn(() => ({
+    isIntegrated: computed(() => false),
+    context: ref({ isIntegrated: false, theme: 'system' }),
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+    navigate: vi.fn(),
+    notify: vi.fn(),
+    sendToPlatform: vi.fn(),
+  })),
+}))
+
+vi.mock('../../composables/useTheme', () => ({
+  useTheme: vi.fn(() => ({
+    isDark: ref(false),
+    theme: ref('light'),
+    toggleTheme: vi.fn(),
+  })),
+}))
+
+const WellPlateStub = defineComponent({
+  name: 'WellPlate',
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    format: { type: Number, default: 96 },
+    wells: { type: Object, default: undefined },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: undefined },
+    selectionMode: { type: String, default: undefined },
+    heatmap: { type: Object, default: undefined },
+  },
+  emits: ['update:modelValue'],
+  template: '<button data-test="well-plate" @click="$emit(\'update:modelValue\', [\'B1\', \'B2\'])" />',
+})
+
+const DoseCalculatorStub = defineComponent({
+  name: 'DoseCalculator',
+  props: {
+    mode: { type: String, default: 'auto' },
+    targetWells: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: false },
+    molecularWeight: { type: Number, default: undefined },
+  },
+  template: '<div data-test="dose-calculator" />',
+})
+
+function mountWorkspace(
+  props: Record<string, unknown> = {},
+  slots: Record<string, unknown> = {},
+) {
+  return mount(DoseDesignWorkspaceView, {
+    props,
+    slots: slots as never,
+    global: {
+      plugins: [createPinia()],
+      stubs: {
+        WellPlate: WellPlateStub,
+        DoseCalculator: DoseCalculatorStub,
+        'router-link': {
+          template: '<a><slot /></a>',
+        },
+        BaseModal: {
+          template: '<div><slot /></div>',
+        },
+      },
+    },
+  })
+}
+
+describe('DoseDesignWorkspaceView', () => {
+  it('renders WellPlate and DoseCalculator from one dose-design model', async () => {
+    const wrapper = mountWorkspace({
+      modelValue: {
+        selectedWells: ['A1'],
+        plateFormat: 384,
+        doseMode: 'serial',
+        disabled: false,
+      },
+      doseDesignOptions: {
+        includeMolecularWeight: true,
+      },
+      wellPlateProps: {
+        size: 'lg',
+        selectionMode: 'single',
+        heatmap: { enabled: true },
+      },
+      doseCalculatorProps: {
+        disabled: true,
+      },
+    })
+
+    const wellPlate = wrapper.findComponent(WellPlateStub)
+    const doseCalculator = wrapper.findComponent(DoseCalculatorStub)
+
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('analysis')
+    expect(wellPlate.props()).toMatchObject({
+      modelValue: ['A1'],
+      format: 384,
+      size: 'lg',
+      selectionMode: 'single',
+      heatmap: { enabled: true },
+    })
+    expect(doseCalculator.props()).toMatchObject({
+      mode: 'serial',
+      targetWells: ['A1'],
+      disabled: true,
+      molecularWeight: 300,
+    })
+
+    await wellPlate.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      selectedWells: ['B1', 'B2'],
+    })
+  })
+
+  it('uses custom generated component prop ids from doseDesignOptions', () => {
+    const wrapper = mountWorkspace({
+      doseDesignOptions: {
+        selectedWells: ['C1'],
+        componentProps: {
+          plateId: 'plateView',
+          doseId: 'doseTool',
+        },
+      },
+    })
+
+    expect(wrapper.findComponent(WellPlateStub).props('modelValue')).toEqual(['C1'])
+    expect(wrapper.findComponent(DoseCalculatorStub).props('targetWells')).toEqual(['C1'])
+  })
+
+  it('passes through sidebar chrome overrides', () => {
+    const wrapper = mountWorkspace({
+      sidebarVariant: 'default',
+      responsiveSidebar: false,
+      sidebarTitle: 'Dose Controls',
+      sidebarSubtitle: 'Plate setup',
+      sidebarBadge: 'ready',
+    })
+
+    expect(wrapper.findComponent(AppLayout).props('responsiveSidebar')).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('default')
+    expect(wrapper.findComponent(AppSidebar).props('title')).toBe('Dose Controls')
+    expect(wrapper.findComponent(AppSidebar).props('subtitle')).toBe('Plate setup')
+    expect(wrapper.findComponent(AppSidebar).props('badge')).toBe('ready')
+  })
+
+  it('exposes merged component props to the default slot', () => {
+    const wrapper = mountWorkspace(
+      {
+        doseDesignOptions: {
+          selectedWells: ['D1'],
+        },
+      },
+      {
+        default: (rawProps: unknown) => {
+          const props = rawProps as {
+            wellPlateProps: Record<string, unknown>
+            doseCalculatorProps: Record<string, unknown>
+          }
+          return h('pre', { class: 'slot-props' }, JSON.stringify({
+            plate: props.wellPlateProps.modelValue,
+            dose: props.doseCalculatorProps.targetWells,
+          }))
+        },
+      },
+    )
+
+    expect(JSON.parse(wrapper.find('.slot-props').text())).toEqual({
+      plate: ['D1'],
+      dose: ['D1'],
+    })
+  })
+})

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

@@ -84,6 +84,29 @@ describe('DropdownButton', () => {
       expect(wrapper.emitted('select')).toHaveLength(1)
       expect(wrapper.emitted('select')?.[0]).toEqual([mockOptions[1]])
     })
+
+    it('accepts string and number shorthand options', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: {
+          modelValue: 96,
+          options: ['custom', 96, { value: 'log', label: 'Log scale' }],
+        },
+      })
+
+      expect(wrapper.find('.mint-dropdown-button__label').text()).toBe('96')
+
+      await wrapper.find('.mint-dropdown-button__trigger').trigger('click')
+      expect(wrapper.findAll('.mint-dropdown-button__option').map(option => option.text())).toEqual([
+        'custom',
+        '96',
+        'Log scale',
+      ])
+
+      await wrapper.findAll('.mint-dropdown-button__option')[0].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['custom'])
+      expect(wrapper.emitted('select')?.[0]).toEqual([{ value: 'custom', label: 'custom' }])
+    })
   })
 
   describe('toggle open/close', () => {

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

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import EmptyState from '../../components/EmptyState.vue'
+
+describe('EmptyState', () => {
+  it('renders action through BaseButton and emits action clicks', async () => {
+    const wrapper = mount(EmptyState, {
+      props: {
+        title: 'No experiments',
+        actionLabel: 'Create experiment',
+      },
+    })
+
+    const button = wrapper.find('.mint-button')
+    expect(button.exists()).toBe(true)
+    expect(button.classes()).toContain('mint-button--primary')
+    expect(button.text()).toBe('Create experiment')
+
+    await button.trigger('click')
+
+    expect(wrapper.emitted('action')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import ExperimentPopover from '../../components/ExperimentPopover.vue'
+
+function mountPopover(props = {}) {
+  return mount(ExperimentPopover, {
+    props,
+    attachTo: document.body,
+    global: {
+      stubs: {
+        ConfirmDialog: {
+          template: '<div data-test="confirm-dialog" />',
+        },
+      },
+    },
+  })
+}
+
+describe('ExperimentPopover', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('opens and closes the popover on trigger and outside click', async () => {
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      experimentCode: 'EXP-001',
+    })
+
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(true)
+
+    document.body.click()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('emits select and closes when changing experiment context', async () => {
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      experimentCode: 'EXP-001',
+    })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    await wrapper.find('.mint-experiment-popover__change-btn').trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+})