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

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

@@ -0,0 +1,165 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+
+import JobsStatusTray from '../../components/JobsStatusTray.vue'
+import type { PluginJobCenterSource } from '../../composables/useJobsStatusTray'
+import type { JobState, JobStateInput, JobStatus } from '../../types/jobs'
+
+function job(status: JobStatus, id: string = status): JobStateInput {
+  return {
+    id,
+    job_id: id,
+    kind: 'analysis',
+    name: `Job ${id}`,
+    status,
+    progress: {
+      current_file: 0,
+      total_files: 0,
+      current_filename: null,
+      percent: 0,
+      message: '',
+      stage: status,
+    },
+    queue_position: 0,
+    warnings: [],
+    error: null,
+    output_path: null,
+    save_path: null,
+    session_id: null,
+    folders: [],
+    folder_path: null,
+    user_id: '1',
+    owner_user_id: '1',
+    experiment_id: null,
+    extraction_result_id: null,
+    metadata: {},
+    created_at: '2026-07-14T10:00:00+00:00',
+    started_at: null,
+    completed_at: null,
+  }
+}
+
+async function openTray(options: {
+  source: PluginJobCenterSource
+  slots?: Record<string, (props: { job: JobState }) => unknown>
+}) {
+  const { slots, ...props } = options
+  const wrapper = mount(JobsStatusTray, {
+    attachTo: document.body,
+    props: {
+      ...props,
+      loadOnMount: false,
+      teleportTo: false,
+    },
+    slots,
+  })
+  await wrapper.get('.mint-jobs-tray__trigger').trigger('click')
+  return wrapper
+}
+
+describe('JobsStatusTray', () => {
+  it('shows awaiting input as active without default actions', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('awaiting_input')] } })
+
+    expect([
+      wrapper.text().includes('Waiting for input'),
+      wrapper.find('[aria-label="Cancel job"]').exists(),
+      wrapper.find('[aria-label="Delete job"]').exists(),
+    ]).toEqual([true, false, false])
+  })
+
+  it('shows only actions supported by both capability and source', async () => {
+    const wrapper = await openTray({
+      source: {
+        jobs: [
+          { ...job('awaiting_input', 'input'), can_cancel: true },
+          { ...job('completed', 'done'), can_delete: true },
+        ],
+        cancelJob: vi.fn(async () => undefined),
+        deleteJob: vi.fn(async () => true),
+      },
+    })
+
+    expect([
+      wrapper.find('[aria-label="Cancel job"]').exists(),
+      wrapper.find('[aria-label="Delete job"]').exists(),
+    ]).toEqual([true, false])
+
+    await wrapper.get('[role="tab"][data-tab="history"]').trigger('click')
+    expect(wrapper.find('[aria-label="Delete job"]').exists()).toBe(true)
+  })
+
+  it('exposes dialog state and closes on Escape', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
+    const trigger = wrapper.get('.mint-jobs-tray__trigger')
+
+    await wrapper.get('[role="dialog"]').trigger('keydown', { key: 'Escape' })
+
+    expect([trigger.attributes('aria-expanded'), wrapper.find('[role="dialog"]').exists()]).toEqual([
+      'false',
+      false,
+    ])
+  })
+
+  it('renders an individual delete action for an active capable job', async () => {
+    const wrapper = await openTray({
+      source: {
+        jobs: [{ ...job('awaiting_input'), can_delete: true }],
+        deleteJob: vi.fn(async () => true),
+      },
+    })
+
+    expect(wrapper.find('[aria-label="Delete job"]').exists()).toBe(true)
+  })
+
+  it('traps forward Tab navigation inside the modal dialog', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
+    const focusable = wrapper.findAll('button')
+    const firstInsidePanel = wrapper.get('[aria-label="Close jobs"]')
+    const lastInsidePanel = focusable[focusable.length - 1]!
+    lastInsidePanel.element.focus()
+
+    await wrapper.get('[role="dialog"]').trigger('keydown', { key: 'Tab' })
+
+    expect(document.activeElement).toBe(firstInsidePanel.element)
+  })
+
+  it('traps reverse Tab navigation from the dialog container', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
+    const panel = wrapper.get('[role="dialog"]')
+    const focusable = panel.findAll('button')
+    const panelElement = panel.element as HTMLElement
+    panelElement.focus()
+
+    await panel.trigger('keydown', { key: 'Tab', shiftKey: true })
+
+    expect(document.activeElement).toBe(focusable[focusable.length - 1]!.element)
+  })
+
+  it('exposes job selection through a keyboard-accessible button', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
+
+    await wrapper.get('.mint-jobs-tray__job-select').trigger('click')
+
+    expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({ job_id: 'running' })
+  })
+
+  it('renders the job-actions slot once per row in both tabs with the row job', async () => {
+    const wrapper = await openTray({
+      source: { jobs: [job('running', 'R-1'), job('completed', 'C-1')] },
+      slots: {
+        'job-actions': ({ job: row }) =>
+          h('button', { 'data-testid': 'open', 'data-job': row.job_id }, 'Open'),
+      },
+    })
+
+    const active = wrapper.findAll('[data-testid="open"]')
+    expect(active.map((b) => b.attributes('data-job'))).toEqual(['R-1'])
+
+    await wrapper.get('[role="tab"][data-tab="history"]').trigger('click')
+
+    const history = wrapper.findAll('[data-testid="open"]')
+    expect(history.map((b) => b.attributes('data-job'))).toEqual(['C-1'])
+  })
+})

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

@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import LcmsSequenceTable from '../../components/LcmsSequenceTable.vue'
+import type { LcmsSequenceItem } from '../../lcms'
+
+function makeItems(): LcmsSequenceItem[] {
+  return [
+    {
+      sample_type: 'Unknown',
+      file_name: 'Batch_NEG_S1_001',
+      sample_id: 'R:A1',
+      path: '',
+      instrument_method: 'C:\\Methods\\neg.meth',
+      position: 'R:A1',
+      injection_volume: 5,
+    },
+    {
+      sample_type: 'Blank',
+      file_name: 'Batch_NEG_Blank_002',
+      sample_id: 'R:F9',
+      path: '',
+      instrument_method: 'C:\\Methods\\blank.meth',
+      position: 'R:F9',
+      injection_volume: 5,
+    },
+  ]
+}
+
+describe('LcmsSequenceTable', () => {
+  it('renders Xcalibur sequence rows with method basenames', () => {
+    const wrapper = mount(LcmsSequenceTable, {
+      props: {
+        items: makeItems(),
+      },
+    })
+
+    expect(wrapper.text()).toContain('Batch_NEG_S1_001')
+    expect(wrapper.text()).toContain('neg.meth')
+    expect(wrapper.text()).toContain('Blank')
+  })
+
+  it('emits editable row actions', async () => {
+    const wrapper = mount(LcmsSequenceTable, {
+      props: {
+        items: makeItems(),
+        editable: true,
+      },
+    })
+
+    const actions = wrapper.findAll('.mint-lcms-sequence-table__action')
+    await actions[0].trigger('click')
+    await actions[1].trigger('click')
+
+    expect(wrapper.emitted('duplicate')?.[0]).toEqual([0])
+    expect(wrapper.emitted('remove')?.[0]).toEqual([0])
+  })
+})

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

@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import MobileSupportGate from '../../components/MobileSupportGate.vue'
+
+function mockMatchMedia(initialMatches: boolean) {
+  const listeners = new Set<(event: MediaQueryListEvent) => void>()
+  const queryList = {
+    matches: initialMatches,
+    media: '',
+    onchange: null,
+    addEventListener: vi.fn((_event: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener)
+    }),
+    removeEventListener: vi.fn((_event: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener)
+    }),
+    addListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener)
+    }),
+    removeListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener)
+    }),
+    dispatchEvent: vi.fn(),
+  } as unknown as MediaQueryList
+
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    value: vi.fn(() => queryList),
+  })
+
+  return {
+    setMatches(matches: boolean) {
+      Object.defineProperty(queryList, 'matches', {
+        configurable: true,
+        value: matches,
+      })
+      listeners.forEach(listener => listener({ matches } as MediaQueryListEvent))
+    },
+  }
+}
+
+describe('MobileSupportGate', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('shows the unsupported message on mobile when the route is unsupported', async () => {
+    mockMatchMedia(true)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: false,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Desktop workspace recommended')
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(false)
+  })
+
+  it('renders content on desktop even when the route is mobile-unsupported', async () => {
+    mockMatchMedia(false)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: false,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(true)
+  })
+
+  it('renders content on mobile when the route is supported', async () => {
+    mockMatchMedia(true)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: true,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(true)
+  })
+
+  it('reacts when the viewport moves into the mobile query', async () => {
+    const media = mockMatchMedia(false)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: false,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(true)
+
+    media.setMatches(true)
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import MultiSelect from '../../components/MultiSelect.vue'
+
+const options = [
+  { value: 'a', label: 'A' },
+  { value: 'b', label: 'B' },
+  { value: 'c', label: 'C' },
+]
+
+describe('MultiSelect', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(MultiSelect, {
+      props: {
+        modelValue: ['glucose', 2],
+        options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
+      },
+    })
+
+    expect(wrapper.findAll('button').map(button => button.text())).toEqual([
+      'glucose',
+      '2',
+      'Doxorubicin',
+    ])
+    expect(wrapper.find('.mint-multi-select__summary').text()).toBe('glucose, 2')
+
+    await wrapper.findAll('button')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
+      ['glucose', 2, 'dox'],
+    ])
+  })
+
+  it('uses the shared selection limit for maxSelections', async () => {
+    const wrapper = mount(MultiSelect, {
+      props: {
+        modelValue: ['a'],
+        options,
+        maxSelections: 1,
+      },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.findAll('button')[1].attributes('disabled')).toBeDefined()
+  })
+})

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

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import PlateMapEditorToolbarInternal from '../../components/internal/PlateMapEditorToolbarInternal.vue'
+import type { PlateMap } from '../../types'
+
+const plates: PlateMap[] = [
+  { id: 'plate-1', name: 'Plate 1', format: 96, wells: {} },
+  { id: 'plate-2', name: 'Plate 2', format: 96, wells: {} },
+]
+
+function mountToolbar(props = {}) {
+  return mount(PlateMapEditorToolbarInternal, {
+    props: {
+      plates,
+      activePlateId: 'plate-1',
+      plateWellCounts: { 'plate-1': 3, 'plate-2': 0 },
+      canAddPlate: true,
+      canUndo: false,
+      canRedo: true,
+      slotColorForPlate: vi.fn((_plateId: string, index: number) => (index === 0 ? '#ef4444' : '#22c55e')),
+      ...props,
+    },
+  })
+}
+
+describe('PlateMapEditorToolbarInternal', () => {
+  it('renders plate tabs, active state, and well counts', () => {
+    const wrapper = mountToolbar()
+
+    const tabs = wrapper.findAll('.mint-plate-editor__tab')
+    expect(tabs).toHaveLength(2)
+    expect(tabs[0].classes()).toContain('mint-plate-editor__tab--active')
+    expect(wrapper.find('.mint-plate-editor__tab-count').text()).toBe('3')
+    expect(wrapper.find('.mint-plate-editor__add-plate').exists()).toBe(true)
+  })
+
+  it('emits tab and action events', async () => {
+    const wrapper = mountToolbar()
+
+    await wrapper.findAll('.mint-plate-editor__tab')[1].trigger('click')
+    await wrapper.findAll('.mint-plate-editor__tab-remove')[0].trigger('click')
+    await wrapper.find('.mint-plate-editor__add-plate').trigger('click')
+    await wrapper.find('[title="Redo (Ctrl+Shift+Z)"]').trigger('click')
+    await wrapper.find('[title="Import"]').trigger('click')
+    await wrapper.find('[title="Export JSON"]').trigger('click')
+
+    expect(wrapper.emitted('select-plate')?.[0]).toEqual(['plate-2'])
+    expect(wrapper.emitted('remove-plate')?.[0]).toEqual(['plate-1'])
+    expect(wrapper.emitted('add-plate')).toHaveLength(1)
+    expect(wrapper.emitted('redo')).toHaveLength(1)
+    expect(wrapper.emitted('import')).toHaveLength(1)
+    expect(wrapper.emitted('export-json')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,215 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PluginIcon from '../../components/PluginIcon.vue'
+import { PLUGIN_ICON_FALLBACK_PATH } from '../../utils/pluginIcon'
+
+const SAMPLE_PATH = 'M13 10V3L4 14h7v7l9-11h-7z'
+const SAMPLE_HTTPS_URL = 'https://example.com/icon.png'
+const SAMPLE_STATIC_SVG_URL = '/api/plugins/LEAF/assets/icon.svg'
+const SAMPLE_STRUCTURED_ICON = JSON.stringify({
+  type: 'mint-icon',
+  viewBox: '0 0 24 24',
+  gradient: {
+    type: 'linear',
+    angle: 135,
+    stops: [
+      { offset: '0%', color: '#AAECBF' },
+      { offset: '100%', color: '#14A1A9' },
+    ],
+  },
+  background: { fill: 'gradient', radius: 5 },
+  paths: [
+    {
+      d: 'M7 17c5.8-.2 9.5-3.8 10-10-5.7.5-9.3 4.2-10 10z',
+      fill: 'white',
+      opacity: 0.95,
+    },
+  ],
+})
+
+describe('PluginIcon', () => {
+  describe('format detection', () => {
+    it('should render SVG path when icon starts with M followed by digit', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH } })
+      const path = wrapper.find('svg path')
+      expect(path.exists()).toBe(true)
+      expect(path.attributes('d')).toBe(SAMPLE_PATH)
+      expect(wrapper.find('img').exists()).toBe(false)
+    })
+
+    it('should render structured gradient vector icons without an image tag', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_STRUCTURED_ICON } })
+      const svg = wrapper.find('svg.mint-plugin-icon__svg--structured')
+      const rect = wrapper.find('rect')
+      const stops = wrapper.findAll('stop')
+      const path = wrapper.find('path')
+
+      expect(svg.exists()).toBe(true)
+      expect(svg.attributes('viewBox')).toBe('0 0 24 24')
+      expect(rect.attributes('fill')).toMatch(/^url\(#mint-plugin-icon-gradient-/)
+      expect(rect.attributes('rx')).toBe('5')
+      expect(stops).toHaveLength(2)
+      expect(stops[0].attributes('stop-color')).toBe('#AAECBF')
+      expect(stops[1].attributes('stop-color')).toBe('#14A1A9')
+      expect(path.attributes('fill')).toBe('white')
+      expect(wrapper.find('img').exists()).toBe(false)
+    })
+
+    it('should reject structured icons without paths as fallback', () => {
+      const icon = JSON.stringify({
+        type: 'mint-icon',
+        background: { fill: '#14A1A9', radius: 5 },
+        paths: [],
+      })
+      const wrapper = mount(PluginIcon, { props: { icon } })
+      expect(wrapper.find('svg path').attributes('d')).toBe(PLUGIN_ICON_FALLBACK_PATH)
+      expect(wrapper.find('.mint-plugin-icon__svg--structured').exists()).toBe(false)
+    })
+
+    it('should accept structured gradient shorthand with from and to colors', () => {
+      const icon = JSON.stringify({
+        type: 'mint-icon',
+        gradient: { type: 'linear', from: '#AAECBF', to: '#14A1A9' },
+        background: { fill: 'gradient' },
+        paths: [{ d: SAMPLE_PATH, fill: 'white' }],
+      })
+      const wrapper = mount(PluginIcon, { props: { icon } })
+      const stops = wrapper.findAll('stop')
+      expect(stops).toHaveLength(2)
+      expect(stops[0].attributes('stop-color')).toBe('#AAECBF')
+      expect(stops[1].attributes('stop-color')).toBe('#14A1A9')
+    })
+
+    it('should ignore unsafe structured icon colors and still render safe paths', () => {
+      const icon = JSON.stringify({
+        type: 'mint-icon',
+        background: { fill: 'url(javascript:alert(1))', radius: 5 },
+        paths: [{ d: SAMPLE_PATH, fill: 'javascript:alert(1)', stroke: '#14A1A9' }],
+      })
+      const wrapper = mount(PluginIcon, { props: { icon } })
+      const path = wrapper.find('path')
+      expect(wrapper.find('rect').exists()).toBe(false)
+      expect(path.attributes('fill')).toBe('none')
+      expect(path.attributes('stroke')).toBe('#14A1A9')
+    })
+
+    it('should render SVG path when icon starts with lowercase m and a space', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: 'm 5,5 l 10,10' } })
+      const path = wrapper.find('svg path')
+      expect(path.exists()).toBe(true)
+      expect(path.attributes('d')).toBe('m 5,5 l 10,10')
+    })
+
+    it('should render SVG path after stripping leading whitespace', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: '   ' + SAMPLE_PATH } })
+      const path = wrapper.find('svg path')
+      expect(path.exists()).toBe(true)
+      expect(path.attributes('d')).toBe(SAMPLE_PATH)
+    })
+
+    it('should render SVG path after stripping leading BOM', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: '' + SAMPLE_PATH } })
+      const path = wrapper.find('svg path')
+      expect(path.exists()).toBe(true)
+      expect(path.attributes('d')).toBe(SAMPLE_PATH)
+    })
+
+    it('should render <img> for raster data URLs (png, jpeg, gif, webp)', () => {
+      for (const mime of ['png', 'jpeg', 'jpg', 'gif', 'webp']) {
+        const url = `data:image/${mime};base64,iVBORw0KGgo=`
+        const wrapper = mount(PluginIcon, { props: { icon: url } })
+        expect(wrapper.find('img').attributes('src')).toBe(url)
+        expect(wrapper.find('svg path').exists()).toBe(false)
+      }
+    })
+
+    it('should reject data:image/svg+xml as fallback (security)', () => {
+      const svgDataUrl = 'data:image/svg+xml;base64,PHN2Zz48L3N2Zz4='
+      const wrapper = mount(PluginIcon, { props: { icon: svgDataUrl } })
+      expect(wrapper.find('img').exists()).toBe(false)
+      expect(wrapper.find('svg path').exists()).toBe(true)
+      expect(wrapper.find('svg path').attributes('d')).not.toBe(svgDataUrl)
+    })
+
+    it('should render <img> for https URLs with referrer/lazy attributes', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_HTTPS_URL } })
+      const img = wrapper.find('img')
+      expect(img.attributes('src')).toBe(SAMPLE_HTTPS_URL)
+      expect(img.attributes('referrerpolicy')).toBe('no-referrer')
+      expect(img.attributes('loading')).toBe('lazy')
+    })
+
+    it('should render same-origin SVG assets as images', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_STATIC_SVG_URL } })
+
+      expect(wrapper.find('img').attributes('src')).toBe(SAMPLE_STATIC_SVG_URL)
+    })
+
+    it('should reject protocol-relative SVG assets', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: '//example.com/icon.svg' } })
+
+      expect(wrapper.find('img').exists()).toBe(false)
+    })
+
+    it('should reject http URLs as fallback (mixed-content)', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: 'http://example.com/icon.png' } })
+      expect(wrapper.find('img').exists()).toBe(false)
+      expect(wrapper.find('svg path').exists()).toBe(true)
+    })
+
+    it('should render fallback path when icon is empty', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: '' } })
+      expect(wrapper.find('svg path').exists()).toBe(true)
+      expect(wrapper.find('img').exists()).toBe(false)
+    })
+
+    it('should render fallback when icon is unrecognized', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: 'markdown:foo' } })
+      expect(wrapper.find('svg path').exists()).toBe(true)
+      expect(wrapper.find('img').exists()).toBe(false)
+    })
+  })
+
+  describe('size and variant classes', () => {
+    it('should apply size class', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH, size: 'lg' } })
+      expect(wrapper.classes()).toContain('mint-plugin-icon--lg')
+    })
+
+    it('should apply the dedicated topbar size class', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH, size: 'topbar' } })
+
+      expect(wrapper.classes()).toContain('mint-plugin-icon--topbar')
+    })
+
+    it('should default size to md', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH } })
+      expect(wrapper.classes()).toContain('mint-plugin-icon--md')
+    })
+
+    it('should apply variant class', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH, variant: 'tinted' } })
+      expect(wrapper.classes()).toContain('mint-plugin-icon--tinted')
+    })
+
+    it('should default variant to solid', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH } })
+      expect(wrapper.classes()).toContain('mint-plugin-icon--solid')
+    })
+  })
+
+  describe('tone', () => {
+    it('should apply tone via inline custom property', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH, tone: '#0EA5E9' } })
+      const style = wrapper.attributes('style') || ''
+      expect(style).toContain('--mint-plugin-icon-tone')
+      expect(style).toContain('#0EA5E9')
+    })
+
+    it('should not apply tone style when undefined', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_PATH } })
+      const style = wrapper.attributes('style') || ''
+      expect(style).not.toContain('--mint-plugin-icon-tone')
+    })
+  })
+})