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

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

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import GroupingModal from '../../components/GroupingModal.vue'
+import type { AutoGroupResult } from '../../types/auto-group'
+
+function mountLegacyModal() {
+  return mount(GroupingModal, {
+    props: {
+      open: true,
+      samples: ['CTRL_1', 'CTRL_2', 'DRUG_1'],
+    },
+    global: {
+      stubs: {
+        AutoGroupModal: {
+          name: 'AutoGroupModal',
+          props: ['modelValue', 'samples'],
+          emits: ['update:modelValue', 'apply'],
+          template: '<div data-testid="auto-group-modal" />',
+        },
+      },
+    },
+  })
+}
+
+describe('GroupingModal', () => {
+  it('forwards legacy open and samples props to AutoGroupModal', () => {
+    const wrapper = mountLegacyModal()
+    const modal = wrapper.getComponent({ name: 'AutoGroupModal' })
+
+    expect(modal.props('modelValue')).toBe(true)
+    expect(modal.props('samples')).toEqual(['CTRL_1', 'CTRL_2', 'DRUG_1'])
+  })
+
+  it('maps AutoGroupResult apply payloads to the legacy mapping format', async () => {
+    const wrapper = mountLegacyModal()
+    const modal = wrapper.getComponent({ name: 'AutoGroupModal' })
+    const result: AutoGroupResult = {
+      groups: [
+        { name: 'CTRL', color: '#3B82F6', samples: ['CTRL_1', 'CTRL_2'] },
+        { name: 'DRUG', color: '#10B981', samples: ['DRUG_1'] },
+      ],
+      metadata: [
+        { sampleName: 'CTRL_1', fields: { Condition: 'CTRL', Replicate: '1' }, group: 'CTRL' },
+        { sampleName: 'DRUG_1', fields: { Condition: 'DRUG', Replicate: '1' }, group: 'DRUG' },
+      ],
+      excludedSamples: [],
+    }
+
+    await modal.vm.$emit('apply', result)
+    await modal.vm.$emit('update:modelValue', false)
+
+    expect(wrapper.emitted('apply')).toEqual([
+      [
+        {
+          CTRL: ['CTRL_1', 'CTRL_2'],
+          DRUG: ['DRUG_1'],
+        },
+        ['Condition', 'Replicate'],
+      ],
+    ])
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+
+  it('emits close when the wrapped modal closes without apply', async () => {
+    const wrapper = mountLegacyModal()
+    const modal = wrapper.getComponent({ name: 'AutoGroupModal' })
+
+    await modal.vm.$emit('update:modelValue', false)
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+    expect(wrapper.emitted('apply')).toBeUndefined()
+  })
+})

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/PluginIcon.test.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PluginIcon from '../../components/PluginIcon.vue'
+
+const SAMPLE_PATH = 'M13 10V3L4 14h7v7l9-11h-7z'
+const SAMPLE_HTTPS_URL = 'https://example.com/icon.png'
+
+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 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 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 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')
+    })
+  })
+})

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

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import ProtocolStepEditor from '../../components/ProtocolStepEditor.vue'
+
+describe('ProtocolStepEditor', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('uses shared dropdown state for the template picker', async () => {
+    const wrapper = mount(ProtocolStepEditor, {
+      attachTo: document.body,
+    })
+    await nextTick()
+
+    await wrapper.get('.mint-protocol-editor__template-btn').trigger('click')
+    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(true)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(false)
+
+    await wrapper.get('.mint-protocol-editor__template-btn').trigger('click')
+    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(true)
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    expect(wrapper.find('.mint-protocol-editor__template-menu').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+})

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

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ReagentList from '../../components/ReagentList.vue'
+import type { Reagent } from '../../types'
+
+describe('ReagentList', () => {
+  const reagents: Reagent[] = [
+    {
+      id: 'reagent-1',
+      name: 'Glucose',
+      catalogNumber: 'G-7528',
+      lotNumber: 'LOT-A',
+      supplier: 'Sigma',
+    },
+    {
+      id: 'reagent-2',
+      name: 'Lactate',
+      catalogNumber: 'L-1250',
+      lotNumber: 'LOT-B',
+      supplier: 'Cayman',
+    },
+  ]
+
+  it('searches reagent metadata case-insensitively', async () => {
+    const wrapper = mount(ReagentList, {
+      props: {
+        modelValue: reagents,
+        readonly: true,
+        columns: ['name', 'catalog', 'lot', 'supplier'],
+      },
+    })
+
+    await wrapper.find('.mint-reagent-list__search-input').setValue(' cay ')
+
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows).toHaveLength(1)
+    expect(rows[0].text()).toContain('Lactate')
+  })
+
+  it('treats whitespace-only search as empty', async () => {
+    const wrapper = mount(ReagentList, {
+      props: {
+        modelValue: reagents,
+        readonly: true,
+        columns: ['name', 'catalog', 'lot', 'supplier'],
+      },
+    })
+
+    await wrapper.find('.mint-reagent-list__search-input').setValue('   ')
+
+    expect(wrapper.findAll('tbody tr')).toHaveLength(2)
+  })
+
+  it('sorts reagent columns while keeping missing values last', async () => {
+    const wrapper = mount(ReagentList, {
+      props: {
+        modelValue: [
+          ...reagents,
+          { id: 'reagent-3', name: 'Pyruvate' },
+        ],
+        readonly: true,
+        columns: ['name', 'catalog'],
+      },
+    })
+
+    await wrapper.findAll('th')[1].trigger('click')
+
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows.map(row => row.text())).toEqual([
+      expect.stringContaining('Glucose'),
+      expect.stringContaining('Lactate'),
+      expect.stringContaining('Pyruvate'),
+    ])
+
+    await wrapper.findAll('th')[1].trigger('click')
+    expect(wrapper.findAll('tbody tr').map(row => row.text())).toEqual([
+      expect.stringContaining('Lactate'),
+      expect.stringContaining('Glucose'),
+      expect.stringContaining('Pyruvate'),
+    ])
+  })
+})

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

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SampleHierarchyTree from '../../components/SampleHierarchyTree.vue'
+import type { TreeNode } from '../../types'
+
+const nodes: TreeNode[] = [
+  {
+    id: 'study',
+    label: 'Study',
+    type: 'study',
+    children: [
+      { id: 'sample-1', label: 'Sample 1', type: 'sample' },
+    ],
+  },
+]
+
+describe('SampleHierarchyTree', () => {
+  it('uses shared expansion state for default expansion and node toggles', async () => {
+    const wrapper = mount(SampleHierarchyTree, {
+      props: {
+        nodes,
+        defaultExpandedIds: ['study'],
+      },
+    })
+
+    expect(wrapper.find('.mint-sample-tree__children').exists()).toBe(true)
+
+    await wrapper.find('.mint-sample-tree__toggle').trigger('click')
+
+    expect(wrapper.emitted('collapse')?.[0]).toEqual(['study'])
+    expect(wrapper.find('.mint-sample-tree__children').exists()).toBe(false)
+
+    await wrapper.find('.mint-sample-tree__toggle').trigger('click')
+
+    expect(wrapper.emitted('expand')?.[0]).toEqual(['study'])
+    expect(wrapper.find('.mint-sample-tree__children').exists()).toBe(true)
+  })
+
+  it('syncs expandAll with all tree node ids', async () => {
+    const wrapper = mount(SampleHierarchyTree, {
+      props: {
+        nodes,
+        expandAll: false,
+      },
+    })
+
+    expect(wrapper.find('.mint-sample-tree__children').exists()).toBe(false)
+
+    await wrapper.setProps({ expandAll: true })
+
+    expect(wrapper.find('.mint-sample-tree__children').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SampleSelector from '../../components/SampleSelector.vue'
+
+describe('SampleSelector', () => {
+  it('uses shared list selection for select-all and individual sample toggles', async () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        samples: ['S1', 'S2'],
+        modelValue: [],
+        enableGrouping: false,
+        enableSmartGroup: false,
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    await wrapper.find('.mint-sample-selector__select-all input').trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['S1', 'S2']])
+
+    await wrapper.setProps({ modelValue: ['S1'] })
+    await wrapper.findAll('.mint-sample-selector__flat-item input')[0].trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([[]])
+
+    await wrapper.findAll('.mint-sample-selector__flat-item input')[1].trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[2]).toEqual([['S1', 'S2']])
+  })
+
+  it('uses shared expansion state for grouped sample sections', async () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        samples: ['S1', 'S2'],
+        modelValue: [],
+        groups: [
+          { name: 'Control/A', color: '#3B82F6', samples: ['S1'] },
+          { name: 'Control/B', color: '#06B6D4', samples: ['S2'] },
+        ],
+        enableSmartGroup: false,
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    expect(wrapper.find('.mint-sample-selector__sample-name').exists()).toBe(false)
+
+    await wrapper.find('.mint-sample-selector__expand-btn').trigger('click')
+
+    expect(wrapper.findAll('.mint-sample-selector__sample-name').map(item => item.text())).toEqual(['S1', 'S2'])
+
+    await wrapper.findAll('.mint-sample-selector__expand-btn')[1].trigger('click')
+
+    expect(wrapper.find('.mint-sample-selector__sample-name').exists()).toBe(false)
+  })
+})

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

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SegmentedControl from '../../components/SegmentedControl.vue'
+
+describe('SegmentedControl', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(SegmentedControl, {
+      props: {
+        modelValue: 'linear',
+        options: ['linear', 96, { value: 'log', label: 'Log scale' }],
+      },
+    })
+
+    expect(wrapper.findAll('button').map(button => button.text())).toEqual([
+      'linear',
+      '96',
+      'Log scale',
+    ])
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([96])
+  })
+})

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

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import SettingsButton from '../../components/SettingsButton.vue'
+
+describe('SettingsButton', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('toggles the settings dropdown and emits click events', async () => {
+    const wrapper = mount(SettingsButton, {
+      slots: {
+        default: '<div class="settings-content">Settings</div>',
+      },
+      attachTo: document.body,
+    })
+
+    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(false)
+    expect(wrapper.find('.mint-icon-button').attributes('aria-label')).toBe('Settings')
+
+    await wrapper.find('.mint-settings-button__trigger').trigger('click')
+
+    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(true)
+    expect(wrapper.emitted('click')).toHaveLength(1)
+    expect(wrapper.find('.mint-settings-button__trigger').classes()).toContain('mint-icon-button')
+
+    wrapper.unmount()
+  })
+
+  it('closes on outside click while keeping Escape behavior unchanged', async () => {
+    const wrapper = mount(SettingsButton, { attachTo: document.body })
+
+    await wrapper.find('.mint-settings-button__trigger').trigger('click')
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(true)
+
+    document.body.click()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(false)
+
+    wrapper.unmount()
+  })
+})