@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

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

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import BaseModal from '../../components/BaseModal.vue'
 import type { ModalTab } from '../../types'
@@ -129,5 +130,94 @@ describe('BaseModal', () => {
       const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'profile' })
       expect(wrapper.find('.mint-modal__pane-body .body-content').exists()).toBe(true)
     })
+
+    it('should render a heading for each rail section when tabs carry a section', () => {
+      const sectionTabs: ModalTab[] = [
+        { id: 'general', label: 'General', section: 'Plugin' },
+        { id: 'advanced', label: 'Advanced', section: 'Plugin' },
+        { id: 'appearance', label: 'Appearance', section: 'Personal' },
+      ]
+      const wrapper = mountModal({ layout: 'rail', tabs: sectionTabs, activeTab: 'general' })
+      expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Plugin', 'Personal'])
+    })
+
+    it('should render a divider before a rail section that follows another', () => {
+      const sectionTabs: ModalTab[] = [
+        { id: 'general', label: 'General', section: 'Plugin' },
+        { id: 'appearance', label: 'Appearance', section: 'Personal' },
+      ]
+      const wrapper = mountModal({ layout: 'rail', tabs: sectionTabs, activeTab: 'general' })
+      expect(wrapper.findAll('.mint-modal__rail-divider')).toHaveLength(1)
+    })
+
+    it('should not render rail section headings when no tab carries a section', () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'profile' })
+      expect(wrapper.find('.mint-modal__rail-section').exists()).toBe(false)
+    })
+
+    it('should render the pane-header slot in place of the default pane title', () => {
+      const wrapper = mountModal(
+        { layout: 'rail', tabs: railTabs, activeTab: 'security' },
+        { 'pane-header': '<div class="custom-head">Custom</div>' },
+      )
+      expect(wrapper.find('.mint-modal__pane-header .custom-head').exists()).toBe(true)
+    })
+
+    it('should pass the active tab to the pane-header slot', () => {
+      const wrapper = mount(BaseModal, {
+        props: { modelValue: true, layout: 'rail', tabs: railTabs, activeTab: 'security' },
+        slots: { 'pane-header': '<template #pane-header="{ tab }"><span class="slot-tab">{{ tab.label }}</span></template>' },
+        global: { stubs: { teleport: true } },
+      })
+      expect(wrapper.find('.slot-tab').text()).toBe('Security')
+    })
+  })
+
+  describe('keyboard', () => {
+    function pressEscape() {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    }
+
+    it('should close the topmost modal when Escape is pressed with two modals open', () => {
+      const outer = mountModal()
+      const inner = mountModal({ title: 'Nested' })
+      pressEscape()
+      expect(inner.emitted('update:modelValue')).toEqual([[false]])
+      outer.unmount()
+      inner.unmount()
+    })
+
+    it('should keep the outer modal open when Escape closes a nested modal', () => {
+      const outer = mountModal()
+      const inner = mountModal({ title: 'Nested' })
+      pressEscape()
+      expect(outer.emitted('update:modelValue')).toBeUndefined()
+      outer.unmount()
+      inner.unmount()
+    })
+
+    it('should focus the first focusable element when mounted already open', async () => {
+      const attached = mount(BaseModal, {
+        props: { modelValue: true, title: 'Settings' },
+        slots: { default: '<input class="first-field">' },
+        attachTo: document.body,
+      })
+      await nextTick()
+      await nextTick()
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Close modal')
+      attached.unmount()
+    })
+
+    it('should focus the autofocus element when the modal content marks one', async () => {
+      const attached = mount(BaseModal, {
+        props: { modelValue: true, title: 'Settings' },
+        slots: { default: '<input class="first-field" autofocus>' },
+        attachTo: document.body,
+      })
+      await nextTick()
+      await nextTick()
+      expect(document.activeElement?.className).toBe('first-field')
+      attached.unmount()
+    })
   })
 })

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

@@ -22,4 +22,12 @@ describe('BaseRadioGroup', () => {
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([384])
   })
+
+  it('should render the list wrapper without a size box when size is set', () => {
+    const wrapper = mount(BaseRadioGroup, {
+      props: { name: 'mode', size: 'lg', options: ['linear', 'log'] },
+    })
+
+    expect(wrapper.get('.mint-radio-option__input-wrapper').classes()).toEqual(['mint-radio-option__input-wrapper'])
+  })
 })

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

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseSlider from '../../components/BaseSlider.vue'
+
+const stops = [
+  { value: 0, color: '#3b82f6' },
+  { value: 100, color: '#ef4444' },
+]
+
+describe('BaseSlider', () => {
+  describe('without the color options', () => {
+    it('should render the primary fill when no color stops are passed', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })
+
+      expect(wrapper.find('.mint-slider__fill').exists()).toBe(true)
+    })
+
+    it('should leave the track without an inline background when no color stops are passed', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })
+
+      expect(wrapper.get('.mint-slider__track').attributes('style')).not.toContain('background')
+    })
+
+    it('should render the value as plain text when no thresholds are passed', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })
+
+      expect(wrapper.get('.mint-slider__value').classes()).toEqual(['mint-slider__value'])
+    })
+
+    it('should not render range labels when showLabels is not set', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })
+
+      expect(wrapper.find('.mint-slider__labels').exists()).toBe(false)
+    })
+  })
+
+  describe('colorStops', () => {
+    it('should paint the track with a gradient built from the stops', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40, colorStops: stops } })
+
+      expect(wrapper.get('.mint-slider__track').attributes('style')).toContain(
+        'linear-gradient(to right, #3b82f6 0%, #ef4444 100%)',
+      )
+    })
+
+    it('should drop the primary fill so the gradient stays visible', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40, colorStops: stops } })
+
+      expect(wrapper.find('.mint-slider__fill').exists()).toBe(false)
+    })
+  })
+
+  describe('thresholds', () => {
+    it.each([
+      [10, 'success'],
+      [30, 'warning'],
+      [31, 'error'],
+    ])('should tone the value badge %s%% as %s for thresholds [10, 30]', (value, tone) => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: value, thresholds: [10, 30] } })
+
+      expect(wrapper.get('.mint-slider__value').classes()).toContain(`mint-slider__value--${tone}`)
+    })
+
+    it('should compare thresholds against the percentage of the range', () => {
+      const wrapper = mount(BaseSlider, {
+        props: { modelValue: 5, min: 0, max: 10, thresholds: [10, 30] },
+      })
+
+      expect(wrapper.get('.mint-slider__value').classes()).toContain('mint-slider__value--error')
+    })
+  })
+
+  describe('sizes (1f)', () => {
+    it.each([
+      ['sm', '2px'],
+      ['md', '4px'],
+      ['lg', '6px'],
+    ] as const)('should draw a %s track %s tall', (size, height) => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40, size } })
+
+      expect((wrapper.get('.mint-slider__track').element as HTMLElement).style.height).toBe(height)
+    })
+
+    it.each([
+      ['sm', '12px'],
+      ['md', '14px'],
+      ['lg', '18px'],
+    ] as const)('should draw a %s thumb %s wide', (size, width) => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40, size } })
+
+      expect((wrapper.get('.mint-slider__thumb').element as HTMLElement).style.width).toBe(width)
+    })
+
+    it('should place the thumb after the native input so the focus rule can reach it', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })
+
+      expect(wrapper.find('.mint-slider__input + .mint-slider__thumb').exists()).toBe(true)
+    })
+  })
+
+  describe('labels', () => {
+    it('should label the ends with min and max by default', () => {
+      const wrapper = mount(BaseSlider, { props: { modelValue: 5, min: 2, max: 8, showLabels: true } })
+
+      expect(wrapper.findAll('.mint-slider__labels span').map(label => label.text())).toEqual(['2', '8'])
+    })
+
+    it('should use custom end labels when given', () => {
+      const wrapper = mount(BaseSlider, {
+        props: { modelValue: 5, showLabels: true, minLabel: 'Low', maxLabel: 'High' },
+      })
+
+      expect(wrapper.findAll('.mint-slider__labels span').map(label => label.text())).toEqual(['Low', 'High'])
+    })
+  })
+})

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

@@ -37,4 +37,11 @@ describe('BaseToggle', () => {
 
     expect(wrapper.get('[role="switch"]').attributes('aria-label')).toBe('Toggle')
   })
+
+  it('should keep the knob class list state-free when switched on', () => {
+    // The on position comes from the track modifier (translateX), not a knob class.
+    const wrapper = mount(BaseToggle, { props: { modelValue: true } })
+
+    expect(wrapper.get('.mint-toggle__knob').classes()).toEqual(['mint-toggle__knob', 'mint-toggle__knob--md'])
+  })
 })

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

@@ -31,22 +31,30 @@ describe('BatchProgressList', () => {
     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,
-      },
-    })
+  it('should show a failed item message inline when the item has an error', () => {
+    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
+    expect(wrapper.get('.mint-batch-progress__item-message').text()).toBe('Import failed')
+  })
 
-    expect(wrapper.find('.mint-batch-progress__item-message').exists()).toBe(false)
+  it('should count done over total in the header when a title is set', () => {
+    const wrapper = mount(BatchProgressList, { props: { title: 'Import', items, autoScroll: false } })
+    expect(wrapper.get('.mint-batch-progress__count').text()).toBe('1 / 3')
+  })
 
-    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')
+  it('should collapse completed items behind a toggle when the list renders', () => {
+    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
+    expect(wrapper.get('.mint-batch-progress__completed-toggle').text()).toBe('Show 1 completed')
+  })
+
+  it('should hide completed items by default when the list renders', () => {
+    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
+    expect(wrapper.findAll('.mint-batch-progress__item').map(item => item.attributes('data-item-id')))
+      .toEqual(['b', 'c'])
+  })
 
-    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)
+  it('should reveal completed items when the toggle is clicked', async () => {
+    const wrapper = mount(BatchProgressList, { props: { items, autoScroll: false } })
+    await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
+    expect(wrapper.findAll('.mint-batch-progress__item')).toHaveLength(3)
   })
 })

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

@@ -18,7 +18,7 @@ describe('BioTemplateExperimentWorkspaceView', () => {
       },
       global: {
         stubs: {
-          PlateMapEditor: true,
+          PlateEditor: true,
           WellPlate: true,
         },
       },
@@ -51,7 +51,7 @@ describe('BioTemplateExperimentWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -87,7 +87,7 @@ describe('BioTemplateExperimentWorkspaceView', () => {
       },
       global: {
         stubs: {
-          PlateMapEditor: true,
+          PlateEditor: true,
           WellPlate: true,
         },
       },
@@ -137,7 +137,7 @@ describe('BioTemplateExperimentWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },

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

@@ -22,7 +22,7 @@ const globalOptions = {
     DataFrame: true,
     DoseCalculator: true,
     ExperimentTimeline: true,
-    PlateMapEditor: true,
+    PlateEditor: true,
     SampleSelector: true,
     ScheduleCalendar: true,
     WellPlate: true,

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

@@ -22,7 +22,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -52,7 +52,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -77,7 +77,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -104,7 +104,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -143,7 +143,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -213,7 +213,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -241,7 +241,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -266,7 +266,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },

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

@@ -18,7 +18,7 @@ describe('BioTemplateRenderer', () => {
         stubs: {
           DataFrame: true,
           DoseCalculator: true,
-          PlateMapEditor: true,
+          PlateEditor: true,
           SampleSelector: true,
           WellPlate: true,
         },
@@ -26,7 +26,7 @@ describe('BioTemplateRenderer', () => {
     })
 
     expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(true)
-    expect(wrapper.find('[data-template-component="PlateMapEditor"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="PlateEditor"]').exists()).toBe(true)
     expect(wrapper.find('[data-template-component="DoseCalculator"]').exists()).toBe(true)
     expect(wrapper.findAll('[data-template-component="WellPlate"]')).toHaveLength(2)
     expect(wrapper.text()).toContain('plate-map')

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

@@ -20,4 +20,49 @@ describe('Breadcrumb', () => {
 
     expect(wrapper.emitted('navigate')).toEqual([[{ label: 'Project' }]])
   })
+
+  const long = ['Metabolomics', 'EXP-042', 'Batch 12', 'LC-MS run', 'Peak areas']
+
+  it('should collapse the middle segments when the trail has more than four', () => {
+    const wrapper = mount(Breadcrumb, { props: { items: long } })
+
+    expect(wrapper.findAll('.mint-breadcrumb__item').map(item => item.text())).toEqual([
+      'Metabolomics',
+      '…',
+      'LC-MS run',
+      'Peak areas',
+    ])
+  })
+
+  it('should show every segment when the ellipsis is clicked', async () => {
+    const wrapper = mount(Breadcrumb, { props: { items: long } })
+
+    await wrapper.find('.mint-breadcrumb__ellipsis').trigger('click')
+
+    expect(wrapper.findAll('.mint-breadcrumb__item')).toHaveLength(5)
+  })
+
+  it('should keep the original index in the item slot when collapsed', () => {
+    const wrapper = mount(Breadcrumb, {
+      props: { items: long },
+      slots: { item: '<template #item="{ index }">{{ index }}</template>' },
+    })
+
+    expect(wrapper.findAll('.mint-breadcrumb__item').map(item => item.text())).toEqual(['0', '…', '3', '4'])
+  })
+
+  it('should render ID segments in mono when the label looks like an ID', () => {
+    const wrapper = mount(Breadcrumb, { props: { items: ['Metabolomics', 'EXP-042', 'Results'] } })
+
+    expect(wrapper.findAll('.mint-breadcrumb__link')[1].classes()).toContain('mint-breadcrumb__segment--id')
+  })
+
+  it('should collapse again when the trail changes after expanding', async () => {
+    const wrapper = mount(Breadcrumb, { props: { items: long } })
+    await wrapper.find('.mint-breadcrumb__ellipsis').trigger('click')
+
+    await wrapper.setProps({ items: [...long.slice(0, 4), 'Report'] })
+
+    expect(wrapper.find('.mint-breadcrumb__ellipsis').exists()).toBe(true)
+  })
 })

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

@@ -33,4 +33,18 @@ describe('CalendarGridPanelInternal', () => {
     expect(wrapper.emitted('next-month')).toHaveLength(1)
     expect(wrapper.emitted('select')?.[0]).toEqual([days[0]])
   })
+
+  it('should keep the today marker on a selected day when today is selected', () => {
+    const today = new Date()
+    const wrapper = mount(CalendarGridPanelInternal, {
+      props: {
+        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        monthYear: 'Today',
+        days: [{ date: today, isCurrentMonth: true, isDisabled: false }],
+        selectedDate: today,
+      },
+    })
+
+    expect(wrapper.get('.mint-date-picker__day--selected').classes()).toContain('mint-date-picker__day--today')
+  })
 })

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

@@ -22,3 +22,26 @@ describe('ChartContainer', () => {
     expect(wrapper.get('.mint-chart__footer').text()).toBe('Footer')
   })
 })
+
+describe('ChartContainer header legend (9a)', () => {
+  const legendItems = [
+    { label: 'Control', color: 'var(--mint-sample-1)' },
+    { label: 'Treatment A', color: 'var(--mint-sample-2)', hidden: true },
+  ]
+
+  it('should render legend items in the header when legendItems are given', () => {
+    const wrapper = mount(ChartContainer, { props: { legendItems } })
+    expect(wrapper.findAll('.mint-chart__header .mint-chart__legend-item')).toHaveLength(2)
+  })
+
+  it('should emit legend-toggle with the index when a legend item is clicked', async () => {
+    const wrapper = mount(ChartContainer, { props: { legendItems } })
+    await wrapper.findAll('.mint-chart__legend-item')[1].trigger('click')
+    expect(wrapper.emitted('legend-toggle')?.[0]).toEqual([1])
+  })
+
+  it('should mark a hidden series as not pressed when its item is hidden', () => {
+    const wrapper = mount(ChartContainer, { props: { legendItems } })
+    expect(wrapper.findAll('.mint-chart__legend-item')[1].attributes('aria-pressed')).toBe('false')
+  })
+})

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

@@ -16,6 +16,11 @@ describe('ChemicalFormula', () => {
     expect(wrapper.classes()).toContain('mint-chem-formula--pill')
   })
 
+  it('should render a hydrate coefficient full size when the formula has a hydrate', () => {
+    const wrapper = mount(ChemicalFormula, { props: { formula: 'CuSO4·5H2O' } })
+    expect(wrapper.find('.mint-chem-formula__coefficient').text()).toBe('5')
+  })
+
   it('renders explicit empty text when no formula is available', () => {
     expect(mount(ChemicalFormula, { props: { emptyText: 'Unknown' } }).text()).toBe('Unknown')
   })
@@ -24,4 +29,14 @@ describe('ChemicalFormula', () => {
     expect(mount(AdductText, { props: { value: '[M-H]-', font: 'sans' } }).classes())
       .toContain('mint-adduct-text--sans')
   })
+
+  it('should render a trailing adduct charge as a superscript when the value is bracketed', () => {
+    expect(mount(AdductText, { props: { value: '[M+2H]2+' } }).get('.mint-adduct-text__charge').text())
+      .toBe('2+')
+  })
+
+  it('should keep an unbracketed adduct as one run when no charge can be split', () => {
+    expect(mount(AdductText, { props: { value: 'M+H' } }).find('.mint-adduct-text__charge').exists())
+      .toBe(false)
+  })
 })

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

@@ -379,9 +379,15 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card', showToggle: true, toggleValue: true },
       })
 
-      const toggle = wrapper.find('[role="switch"]')
-      expect(toggle.attributes('aria-checked')).toBe('true')
-      expect(toggle.classes()).toContain('mint-collapsible-card__toggle-track--on')
+      expect(wrapper.get('[role="switch"]').attributes('aria-checked')).toBe('true')
+    })
+
+    it('should render the shared BaseToggle when showToggle is true (10a)', () => {
+      const wrapper = mount(CollapsibleCard, {
+        props: { title: 'Test Card', showToggle: true },
+      })
+
+      expect(wrapper.find('.mint-collapsible-card__toggle .mint-toggle__track').exists()).toBe(true)
     })
 
     it('should emit update:toggleValue event', async () => {
@@ -389,7 +395,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card', showToggle: true, toggleValue: false },
       })
 
-      await wrapper.find('.mint-collapsible-card__toggle').trigger('click')
+      await wrapper.find('[role="switch"]').trigger('click')
 
       expect(wrapper.emitted('update:toggleValue')).toBeTruthy()
       expect(wrapper.emitted('update:toggleValue')?.[0]).toEqual([true])
@@ -401,7 +407,7 @@ describe('CollapsibleCard', () => {
       })
 
       // Click toggle should not expand/collapse the card
-      await wrapper.find('.mint-collapsible-card__toggle').trigger('click')
+      await wrapper.find('[role="switch"]').trigger('click')
       const body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).toBe('none')
     })
@@ -416,10 +422,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const track = wrapper.find('.mint-collapsible-card__toggle-track')
-      const style = track.attributes('style')
-      expect(style).toContain('background-color: #ff0000')
-      expect(style).toContain('border-color: #ff0000')
+      expect(wrapper.get('.mint-collapsible-card__toggle').attributes('style')).toContain('--_cc-toggle-on: #ff0000')
     })
   })