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

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

@@ -3,6 +3,13 @@ import { mount } from '@vue/test-utils'
 import AppSidebar from '../../components/AppSidebar.vue'
 import CollapsibleCard from '../../components/CollapsibleCard.vue'
 import type { SidebarToolSection } from '../../types'
+import type { FormSchema } from '../../types/form-builder'
+import {
+  defineControlModel,
+  useControlSchema,
+  useControlWorkspace,
+  type ControlSchema,
+} from '../../composables/useControlSchema'
 
 const samplePanels: Record<string, SidebarToolSection[]> = {
   analysis: [
@@ -14,6 +21,45 @@ const samplePanels: Record<string, SidebarToolSection[]> = {
   ],
 }
 
+const sampleForms: Record<string, FormSchema> = {
+  parameters: {
+    sections: [
+      {
+        id: 'parameters',
+        title: '',
+        fields: [
+          { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.05' },
+        ],
+      },
+    ],
+  },
+}
+
+const sampleControls: ControlSchema = {
+  threshold: {
+    label: 'Threshold',
+    default: '0.05',
+    section: 'parameters',
+    sectionLabel: 'Parameters',
+    view: 'analysis',
+  },
+  method: {
+    label: 'Method',
+    default: 'linear',
+    options: ['linear', 'logistic'],
+    section: 'parameters',
+    view: 'analysis',
+  },
+  saveResults: {
+    label: 'Save results',
+    default: true,
+    section: 'output',
+    sectionLabel: 'Output',
+    view: 'analysis',
+    sidebar: { defaultOpen: false },
+  },
+}
+
 describe('AppSidebar', () => {
   describe('rendering with default props', () => {
     it('should render sidebar with default classes', () => {
@@ -99,6 +145,120 @@ describe('AppSidebar', () => {
     })
   })
 
+  describe('sidebar chrome and collapse state', () => {
+    it('applies analysis variant defaults for common plugin sidebars', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          variant: 'analysis',
+          title: 'Peak Picking',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--static').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(false)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 20rem')
+      expect(wrapper.find('.mint-sidebar__collapse-button').exists()).toBe(true)
+    })
+
+    it('lets explicit props override analysis variant defaults', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          variant: 'analysis',
+          floating: true,
+          width: '18rem',
+          collapsible: false,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 18rem')
+      expect(wrapper.find('.mint-sidebar__collapse-button').exists()).toBe(false)
+    })
+
+    it('renders title, subtitle, and badge in the built-in header', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          title: 'Peak Picking',
+          subtitle: 'run-001.msd',
+          badge: 3,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar__title').text()).toBe('Peak Picking')
+      expect(wrapper.find('.mint-sidebar__subtitle').text()).toBe('run-001.msd')
+      expect(wrapper.find('.mint-sidebar__badge').text()).toBe('3')
+    })
+
+    it('toggles uncontrolled collapsed state and emits the update', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          title: 'Peak Picking',
+          collapsible: true,
+          width: '18rem',
+          collapsedWidth: '3rem',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 18rem')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+
+      await wrapper.get('.mint-sidebar__collapse-button').trigger('click')
+
+      expect(wrapper.find('.mint-sidebar--collapsed').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 3rem')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+      expect(wrapper.emitted('update:collapsed')).toEqual([[true]])
+    })
+
+    it('supports controlled collapsed state and a collapsed slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          collapsible: true,
+          collapsed: true,
+        },
+        slots: {
+          collapsed: '<button class="collapsed-action">2</button>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--collapsed').exists()).toBe(true)
+      expect(wrapper.find('.collapsed-action').text()).toBe('2')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+    })
+
+    it('renders an empty analysis shell for route-owned sidebar content', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          variant: 'analysis',
+          title: 'Sequence',
+          contentId: 'seqgen-sidebar',
+          showWhenEmpty: true,
+        },
+        slots: {
+          footer: '<button class="generate-action">Generate</button>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__sections').attributes('id')).toBe('seqgen-sidebar')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+      expect(wrapper.find('.generate-action').exists()).toBe(true)
+    })
+  })
+
   describe('panels and activeView', () => {
     it('should render sections for active view', () => {
       const wrapper = mount(AppSidebar, {
@@ -198,7 +358,343 @@ describe('AppSidebar', () => {
     })
   })
 
+  describe('auto-rendered section forms', () => {
+    it('renders compact controls without prebuilt sidebar bindings', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+          activeView: 'analysis',
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Parameters')
+      expect(cards[1].props('title')).toBe('Output')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.05')
+    })
+
+    it('defaults to the first generated control view when activeView is omitted', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Parameters')
+    })
+
+    it('accepts the full useControlSchema sidebar binding without activeView', () => {
+      const toolkit = useControlSchema(sampleControls)
+      const wrapper = mount(AppSidebar, {
+        props: toolkit.sidebar,
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+      expect(wrapper.attributes('viewids')).toBeUndefined()
+      expect(wrapper.attributes('defaultview')).toBeUndefined()
+    })
+
+    it('renders forms from a complete control model binding', async () => {
+      const model = defineControlModel({
+        views: {
+          setup: {
+            label: 'Setup',
+            sections: {
+              parameters: {
+                label: 'Parameters',
+                controls: {
+                  threshold: { label: 'Threshold', default: '0.05' },
+                  method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
+                },
+              },
+            },
+          },
+        },
+      })
+      const wrapper = mount(AppSidebar, {
+        props: {
+          model,
+          modelValue: { threshold: '0.25' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(1)
+      expect(wrapper.findComponent(CollapsibleCard).props('title')).toBe('Parameters')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+        threshold: '0.5',
+        method: 'linear',
+      })
+    })
+
+    it('uses initialValues from a complete control model binding', () => {
+      const model = defineControlModel({
+        initialValues: {
+          threshold: '0.25',
+          method: 'logistic',
+        },
+        views: {
+          setup: {
+            label: 'Setup',
+            sections: {
+              parameters: {
+                label: 'Parameters',
+                controls: {
+                  threshold: { label: 'Threshold', default: '0.05' },
+                  method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
+                },
+              },
+            },
+          },
+        },
+      })
+      const wrapper = mount(AppSidebar, {
+        props: {
+          model,
+          controlOptions: {
+            initialValues: {
+              method: 'linear',
+            },
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+    })
+
+    it('merges compact control defaults into section form updates', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+          activeView: 'analysis',
+          values: { untouched: 'keep' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+        threshold: '0.5',
+        method: 'linear',
+        saveResults: true,
+        untouched: 'keep',
+      })
+    })
+
+    it('works with direct useControlWorkspace sidebar bindings', async () => {
+      const workspace = useControlWorkspace(sampleControls)
+      const wrapper = mount(AppSidebar, {
+        props: workspace.sidebar,
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.props('modelValue')).toBe(workspace.values)
+      expect(wrapper.props('values')).toBe(workspace.values)
+
+      await wrapper.find('input').setValue('0.5')
+      expect(workspace.values.threshold).toBe('0.5')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+        threshold: '0.5',
+      })
+
+      workspace.setValues({ method: 'logistic' })
+      await wrapper.vm.$nextTick()
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+    })
+
+    it('activates generated panels and forms when direct controls load after mount', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          activeView: 'analysis',
+          values: {
+            threshold: '0.25',
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
+
+      await wrapper.setProps({
+        controls: sampleControls,
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Parameters')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+    })
+
+    it('lets explicit panels override compact control panel metadata by section', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+          activeView: 'analysis',
+          panels: {
+            analysis: [
+              { id: 'parameters', label: 'Manual Parameters' },
+            ],
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Manual Parameters')
+      expect(cards[1].props('title')).toBe('Output')
+    })
+
+    it('renders FormBuilder schemas when a section has no custom slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          values: { threshold: '0.25' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-form-builder').exists()).toBe(true)
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+      expect(wrapper.find('.mint-form-actions').exists()).toBe(false)
+    })
+
+    it('uses controlOptions initialValues for generated section forms', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+          activeView: 'analysis',
+          controlOptions: {
+            initialValues: {
+              threshold: '0.35',
+              method: 'logistic',
+            },
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.35')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+        threshold: '0.5',
+        method: 'logistic',
+        saveResults: true,
+      })
+    })
+
+    it('can show FormBuilder actions for generated forms', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          showFormActions: true,
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-form-actions').exists()).toBe(true)
+    })
+
+    it('merges section form updates into shared values', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          values: { threshold: '0.25', untouched: 'keep' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toEqual({
+        threshold: '0.5',
+        untouched: 'keep',
+      })
+    })
+
+    it('supports default v-model for generated section form values', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          modelValue: { threshold: '0.25', untouched: 'keep' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toEqual({
+        threshold: '0.5',
+        untouched: 'keep',
+      })
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toEqual({
+        threshold: '0.5',
+        untouched: 'keep',
+      })
+    })
+
+    it('keeps explicit section slots as the override for generated forms', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+        },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="manual-controls">Manual controls</div>',
+        },
+      })
+
+      expect(wrapper.find('.manual-controls').exists()).toBe(true)
+      expect(wrapper.find('.mint-form-builder').exists()).toBe(false)
+    })
+  })
+
   describe('slots', () => {
+    it('renders the default slot as sidebar content without panels', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { variant: 'analysis' },
+        slots: {
+          default: '<div class="route-sidebar-content">Route controls</div>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.find('.route-sidebar-content').text()).toBe('Route controls')
+    })
+
     it('should render header slot', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels, activeView: 'analysis' },

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import AppToastContainer from '../../components/AppToastContainer.vue'
+import { useToast } from '../../composables/useToast'
+
+describe('AppToastContainer', () => {
+  const toast = useToast()
+
+  afterEach(() => {
+    toast.clear()
+  })
+
+  function mountContainer(component = AppToastContainer) {
+    return mount(component, {
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+  }
+
+  it('renders toasts from the shared toast queue', async () => {
+    const wrapper = mountContainer()
+
+    toast.success('Analysis complete', 10000)
+    await nextTick()
+
+    expect(wrapper.find('.mint-toast__item--success').exists()).toBe(true)
+    expect(wrapper.find('.mint-toast__message').text()).toBe('Analysis complete')
+
+    await wrapper.find('.mint-toast__item').trigger('click')
+
+    expect(toast.toasts.value).toHaveLength(0)
+  })
+})