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

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

@@ -0,0 +1,122 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockGet = vi.fn()
+const mockPut = vi.fn()
+const mockDelete = vi.fn()
+const mockUseApi = vi.fn((_options?: unknown) => ({
+  get: mockGet,
+  put: mockPut,
+  delete: mockDelete,
+}))
+
+vi.mock('../../composables/useApi', () => ({
+  useApi: (options: unknown) => mockUseApi(options),
+}))
+
+import { useBioTemplatePackWorkspace } from '../../composables/useBioTemplatePackWorkspace'
+
+describe('useBioTemplatePackWorkspace', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGet.mockResolvedValue({})
+    mockPut.mockResolvedValue({})
+    mockDelete.mockResolvedValue({})
+    window.history.replaceState({}, '', '/')
+  })
+
+  it('creates renderer props and component bindings from one pack id', () => {
+    const workspace = useBioTemplatePackWorkspace('cell culture')
+
+    expect(workspace.packId).toBe('cell-culture-screen')
+    expect(workspace.pack.templates).toContain('dose-response')
+    expect(workspace.collection.value.metadata?.pack).toBe('cell-culture-screen')
+    expect(workspace.templateIds.value).toEqual([
+      'sample-sheet',
+      'sample-prep',
+      'plate-map',
+      'reagent-list',
+      'protocol-steps',
+      'dose-response',
+      'flow-cytometry-panel',
+    ])
+    expect(workspace.renderer.value.target).toBe(workspace.collection.value)
+    expect(workspace.workspace.value.renderer?.target).toBe(workspace.collection.value)
+    expect(workspace.form.value).toBe(workspace.workspace.value.form)
+    expect(workspace.form.value.modelValue).toBe(workspace.workspace.value.values)
+    expect(workspace.sidebar.value).toBe(workspace.workspace.value.sidebar)
+    expect(workspace.sidebar.value.values).toBe(workspace.workspace.value.values)
+    expect(workspace.sidebar.value.activeView).toBe('design')
+    expect(workspace.topBar.value).toBe(workspace.workspace.value.topBar)
+    expect(workspace.pillNav.value).toBe(workspace.workspace.value.pillNav)
+    expect(workspace.pillNav.value.items.map(item => item.id)).toContain('design')
+    expect(workspace.topBarSettings.value).toBe(workspace.workspace.value.topBarSettings)
+    expect(workspace.bindings.value).toBe(workspace.workspace.value.bindings)
+    expect(workspace.bindings.value.form).toBe(workspace.form.value)
+    expect(workspace.bindings.value.topBar.value.currentPillId).toBe('design')
+    expect(workspace.topBarSettings.value.settingsConfig.values).toBe(workspace.workspace.value.values)
+    expect(workspace.sidebar.value.panels.design.map(panel => panel.id)).toContain('dose')
+    expect(workspace.componentBindings.value.map(binding => binding.component)).toContain('DoseCalculator')
+    expect(workspace.componentProps.value.map(binding => binding.component)).toContain('PlateMapEditor')
+    expect(workspace.componentPropsById.value['plate-map:WellPlate'].wells).toBeDefined()
+    expect(workspace.bindings.value.componentPropsById['plate-map:WellPlate'].wells).toBeDefined()
+    expect(workspace.componentPropsByComponent.value.WellPlate.length).toBeGreaterThan(0)
+    expect(workspace.getComponentProps('WellPlate')?.wells).toBeDefined()
+    expect(workspace.bindings.value.getComponentProps('WellPlate')?.wells).toBeDefined()
+    expect(workspace.componentUsage.value?.template).toContain('<DoseCalculator')
+  })
+
+  it('exposes live AppSidebar, AppTopBar, and AppPillNav bindings for mixed-view packs', () => {
+    const workspace = useBioTemplatePackWorkspace('omics-assay')
+    const inner = workspace.workspace.value
+
+    expect(workspace.pillNav.value.items.map(item => item.id)).toEqual([
+      'design',
+      'run',
+      'analysis',
+    ])
+    expect(inner.activeView.value).toBe('design')
+
+    workspace.pillNav.value.onSelect({ id: 'analysis', label: 'Analysis' })
+    expect(inner.activeView.value).toBe('analysis')
+    expect(workspace.sidebar.value.activeView).toBe('analysis')
+    expect(workspace.topBar.value.currentTabId).toBe('analysis')
+    expect(workspace.bindings.value.topBar.value.currentPillId).toBe('analysis')
+
+    workspace.topBar.value.onTabSelect({ id: 'run', label: 'Run' })
+    expect(inner.activeView.value).toBe('run')
+    expect(workspace.sidebar.value.activeView).toBe('run')
+    expect(workspace.pillNav.value.currentItemId).toBe('run')
+    expect(workspace.bindings.value.topBar.value.currentPillId).toBe('run')
+  })
+
+  it('applies and resets pack collections', () => {
+    const workspace = useBioTemplatePackWorkspace('longitudinal-study')
+
+    workspace.applyCollection({ templates: {}, metadata: { source: 'empty' } })
+    expect(workspace.templateIds.value).toEqual([])
+    expect(workspace.collection.value.metadata?.source).toBe('empty')
+
+    workspace.resetToDefaultCollection()
+    expect(workspace.collection.value.metadata?.pack).toBe('longitudinal-study')
+    expect(workspace.templateIds.value).toEqual([
+      'sample-sheet',
+      'time-course',
+      'protocol-steps',
+      'assay-matrix',
+    ])
+  })
+
+  it('saves the generated pack collection through current experiment wiring', async () => {
+    window.history.replaceState({}, '', '/experiments/42/templates')
+    const workspace = useBioTemplatePackWorkspace('molecular-assay', { pluginId: 'p1' })
+
+    const ok = await workspace.saveCurrent()
+
+    expect(ok).toBe(true)
+    expect(mockPut).toHaveBeenCalledWith('/experiments/42/data', {
+      plugin_id: 'p1',
+      data: workspace.collection.value,
+      schema_version: '1.0',
+    })
+  })
+})