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

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

@@ -4,6 +4,7 @@ import { computed, ref } from 'vue'
 import { createPinia } from 'pinia'
 import AppTopBar from '../../components/AppTopBar.vue'
 import { usePlatformContext } from '../../composables/usePlatformContext'
+import { controlsToTopBarTabs, defineControlModel, defineControls } from '../../composables/useControlSchema'
 import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
@@ -223,6 +224,123 @@ describe('AppTopBar', () => {
       expect(settingsModal.props('tabs')).toEqual(settingsConfig.tabs)
     })
 
+    it('should normalize shorthand settings tabs for SettingsModal', () => {
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig: {
+          tabs: ['General', 'Advanced'],
+          showAppearance: false,
+        },
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.props('tabs')).toEqual([
+        { id: 'General', label: 'General' },
+        { id: 'Advanced', label: 'Advanced' },
+      ])
+    })
+
+    it('should sync external schema values into SettingsModal fields', async () => {
+      const schema = {
+        groups: [
+          {
+            id: 'general',
+            label: 'General',
+            fields: [
+              { name: 'threshold', label: 'Threshold', type: 'number' as const },
+              {
+                name: 'method',
+                label: 'Method',
+                type: 'select' as const,
+                props: {
+                  options: [
+                    { value: 'linear', label: 'Linear' },
+                    { value: 'logistic', label: 'Logistic' },
+                  ],
+                },
+              },
+            ],
+          },
+        ],
+      }
+      const settingsConfig: TopBarSettingsConfig = {
+        showAppearance: false,
+        schema,
+        values: { threshold: 0.25, method: 'linear', externalContext: 'experiment-1' },
+      }
+
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig,
+      })
+
+      await wrapper.setProps({
+        settingsConfig: {
+          ...settingsConfig,
+          values: { threshold: 0.75, method: 'logistic', externalContext: 'experiment-2' },
+        },
+      })
+
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.75')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+    })
+
+    it('should render compact controls in SettingsModal', () => {
+      const controls = defineControls({
+        threshold: {
+          label: 'Threshold',
+          default: 0.25,
+          section: 'parameters',
+          sectionLabel: 'Parameters',
+        },
+      })
+      const settingsConfig: TopBarSettingsConfig = {
+        showAppearance: false,
+        controls,
+      }
+
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig,
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.props('controls')).toStrictEqual(controls)
+      expect(wrapper.text()).toContain('Threshold')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    })
+
+    it('should pass control model to SettingsModal', () => {
+      const model = defineControlModel({
+        controls: {
+          threshold: {
+            label: 'Threshold',
+            default: 0.25,
+            section: 'parameters',
+            sectionLabel: 'Parameters',
+          },
+        },
+      })
+      const settingsConfig: TopBarSettingsConfig = {
+        showAppearance: false,
+        model,
+      }
+
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig,
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.props('model')).toStrictEqual(model)
+      expect(wrapper.text()).toContain('Threshold')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    })
+
     it('should pass showAppearance to SettingsModal', () => {
       const settingsConfig: TopBarSettingsConfig = {
         showAppearance: false,
@@ -294,6 +412,22 @@ describe('AppTopBar', () => {
       expect(settingsModal.vm.$slots['tab-general']).toBeDefined()
     })
 
+    it('should forward shorthand settings-tab slots to SettingsModal', () => {
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig: {
+          tabs: ['General'],
+          showAppearance: false,
+        },
+      }, {
+        'settings-tab-General': '<div>General Content</div>',
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.vm.$slots['tab-General']).toBeDefined()
+    })
+
     it('should forward multiple settings-tab slots', () => {
       const settingsConfig: TopBarSettingsConfig = {
         tabs: [
@@ -492,6 +626,100 @@ describe('AppTopBar', () => {
       expect(wrapper.findComponent(ThemeToggle).exists()).toBe(true)
       expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(true)
     })
+
+    it('renders tabs generated from a compact control schema', async () => {
+      const runIcon = 'M8 5v14l11-7z'
+      const controls = defineControls({
+        threshold: {
+          default: 0.05,
+          section: 'parameters',
+          view: 'analysis',
+        },
+        chartScale: {
+          default: 'linear',
+          section: 'display',
+          view: 'results',
+        },
+      })
+      const wrapper = createWrapper({
+        tabs: controlsToTopBarTabs(controls, {
+          views: {
+            analysis: { label: 'Run', icon: runIcon },
+            results: { label: 'Results' },
+          },
+        }),
+        currentTabId: 'analysis',
+      })
+
+      const tabs = wrapper.findAll('.mint-topbar-tab')
+      expect(tabs.map(tab => tab.text())).toEqual(['Run', 'Results'])
+      expect(tabs[0].classes()).toContain('mint-topbar-tab--active')
+      expect(tabs[0].get('.mint-topbar-tab-icon path').attributes('d')).toBe(runIcon)
+      expect(tabs[1].find('.mint-topbar-tab-icon').exists()).toBe(false)
+
+      await tabs[1].trigger('click')
+      expect(wrapper.emitted('tab-select')?.[0][0]).toMatchObject({ id: 'results', label: 'Results' })
+    })
+
+    it('uses shared dropdown state for the legacy page menu', async () => {
+      const wrapper = createWrapper({
+        pluginName: 'Test Plugin',
+        pages: [
+          { id: 'dashboard', label: 'Dashboard' },
+          { id: 'settings', label: 'Settings' },
+        ],
+      })
+      const dropdown = () => wrapper.get('.mint-topbar-dropdown')
+
+      expect(dropdown().attributes('style')).toContain('display: none')
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      expect(dropdown().attributes('style') ?? '').not.toContain('display: none')
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await wrapper.vm.$nextTick()
+      expect(dropdown().attributes('style')).toContain('display: none')
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      expect(dropdown().attributes('style') ?? '').not.toContain('display: none')
+
+      document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await wrapper.vm.$nextTick()
+      expect(dropdown().attributes('style')).toContain('display: none')
+
+      wrapper.unmount()
+    })
+
+    it('renders PluginIcon-compatible metadata icons in the legacy page menu', async () => {
+      const iconPath = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
+      const pngIcon = 'data:image/png;base64,iVBORw0KGgo='
+      const wrapper = createWrapper({
+        pluginName: 'Test Plugin',
+        pages: [
+          { id: 'dashboard', label: 'Dashboard', to: '/', icon: iconPath, description: 'Overview' },
+          { id: 'image', label: 'Image', to: '/image', icon: pngIcon },
+          { id: 'legacy', label: 'Legacy', icon: 'home' },
+        ],
+        currentPageId: 'dashboard',
+      })
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+
+      const icons = wrapper.findAllComponents({ name: 'PluginIcon' })
+      expect(icons).toHaveLength(2)
+      expect(icons[0].props('icon')).toBe(iconPath)
+      expect(icons[1].props('icon')).toBe(pngIcon)
+      expect(icons.every((icon) => icon.props('variant') === 'tinted')).toBe(true)
+
+      const pathIcons = wrapper.findAll('.mint-plugin-icon__svg')
+      expect(pathIcons).toHaveLength(1)
+      expect(pathIcons[0].find('path').attributes('d')).toBe(iconPath)
+
+      const imageIcons = wrapper.findAll('.mint-plugin-icon__img')
+      expect(imageIcons).toHaveLength(1)
+      expect(imageIcons[0].attributes('src')).toBe(pngIcon)
+      expect(wrapper.find('.mint-topbar-dropdown-item__description').text()).toBe('Overview')
+    })
   })
 
   describe('edge cases', () => {
@@ -697,5 +925,160 @@ describe('AppTopBar', () => {
       expect(wrapper.find('.mint-topbar__logo-text').exists()).toBe(true)
       expect(wrapper.find('.mint-topbar__logo-text').text()).toBe('M')
     })
+
+    it('uses platform plugin nav metadata when pluginName and pages are omitted', async () => {
+      const previousPath = window.location.pathname
+      window.history.pushState({}, '', '/test/analysis')
+      try {
+        const pluginIcon = 'M13 10V3L4 14h7v7l9-11h-7z'
+        const analysisIcon = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
+        mockPlatformCtx({
+          isIntegrated: true,
+          plugin: {
+            id: 'test',
+            name: 'Dose Designer',
+            version: '1.0',
+            icon: pluginIcon,
+            route_prefix: '/test',
+            api_prefix: '/api/test',
+            nav_items: [
+              { path: '/', label: 'Dashboard' },
+              { path: '/analysis', label: 'Analysis', icon: analysisIcon },
+            ],
+          },
+        })
+
+        const wrapper = createWrapper()
+        await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+
+        expect(wrapper.get('.mint-topbar-plugin-name').text()).toContain('Dose Designer')
+        expect(wrapper.get('.mint-topbar-current-page').text()).toBe('Analysis')
+        expect(wrapper.findAll('.mint-topbar-dropdown-item__label').map(item => item.text())).toEqual([
+          'Dashboard',
+          'Analysis',
+        ])
+        const dropdownIcons = wrapper
+          .findAllComponents({ name: 'PluginIcon' })
+          .filter(icon => icon.classes().includes('mint-topbar-dropdown-item__icon'))
+        expect(dropdownIcons.map(icon => icon.props('icon'))).toEqual([pluginIcon, analysisIcon])
+        expect(wrapper.findAll('.mint-topbar-dropdown-item')[1].classes()).toContain('mint-topbar-dropdown-item--active')
+      } finally {
+        window.history.pushState({}, '', previousPath)
+      }
+    })
+
+    it('keeps explicit legacy pages ahead of platform plugin nav metadata', async () => {
+      mockPlatformCtx({
+        isIntegrated: true,
+        plugin: {
+          id: 'test',
+          name: 'Dose Designer',
+          version: '1.0',
+          route_prefix: '/test',
+          api_prefix: '/api/test',
+          nav_items: [{ path: '/stale', label: 'Stale' }],
+        },
+      })
+
+      const wrapper = createWrapper({
+        pluginName: 'Explicit Plugin',
+        pages: [{ id: 'overview', label: 'Overview', to: '/' }],
+      })
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+
+      expect(wrapper.get('.mint-topbar-plugin-name').text()).toContain('Explicit Plugin')
+      expect(wrapper.findAll('.mint-topbar-dropdown-item__label').map(item => item.text())).toEqual(['Overview'])
+    })
+  })
+
+  describe('shorthand navigation items', () => {
+    it('accepts string shorthand for pageSelector', async () => {
+      const wrapper = createWrapper({
+        currentPageSelectorId: 'Workspace',
+        pageSelector: ['Workspace', 'Results'],
+      })
+
+      expect(wrapper.find('.mint-page-selector__label').text()).toBe('Workspace')
+
+      await wrapper.get('.mint-page-selector__trigger').trigger('click')
+      await wrapper.findAll('.mint-page-selector__item')[1].trigger('click')
+
+      expect(wrapper.emitted('page-selector-select')).toEqual([
+        [{ id: 'Results', label: 'Results' }],
+      ])
+    })
+
+    it('accepts string shorthand for pillNav', async () => {
+      const wrapper = createWrapper({
+        currentPillId: 'Run',
+        pillNav: ['Run', 'Results'],
+      })
+
+      expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+        'Run',
+        'Results',
+      ])
+
+      await wrapper.findAll('.mint-pill-nav__item')[1].trigger('click')
+
+      expect(wrapper.emitted('pill-select')).toEqual([
+        [{ id: 'Results', label: 'Results' }],
+      ])
+    })
+
+    it('accepts string shorthand for legacy pages', async () => {
+      const wrapper = createWrapper({
+        pluginName: 'Analysis',
+        currentPageId: 'Overview',
+        pages: ['Overview', 'Settings'],
+      })
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      await wrapper.findAll('.mint-topbar-dropdown-item')[1].trigger('click')
+
+      expect(wrapper.emitted('page-select')).toEqual([
+        [{ id: 'Settings', label: 'Settings' }],
+      ])
+    })
+
+    it('accepts string shorthand for legacy tabs', async () => {
+      const wrapper = createWrapper({
+        currentTabId: 'Run',
+        tabs: ['Run', 'Results'],
+      })
+
+      expect(wrapper.findAll('.mint-topbar-tab').map(tab => tab.text())).toEqual([
+        'Run',
+        'Results',
+      ])
+
+      await wrapper.findAll('.mint-topbar-tab')[1].trigger('click')
+
+      expect(wrapper.emitted('tab-select')).toEqual([
+        [{ id: 'Results', label: 'Results' }],
+      ])
+    })
+
+    it('accepts string shorthand for legacy tab dropdown options', async () => {
+      const wrapper = createWrapper({
+        currentTabId: 'Summary',
+        tabs: [
+          { id: 'analysis', label: 'Analysis', children: ['Summary', 'Details'] },
+        ],
+      })
+
+      await wrapper.get('.mint-topbar-tab').trigger('click')
+      expect(wrapper.findAll('.mint-topbar-dropdown-item').map(item => item.text())).toEqual([
+        'Summary',
+        'Details',
+      ])
+
+      await wrapper.findAll('.mint-topbar-dropdown-item')[1].trigger('click')
+
+      expect(wrapper.emitted('tab-option-select')?.[0]?.[0]).toEqual({
+        id: 'Details',
+        label: 'Details',
+      })
+    })
   })
 })

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

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseRadioGroup from '../../components/BaseRadioGroup.vue'
+
+describe('BaseRadioGroup', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(BaseRadioGroup, {
+      props: {
+        name: 'plate-format',
+        modelValue: 96,
+        options: [96, 384, { value: 'custom', label: 'Custom' }],
+      },
+    })
+
+    expect(wrapper.findAll('.mint-radio-option__label').map(label => label.text())).toEqual([
+      '96',
+      '384',
+      'Custom',
+    ])
+
+    await wrapper.findAll('input')[1].setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([384])
+  })
+})

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

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseSelect from '../../components/BaseSelect.vue'
+
+describe('BaseSelect', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(BaseSelect, {
+      props: {
+        modelValue: 'linear',
+        options: ['linear', 96, { value: 'log', label: 'Log scale' }],
+      },
+    })
+
+    const options = wrapper.findAll('option')
+    expect(options.map(option => option.text())).toEqual(['linear', '96', 'Log scale'])
+
+    await wrapper.get('select').setValue('96')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([96])
+  })
+})

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

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseTabs from '../../components/BaseTabs.vue'
+
+describe('BaseTabs', () => {
+  it('accepts string shorthand tabs', async () => {
+    const wrapper = mount(BaseTabs, {
+      props: {
+        modelValue: 'Run',
+        tabs: ['Run', 'Results', { id: 'settings', label: 'Settings', disabled: true }],
+      },
+    })
+
+    expect(wrapper.findAll('.mint-tab').map(tab => tab.text())).toEqual([
+      'Run',
+      'Results',
+      'Settings',
+    ])
+
+    await wrapper.findAll('.mint-tab')[1].trigger('click')
+    await wrapper.findAll('.mint-tab')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['Results']])
+  })
+})

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

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BatchProgressList from '../../components/BatchProgressList.vue'
+import type { BatchItem } from '../../types'
+
+const items: BatchItem[] = [
+  { id: 'a', label: 'Sample A', status: 'completed' },
+  { id: 'b', label: 'Sample B', status: 'error', message: 'Import failed' },
+  { id: 'c', label: 'Sample C', status: 'processing', progress: 50 },
+]
+
+describe('BatchProgressList', () => {
+  it('summarizes progress and emits row actions', async () => {
+    const wrapper = mount(BatchProgressList, {
+      props: {
+        title: 'Import',
+        items,
+        autoScroll: false,
+      },
+    })
+
+    expect(wrapper.find('.mint-batch-progress__percent').text()).toBe('33%')
+    expect(wrapper.text()).toContain('1 completed')
+    expect(wrapper.text()).toContain('1 failed')
+    expect(wrapper.text()).toContain('1 processing')
+
+    await wrapper.get('.mint-batch-progress__retry-btn').trigger('click')
+    await wrapper.get('.mint-batch-progress__cancel-btn').trigger('click')
+
+    expect(wrapper.emitted('retry')).toEqual([[items[1].id]])
+    expect(wrapper.emitted('cancel')).toEqual([[items[2].id]])
+  })
+
+  it('uses shared expansion state for error messages', async () => {
+    const wrapper = mount(BatchProgressList, {
+      props: {
+        items,
+        autoScroll: false,
+      },
+    })
+
+    expect(wrapper.find('.mint-batch-progress__item-message').exists()).toBe(false)
+
+    await wrapper.get('.mint-batch-progress__error-toggle').trigger('click')
+    expect(wrapper.get('.mint-batch-progress__error-toggle').text()).toBe('Hide error')
+    expect(wrapper.get('.mint-batch-progress__item-message').text()).toBe('Import failed')
+
+    await wrapper.get('.mint-batch-progress__error-toggle').trigger('click')
+    expect(wrapper.get('.mint-batch-progress__error-toggle').text()).toBe('Show error')
+    expect(wrapper.find('.mint-batch-progress__item-message').exists()).toBe(false)
+  })
+})

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

@@ -0,0 +1,153 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import BioTemplateExperimentWorkspaceView from '../../components/BioTemplateExperimentWorkspaceView.vue'
+import {
+  createPlateMapTemplate,
+  createWellPlateScreenCollection,
+} from '../../templates'
+
+describe('BioTemplateExperimentWorkspaceView', () => {
+  it('renders load/save/reset controls and a template preview', async () => {
+    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
+      props: {
+        target: createPlateMapTemplate(),
+        label: 'Plate Map',
+        hasExperiment: true,
+        currentExperimentId: 7,
+      },
+      global: {
+        stubs: {
+          PlateMapEditor: true,
+          WellPlate: true,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Plate Map template data saves')
+    expect(wrapper.text()).toContain('experiment: 7')
+    expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(true)
+
+    const buttons = wrapper.findAll('button')
+    await buttons[0].trigger('click')
+    await buttons[1].trigger('click')
+    await buttons[2].trigger('click')
+
+    expect(wrapper.emitted('load')).toHaveLength(1)
+    expect(wrapper.emitted('reset')).toHaveLength(1)
+    expect(wrapper.emitted('save')).toHaveLength(1)
+  })
+
+  it('renders collection summaries and disables experiment actions without an experiment', () => {
+    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
+      props: {
+        target: createWellPlateScreenCollection(),
+        label: 'Wellplate Screen',
+        kind: 'collection',
+        showTemplateSummary: true,
+        hasExperiment: false,
+      },
+      global: {
+        stubs: {
+          DataFrame: true,
+          DoseCalculator: true,
+          PlateMapEditor: true,
+          SampleSelector: true,
+          WellPlate: true,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Wellplate Screen saves the full template collection')
+    expect(wrapper.text()).toContain('plate-map')
+    expect(wrapper.text()).toContain('dose-response')
+    expect(wrapper.findAll('button')[0].attributes('disabled')).toBeDefined()
+    expect(wrapper.findAll('button')[2].attributes('disabled')).toBeDefined()
+  })
+
+  it('uses grouped status and actions when provided', async () => {
+    const load = vi.fn()
+    const reset = vi.fn()
+    const save = vi.fn()
+    const lastLoadedAt = new Date('2026-01-02T03:04:05Z')
+    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
+      props: {
+        target: createPlateMapTemplate(),
+        label: 'Plate Map',
+        status: {
+          loading: false,
+          saving: false,
+          error: 'Template request failed.',
+          hasExperiment: true,
+          currentExperimentId: 23,
+          lastLoadedAt,
+          lastSavedAt: null,
+        },
+        actions: { load, reset, save },
+      },
+      global: {
+        stubs: {
+          PlateMapEditor: true,
+          WellPlate: true,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Template request failed.')
+    expect(wrapper.text()).toContain('experiment: 23')
+
+    const buttons = wrapper.findAll('button')
+    expect(buttons[0].attributes('disabled')).toBeUndefined()
+    await buttons[0].trigger('click')
+    await buttons[1].trigger('click')
+    await buttons[2].trigger('click')
+
+    expect(load).toHaveBeenCalledTimes(1)
+    expect(reset).toHaveBeenCalledTimes(1)
+    expect(save).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('load')).toBeUndefined()
+    expect(wrapper.emitted('reset')).toBeUndefined()
+    expect(wrapper.emitted('save')).toBeUndefined()
+  })
+
+  it('exposes target component props to the default slot', () => {
+    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
+      props: {
+        target: createWellPlateScreenCollection(),
+        label: 'Wellplate Screen',
+        kind: 'collection',
+      },
+      slots: {
+        default: ({ bindings, componentPropsById, getComponentProps }) => h(
+          'pre',
+          { class: 'component-props' },
+          JSON.stringify({
+            doseMode: componentPropsById['dose-response:DoseCalculator'].mode,
+            bindingDoseMode: bindings.componentPropsById['dose-response:DoseCalculator'].mode,
+            hasPlateWells: Boolean(componentPropsById['plate-map:WellPlate'].wells),
+            doseModeFromGetter: getComponentProps('DoseCalculator')?.mode,
+            bindingDoseModeFromGetter: bindings.getComponentProps('DoseCalculator')?.mode,
+          }),
+        ),
+      },
+      global: {
+        stubs: {
+          DataFrame: true,
+          DoseCalculator: true,
+          PlateMapEditor: true,
+          SampleSelector: true,
+          WellPlate: true,
+        },
+      },
+    })
+
+    expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
+      doseMode: 'serial',
+      bindingDoseMode: 'serial',
+      hasPlateWells: true,
+      doseModeFromGetter: 'serial',
+      bindingDoseModeFromGetter: 'serial',
+    })
+    expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(false)
+  })
+})