@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -0,0 +1,296 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { describe, expect, it } from 'vitest'
+import SettingsModal from '../../components/SettingsModal.vue'
+import { defineControlModel, type ControlSchema } from '../../composables/useControlSchema'
+import type { SettingsModalSchema } from '../../types'
+
+describe('SettingsModal', () => {
+  function mountSettingsModal(props = {}, slots = {}) {
+    return mount(SettingsModal, {
+      props: {
+        modelValue: true,
+        showAppearance: false,
+        ...props,
+      },
+      slots,
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          teleport: true,
+        },
+      },
+    })
+  }
+
+  it('accepts string shorthand manual tabs', async () => {
+    const wrapper = mountSettingsModal({
+      tabs: ['General', 'Advanced'],
+    }, {
+      'tab-General': '<div class="general-tab">General Content</div>',
+      'tab-Advanced': '<div class="advanced-tab">Advanced Content</div>',
+    })
+
+    const tabs = wrapper.findAll('.mint-settings-modal__tab')
+    expect(tabs.map(tab => tab.text())).toEqual(['General', 'Advanced'])
+    expect(tabs[0].classes()).toContain('mint-settings-modal__tab--active')
+    expect(wrapper.find('.general-tab').exists()).toBe(true)
+
+    await tabs[1].trigger('click')
+
+    expect(tabs[1].classes()).toContain('mint-settings-modal__tab--active')
+  })
+
+  it('syncs schema changes without remounting the modal', async () => {
+    const baseSchema: SettingsModalSchema = {
+      groups: [
+        {
+          id: 'general',
+          label: 'General',
+          fields: [
+            { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.1' },
+          ],
+        },
+      ],
+    }
+    const nextSchema: SettingsModalSchema = {
+      groups: [
+        {
+          id: 'general',
+          label: 'General',
+          fields: [
+            { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.1' },
+          ],
+        },
+        {
+          id: 'advanced',
+          label: 'Advanced',
+          fields: [
+            { name: 'method', label: 'Method', type: 'text', defaultValue: 'linear' },
+          ],
+        },
+      ],
+    }
+
+    const wrapper = mountSettingsModal({ schema: baseSchema })
+
+    await wrapper.find('input').setValue('0.5')
+    await wrapper.setProps({ schema: nextSchema })
+
+    const tabs = wrapper.findAll('.mint-settings-modal__tab')
+    expect(tabs.map(tab => tab.text())).toEqual(['General', 'Advanced'])
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.5')
+
+    await tabs[1].trigger('click')
+
+    expect(wrapper.text()).toContain('Method')
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('linear')
+  })
+
+  it('uses controlled values when a schema changes', async () => {
+    const baseSchema: SettingsModalSchema = {
+      groups: [
+        {
+          id: 'general',
+          label: 'General',
+          fields: [
+            { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.1' },
+          ],
+        },
+      ],
+    }
+    const nextSchema: SettingsModalSchema = {
+      groups: [
+        {
+          id: 'general',
+          label: 'General',
+          fields: [
+            { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.1' },
+            { name: 'method', label: 'Method', type: 'text', defaultValue: 'linear' },
+          ],
+        },
+      ],
+    }
+
+    const wrapper = mountSettingsModal({
+      schema: baseSchema,
+      values: { threshold: '0.25' },
+    })
+
+    await wrapper.find('input').setValue('0.5')
+    await wrapper.setProps({ schema: nextSchema })
+
+    const inputs = wrapper.findAll('input')
+    expect((inputs[0].element as HTMLInputElement).value).toBe('0.25')
+    expect((inputs[1].element as HTMLInputElement).value).toBe('linear')
+    expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+      threshold: '0.25',
+      method: 'linear',
+    })
+  })
+
+  it('renders compact controls as schema-driven settings', async () => {
+    const controls: ControlSchema = {
+      threshold: {
+        label: 'Threshold',
+        default: 0.25,
+        section: 'parameters',
+        sectionLabel: 'Parameters',
+      },
+      method: {
+        label: 'Method',
+        default: 'linear',
+        options: ['linear', 'logistic'],
+        section: 'advanced',
+        sectionLabel: 'Advanced',
+      },
+    }
+
+    const wrapper = mountSettingsModal({ controls })
+
+    const tabs = wrapper.findAll('.mint-settings-modal__tab')
+    expect(tabs.map(tab => tab.text())).toEqual(['Parameters', 'Advanced'])
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+
+    await wrapper.find('input').setValue('0.5')
+    await tabs[1].trigger('click')
+
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+    expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+      threshold: 0.5,
+      method: 'linear',
+    })
+  })
+
+  it('uses controlOptions initialValues for compact control settings', async () => {
+    const controls: ControlSchema = {
+      threshold: {
+        label: 'Threshold',
+        default: 0.25,
+        section: 'parameters',
+        sectionLabel: 'Parameters',
+      },
+      method: {
+        label: 'Method',
+        default: 'linear',
+        options: ['linear', 'logistic'],
+        section: 'parameters',
+      },
+    }
+
+    const wrapper = mountSettingsModal({
+      controls,
+      controlOptions: {
+        initialValues: {
+          threshold: 0.35,
+          method: 'logistic',
+        },
+      },
+    })
+
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.35')
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+
+    await wrapper.find('input').setValue('0.5')
+
+    expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+      threshold: 0.5,
+      method: 'logistic',
+    })
+  })
+
+  it('renders a complete control model as schema-driven settings', async () => {
+    const model = defineControlModel({
+      views: {
+        run: {
+          label: 'Run',
+          sections: {
+            parameters: {
+              label: 'Parameters',
+              controls: {
+                threshold: { label: 'Threshold', default: 0.25 },
+                method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
+              },
+            },
+          },
+        },
+      },
+    })
+
+    const wrapper = mountSettingsModal({ model })
+
+    expect(wrapper.text()).toContain('Threshold')
+    expect(wrapper.text()).toContain('Method')
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+
+    await wrapper.find('input').setValue('0.5')
+
+    expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+      threshold: 0.5,
+      method: 'linear',
+    })
+  })
+
+  it('uses initialValues from a complete control model as schema-driven settings', () => {
+    const model = defineControlModel({
+      initialValues: {
+        threshold: 0.75,
+        method: 'logistic',
+      },
+      views: {
+        run: {
+          label: 'Run',
+          sections: {
+            parameters: {
+              label: 'Parameters',
+              controls: {
+                threshold: { label: 'Threshold', default: 0.25 },
+                method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
+              },
+            },
+          },
+        },
+      },
+    })
+
+    const wrapper = mountSettingsModal({
+      model,
+      controlOptions: {
+        initialValues: {
+          method: 'linear',
+        },
+      },
+    })
+
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.75')
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+  })
+
+  it('activates compact controls that are loaded after mount', async () => {
+    const controls: ControlSchema = {
+      threshold: {
+        label: 'Threshold',
+        default: 0.25,
+        section: 'parameters',
+        sectionLabel: 'Parameters',
+      },
+    }
+
+    const wrapper = mountSettingsModal({
+      tabs: ['General'],
+    }, {
+      'tab-General': '<div class="manual-tab">Manual settings</div>',
+    })
+
+    expect(wrapper.find('.manual-tab').exists()).toBe(true)
+
+    await wrapper.setProps({ controls })
+
+    expect(wrapper.text()).toContain('Threshold')
+    expect(wrapper.find('.manual-tab').exists()).toBe(false)
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+      threshold: 0.25,
+    })
+  })
+})

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

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import TagsInput from '../../components/TagsInput.vue'
+
+describe('TagsInput', () => {
+  it('caps pasted tags by maxTags', async () => {
+    const wrapper = mount(TagsInput, {
+      props: {
+        modelValue: ['existing'],
+        maxTags: 3,
+      },
+    })
+
+    await wrapper.find('input').trigger('paste', {
+      clipboardData: {
+        getData: () => 'alpha,beta,gamma',
+      },
+    })
+
+    expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toEqual([
+      'existing',
+      'alpha',
+      'beta',
+    ])
+  })
+
+  it('keeps duplicate filtering while applying paste limits', async () => {
+    const wrapper = mount(TagsInput, {
+      props: {
+        modelValue: ['alpha'],
+        maxTags: 3,
+      },
+    })
+
+    await wrapper.find('input').trigger('paste', {
+      clipboardData: {
+        getData: () => 'alpha,beta,gamma',
+      },
+    })
+
+    expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toEqual([
+      'alpha',
+      'beta',
+      'gamma',
+    ])
+  })
+
+  it('uses shared dropdown state for autocomplete suggestions', async () => {
+    const wrapper = mount(TagsInput, {
+      props: {
+        modelValue: [],
+        suggestions: ['alpha', 'beta'],
+      },
+      attachTo: document.body,
+    })
+    const input = wrapper.get('input')
+
+    await input.setValue('a')
+    expect(wrapper.find('.mint-tags-input__dropdown').exists()).toBe(true)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    expect(wrapper.find('.mint-tags-input__dropdown').exists()).toBe(false)
+
+    await input.trigger('focus')
+    expect(wrapper.find('.mint-tags-input__dropdown').exists()).toBe(true)
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    expect(wrapper.find('.mint-tags-input__dropdown').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+})

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

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ThemeToggle from '../../components/ThemeToggle.vue'
+
+describe('ThemeToggle', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn(() => null),
+      setItem: vi.fn(),
+      removeItem: vi.fn(),
+      clear: vi.fn(),
+    })
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(() => ({
+        matches: false,
+        media: '(prefers-color-scheme: dark)',
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    })
+  })
+
+  it('renders through IconButton while preserving the public theme-toggle class', async () => {
+    const wrapper = mount(ThemeToggle, {
+      props: { size: 'sm' },
+    })
+
+    const button = wrapper.find('button')
+    expect(button.classes()).toContain('mint-theme-toggle')
+    expect(button.classes()).toContain('mint-icon-button')
+    expect(button.classes()).toContain('mint-icon-button--sm')
+    expect(button.attributes('aria-label')).toBe('Switch to dark mode')
+
+    await button.trigger('click')
+
+    expect(button.attributes('aria-label')).toBe('Switch to light mode')
+  })
+})

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

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import TimePicker from '../../components/TimePicker.vue'
+
+describe('TimePicker', () => {
+  it('opens from keyboard disclosure shortcuts', async () => {
+    const wrapper = mount(TimePicker)
+
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
+
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(true)
+  })
+
+  it('uses shared dropdown state for Escape and outside-click close behavior', async () => {
+    const wrapper = mount(TimePicker, {
+      props: {
+        modelValue: '14:30',
+      },
+      attachTo: document.body,
+    })
+
+    await wrapper.get('input').trigger('click')
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(true)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(false)
+
+    await wrapper.get('input').trigger('click')
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(true)
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+})

package/src/__tests__/composables/experiment-utils.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatExperimentStatus,
+  getExperimentStatusVariant,
+  resolveExperimentCode,
+} from '../../composables/experiment-utils'
+
+describe('experiment-utils', () => {
+  it('formats canonical and custom experiment statuses', () => {
+    expect(formatExperimentStatus('planned')).toBe('Planned')
+    expect(formatExperimentStatus('ongoing')).toBe('Ongoing')
+    expect(formatExperimentStatus('ready_to_extract')).toBe('Ready to extract')
+    expect(formatExperimentStatus('qc-hold')).toBe('Qc hold')
+    expect(formatExperimentStatus(null)).toBe('')
+  })
+
+  it('maps known status variants and falls back for custom statuses', () => {
+    expect(getExperimentStatusVariant('ongoing')).toBe('primary')
+    expect(getExperimentStatusVariant('completed')).toBe('success')
+    expect(getExperimentStatusVariant('ready_to_extract')).toBe('default')
+    expect(getExperimentStatusVariant(undefined)).toBe('default')
+  })
+
+  it('resolves formal experiment codes before generated compact fallbacks', () => {
+    expect(resolveExperimentCode({ id: 42, experiment_code: 'DR-042' })).toBe('DR-042')
+    expect(resolveExperimentCode({ id: 42 })).toBe('EXP-42')
+    expect(resolveExperimentCode({ id: null })).toBeUndefined()
+  })
+})

package/src/__tests__/composables/useApi.test.ts

@@ -0,0 +1,30 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+
+import { useApi } from '../../composables/useApi'
+
+describe('useApi URL helpers', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  afterEach(() => {
+    vi.unstubAllEnvs()
+  })
+
+  it('joins explicit API base URLs without duplicate slashes', () => {
+    const api = useApi({ baseUrl: '/api/plugin/' })
+
+    expect(api.buildUrl('/rows')).toBe('/api/plugin/rows')
+    expect(api.buildUrl('rows')).toBe('/api/plugin/rows')
+    expect(api.buildUrl('')).toBe('/api/plugin/')
+  })
+
+  it('joins configured WebSocket base URLs without duplicate slashes', () => {
+    vi.stubEnv('VITE_API_PREFIX', '/api/')
+    const api = useApi()
+
+    expect(api.buildWsUrl('/events')).toMatch(/\/api\/events$/)
+    expect(api.buildWsUrl('/events')).not.toContain('/api//events')
+  })
+})