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

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

@@ -3,8 +3,11 @@ import { mount } from '@vue/test-utils'
 import { computed, ref } from 'vue'
 import { createPinia } from 'pinia'
 import AppTopBar from '../../components/AppTopBar.vue'
+import ExperimentPopover from '../../components/ExperimentPopover.vue'
+import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import { usePlatformContext } from '../../composables/usePlatformContext'
-import { controlsToTopBarTabs, defineControlModel, defineControls } from '../../composables/useControlSchema'
+import { APP_EXPERIMENT_KEY, type AppExperimentState } from '../../composables/useAppExperiment'
+import { defineControlModel, defineControls } from '../../composables/useControlSchema'
 import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
@@ -43,7 +46,15 @@ function createWrapper(props = {}, slots = {}) {
       plugins: [pinia],
       stubs: {
         'router-link': {
-          template: '<a><slot /></a>',
+          props: ['to', 'custom'],
+          template: `
+            <slot
+              v-if="custom"
+              :href="typeof to === 'string' ? to : '#'"
+              :navigate="() => {}"
+            />
+            <a v-else :href="typeof to === 'string' ? to : '#'"><slot /></a>
+          `,
         },
         BaseModal: {
           template: '<div><slot /></div>',
@@ -525,6 +536,86 @@ describe('AppTopBar', () => {
   })
 
   describe('combined features', () => {
+    it('passes injected app experiment bindings to the popover and selector modal', () => {
+      vi.mocked(usePlatformContext).mockReturnValueOnce({
+        isIntegrated: computed(() => true),
+        context: ref({ isIntegrated: true, 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(),
+      })
+      const appExperiment: AppExperimentState = {
+        experimentName: ref('Dose response'),
+        experimentCode: ref('EXP-012'),
+        experimentStatus: ref('ongoing'),
+        experimentId: ref(12),
+        showModal: ref(false),
+        saveLoading: ref(false),
+        saveSuccessMessage: ref('Saved'),
+        showSave: ref(true),
+        showDetach: computed(() => true),
+        saveDisabled: computed(() => true),
+        saveDisabledMessage: computed(() => 'Locked'),
+        popover: computed(() => ({
+          experimentName: 'Dose response',
+          experimentCode: 'EXP-012',
+          experimentStatus: 'ongoing',
+          showSave: true,
+          showDetach: true,
+          saveDisabled: true,
+          saveDisabledMessage: 'Locked',
+          saveLoading: false,
+          saveSuccessMessage: 'Saved',
+        })),
+        selectorModal: computed(() => ({
+          modelValue: false,
+          currentExperimentId: 12,
+        })),
+        openModal: vi.fn(),
+        closeModal: vi.fn(),
+        handleSelect: vi.fn(),
+        handleSave: vi.fn(),
+        handleDetach: vi.fn(),
+      }
+      const wrapper = mount(AppTopBar, {
+        props: { title: 'Test App' },
+        global: {
+          plugins: [createPinia()],
+          provide: {
+            [APP_EXPERIMENT_KEY as symbol]: appExperiment,
+          },
+          stubs: {
+            'router-link': {
+              template: '<a><slot /></a>',
+            },
+            BaseModal: {
+              template: '<div><slot /></div>',
+            },
+          },
+        },
+      })
+
+      expect(wrapper.findComponent(ExperimentPopover).props()).toMatchObject({
+        experimentName: 'Dose response',
+        experimentCode: 'EXP-012',
+        experimentStatus: 'ongoing',
+        showSave: true,
+        showDetach: true,
+        saveDisabled: true,
+        saveDisabledMessage: 'Locked',
+        saveLoading: false,
+        saveSuccessMessage: 'Saved',
+      })
+      expect(wrapper.findComponent(ExperimentSelectorModal).props()).toMatchObject({
+        modelValue: false,
+        currentExperimentId: 12,
+      })
+    })
+
     it('should render ThemeToggle and settings button together', () => {
       const wrapper = createWrapper({
         title: 'Test App',
@@ -591,8 +682,8 @@ describe('AppTopBar', () => {
     })
   })
 
-  describe('classic prop surface', () => {
-    it('should not break existing usage without new props', () => {
+  describe('navigation prop surface', () => {
+    it('renders a title-only layout without navigation props', () => {
       const wrapper = createWrapper({
         title: 'Classic App',
         subtitle: 'Old API',
@@ -605,120 +696,113 @@ describe('AppTopBar', () => {
       expect(wrapper.find('.mint-topbar__standalone-badge').exists()).toBe(true)
     })
 
-    it('should work with existing pages and tabs props', () => {
+    it('composes page selector, pill nav, theme, and settings controls', () => {
       const wrapper = createWrapper({
-        pluginName: 'Test Plugin',
         title: 'Dashboard',
-        pages: [
+        pageSelector: [
           { id: 'dashboard', label: 'Dashboard' },
           { id: 'settings', label: 'Settings' },
         ],
-        tabs: [
+        currentPageSelectorId: 'dashboard',
+        pillNav: [
           { id: 'overview', label: 'Overview' },
           { id: 'details', label: 'Details' },
         ],
+        currentPillId: 'overview',
         showThemeToggle: true,
         showSettings: true,
       })
 
-      expect(wrapper.text()).toContain('Test Plugin')
-      expect(wrapper.text()).toContain('Dashboard')
+      expect(wrapper.find('.mint-page-selector__label').text()).toBe('Dashboard')
+      expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+        'Overview',
+        'Details',
+      ])
+      expect(wrapper.findAll('.mint-pill-nav__item')[0].classes()).toContain('mint-pill-nav__item--active')
       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 () => {
+    it('renders pill nav items with icon metadata', 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',
+        pillNav: [
+          { id: 'analysis', label: 'Run', icon: runIcon },
+          { id: 'results', label: 'Results' },
+        ],
+        currentPillId: '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)
+      const pills = wrapper.findAll('.mint-pill-nav__item')
+      expect(pills.map(pill => pill.text())).toEqual(['Run', 'Results'])
+      expect(pills[0].classes()).toContain('mint-pill-nav__item--active')
+      expect(pills[0].get('.mint-pill-nav__icon path').attributes('d')).toBe(runIcon)
+      expect(pills[1].find('.mint-pill-nav__icon').exists()).toBe(false)
 
-      await tabs[1].trigger('click')
-      expect(wrapper.emitted('tab-select')?.[0][0]).toMatchObject({ id: 'results', label: 'Results' })
+      await pills[1].trigger('click')
+      expect(wrapper.emitted('pill-select')?.[0][0]).toMatchObject({ id: 'results', label: 'Results' })
     })
 
-    it('uses shared dropdown state for the legacy page menu', async () => {
+    it('uses shared dropdown state for the page selector menu', async () => {
       const wrapper = createWrapper({
-        pluginName: 'Test Plugin',
-        pages: [
+        pageSelector: [
           { id: 'dashboard', label: 'Dashboard' },
           { id: 'settings', label: 'Settings' },
         ],
+        currentPageSelectorId: 'dashboard',
       })
-      const dropdown = () => wrapper.get('.mint-topbar-dropdown')
+      const dropdown = () => wrapper.find('.mint-page-selector__menu')
 
-      expect(dropdown().attributes('style')).toContain('display: none')
+      expect(dropdown().exists()).toBe(false)
 
-      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
-      expect(dropdown().attributes('style') ?? '').not.toContain('display: none')
+      await wrapper.get('.mint-page-selector__trigger').trigger('click')
+      expect(dropdown().exists()).toBe(true)
 
       document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
       await wrapper.vm.$nextTick()
-      expect(dropdown().attributes('style')).toContain('display: none')
+      expect(dropdown().exists()).toBe(false)
 
-      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
-      expect(dropdown().attributes('style') ?? '').not.toContain('display: none')
+      await wrapper.get('.mint-page-selector__trigger').trigger('click')
+      expect(dropdown().exists()).toBe(true)
 
       document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
       await wrapper.vm.$nextTick()
-      expect(dropdown().attributes('style')).toContain('display: none')
+      expect(dropdown().exists()).toBe(false)
 
       wrapper.unmount()
     })
 
-    it('renders PluginIcon-compatible metadata icons in the legacy page menu', async () => {
+    it('renders PluginIcon-compatible metadata icons in the page selector 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' },
+        pageSelector: [
+          { id: 'dashboard', label: 'Dashboard', to: '/', icon: iconPath, hint: 'Overview' },
           { id: 'image', label: 'Image', to: '/image', icon: pngIcon },
-          { id: 'legacy', label: 'Legacy', icon: 'home' },
+          { id: 'text', label: 'Text', icon: 'home' },
         ],
-        currentPageId: 'dashboard',
+        currentPageSelectorId: 'dashboard',
       })
 
-      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-      const icons = wrapper.findAllComponents({ name: 'PluginIcon' })
+      const icons = wrapper
+        .findAllComponents({ name: 'PluginIcon' })
+        .filter(icon => icon.classes().includes('mint-page-selector__metadata-icon'))
       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)
+      expect(pathIcons.map(icon => icon.find('path').attributes('d'))).toEqual(
+        expect.arrayContaining([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')
+      expect(wrapper.find('.mint-page-selector__item-hint').text()).toBe('Overview')
     })
   })
 
@@ -926,7 +1010,7 @@ describe('AppTopBar', () => {
       expect(wrapper.find('.mint-topbar__logo-text').text()).toBe('M')
     })
 
-    it('uses platform plugin nav metadata when pluginName and pages are omitted', async () => {
+    it('uses platform plugin nav metadata as the page selector when pageSelector is omitted', async () => {
       const previousPath = window.location.pathname
       window.history.pushState({}, '', '/test/analysis')
       try {
@@ -949,25 +1033,28 @@ describe('AppTopBar', () => {
         })
 
         const wrapper = createWrapper()
-        await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+        await wrapper.get('.mint-page-selector__trigger').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([
+        expect(wrapper.get('.mint-page-selector__label').text()).toBe('Analysis')
+        expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
           'Dashboard',
           'Analysis',
         ])
+        expect(wrapper.findAll('.mint-page-selector__item-hint').map(item => item.text())).toEqual([
+          'Dose Designer',
+          'Dose Designer',
+        ])
         const dropdownIcons = wrapper
           .findAllComponents({ name: 'PluginIcon' })
-          .filter(icon => icon.classes().includes('mint-topbar-dropdown-item__icon'))
+          .filter(icon => icon.classes().includes('mint-page-selector__metadata-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')
+        expect(wrapper.findAll('.mint-page-selector__item')[1].classes()).toContain('mint-page-selector__item--active')
       } finally {
         window.history.pushState({}, '', previousPath)
       }
     })
 
-    it('keeps explicit legacy pages ahead of platform plugin nav metadata', async () => {
+    it('keeps explicit pageSelector ahead of platform plugin nav metadata', async () => {
       mockPlatformCtx({
         isIntegrated: true,
         plugin: {
@@ -976,18 +1063,24 @@ describe('AppTopBar', () => {
           version: '1.0',
           route_prefix: '/test',
           api_prefix: '/api/test',
-          nav_items: [{ path: '/stale', label: 'Stale' }],
+          nav_items: [
+            { path: '/stale', label: 'Stale' },
+            { path: '/stale-two', label: 'Stale Two' },
+          ],
         },
       })
 
       const wrapper = createWrapper({
-        pluginName: 'Explicit Plugin',
-        pages: [{ id: 'overview', label: 'Overview', to: '/' }],
+        pageSelector: [
+          { id: 'overview', label: 'Overview', to: '/' },
+          { id: 'reports', label: 'Reports', to: '/reports' },
+        ],
+        currentPageSelectorId: 'overview',
       })
-      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      await wrapper.get('.mint-page-selector__trigger').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'])
+      expect(wrapper.get('.mint-page-selector__label').text()).toBe('Overview')
+      expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual(['Overview', 'Reports'])
     })
   })
 
@@ -1026,59 +1119,35 @@ describe('AppTopBar', () => {
       ])
     })
 
-    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 () => {
+    it('emits pill-option-select for pillNav dropdown children', async () => {
       const wrapper = createWrapper({
-        currentTabId: 'Summary',
-        tabs: [
-          { id: 'analysis', label: 'Analysis', children: ['Summary', 'Details'] },
+        currentPillId: 'pca',
+        pillNav: [
+          { id: 'charts', label: 'Charts' },
+          {
+            id: 'visualize',
+            label: 'Visualize',
+            children: [
+              { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+              { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+            ],
+          },
         ],
       })
 
-      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')
+      await wrapper.findAll('.mint-pill-nav__item')[1].trigger('click')
+      await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
 
-      expect(wrapper.emitted('tab-option-select')?.[0]?.[0]).toEqual({
-        id: 'Details',
-        label: 'Details',
+      expect(wrapper.emitted('pill-option-select')?.[0]?.[0]).toEqual({
+        id: 'heatmap',
+        label: 'Heatmap',
+        description: 'Metabolite heatmap',
+      })
+      expect(wrapper.emitted('pill-option-select')?.[0]?.[1]).toMatchObject({
+        id: 'visualize',
+        label: 'Visualize',
       })
     })
+
   })
 })

package/src/__tests__/components/{AppPageSelector.test.ts → AppTopBarPageSelector.test.ts}

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import AppPageSelector from '../../components/AppPageSelector.vue'
+import AppTopBarPageSelectorInternal from '../../components/internal/AppTopBarPageSelectorInternal.vue'
 
-describe('AppPageSelector', () => {
+describe('AppTopBarPageSelectorInternal', () => {
   it('accepts string shorthand pages', async () => {
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         currentPageId: 'Workspace',
         pages: ['Workspace', 'Results'],
@@ -25,7 +25,7 @@ describe('AppPageSelector', () => {
   })
 
   it('closes linked page actions without emitting select', async () => {
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         currentPageId: 'workspace',
         pages: [
@@ -43,7 +43,7 @@ describe('AppPageSelector', () => {
   })
 
   it('keeps disabled linked page actions inert', async () => {
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         currentPageId: 'workspace',
         pages: [
@@ -66,7 +66,7 @@ describe('AppPageSelector', () => {
 
   it('emits select for button page actions', async () => {
     const page = { id: 'workspace', label: 'Workspace' }
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         pages: [page],
       },
@@ -81,7 +81,7 @@ describe('AppPageSelector', () => {
   it('renders PluginIcon-compatible metadata icons and keeps symbolic icons as fallback initials', async () => {
     const iconPath = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
     const pngIcon = 'data:image/png;base64,iVBORw0KGgo='
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         pages: [
           { id: 'analysis', label: 'Analysis', icon: iconPath },
@@ -117,7 +117,7 @@ describe('AppPageSelector', () => {
 
   it('renders https page icons through PluginIcon', async () => {
     const httpsIcon = 'https://example.com/plugin-icon.png'
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         pages: [
           { id: 'docs', label: 'Docs', icon: httpsIcon },

package/src/__tests__/components/{AppPillNav.test.ts → AppTopBarPillNav.test.ts}

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import AppPillNav from '../../components/AppPillNav.vue'
+import AppTopBarPillNavInternal from '../../components/internal/AppTopBarPillNavInternal.vue'
 
-describe('AppPillNav', () => {
+describe('AppTopBarPillNavInternal', () => {
   it('accepts string shorthand items', async () => {
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppTopBarPillNavInternal, {
       props: {
         currentItemId: 'Overview',
         items: ['Overview', 'Analysis'],
@@ -22,7 +22,7 @@ describe('AppPillNav', () => {
   })
 
   it('emits select for button items but not linked items', async () => {
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppTopBarPillNavInternal, {
       props: {
         currentItemId: 'overview',
         items: [
@@ -40,7 +40,7 @@ describe('AppPillNav', () => {
 
   it('renders SVG icons from item metadata', () => {
     const icon = ['M4 12h16', 'M12 4v16']
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppTopBarPillNavInternal, {
       props: {
         items: [
           { id: 'run', label: 'Run', icon },
@@ -59,7 +59,7 @@ describe('AppPillNav', () => {
   })
 
   it('prevents disabled link navigation and selection', async () => {
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppTopBarPillNavInternal, {
       props: {
         items: [
           { id: 'docs', label: 'Docs', href: '/docs', disabled: true },
@@ -75,4 +75,51 @@ describe('AppPillNav', () => {
 
     expect(wrapper.emitted('select')).toBeUndefined()
   })
+
+  it('supports dropdown child items for grouped pill navigation', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, {
+      props: {
+        currentItemId: 'pca',
+        items: [
+          { id: 'charts', label: 'Charts' },
+          {
+            id: 'visualize',
+            label: 'Visualize',
+            children: [
+              { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+              { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+            ],
+          },
+        ],
+      },
+    })
+
+    const visualizeButton = wrapper.findAll('.mint-pill-nav__item')[1]
+    expect(visualizeButton.classes()).toContain('mint-pill-nav__item--active')
+    expect(wrapper.find('.mint-pill-nav__dropdown').exists()).toBe(false)
+
+    await visualizeButton.trigger('click')
+
+    expect(wrapper.find('.mint-pill-nav__dropdown').exists()).toBe(true)
+    expect(wrapper.findAll('.mint-pill-nav__dropdown-item').map(item => item.text())).toEqual([
+      'PCAPrincipal component analysis',
+      'HeatmapMetabolite heatmap',
+    ])
+
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
+
+    expect(wrapper.emitted('option-select')).toEqual([
+      [
+        { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+        {
+          id: 'visualize',
+          label: 'Visualize',
+          children: [
+            { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+            { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+          ],
+        },
+      ],
+    ])
+  })
 })

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

@@ -118,12 +118,15 @@ describe('BioTemplateExperimentWorkspaceView', () => {
         kind: 'collection',
       },
       slots: {
-        default: ({ bindings, componentPropsById, getComponentProps }) => h(
+        default: ({ bindings, componentBindingsById, componentPropsById, getComponentProps }) => h(
           'pre',
           { class: 'component-props' },
           JSON.stringify({
             doseMode: componentPropsById['dose-response:DoseCalculator'].mode,
+            bindingComponent: componentBindingsById['dose-response:DoseCalculator'].component,
+            bindingMode: componentBindingsById['dose-response:DoseCalculator'].props.mode,
             bindingDoseMode: bindings.componentPropsById['dose-response:DoseCalculator'].mode,
+            nestedBindingMode: bindings.componentBindingsById['dose-response:DoseCalculator'].props.mode,
             hasPlateWells: Boolean(componentPropsById['plate-map:WellPlate'].wells),
             doseModeFromGetter: getComponentProps('DoseCalculator')?.mode,
             bindingDoseModeFromGetter: bindings.getComponentProps('DoseCalculator')?.mode,
@@ -143,7 +146,10 @@ describe('BioTemplateExperimentWorkspaceView', () => {
 
     expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
       doseMode: 'serial',
+      bindingComponent: 'DoseCalculator',
+      bindingMode: 'serial',
       bindingDoseMode: 'serial',
+      nestedBindingMode: 'serial',
       hasPlateWells: true,
       doseModeFromGetter: 'serial',
       bindingDoseModeFromGetter: 'serial',