@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.3

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

@@ -1,857 +0,0 @@
-import { describe, it, expect } from 'vitest'
-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: [
-    { id: 'parameters', label: 'Parameters', icon: '⚙' },
-    { id: 'filters', label: 'Filters', icon: '🔍', defaultOpen: false },
-  ],
-  results: [
-    { id: 'display', label: 'Display Options' },
-  ],
-}
-
-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', () => {
-      const wrapper = mount(AppSidebar)
-      expect(wrapper.find('.mint-sidebar').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar--left').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(true)
-    })
-
-    it('should apply default width', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-      })
-      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 280px')
-    })
-
-    it('should be hidden when no panels match active view', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'settings' },
-      })
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
-    })
-
-    it('should be hidden when activeView is empty', () => {
-      const wrapper = mount(AppSidebar)
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
-    })
-  })
-
-  describe('side prop', () => {
-    it('should default to left side', () => {
-      const wrapper = mount(AppSidebar)
-      expect(wrapper.find('.mint-sidebar--left').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar--right').exists()).toBe(false)
-    })
-
-    it('should apply right side class', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { side: 'right' },
-      })
-      expect(wrapper.find('.mint-sidebar--right').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar--left').exists()).toBe(false)
-    })
-  })
-
-  describe('floating prop', () => {
-    it('should apply floating class by default', () => {
-      const wrapper = mount(AppSidebar)
-      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar--static').exists()).toBe(false)
-    })
-
-    it('should apply static class when floating is false', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { floating: false },
-      })
-      expect(wrapper.find('.mint-sidebar--static').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(false)
-    })
-  })
-
-  describe('width prop', () => {
-    it('should apply custom width', () => {
-      const wrapper = mount(AppSidebar, {
-        props: {
-          panels: samplePanels,
-          activeView: 'analysis',
-          width: '300px',
-        },
-      })
-      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 300px')
-    })
-
-    it('should handle different CSS units', () => {
-      const wrapper = mount(AppSidebar, {
-        props: {
-          panels: samplePanels,
-          activeView: 'analysis',
-          width: '20rem',
-        },
-      })
-      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 20rem')
-    })
-  })
-
-  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 a default collapsed rail from active sections', () => {
-      const wrapper = mount(AppSidebar, {
-        props: {
-          panels: {
-            analysis: [
-              {
-                id: 'filters',
-                label: 'Feature Filters',
-                icon: 'M3 4.5h18m-15 6h12m-9 6h6',
-                badge: 2,
-                badgeTone: 'warning',
-              },
-            ],
-          },
-          activeView: 'analysis',
-          collapsible: true,
-          collapsed: true,
-        },
-      })
-
-      expect(wrapper.find('.mint-sidebar__rail-item').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar__rail-svg').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar__rail-badge').text()).toBe('2')
-      expect(wrapper.find('.mint-sidebar__rail-badge').classes()).toContain('mint-sidebar__rail-badge--warning')
-    })
-
-    it('expands when a default collapsed rail item is clicked', async () => {
-      const wrapper = mount(AppSidebar, {
-        props: {
-          panels: samplePanels,
-          activeView: 'analysis',
-          collapsible: true,
-          defaultCollapsed: true,
-        },
-      })
-
-      await wrapper.get('.mint-sidebar__rail-item').trigger('click')
-      expect(wrapper.emitted('update:collapsed')).toEqual([[false]])
-    })
-
-    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, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-      })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
-      expect(cards).toHaveLength(2)
-    })
-
-    it('should render CollapsibleCard for each section', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-      })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
-      expect(cards).toHaveLength(2)
-    })
-
-    it('should pass section label as title to CollapsibleCard', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-      })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
-      expect(cards[0].props('title')).toBe('Parameters')
-      expect(cards[1].props('title')).toBe('Filters')
-    })
-
-    it('should pass section icon to CollapsibleCard', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-      })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
-      expect(cards[0].props('icon')).toBe('⚙')
-    })
-
-    it('passes section badges and actions to CollapsibleCard and re-emits actions', async () => {
-      const wrapper = mount(AppSidebar, {
-        props: {
-          panels: {
-            analysis: [
-              {
-                id: 'filters',
-                label: 'Feature Filters',
-                badge: 4,
-                badgeTone: 'cta',
-                actions: [{ id: 'reset', label: 'Reset filters' }],
-              },
-            ],
-          },
-          activeView: 'analysis',
-        },
-        global: { components: { CollapsibleCard } },
-      })
-
-      const card = wrapper.findComponent(CollapsibleCard)
-      expect(card.props('badge')).toBe(4)
-      expect(card.props('badgeTone')).toBe('cta')
-
-      await card.vm.$emit('action', 'reset')
-      expect(wrapper.emitted('section-action')).toEqual([['filters', 'reset']])
-    })
-
-    it('should respect defaultOpen on sections', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-      })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
-      expect(cards[0].props('defaultOpen')).toBe(true)
-      expect(cards[1].props('defaultOpen')).toBe(false)
-    })
-
-    it('should switch sections when activeView changes', async () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-      })
-      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
-
-      await wrapper.setProps({ activeView: 'results' })
-      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(1)
-    })
-
-    it('should hide when switching to view with no panels', async () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-      })
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
-
-      await wrapper.setProps({ activeView: 'settings' })
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
-    })
-  })
-
-  describe('section slots', () => {
-    it('should render named section slots', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-        slots: {
-          'section-parameters': '<div class="params-content">Parameters content</div>',
-          'section-filters': '<div class="filters-content">Filters content</div>',
-        },
-      })
-      expect(wrapper.find('.params-content').exists()).toBe(true)
-      expect(wrapper.find('.filters-content').exists()).toBe(true)
-    })
-
-    it('should not render section slots for inactive view', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'results' },
-        global: { components: { CollapsibleCard } },
-        slots: {
-          'section-parameters': '<div class="params-content">Parameters content</div>',
-          'section-display': '<div class="display-content">Display content</div>',
-        },
-      })
-      expect(wrapper.find('.params-content').exists()).toBe(false)
-      expect(wrapper.find('.display-content').exists()).toBe(true)
-    })
-  })
-
-  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' },
-        slots: {
-          header: '<div class="custom-header">Header</div>',
-        },
-      })
-      expect(wrapper.find('.mint-sidebar__header').exists()).toBe(true)
-      expect(wrapper.find('.custom-header').text()).toBe('Header')
-    })
-
-    it('should render footer slot', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        slots: {
-          footer: '<div class="custom-footer">Footer</div>',
-        },
-      })
-      expect(wrapper.find('.mint-sidebar__footer').exists()).toBe(true)
-      expect(wrapper.find('.custom-footer').text()).toBe('Footer')
-    })
-
-    it('should not render header when slot is not provided', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-      })
-      expect(wrapper.find('.mint-sidebar__header').exists()).toBe(false)
-    })
-
-    it('should not render footer when slot is not provided', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-      })
-      expect(wrapper.find('.mint-sidebar__footer').exists()).toBe(false)
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should handle empty panels object', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: {}, activeView: 'analysis' },
-      })
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
-    })
-
-    it('should handle view with empty sections array', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: { empty: [] }, activeView: 'empty' },
-      })
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
-    })
-
-    it('uses the first non-empty panel view when activeView is omitted', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels },
-      })
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
-      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
-      expect(wrapper.find('.mint-sidebar__sections').exists()).toBe(true)
-    })
-  })
-
-  describe('integration: multiple classes', () => {
-    it('should apply multiple classes correctly', () => {
-      const wrapper = mount(AppSidebar, {
-        props: {
-          side: 'left',
-          floating: false,
-        },
-      })
-
-      const sidebar = wrapper.find('.mint-sidebar')
-      expect(sidebar.classes()).toContain('mint-sidebar--left')
-      expect(sidebar.classes()).toContain('mint-sidebar--static')
-    })
-
-    it('should render all slots with sections', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
-        slots: {
-          header: '<div class="header">Header</div>',
-          footer: '<div class="footer">Footer</div>',
-          'section-parameters': '<div>Params</div>',
-        },
-      })
-
-      expect(wrapper.find('.header').exists()).toBe(true)
-      expect(wrapper.find('.footer').exists()).toBe(true)
-      expect(wrapper.find('.mint-sidebar__sections').exists()).toBe(true)
-    })
-  })
-})