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

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

@@ -0,0 +1,548 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { computed, h, nextTick, ref } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import AppLayout from '../../components/AppLayout.vue'
+import AppSidebar from '../../components/AppSidebar.vue'
+import AppTopBar from '../../components/AppTopBar.vue'
+import ExperimentPopover from '../../components/ExperimentPopover.vue'
+import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
+import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+import { defineDoseDesignControlModel } from '../../composables/useControlSchema'
+import { usePlatformContext } from '../../composables/usePlatformContext'
+import type { PillNavItem, SidebarToolSection } from '../../types'
+
+vi.mock('../../composables/usePlatformContext', () => ({
+  usePlatformContext: vi.fn(() => ({
+    isIntegrated: computed(() => false),
+    context: ref({ isIntegrated: false, theme: 'system' }),
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+    navigate: vi.fn(),
+    notify: vi.fn(),
+    sendToPlatform: vi.fn(),
+  })),
+}))
+
+vi.mock('../../composables/useTheme', () => ({
+  useTheme: vi.fn(() => ({
+    isDark: ref(false),
+    theme: ref('light'),
+    toggleTheme: vi.fn(),
+  })),
+}))
+
+const pillNav: PillNavItem[] = [
+  { id: 'data', label: 'Data' },
+  { id: 'results', label: 'Results' },
+]
+
+const panels: Record<string, SidebarToolSection[]> = {
+  data: [
+    { id: 'import', label: 'Import', defaultOpen: true },
+  ],
+  results: [
+    { id: 'display', label: 'Display', defaultOpen: true },
+  ],
+}
+
+interface WorkspaceSlotProps {
+  activeView: string
+  setActiveView: (viewId: string) => void
+}
+
+interface WorkspaceComponentSlotProps {
+  values: Record<string, unknown>
+  componentBindingsById: Record<string, { props: Record<string, unknown> }>
+  componentPropsById: Record<string, Record<string, unknown>>
+}
+
+const globalOptions = {
+  plugins: [createPinia()],
+  stubs: {
+    'router-link': {
+      props: ['to', 'custom'],
+      template: `
+        <slot
+          v-if="custom"
+          :href="typeof to === 'string' ? to : '#'"
+          :navigate="() => {}"
+        />
+        <a v-else :href="typeof to === 'string' ? to : '#'"><slot /></a>
+      `,
+    },
+    BaseModal: {
+      template: '<div><slot /></div>',
+    },
+  },
+}
+
+describe('PluginWorkspaceView', () => {
+  it('renders the standard AppLayout, AppTopBar, and AppSidebar plugin shell', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'MS Uploader',
+        subtitle: 'Import and visualize',
+        pillNav,
+        panels,
+        sidebarTitle: 'Tools',
+        sidebarSubtitle: 'Current file',
+      },
+      slots: {
+        actions: () => h('button', { 'data-test': 'topbar-action' }, 'Run'),
+        'section-import': () => h('button', { 'data-test': 'import-action' }, 'Upload'),
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppLayout).props()).toMatchObject({
+      floating: true,
+      responsiveSidebar: true,
+      sidebarPosition: 'left',
+    })
+    expect(wrapper.findComponent(AppTopBar).props()).toMatchObject({
+      title: 'MS Uploader',
+      subtitle: 'Import and visualize',
+      pillNav,
+      currentPillId: 'data',
+    })
+    expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
+      panels,
+      activeView: 'data',
+      title: 'Tools',
+      subtitle: 'Current file',
+      variant: 'analysis',
+      floating: false,
+      dense: true,
+    })
+    expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
+    expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('data')
+  })
+
+  it('keeps topbar navigation and sidebar panels synchronized in uncontrolled mode', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Analysis',
+        pillNav,
+        panels,
+      },
+      slots: {
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('results')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('results')
+    expect(wrapper.emitted('update:activeView')).toEqual([['results']])
+    expect(wrapper.emitted('pill-select')).toEqual([[{ id: 'results', label: 'Results' }]])
+  })
+
+  it('passes compact control models to the sidebar for generated forms', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Generated Controls',
+        controls: {
+          threshold: {
+            label: 'Threshold',
+            default: 0.05,
+            section: 'parameters',
+            sectionLabel: 'Parameters',
+            view: 'analysis',
+          },
+        },
+        defaultActiveView: 'analysis',
+        values: { threshold: 0.2 },
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
+      controls: {
+        threshold: expect.objectContaining({
+          label: 'Threshold',
+          default: 0.05,
+        }),
+      },
+      activeView: 'analysis',
+      values: { threshold: 0.2 },
+    })
+  })
+
+  it('derives topbar navigation and active view from compact control models', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Generated Workspace',
+        model: {
+          views: {
+            design: {
+              label: 'Design',
+              sections: {
+                plate: {
+                  label: 'Plate setup',
+                  controls: {
+                    plateFormat: {
+                      label: 'Plate format',
+                      default: 96,
+                      options: [96, 384],
+                    },
+                  },
+                },
+              },
+            },
+            run: {
+              label: 'Run',
+              sections: {
+                parameters: {
+                  label: 'Parameters',
+                  controls: {
+                    threshold: {
+                      label: 'Threshold',
+                      default: 0.05,
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      slots: {
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    const topBar = wrapper.findComponent(AppTopBar)
+    expect(topBar.props('pillNav')).toEqual([
+      expect.objectContaining({ id: 'design', label: 'Design' }),
+      expect.objectContaining({ id: 'run', label: 'Run' }),
+    ])
+    expect(topBar.props('currentPillId')).toBe('design')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('design')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('design')
+
+    topBar.vm.$emit('pill-select', { id: 'run', label: 'Run' })
+    await nextTick()
+
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('run')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('run')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('run')
+    expect(wrapper.emitted('update:activeView')).toEqual([['run']])
+  })
+
+  it('can render without a sidebar when callers only need topbar and content', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Simple Plugin',
+        showSidebar: false,
+      },
+      slots: {
+        default: () => h('main', { 'data-test': 'content' }, 'Ready'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Simple Plugin')
+    expect(wrapper.findComponent(AppSidebar).exists()).toBe(false)
+    expect(wrapper.get('[data-test="content"]').text()).toBe('Ready')
+  })
+
+  it('supports route-owned sidebar content through an AppSidebar content target', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Route Tools',
+        sidebarContentId: 'route-sidebar',
+        sidebarCollapsible: false,
+        sidebarCollapsedWidth: '3.5rem',
+        sidebarCollapseButtonLabel: 'Hide route tools',
+        sidebarExpandButtonLabel: 'Show route tools',
+      },
+      slots: {
+        footer: () => h('button', { 'data-test': 'sidebar-footer' }, 'Run'),
+      },
+      global: globalOptions,
+    })
+
+    const sidebar = wrapper.findComponent(AppSidebar)
+    expect(sidebar.props()).toMatchObject({
+      contentId: 'route-sidebar',
+      showWhenEmpty: true,
+      collapsible: false,
+      collapsedWidth: '3.5rem',
+      collapseButtonLabel: 'Hide route tools',
+      expandButtonLabel: 'Show route tools',
+    })
+    expect(wrapper.find('#route-sidebar').exists()).toBe(true)
+    expect(wrapper.get('[data-test="sidebar-footer"]').text()).toBe('Run')
+  })
+
+  it('can provide AppTopBar experiment selection and save wiring from shell props', async () => {
+    vi.mocked(usePlatformContext).mockReturnValueOnce({
+      isIntegrated: computed(() => true),
+      context: ref({ isIntegrated: true, theme: 'system' }),
+      plugin: computed(() => undefined),
+      user: computed(() => undefined),
+      theme: computed(() => 'system' as const),
+      features: computed(() => undefined),
+      navigate: vi.fn(),
+      notify: vi.fn(),
+      sendToPlatform: vi.fn(),
+    })
+    const experimentSave = vi.fn().mockResolvedValue('Saved shell')
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Experiment Shell',
+        experimentShell: true,
+        experiment: {
+          id: 12,
+          name: 'Dose response',
+          status: 'ongoing',
+          experiment_code: 'EXP-012',
+        },
+        experimentSave,
+        experimentSaveDisabled: true,
+        experimentSaveDisabledMessage: 'Upload data first',
+        showSidebar: false,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(ExperimentPopover).props()).toMatchObject({
+      experimentName: 'Dose response',
+      experimentCode: 'EXP-012',
+      experimentStatus: 'ongoing',
+      showSave: true,
+      showDetach: true,
+      saveDisabled: true,
+      saveDisabledMessage: 'Upload data first',
+      saveLoading: false,
+    })
+
+    wrapper.findComponent(ExperimentSelectorModal).vm.$emit('select', {
+      id: 13,
+      name: 'Selected experiment',
+      status: 'planned',
+      experiment_code: 'EXP-013',
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('experiment-select')).toEqual([[
+      {
+        id: 13,
+        name: 'Selected experiment',
+        status: 'planned',
+        experiment_code: 'EXP-013',
+      },
+    ]])
+
+    wrapper.findComponent(ExperimentPopover).vm.$emit('save')
+    await nextTick()
+
+    expect(experimentSave).toHaveBeenCalledTimes(1)
+
+    wrapper.findComponent(ExperimentPopover).vm.$emit('detach')
+    await nextTick()
+
+    expect(wrapper.emitted('experiment-detach')).toEqual([[]])
+  })
+
+  it('exposes model-derived component bindings to workspace slots', async () => {
+    const model = defineDoseDesignControlModel({
+      selectedWells: ['A1', 'A2'],
+      includeMolecularWeight: true,
+    })
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Dose Design',
+        model,
+        modelValue: {
+          selectedWells: ['C1'],
+          plateFormat: 384,
+          doseMode: 'dilution',
+          disabled: true,
+          molecularWeight: 450,
+        },
+      },
+      slots: {
+        default: ({
+          values,
+          componentBindingsById,
+          componentPropsById,
+        }: WorkspaceComponentSlotProps) => h('pre', { 'data-test': 'component-bindings' }, JSON.stringify({
+          values,
+          plate: componentBindingsById.plate.props,
+          dose: componentPropsById.dose,
+        })),
+      },
+      global: globalOptions,
+    })
+
+    expect(JSON.parse(wrapper.get('[data-test="component-bindings"]').text())).toEqual({
+      values: {
+        selectedWells: ['C1'],
+        plateFormat: 384,
+        doseMode: 'dilution',
+        disabled: true,
+        molecularWeight: 450,
+      },
+      plate: {
+        modelValue: ['C1'],
+        format: 384,
+        disabled: true,
+      },
+      dose: {
+        mode: 'dilution',
+        targetWells: ['C1'],
+        disabled: true,
+        molecularWeight: 450,
+      },
+    })
+
+    await wrapper.setProps({
+      modelValue: {
+        selectedWells: ['D1', 'D2'],
+        plateFormat: 96,
+        doseMode: 'serial',
+        disabled: false,
+        molecularWeight: 300,
+      },
+    })
+
+    expect(JSON.parse(wrapper.get('[data-test="component-bindings"]').text())).toMatchObject({
+      values: {
+        selectedWells: ['D1', 'D2'],
+        plateFormat: 96,
+        doseMode: 'serial',
+        disabled: false,
+        molecularWeight: 300,
+      },
+      plate: {
+        modelValue: ['D1', 'D2'],
+        format: 96,
+        disabled: false,
+      },
+      dose: {
+        mode: 'serial',
+        targetWells: ['D1', 'D2'],
+        disabled: false,
+        molecularWeight: 300,
+      },
+    })
+  })
+
+  it('keeps generated component bindings and sidebar forms on one workspace value model', async () => {
+    const model = defineDoseDesignControlModel({
+      selectedWells: ['A1', 'A2'],
+      includeMolecularWeight: true,
+    })
+    let latestSlotProps: WorkspaceComponentSlotProps | undefined
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Dose Design',
+        model,
+      },
+      slots: {
+        default: (slotProps: WorkspaceComponentSlotProps) => {
+          latestSlotProps = slotProps
+          return h('pre', { 'data-test': 'workspace-values' }, JSON.stringify({
+            values: slotProps.values,
+            plate: slotProps.componentBindingsById.plate.props,
+            dose: slotProps.componentPropsById.dose,
+          }))
+        },
+      },
+      global: globalOptions,
+    })
+
+    expect(JSON.parse(wrapper.get('[data-test="workspace-values"]').text())).toMatchObject({
+      values: {
+        selectedWells: ['A1', 'A2'],
+        plateFormat: 96,
+        doseMode: 'serial',
+        disabled: false,
+        molecularWeight: 300,
+      },
+      plate: {
+        modelValue: ['A1', 'A2'],
+        format: 96,
+        disabled: false,
+      },
+    })
+
+    const updateSelectedWells = latestSlotProps?.componentBindingsById.plate.props[
+      'onUpdate:modelValue'
+    ] as ((wellIds: string[]) => void) | undefined
+    updateSelectedWells?.(['E1', 'E2'])
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{
+      selectedWells: ['E1', 'E2'],
+      plateFormat: 96,
+      doseMode: 'serial',
+      disabled: false,
+      molecularWeight: 300,
+    }])
+    expect(JSON.parse(wrapper.get('[data-test="workspace-values"]').text())).toMatchObject({
+      values: {
+        selectedWells: ['E1', 'E2'],
+        plateFormat: 96,
+        doseMode: 'serial',
+        disabled: false,
+        molecularWeight: 300,
+      },
+      plate: {
+        modelValue: ['E1', 'E2'],
+        format: 96,
+      },
+      dose: {
+        targetWells: ['E1', 'E2'],
+      },
+    })
+
+    wrapper.findComponent(AppSidebar).vm.$emit('update:modelValue', {
+      selectedWells: ['F1'],
+      plateFormat: 384,
+      doseMode: 'dilution',
+      disabled: true,
+      molecularWeight: 450,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('update:values')?.at(-1)).toEqual([{
+      selectedWells: ['F1'],
+      plateFormat: 384,
+      doseMode: 'dilution',
+      disabled: true,
+      molecularWeight: 450,
+    }])
+    expect(JSON.parse(wrapper.get('[data-test="workspace-values"]').text())).toMatchObject({
+      values: {
+        selectedWells: ['F1'],
+        plateFormat: 384,
+        doseMode: 'dilution',
+        disabled: true,
+        molecularWeight: 450,
+      },
+      plate: {
+        modelValue: ['F1'],
+        format: 384,
+        disabled: true,
+      },
+      dose: {
+        mode: 'dilution',
+        targetWells: ['F1'],
+        disabled: true,
+        molecularWeight: 450,
+      },
+    })
+  })
+})

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'),
+    ])
+  })
+})