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

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

@@ -0,0 +1,1031 @@
+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 AppSidebar from '../../components/AppSidebar.vue'
+import AppTopBar from '../../components/AppTopBar.vue'
+import ControlWorkspaceView from '../../components/ControlWorkspaceView.vue'
+import FormActions from '../../components/FormActions.vue'
+import FormBuilder from '../../components/FormBuilder.vue'
+import {
+  defineControlModel,
+  defineControls,
+  defineDoseDesignControlModel,
+  useControlWorkspace,
+} from '../../composables/useControlSchema'
+
+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(),
+  })),
+}))
+
+function createWorkspace() {
+  return useControlWorkspace(defineControls({
+    threshold: {
+      type: 'number',
+      default: 0.05,
+      section: 'parameters',
+      view: 'analysis',
+    },
+    chartScale: {
+      default: 'linear',
+      options: ['linear', 'log'],
+      section: 'display',
+      view: 'results',
+    },
+  }), {
+    views: {
+      analysis: { label: 'Run' },
+      results: { label: 'Results' },
+    },
+  })
+}
+
+function mountView(workspace = createWorkspace()) {
+  return mount(ControlWorkspaceView, {
+    props: {
+      workspace,
+      title: 'Analysis Workspace',
+    },
+    global: {
+      plugins: [createPinia()],
+      stubs: {
+        'router-link': {
+          template: '<a><slot /></a>',
+        },
+        BaseModal: {
+          template: '<div><slot /></div>',
+        },
+      },
+    },
+  })
+}
+
+const globalOptions = {
+  plugins: [createPinia()],
+  stubs: {
+    'router-link': {
+      template: '<a><slot /></a>',
+    },
+    BaseModal: {
+      template: '<div><slot /></div>',
+    },
+  },
+}
+
+describe('ControlWorkspaceView', () => {
+  it('renders AppTopBar, AppSidebar, and FormBuilder from one workspace object', () => {
+    const workspace = createWorkspace()
+    const wrapper = mountView(workspace)
+
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Analysis Workspace')
+    expect(wrapper.findComponent(AppTopBar).props('tabs')).toBeUndefined()
+    expect(wrapper.findComponent(AppTopBar).props('pillNav')).toEqual([
+      { id: 'analysis', label: 'Run' },
+      { id: 'results', label: 'Results' },
+    ])
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('analysis')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('analysis')
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject(workspace.values)
+  })
+
+  it('can create the workspace internally from direct controls', async () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+        view: 'analysis',
+      },
+      chartScale: {
+        default: 'linear',
+        options: ['linear', 'log'],
+        section: 'display',
+        view: 'results',
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        controlOptions: {
+          views: {
+            analysis: { label: 'Run' },
+            results: { label: 'Results' },
+          },
+        },
+        title: 'Direct Workspace',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Direct Workspace')
+    expect(wrapper.findComponent(AppTopBar).props('pillNav')).toEqual([
+      { id: 'analysis', label: 'Run' },
+      { id: 'results', label: 'Results' },
+    ])
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('analysis')
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.05,
+      chartScale: 'linear',
+    })
+
+    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')
+  })
+
+  it('accepts a nested control model through direct v-bind props', () => {
+    const model = defineControlModel({
+      views: {
+        design: {
+          label: 'Design',
+          sections: {
+            dose: {
+              label: 'Dose design',
+              controls: {
+                replicates: {
+                  type: 'number',
+                  default: 3,
+                  min: 1,
+                },
+              },
+            },
+          },
+        },
+        results: {
+          label: 'Results',
+          section: 'plots',
+          sectionLabel: 'Plots',
+          controls: {
+            chartScale: ['linear', 'log'],
+          },
+        },
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        ...model,
+        title: 'Nested Model Workspace',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).props('pillNav')).toEqual([
+      { id: 'design', label: 'Design' },
+      { id: 'results', label: 'Results' },
+    ])
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('design')
+    expect(wrapper.findComponent(AppSidebar).props('panels')).toMatchObject({
+      design: [{ id: 'design-dose', label: 'Dose design' }],
+      results: [{ id: 'plots', label: 'Plots' }],
+    })
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      replicates: 3,
+      chartScale: 'linear',
+    })
+  })
+
+  it('accepts a nested control model through one model prop', () => {
+    const model = defineControlModel({
+      views: {
+        design: {
+          label: 'Design',
+          sections: {
+            dose: {
+              label: 'Dose design',
+              controls: {
+                replicates: {
+                  type: 'number',
+                  default: 3,
+                  min: 1,
+                },
+              },
+            },
+          },
+        },
+        results: {
+          label: 'Results',
+          section: 'plots',
+          sectionLabel: 'Plots',
+          controls: {
+            chartScale: ['linear', 'log'],
+          },
+        },
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        model,
+        title: 'Model Workspace',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).props('pillNav')).toEqual([
+      { id: 'design', label: 'Design' },
+      { id: 'results', label: 'Results' },
+    ])
+    expect(wrapper.findComponent(AppSidebar).props('panels')).toMatchObject({
+      design: [{ id: 'design-dose', label: 'Dose design' }],
+      results: [{ id: 'plots', label: 'Plots' }],
+    })
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      replicates: 3,
+      chartScale: 'linear',
+    })
+  })
+
+  it('merges model and prop controlOptions initial values', () => {
+    const model = defineControlModel({
+      initialValues: {
+        replicates: 4,
+        chartScale: 'log',
+      },
+      views: {
+        design: {
+          label: 'Design',
+          sections: {
+            dose: {
+              label: 'Dose design',
+              controls: {
+                replicates: {
+                  type: 'number',
+                  default: 3,
+                  min: 1,
+                },
+              },
+            },
+          },
+        },
+        results: {
+          label: 'Results',
+          section: 'plots',
+          sectionLabel: 'Plots',
+          controls: {
+            chartScale: ['linear', 'log'],
+          },
+        },
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        model,
+        controlOptions: {
+          initialValues: {
+            chartScale: 'linear',
+          },
+        },
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      replicates: 4,
+      chartScale: 'linear',
+    })
+  })
+
+  it('accepts a raw nested control model through one model prop', () => {
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        model: {
+          views: {
+            setup: {
+              label: 'Setup',
+              sections: {
+                parameters: {
+                  label: 'Parameters',
+                  controls: {
+                    threshold: { type: 'number', default: 0.05 },
+                    normalize: true,
+                  },
+                },
+              },
+            },
+            review: {
+              label: 'Review',
+              controls: {
+                chartScale: ['linear', 'log'],
+              },
+            },
+          },
+        },
+        title: 'Raw Model Workspace',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Raw Model Workspace')
+    expect(wrapper.findComponent(AppTopBar).props('pillNav')).toEqual([
+      { id: 'setup', label: 'Setup' },
+      { id: 'review', label: 'Review' },
+    ])
+    expect(wrapper.findComponent(AppSidebar).props('panels')).toMatchObject({
+      setup: [{ id: 'setup-parameters', label: 'Parameters' }],
+      review: [{ id: 'review-controls', label: 'Review' }],
+    })
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.05,
+      normalize: true,
+      chartScale: 'linear',
+    })
+  })
+
+  it('resolves component props from a dose design model prop', () => {
+    const model = defineDoseDesignControlModel({
+      selectedWells: ['A1', 'A2'],
+      includeMolecularWeight: true,
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        model,
+      },
+      slots: {
+        default: ({ componentPropsById }) => h(
+          'pre',
+          { class: 'component-props-by-id' },
+          JSON.stringify(componentPropsById),
+        ),
+      },
+      global: globalOptions,
+    })
+
+    expect(JSON.parse(wrapper.find('.component-props-by-id').text())).toEqual({
+      plate: {
+        modelValue: ['A1', 'A2'],
+        format: 96,
+        disabled: false,
+      },
+      dose: {
+        mode: 'serial',
+        targetWells: ['A1', 'A2'],
+        disabled: false,
+        molecularWeight: 300,
+      },
+    })
+  })
+
+  it('accepts component prop mappings from a nested control model', async () => {
+    const model = defineControlModel({
+      views: {
+        design: {
+          label: 'Dose design',
+          controls: {
+            doseMode: {
+              default: 'serial',
+              options: ['serial', 'dilution'],
+            },
+            targetWells: {
+              type: 'tags',
+              default: ['A1', 'A2'],
+            },
+            enabled: true,
+          },
+        },
+      },
+      componentProps: {
+        mode: 'doseMode',
+        targetWells: 'targetWells',
+        disabled: values => !values.enabled,
+      },
+      componentPropsById: {
+        dose: {
+          mode: 'doseMode',
+          targetWells: 'targetWells',
+          disabled: values => !values.enabled,
+        },
+        plate: {
+          modelValue: 'targetWells',
+          disabled: values => !values.enabled,
+        },
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        ...model,
+      },
+      slots: {
+        default: ({ componentProps, componentPropsById }) => h(
+          'pre',
+          { class: 'component-props' },
+          JSON.stringify({ componentProps, componentPropsById }),
+        ),
+      },
+      global: globalOptions,
+    })
+
+    expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
+      componentProps: {
+        mode: 'serial',
+        targetWells: ['A1', 'A2'],
+        disabled: false,
+      },
+      componentPropsById: {
+        dose: {
+          mode: 'serial',
+          targetWells: ['A1', 'A2'],
+          disabled: false,
+        },
+        plate: {
+          modelValue: ['A1', 'A2'],
+          disabled: false,
+        },
+      },
+    })
+
+    wrapper.findComponent(FormBuilder).vm.$emit('update:modelValue', {
+      doseMode: 'dilution',
+      targetWells: ['B1'],
+      enabled: false,
+    })
+    await nextTick()
+
+    expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
+      componentProps: {
+        mode: 'dilution',
+        targetWells: ['B1'],
+        disabled: true,
+      },
+      componentPropsById: {
+        dose: {
+          mode: 'dilution',
+          targetWells: ['B1'],
+          disabled: true,
+        },
+        plate: {
+          modelValue: ['B1'],
+          disabled: true,
+        },
+      },
+    })
+  })
+
+  it('accepts initial values directly for internally generated workspaces', () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+      },
+      chartScale: {
+        default: 'linear',
+        options: ['linear', 'log'],
+        section: 'display',
+      },
+      sampleNames: {
+        type: 'tags',
+        default: ['Control'],
+        section: 'samples',
+      },
+      enabled: true,
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        controlOptions: {
+          initialValues: {
+            threshold: 0.2,
+            chartScale: 'linear',
+          },
+        },
+        initialValues: {
+          chartScale: 'log',
+        },
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.2,
+      chartScale: 'log',
+      enabled: true,
+    })
+  })
+
+  it('syncs internally generated workspace values with v-model:values', async () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+      },
+      chartScale: {
+        default: 'linear',
+        options: ['linear', 'log'],
+        section: 'display',
+      },
+      enabled: true,
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        values: {
+          threshold: 0.2,
+          chartScale: 'log',
+          sampleNames: ['Vehicle', 'Drug'],
+          enabled: true,
+        },
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.2,
+      chartScale: 'log',
+      sampleNames: ['Vehicle', 'Drug'],
+      enabled: true,
+    })
+
+    wrapper.findComponent(FormBuilder).vm.$emit('update:modelValue', {
+      threshold: 0.5,
+      chartScale: 'linear',
+      sampleNames: ['Vehicle', 'Dose A'],
+      enabled: false,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('update:values')?.at(-1)).toEqual([{
+      threshold: 0.5,
+      chartScale: 'linear',
+      sampleNames: ['Vehicle', 'Dose A'],
+      enabled: false,
+    }])
+
+    await wrapper.setProps({
+      values: {
+        threshold: 0.8,
+        chartScale: 'log',
+        sampleNames: ['Vehicle', 'Dose A'],
+        enabled: true,
+      },
+    })
+
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.8,
+      chartScale: 'log',
+      sampleNames: ['Vehicle', 'Dose A'],
+      enabled: true,
+    })
+  })
+
+  it('syncs internally generated workspace values with default v-model', async () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+      },
+      chartScale: {
+        default: 'linear',
+        options: ['linear', 'log'],
+        section: 'display',
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        modelValue: {
+          threshold: 0.2,
+          chartScale: 'log',
+        },
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.2,
+      chartScale: 'log',
+    })
+
+    wrapper.findComponent(FormBuilder).vm.$emit('update:modelValue', {
+      threshold: 0.5,
+      chartScale: 'linear',
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{
+      threshold: 0.5,
+      chartScale: 'linear',
+    }])
+    expect(wrapper.emitted('update:values')?.at(-1)).toEqual([{
+      threshold: 0.5,
+      chartScale: 'linear',
+    }])
+
+    await wrapper.setProps({
+      modelValue: {
+        threshold: 0.8,
+        chartScale: 'log',
+      },
+    })
+
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.8,
+      chartScale: 'log',
+    })
+  })
+
+  it('activates direct controls that are loaded after mount', async () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+        view: 'analysis',
+      },
+      method: {
+        default: 'linear',
+        options: ['linear', 'logistic'],
+        section: 'parameters',
+        view: 'analysis',
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        title: 'Async Workspace',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('')
+
+    await wrapper.setProps({
+      controls,
+      controlOptions: {
+        views: {
+          analysis: { label: 'Run' },
+        },
+      },
+    })
+
+    expect(wrapper.findComponent(AppTopBar).props('pillNav')).toEqual([
+      { id: 'analysis', label: 'Run' },
+    ])
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('analysis')
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.05,
+      method: 'linear',
+    })
+  })
+
+  it('preserves generated values and active view when direct controls change', async () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+        view: 'analysis',
+      },
+      chartScale: {
+        default: 'linear',
+        options: ['linear', 'log'],
+        section: 'display',
+        view: 'results',
+      },
+    })
+    const nextControls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+        view: 'analysis',
+      },
+      chartScale: {
+        default: 'linear',
+        options: ['linear', 'log'],
+        section: 'display',
+        view: 'results',
+      },
+      normalize: {
+        default: true,
+        section: 'display',
+        view: 'results',
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        controlOptions: {
+          views: {
+            analysis: { label: 'Run' },
+            results: { label: 'Results' },
+          },
+        },
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(FormBuilder).vm.$emit('update:modelValue', {
+      threshold: 0.5,
+      chartScale: 'log',
+    })
+    wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    await wrapper.setProps({ controls: nextControls })
+
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('results')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
+    expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject({
+      threshold: 0.5,
+      chartScale: 'log',
+      normalize: true,
+    })
+  })
+
+  it('forwards default FormBuilder submit and cancel events', async () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+      },
+    })
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        controlOptions: {
+          showCancel: true,
+        },
+        showFormActions: true,
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(FormActions).vm.$emit('submit')
+    wrapper.findComponent(FormActions).vm.$emit('cancel')
+    await nextTick()
+
+    expect(wrapper.emitted('submit')).toEqual([[{ threshold: 0.05 }]])
+    expect(wrapper.emitted('cancel')).toEqual([[]])
+  })
+
+  it('passes generated form state and enhancements to sidebar and content forms', () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+        view: 'analysis',
+      },
+    })
+    const formEnhancements = {
+      onFieldChange: vi.fn(),
+    }
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        formEnhancements,
+        formLoading: true,
+        formDisabled: true,
+        formReadonly: true,
+      },
+      global: globalOptions,
+    })
+
+    const sidebar = wrapper.findComponent(AppSidebar)
+    expect(sidebar.props('formEnhancements')).toMatchObject(formEnhancements)
+    expect(sidebar.props('formLoading')).toBe(true)
+    expect(sidebar.props('formDisabled')).toBe(true)
+    expect(sidebar.props('formReadonly')).toBe(true)
+
+    for (const form of wrapper.findAllComponents(FormBuilder)) {
+      expect(form.props('enhancements')).toMatchObject(formEnhancements)
+      expect(form.props('loading')).toBe(true)
+      expect(form.props('disabled')).toBe(true)
+      expect(form.props('readonly')).toBe(true)
+    }
+  })
+
+  it('keeps topbar pill navigation and sidebar view synchronized', async () => {
+    const workspace = createWorkspace()
+    const wrapper = mountView(workspace)
+
+    wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    expect(workspace.activeView.value).toBe('results')
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('results')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
+  })
+
+  it('can opt into legacy topbar tab navigation from the generated workspace', async () => {
+    const controls = defineControls({
+      threshold: {
+        type: 'number',
+        default: 0.05,
+        section: 'parameters',
+        view: 'analysis',
+      },
+      chartScale: {
+        default: 'linear',
+        options: ['linear', 'log'],
+        section: 'display',
+        view: 'results',
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        controlOptions: {
+          views: {
+            analysis: { label: 'Run' },
+            results: { label: 'Results' },
+          },
+        },
+        navigation: 'tabs',
+      },
+      global: globalOptions,
+    })
+
+    const topBar = wrapper.findComponent(AppTopBar)
+    expect(topBar.props('pillNav')).toBeUndefined()
+    expect(topBar.props('tabs')).toEqual([
+      { id: 'analysis', label: 'Run' },
+      { id: 'results', label: 'Results' },
+    ])
+    expect(topBar.props('currentTabId')).toBe('analysis')
+
+    topBar.vm.$emit('tab-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    expect(wrapper.findComponent(AppTopBar).props('currentTabId')).toBe('results')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
+  })
+
+  it('exposes workspace data to the default slot', () => {
+    const workspace = createWorkspace()
+    const wrapper = mount(ControlWorkspaceView, {
+      props: { workspace },
+      slots: {
+        default: '<p class="custom-content">Custom analysis content</p>',
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          'router-link': {
+            template: '<a><slot /></a>',
+          },
+          BaseModal: {
+            template: '<div><slot /></div>',
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.custom-content').text()).toBe('Custom analysis content')
+    expect(wrapper.findAllComponents(FormBuilder)).toHaveLength(1)
+  })
+
+  it('exposes mapped component props to the default slot', async () => {
+    const controls = defineControls({
+      sampleNames: {
+        type: 'tags',
+        default: ['Control', 'Treatment'],
+        section: 'samples',
+      },
+      enabled: true,
+    })
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        controls,
+        componentProps: {
+          samples: 'sampleNames',
+          disabled: values => !values.enabled,
+        },
+      },
+      slots: {
+        default: ({ componentProps }) => h(
+          'pre',
+          { class: 'component-props' },
+          JSON.stringify(componentProps),
+        ),
+      },
+      global: globalOptions,
+    })
+
+    expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
+      samples: ['Control', 'Treatment'],
+      disabled: false,
+    })
+
+    wrapper.findComponent(FormBuilder).vm.$emit('update:modelValue', {
+      sampleNames: ['Vehicle'],
+      enabled: false,
+    })
+    await nextTick()
+
+    expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
+      samples: ['Vehicle'],
+      disabled: true,
+    })
+  })
+
+  it('exposes resolved workspace bindings to custom slots', () => {
+    const model = defineControlModel({
+      views: {
+        analysis: {
+          label: 'Run',
+          controls: {
+            threshold: {
+              type: 'number',
+              default: 0.05,
+            },
+            enabled: true,
+          },
+        },
+      },
+      componentProps: {
+        score: 'threshold',
+        disabled: values => !values.enabled,
+      },
+      componentPropsById: {
+        chart: {
+          score: 'threshold',
+          disabled: values => !values.enabled,
+        },
+      },
+    })
+
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        model,
+      },
+      slots: {
+        topbar: ({ bindings, topBar }) => h(
+          'pre',
+          { class: 'topbar-bindings' },
+          JSON.stringify({
+            legacyTabId: topBar.currentTabId,
+            pillId: bindings.topBar.value.currentPillId,
+          }),
+        ),
+        sidebar: ({ bindings, sidebar }) => h(
+          'pre',
+          { class: 'sidebar-bindings' },
+          JSON.stringify({
+            activeView: sidebar.activeView,
+            bindingActiveView: bindings.sidebar.activeView,
+          }),
+        ),
+        default: ({ bindings, componentPropsById }) => h(
+          'pre',
+          { class: 'default-bindings' },
+          JSON.stringify({
+            formThreshold: bindings.form.modelValue.threshold,
+            bindingScore: bindings.componentProps.value.score,
+            slotScore: componentPropsById.chart.score,
+            bindingSlotScore: bindings.componentPropsById.value.chart.score,
+          }),
+        ),
+      },
+      global: globalOptions,
+    })
+
+    expect(JSON.parse(wrapper.find('.topbar-bindings').text())).toEqual({
+      legacyTabId: 'analysis',
+      pillId: 'analysis',
+    })
+    expect(JSON.parse(wrapper.find('.sidebar-bindings').text())).toEqual({
+      activeView: 'analysis',
+      bindingActiveView: 'analysis',
+    })
+    expect(JSON.parse(wrapper.find('.default-bindings').text())).toEqual({
+      formThreshold: 0.05,
+      bindingScore: 0.05,
+      slotScore: 0.05,
+      bindingSlotScore: 0.05,
+    })
+  })
+})