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

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

@@ -3,7 +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 { 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'
@@ -42,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>',
@@ -223,6 +235,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 +423,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: [
@@ -391,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',
@@ -457,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',
@@ -471,27 +696,114 @@ 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 pill nav items with icon metadata', async () => {
+      const runIcon = 'M8 5v14l11-7z'
+      const wrapper = createWrapper({
+        pillNav: [
+          { id: 'analysis', label: 'Run', icon: runIcon },
+          { id: 'results', label: 'Results' },
+        ],
+        currentPillId: 'analysis',
+      })
+
+      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 pills[1].trigger('click')
+      expect(wrapper.emitted('pill-select')?.[0][0]).toMatchObject({ id: 'results', label: 'Results' })
+    })
+
+    it('uses shared dropdown state for the page selector menu', async () => {
+      const wrapper = createWrapper({
+        pageSelector: [
+          { id: 'dashboard', label: 'Dashboard' },
+          { id: 'settings', label: 'Settings' },
+        ],
+        currentPageSelectorId: 'dashboard',
+      })
+      const dropdown = () => wrapper.find('.mint-page-selector__menu')
+
+      expect(dropdown().exists()).toBe(false)
+
+      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().exists()).toBe(false)
+
+      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().exists()).toBe(false)
+
+      wrapper.unmount()
+    })
+
+    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({
+        pageSelector: [
+          { id: 'dashboard', label: 'Dashboard', to: '/', icon: iconPath, hint: 'Overview' },
+          { id: 'image', label: 'Image', to: '/image', icon: pngIcon },
+          { id: 'text', label: 'Text', icon: 'home' },
+        ],
+        currentPageSelectorId: 'dashboard',
+      })
+
+      await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+      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.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-page-selector__item-hint').text()).toBe('Overview')
+    })
   })
 
   describe('edge cases', () => {
@@ -697,5 +1009,139 @@ 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 as the page selector when pageSelector is 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-page-selector__trigger').trigger('click')
+
+        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-page-selector__metadata-icon'))
+        expect(dropdownIcons.map(icon => icon.props('icon'))).toEqual([pluginIcon, analysisIcon])
+        expect(wrapper.findAll('.mint-page-selector__item')[1].classes()).toContain('mint-page-selector__item--active')
+      } finally {
+        window.history.pushState({}, '', previousPath)
+      }
+    })
+
+    it('keeps explicit pageSelector 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({
+        pageSelector: [{ id: 'overview', label: 'Overview', to: '/' }],
+        currentPageSelectorId: 'overview',
+      })
+      await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+      expect(wrapper.get('.mint-page-selector__label').text()).toBe('Overview')
+      expect(wrapper.findAll('.mint-page-selector__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('emits pill-option-select for pillNav dropdown children', async () => {
+      const wrapper = createWrapper({
+        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.findAll('.mint-pill-nav__item')[1].trigger('click')
+      await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
+
+      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/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)
+  })
+})