@morscherlab/mint-sdk 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -1,7 +1,6 @@
 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 {
@@ -146,39 +145,37 @@ describe('AppSidebar', () => {
   })
 
   describe('sidebar chrome and collapse state', () => {
-    it('applies analysis variant defaults for common plugin sidebars', () => {
+    it('renders sections as flat groups with no nested card', () => {
       const wrapper = mount(AppSidebar, {
-        props: {
-          panels: samplePanels,
-          activeView: 'analysis',
-          variant: 'analysis',
-          title: 'Peak Picking',
-        },
+        props: { panels: samplePanels, activeView: 'analysis' },
       })
 
-      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)
+      expect(wrapper.findAll('.mint-sidebar__group')).toHaveLength(2)
+      expect(wrapper.find('.mint-collapsible-card').exists()).toBe(false)
     })
 
-    it('lets explicit props override analysis variant defaults', () => {
+    it('defaults to compact density', () => {
       const wrapper = mount(AppSidebar, {
-        props: {
-          panels: samplePanels,
-          activeView: 'analysis',
-          variant: 'analysis',
-          floating: true,
-          width: '18rem',
-          collapsible: false,
-        },
+        props: { panels: samplePanels, activeView: 'analysis' },
       })
 
-      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)
+      expect(wrapper.find('.mint-sidebar--comfortable').exists()).toBe(false)
+    })
+
+    it('applies the comfortable density class', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis', density: 'comfortable' },
+      })
+
+      expect(wrapper.find('.mint-sidebar--comfortable').exists()).toBe(true)
+    })
+
+    it('maps the deprecated dense=false to comfortable density', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis', dense: false },
+      })
+
+      expect(wrapper.find('.mint-sidebar--comfortable').exists()).toBe(true)
     })
 
     it('renders title, subtitle, and badge in the built-in header', () => {
@@ -210,13 +207,13 @@ describe('AppSidebar', () => {
       })
 
       expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 18rem')
-      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+      expect(wrapper.findAll('.mint-sidebar__group')).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.findAll('.mint-sidebar__group')).toHaveLength(0)
       expect(wrapper.emitted('update:collapsed')).toEqual([[true]])
     })
 
@@ -235,7 +232,7 @@ describe('AppSidebar', () => {
 
       expect(wrapper.find('.mint-sidebar--collapsed').exists()).toBe(true)
       expect(wrapper.find('.collapsed-action').text()).toBe('2')
-      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+      expect(wrapper.findAll('.mint-sidebar__group')).toHaveLength(0)
     })
 
     it('renders a default collapsed rail from active sections', () => {
@@ -278,10 +275,9 @@ describe('AppSidebar', () => {
       expect(wrapper.emitted('update:collapsed')).toEqual([[false]])
     })
 
-    it('renders an empty analysis shell for route-owned sidebar content', () => {
+    it('renders an empty shell for route-owned sidebar content', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          variant: 'analysis',
           title: 'Sequence',
           contentId: 'seqgen-sidebar',
           showWhenEmpty: true,
@@ -292,9 +288,8 @@ describe('AppSidebar', () => {
       })
 
       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.findAll('.mint-sidebar__group')).toHaveLength(0)
       expect(wrapper.find('.generate-action').exists()).toBe(true)
     })
   })
@@ -303,41 +298,37 @@ describe('AppSidebar', () => {
     it('should render sections for active view', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
       })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
+      const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards).toHaveLength(2)
     })
 
-    it('should render CollapsibleCard for each section', () => {
+    it('should render one group for each section', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
       })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
+      const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards).toHaveLength(2)
     })
 
-    it('should pass section label as title to CollapsibleCard', () => {
+    it('should render the section label in the group header', () => {
       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')
+      const cards = wrapper.findAll('.mint-sidebar__group')
+      expect(cards[0].find('.mint-sidebar__group-label').text()).toBe('Parameters')
+      expect(cards[1].find('.mint-sidebar__group-label').text()).toBe('Filters')
     })
 
-    it('should pass section icon to CollapsibleCard', () => {
+    it('should render the section icon in the group header', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels, activeView: 'analysis' },
-        global: { components: { CollapsibleCard } },
       })
-      const cards = wrapper.findAllComponents(CollapsibleCard)
-      expect(cards[0].props('icon')).toBe('⚙')
+      const cards = wrapper.findAll('.mint-sidebar__group')
+      expect(cards[0].find('.mint-sidebar__group-text-icon').text()).toBe('⚙')
     })
 
-    it('passes section badges and actions to CollapsibleCard and re-emits actions', async () => {
+    it('renders section badges and actions and re-emits actions', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
           panels: {
@@ -353,42 +344,60 @@ describe('AppSidebar', () => {
           },
           activeView: 'analysis',
         },
-        global: { components: { CollapsibleCard } },
       })
 
-      const card = wrapper.findComponent(CollapsibleCard)
-      expect(card.props('badge')).toBe(4)
-      expect(card.props('badgeTone')).toBe('cta')
+      const tag = wrapper.get('.mint-sidebar__tag')
+      expect(tag.text()).toBe('4')
+      expect(tag.classes()).toContain('mint-sidebar__tag--cta')
 
-      await card.vm.$emit('action', 'reset')
+      await wrapper.get('.mint-sidebar__group-action').trigger('click')
       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)
+      const cards = wrapper.findAll('.mint-sidebar__group')
+      expect(cards[0].classes()).toContain('mint-sidebar__group--open')
+      expect(cards[1].classes()).toContain('mint-sidebar__group--closed')
+    })
+
+    it('toggles a section open state from its header', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+      })
+
+      await wrapper.findAll('.mint-sidebar__group-toggle')[1].trigger('click')
+      expect(wrapper.findAll('.mint-sidebar__group')[1].classes()).toContain('mint-sidebar__group--open')
+    })
+
+    it('emits update:toggle from the inline section switch', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: { analysis: [{ id: 'filters', label: 'Filters', showToggle: true }] },
+          activeView: 'analysis',
+          toggleState: { filters: false },
+        },
+      })
+
+      await wrapper.get('.mint-sidebar__switch').trigger('click')
+      expect(wrapper.emitted('update:toggle')).toEqual([['filters', true]])
     })
 
     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)
+      expect(wrapper.findAll('.mint-sidebar__group')).toHaveLength(2)
 
       await wrapper.setProps({ activeView: 'results' })
-      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(1)
+      expect(wrapper.findAll('.mint-sidebar__group')).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)
 
@@ -401,7 +410,6 @@ describe('AppSidebar', () => {
     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>',
@@ -414,7 +422,6 @@ describe('AppSidebar', () => {
     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>',
@@ -432,13 +439,12 @@ describe('AppSidebar', () => {
           controls: sampleControls,
           activeView: 'analysis',
         },
-        global: { components: { CollapsibleCard } },
       })
 
-      const cards = wrapper.findAllComponents(CollapsibleCard)
+      const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards).toHaveLength(2)
-      expect(cards[0].props('title')).toBe('Parameters')
-      expect(cards[1].props('title')).toBe('Output')
+      expect(cards[0].find('.mint-sidebar__group-label').text()).toBe('Parameters')
+      expect(cards[1].find('.mint-sidebar__group-label').text()).toBe('Output')
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.05')
     })
 
@@ -447,24 +453,22 @@ describe('AppSidebar', () => {
         props: {
           controls: sampleControls,
         },
-        global: { components: { CollapsibleCard } },
       })
 
-      const cards = wrapper.findAllComponents(CollapsibleCard)
+      const cards = wrapper.findAll('.mint-sidebar__group')
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
       expect(cards).toHaveLength(2)
-      expect(cards[0].props('title')).toBe('Parameters')
+      expect(cards[0].find('.mint-sidebar__group-label').text()).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.findAll('.mint-sidebar__group')).toHaveLength(2)
       expect(wrapper.attributes('viewids')).toBeUndefined()
       expect(wrapper.attributes('defaultview')).toBeUndefined()
     })
@@ -491,12 +495,11 @@ describe('AppSidebar', () => {
           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.findAll('.mint-sidebar__group')).toHaveLength(1)
+      expect(wrapper.find('.mint-sidebar__group-label').text()).toBe('Parameters')
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
       expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
 
@@ -538,7 +541,6 @@ describe('AppSidebar', () => {
             },
           },
         },
-        global: { components: { CollapsibleCard } },
       })
 
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
@@ -552,7 +554,6 @@ describe('AppSidebar', () => {
           activeView: 'analysis',
           values: { untouched: 'keep' },
         },
-        global: { components: { CollapsibleCard } },
       })
 
       await wrapper.find('input').setValue('0.5')
@@ -569,7 +570,6 @@ describe('AppSidebar', () => {
       const workspace = useControlWorkspace(sampleControls)
       const wrapper = mount(AppSidebar, {
         props: workspace.sidebar,
-        global: { components: { CollapsibleCard } },
       })
 
       expect(wrapper.props('modelValue')).toBe(workspace.values)
@@ -594,7 +594,6 @@ describe('AppSidebar', () => {
             threshold: '0.25',
           },
         },
-        global: { components: { CollapsibleCard } },
       })
 
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
@@ -603,9 +602,9 @@ describe('AppSidebar', () => {
         controls: sampleControls,
       })
 
-      const cards = wrapper.findAllComponents(CollapsibleCard)
+      const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards).toHaveLength(2)
-      expect(cards[0].props('title')).toBe('Parameters')
+      expect(cards[0].find('.mint-sidebar__group-label').text()).toBe('Parameters')
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
       expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
     })
@@ -621,13 +620,12 @@ describe('AppSidebar', () => {
             ],
           },
         },
-        global: { components: { CollapsibleCard } },
       })
 
-      const cards = wrapper.findAllComponents(CollapsibleCard)
+      const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards).toHaveLength(2)
-      expect(cards[0].props('title')).toBe('Manual Parameters')
-      expect(cards[1].props('title')).toBe('Output')
+      expect(cards[0].find('.mint-sidebar__group-label').text()).toBe('Manual Parameters')
+      expect(cards[1].find('.mint-sidebar__group-label').text()).toBe('Output')
     })
 
     it('renders FormBuilder schemas when a section has no custom slot', () => {
@@ -638,7 +636,6 @@ describe('AppSidebar', () => {
           forms: sampleForms,
           values: { threshold: '0.25' },
         },
-        global: { components: { CollapsibleCard } },
       })
 
       expect(wrapper.find('.mint-form-builder').exists()).toBe(true)
@@ -658,7 +655,6 @@ describe('AppSidebar', () => {
             },
           },
         },
-        global: { components: { CollapsibleCard } },
       })
 
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.35')
@@ -681,7 +677,6 @@ describe('AppSidebar', () => {
           forms: sampleForms,
           showFormActions: true,
         },
-        global: { components: { CollapsibleCard } },
       })
 
       expect(wrapper.find('.mint-form-actions').exists()).toBe(true)
@@ -695,7 +690,6 @@ describe('AppSidebar', () => {
           forms: sampleForms,
           values: { threshold: '0.25', untouched: 'keep' },
         },
-        global: { components: { CollapsibleCard } },
       })
 
       await wrapper.find('input').setValue('0.5')
@@ -714,7 +708,6 @@ describe('AppSidebar', () => {
           forms: sampleForms,
           modelValue: { threshold: '0.25', untouched: 'keep' },
         },
-        global: { components: { CollapsibleCard } },
       })
 
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
@@ -738,7 +731,6 @@ describe('AppSidebar', () => {
           activeView: 'analysis',
           forms: sampleForms,
         },
-        global: { components: { CollapsibleCard } },
         slots: {
           'section-parameters': '<div class="manual-controls">Manual controls</div>',
         },
@@ -752,7 +744,6 @@ describe('AppSidebar', () => {
   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>',
         },
@@ -819,7 +810,7 @@ describe('AppSidebar', () => {
         props: { panels: samplePanels },
       })
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
-      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+      expect(wrapper.findAll('.mint-sidebar__group')).toHaveLength(2)
       expect(wrapper.find('.mint-sidebar__sections').exists()).toBe(true)
     })
   })
@@ -841,7 +832,6 @@ describe('AppSidebar', () => {
     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>',

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import AppToastContainer from '../../components/AppToastContainer.vue'
 import { useToast } from '../../composables/useToast'
@@ -34,4 +34,58 @@ describe('AppToastContainer', () => {
 
     expect(toast.toasts.value).toHaveLength(0)
   })
+
+  it('renders message-only toasts as the title (back-compat)', async () => {
+    const wrapper = mountContainer()
+    toast.info('Saved', 10000)
+    await nextTick()
+
+    expect(wrapper.find('.mint-toast__title').text()).toBe('Saved')
+    expect(wrapper.find('.mint-toast__detail').exists()).toBe(false)
+    expect(wrapper.find('.mint-toast__progress').exists()).toBe(true)
+  })
+
+  it('renders detail and caps actions at two', async () => {
+    const wrapper = mountContainer()
+    toast.push({
+      title: 'Deleted 3 samples',
+      detail: 'Undo within 30 s.',
+      type: 'error',
+      duration: 10000,
+      actions: [
+        { label: 'Undo', onClick: () => {}, primary: true },
+        { label: 'Dismiss', onClick: () => {} },
+        { label: 'Extra', onClick: () => {} },
+      ],
+    })
+    await nextTick()
+
+    expect(wrapper.find('.mint-toast__detail').text()).toBe('Undo within 30 s.')
+    expect(wrapper.findAll('.mint-toast__action')).toHaveLength(2)
+    expect(wrapper.find('.mint-toast__action--primary').text()).toBe('Undo')
+  })
+
+  it('renders no TTL bar and never auto-dismisses when progress is indeterminate', async () => {
+    vi.useFakeTimers()
+    try {
+      const wrapper = mountContainer()
+      toast.push({ title: 'Uploading', type: 'info', progress: 'indeterminate', duration: 100 })
+      await nextTick()
+
+      expect(wrapper.find('.mint-toast__progress--indeterminate').exists()).toBe(true)
+      vi.advanceTimersByTime(1000)
+      expect(toast.toasts.value).toHaveLength(1)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('renders the ×N pill for a collapsed stack', async () => {
+    const wrapper = mountContainer()
+    toast.push({ title: 'Retention time drift', type: 'warning', count: 4, duration: 10000 })
+    await nextTick()
+
+    expect(wrapper.find('.mint-toast__count').text()).toBe('×4')
+    expect(wrapper.find('.mint-toast__item--stacked').exists()).toBe(true)
+  })
 })

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

@@ -32,7 +32,6 @@ describe('BioTemplatePresetWorkspaceView', () => {
     expect(wrapper.find('.mint-bio-template-preset-workspace').exists()).toBe(true)
     expect(wrapper.text()).toContain('Well-plate screen preset saves')
     expect(wrapper.find('.mint-sidebar').exists()).toBe(true)
-    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('analysis')
     expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(true)
     expect(wrapper.text()).toContain('plate-map')
     expect(wrapper.text()).toContain('dose-response')
@@ -69,26 +68,6 @@ describe('BioTemplatePresetWorkspaceView', () => {
     expect(wrapper.text()).toContain('dose-response')
   })
 
-  it('passes through sidebar variant overrides', () => {
-    const wrapper = mount(BioTemplatePresetWorkspaceView, {
-      props: {
-        preset: 'wellplate-screen',
-        sidebarVariant: 'default',
-      },
-      global: {
-        stubs: {
-          DataFrame: true,
-          DoseCalculator: true,
-          PlateMapEditor: true,
-          SampleSelector: true,
-          WellPlate: true,
-        },
-      },
-    })
-
-    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('default')
-  })
-
   it('updates the internally generated workspace when the preset changes after mount', async () => {
     const wrapper = mount(BioTemplatePresetWorkspaceView, {
       props: {

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

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import ChartContainer from '../../components/ChartContainer.vue'
+
+describe('ChartContainer', () => {
+  it('renders workbench header, subhead, and footer slots in a filling frame', () => {
+    const wrapper = mount(ChartContainer, {
+      props: { variant: 'frame' },
+      slots: {
+        header: 'Header',
+        subhead: 'Subhead',
+        default: 'Chart',
+        footer: 'Footer',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-chart--frame')
+    expect(wrapper.text()).toContain('Header')
+    expect(wrapper.text()).toContain('Subhead')
+    expect(wrapper.text()).toContain('Chart')
+    expect(wrapper.get('.mint-chart__footer').text()).toBe('Footer')
+  })
+})

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

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import AdductText from '../../components/AdductText.vue'
+import ChemicalFormula from '../../components/ChemicalFormula.vue'
+
+describe('ChemicalFormula', () => {
+  it('renders formula typography and an adduct as separate parts', () => {
+    const wrapper = mount(ChemicalFormula, {
+      props: { formula: 'C6H12O6', adduct: '[M+H]+', pill: true },
+    })
+
+    expect(wrapper.findAll('.mint-chem-formula__subscript').map(node => node.text()))
+      .toEqual(['6', '12', '6'])
+    expect(wrapper.getComponent(AdductText).text()).toBe('[M+H]+')
+    expect(wrapper.classes()).toContain('mint-chem-formula--pill')
+  })
+
+  it('renders explicit empty text when no formula is available', () => {
+    expect(mount(ChemicalFormula, { props: { emptyText: 'Unknown' } }).text()).toBe('Unknown')
+  })
+
+  it('supports standalone sans-serif adduct labels', () => {
+    expect(mount(AdductText, { props: { value: '[M-H]-', font: 'sans' } }).classes())
+      .toContain('mint-adduct-text--sans')
+  })
+})

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

@@ -105,7 +105,6 @@ describe('ControlWorkspaceView', () => {
     expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('analysis')
     expect(wrapper.findComponent(AppLayout).props('responsiveSidebar')).toBe(true)
     expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('analysis')
-    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('analysis')
     expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject(workspace.values)
   })
 
@@ -123,7 +122,6 @@ describe('ControlWorkspaceView', () => {
     })
 
     expect(wrapper.findComponent(AppLayout).props('responsiveSidebar')).toBe(false)
-    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('default')
     expect(wrapper.findComponent(AppSidebar).props('title')).toBe('Peak Picking')
     expect(wrapper.findComponent(AppSidebar).props('subtitle')).toBe('Current experiment')
     expect(wrapper.findComponent(AppSidebar).props('badge')).toBe(3)

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

@@ -102,7 +102,6 @@ describe('DoseDesignWorkspaceView', () => {
     const wellPlate = wrapper.findComponent(WellPlateStub)
     const doseCalculator = wrapper.findComponent(DoseCalculatorStub)
 
-    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('analysis')
     expect(wellPlate.props()).toMatchObject({
       modelValue: ['A1'],
       format: 384,
@@ -150,7 +149,6 @@ describe('DoseDesignWorkspaceView', () => {
     })
 
     expect(wrapper.findComponent(AppLayout).props('responsiveSidebar')).toBe(false)
-    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('default')
     expect(wrapper.findComponent(AppSidebar).props('title')).toBe('Dose Controls')
     expect(wrapper.findComponent(AppSidebar).props('subtitle')).toBe('Plate setup')
     expect(wrapper.findComponent(AppSidebar).props('badge')).toBe('ready')