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

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

@@ -305,6 +305,17 @@ describe('DataFrame', () => {
       expect(rows).toHaveLength(0)
     })
 
+    it('should treat whitespace-only search as empty', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, searchable: true },
+      })
+      const searchInput = wrapper.find('.mint-dataframe__search')
+      await searchInput.setValue('   ')
+
+      const rows = wrapper.findAll('.mint-dataframe__row')
+      expect(rows).toHaveLength(3)
+    })
+
     it('should be case-insensitive', async () => {
       const wrapper = mount(DataFrame, {
         props: { data: mockData, columns: mockColumns, searchable: true },

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

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import DatePicker from '../../components/DatePicker.vue'
+
+function dropdown(): HTMLElement | null {
+  return document.body.querySelector('.mint-date-picker__dropdown')
+}
+
+describe('DatePicker', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('uses shared dropdown state with teleported calendar content', async () => {
+    const wrapper = mount(DatePicker, {
+      props: {
+        modelValue: '2026-04-22',
+      },
+      attachTo: document.body,
+    })
+
+    await wrapper.get('input').trigger('click')
+    expect(dropdown()).not.toBeNull()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    expect(dropdown()).toBeNull()
+
+    await wrapper.get('input').trigger('click')
+    expect(dropdown()).not.toBeNull()
+
+    const nextButton = document.body.querySelector<HTMLButtonElement>('[aria-label="Next month"]')
+    expect(nextButton).not.toBeNull()
+    nextButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    expect(dropdown()).not.toBeNull()
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    expect(dropdown()).toBeNull()
+
+    wrapper.unmount()
+  })
+})

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

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import CalendarGridPanel from '../../components/CalendarGridPanel.vue'
+import DateTimePicker from '../../components/DateTimePicker.vue'
+
+describe('DateTimePicker', () => {
+  it('uses the shared calendar panel and keeps time selection working', async () => {
+    const wrapper = mount(DateTimePicker, {
+      props: {
+        modelValue: '2026-04-22T14:30',
+      },
+    })
+
+    await wrapper.find('input').trigger('click')
+    await nextTick()
+
+    expect(wrapper.findComponent(CalendarGridPanel).exists()).toBe(true)
+    expect(wrapper.find('.mint-date-picker__day--selected').text()).toBe('22')
+
+    const timeButton = wrapper.findAll('.mint-datetime-picker__time-chip')
+      .find((button) => button.text() === '09:00')
+    expect(timeButton).toBeDefined()
+
+    await timeButton?.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-04-22T09:00'])
+  })
+
+  it('uses shared dropdown state for Escape close behavior', async () => {
+    const wrapper = mount(DateTimePicker, {
+      props: {
+        modelValue: '2026-04-22T14:30',
+      },
+      attachTo: document.body,
+    })
+
+    await wrapper.find('input').trigger('click')
+    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(true)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+
+    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+})

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

@@ -84,6 +84,29 @@ describe('DropdownButton', () => {
       expect(wrapper.emitted('select')).toHaveLength(1)
       expect(wrapper.emitted('select')?.[0]).toEqual([mockOptions[1]])
     })
+
+    it('accepts string and number shorthand options', async () => {
+      const wrapper = mount(DropdownButton, {
+        props: {
+          modelValue: 96,
+          options: ['custom', 96, { value: 'log', label: 'Log scale' }],
+        },
+      })
+
+      expect(wrapper.find('.mint-dropdown-button__label').text()).toBe('96')
+
+      await wrapper.find('.mint-dropdown-button__trigger').trigger('click')
+      expect(wrapper.findAll('.mint-dropdown-button__option').map(option => option.text())).toEqual([
+        'custom',
+        '96',
+        'Log scale',
+      ])
+
+      await wrapper.findAll('.mint-dropdown-button__option')[0].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['custom'])
+      expect(wrapper.emitted('select')?.[0]).toEqual([{ value: 'custom', label: 'custom' }])
+    })
   })
 
   describe('toggle open/close', () => {

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

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import EmptyState from '../../components/EmptyState.vue'
+
+describe('EmptyState', () => {
+  it('renders action through BaseButton and emits action clicks', async () => {
+    const wrapper = mount(EmptyState, {
+      props: {
+        title: 'No experiments',
+        actionLabel: 'Create experiment',
+      },
+    })
+
+    const button = wrapper.find('.mint-button')
+    expect(button.exists()).toBe(true)
+    expect(button.classes()).toContain('mint-button--primary')
+    expect(button.text()).toBe('Create experiment')
+
+    await button.trigger('click')
+
+    expect(wrapper.emitted('action')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import ExperimentPopover from '../../components/ExperimentPopover.vue'
+
+function mountPopover(props = {}) {
+  return mount(ExperimentPopover, {
+    props,
+    attachTo: document.body,
+    global: {
+      stubs: {
+        ConfirmDialog: {
+          template: '<div data-test="confirm-dialog" />',
+        },
+      },
+    },
+  })
+}
+
+describe('ExperimentPopover', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('opens and closes the popover on trigger and outside click', async () => {
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      experimentCode: 'EXP-001',
+    })
+
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(true)
+
+    document.body.click()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('emits select and closes when changing experiment context', async () => {
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      experimentCode: 'EXP-001',
+    })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    await wrapper.find('.mint-experiment-popover__change-btn').trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+})

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

@@ -0,0 +1,296 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import FormBuilder from '../../components/FormBuilder.vue'
+import FormActions from '../../components/FormActions.vue'
+import { defineControlModel, useControlWorkspace, type ControlSchema } from '../../composables/useControlSchema'
+import type { FormSchema } from '../../types/form-builder'
+
+const controls: ControlSchema = {
+  threshold: {
+    label: 'Threshold',
+    default: 0.05,
+    min: 0,
+    max: 1,
+    section: 'parameters',
+    sectionLabel: 'Parameters',
+  },
+  method: {
+    label: 'Method',
+    default: 'linear',
+    options: ['linear', 'logistic'],
+    section: 'parameters',
+  },
+  notes: {
+    label: 'Notes',
+    placeholder: 'Optional notes',
+    section: 'metadata',
+    sectionLabel: 'Metadata',
+  },
+}
+
+describe('FormBuilder', () => {
+  it('renders compact controls without a prebuilt FormSchema', () => {
+    const wrapper = mount(FormBuilder, {
+      props: { controls },
+    })
+
+    expect(wrapper.find('.mint-form-builder').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Parameters')
+    expect(wrapper.text()).toContain('Metadata')
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.05')
+    expect(wrapper.find('select').exists()).toBe(true)
+  })
+
+  it('merges compact control defaults with incoming model values', async () => {
+    const wrapper = mount(FormBuilder, {
+      props: {
+        controls,
+        modelValue: { threshold: 0.25 },
+      },
+    })
+
+    await wrapper.find('input').setValue('0.5')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      threshold: 0.5,
+      method: 'linear',
+      notes: '',
+    })
+  })
+
+  it('uses controlOptions initialValues over compact control defaults', () => {
+    const wrapper = mount(FormBuilder, {
+      props: {
+        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')
+  })
+
+  it('syncs external modelValue changes into rendered fields', async () => {
+    const wrapper = mount(FormBuilder, {
+      props: {
+        controls,
+        modelValue: { threshold: 0.25 },
+      },
+    })
+
+    await wrapper.setProps({ modelValue: { threshold: 0.75, method: 'logistic' } })
+
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.75')
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+  })
+
+  it('syncs compact controls schema changes into rendered fields and submit data', async () => {
+    const thresholdOnly: ControlSchema = {
+      threshold: controls.threshold,
+    }
+
+    const wrapper = mount(FormBuilder, {
+      props: {
+        controls: thresholdOnly,
+      },
+    })
+
+    await wrapper.find('input').setValue('0.5')
+    await wrapper.setProps({
+      controls: {
+        threshold: controls.threshold,
+        method: controls.method,
+      },
+    })
+
+    expect(wrapper.find('select').exists()).toBe(true)
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.5')
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+
+    wrapper.findComponent(FormActions).vm.$emit('submit')
+    await flushPromises()
+
+    expect(wrapper.emitted('submit')?.at(-1)?.[0]).toMatchObject({
+      threshold: 0.5,
+      method: 'linear',
+    })
+  })
+
+  it('removes stale field data when compact controls are removed', async () => {
+    const wrapper = mount(FormBuilder, {
+      props: { controls },
+    })
+
+    await wrapper.setProps({
+      controls: {
+        method: controls.method,
+      },
+    })
+
+    expect(wrapper.find('input').exists()).toBe(false)
+    wrapper.findComponent(FormActions).vm.$emit('submit')
+    await flushPromises()
+
+    const submitted = wrapper.emitted('submit')?.at(-1)?.[0] as Record<string, unknown>
+    expect(submitted).toMatchObject({ method: 'linear' })
+    expect(submitted).not.toHaveProperty('threshold')
+  })
+
+  it('renders fields from a complete control model binding', async () => {
+    const model = defineControlModel({
+      views: {
+        run: {
+          label: 'Run',
+          sections: {
+            parameters: {
+              label: 'Parameters',
+              controls: {
+                threshold: { label: 'Threshold', default: 0.05, min: 0, max: 1 },
+                method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
+              },
+            },
+          },
+        },
+      },
+    })
+    const wrapper = mount(FormBuilder, {
+      props: {
+        model,
+        modelValue: { threshold: 0.25 },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Parameters')
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+
+    await wrapper.find('input').setValue('0.5')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      threshold: 0.5,
+      method: 'linear',
+    })
+  })
+
+  it('uses initialValues from a complete control model binding', () => {
+    const model = defineControlModel({
+      initialValues: {
+        threshold: 0.25,
+        method: 'logistic',
+      },
+      views: {
+        run: {
+          label: 'Run',
+          sections: {
+            parameters: {
+              label: 'Parameters',
+              controls: {
+                threshold: { label: 'Threshold', default: 0.05, min: 0, max: 1 },
+                method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
+              },
+            },
+          },
+        },
+      },
+    })
+    const wrapper = mount(FormBuilder, {
+      props: {
+        model,
+        controlOptions: {
+          initialValues: {
+            method: 'linear',
+          },
+        },
+      },
+    })
+
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+  })
+
+  it('ignores external modelValue keys that are not part of the form schema', async () => {
+    const wrapper = mount(FormBuilder, {
+      props: {
+        controls,
+        modelValue: { threshold: 0.25, externalContext: 'experiment-1' },
+      },
+    })
+
+    await wrapper.find('input').setValue('0.5')
+    await wrapper.setProps({
+      modelValue: { threshold: 0.5, method: 'linear', externalContext: 'experiment-2' },
+    })
+
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.5')
+    expect((wrapper.findComponent(FormBuilder).vm as unknown as { form: { dirty: Record<string, boolean> } }).form.dirty.threshold).toBe(true)
+  })
+
+  it('works with direct useControlWorkspace form bindings', async () => {
+    const workspace = useControlWorkspace({
+      threshold: 0.05,
+      method: ['linear', 'logistic'],
+    })
+    const wrapper = mount(FormBuilder, {
+      props: workspace.form,
+    })
+
+    await wrapper.find('input').setValue('0.5')
+    expect(workspace.values.threshold).toBe(0.5)
+
+    workspace.setValues({ method: 'logistic' })
+    await nextTick()
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+  })
+
+  it('uses explicit schema when both schema and controls are provided', () => {
+    const schema: FormSchema = {
+      sections: [
+        {
+          id: 'explicit',
+          title: 'Explicit Schema',
+          fields: [
+            {
+              name: 'explicitField',
+              label: 'Explicit Field',
+              type: 'text',
+              defaultValue: 'from schema',
+            },
+          ],
+        },
+      ],
+    }
+
+    const wrapper = mount(FormBuilder, {
+      props: { controls, schema },
+    })
+
+    expect(wrapper.text()).toContain('Explicit Schema')
+    expect(wrapper.text()).not.toContain('Parameters')
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('from schema')
+  })
+
+  it('can hide the default actions for embedded forms', () => {
+    const wrapper = mount(FormBuilder, {
+      props: {
+        controls,
+        showActions: false,
+      },
+    })
+
+    expect(wrapper.find('.mint-form-actions').exists()).toBe(false)
+  })
+
+  it('renders default actions by default', () => {
+    const wrapper = mount(FormBuilder, {
+      props: { controls },
+    })
+
+    expect(wrapper.find('.mint-form-actions').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import FormFieldRenderer from '../../components/FormFieldRenderer.vue'
+import FormSection from '../../components/FormSection.vue'
+import { useFormBuilder } from '../../composables/useFormBuilder'
+import type { FormSchema } from '../../types/form-builder'
+
+const schema: FormSchema = {
+  sections: [
+    {
+      id: 'parameters',
+      title: 'Parameters',
+      fields: [
+        { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.05' },
+      ],
+    },
+  ],
+}
+
+describe('deprecated form compatibility components', () => {
+  it('keeps FormFieldRenderer rendering through the internal renderer', () => {
+    const builder = useFormBuilder(schema)
+    const field = schema.sections[0].fields[0]
+
+    const wrapper = mount(FormFieldRenderer, {
+      props: {
+        field,
+        resolvedProps: builder.getResolvedFieldProps(field),
+        form: builder.form,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Threshold')
+    expect(wrapper.find('input').exists()).toBe(true)
+  })
+
+  it('keeps FormFieldRenderer field slot forwarding', () => {
+    const builder = useFormBuilder(schema)
+    const field = schema.sections[0].fields[0]
+
+    const wrapper = mount(FormFieldRenderer, {
+      props: {
+        field,
+        resolvedProps: builder.getResolvedFieldProps(field),
+        form: builder.form,
+      },
+      slots: {
+        'field:threshold': '<div class="custom-field">Custom threshold</div>',
+      },
+    })
+
+    expect(wrapper.find('.custom-field').text()).toBe('Custom threshold')
+    expect(wrapper.find('input').exists()).toBe(false)
+  })
+
+  it('keeps FormSection section and field slot forwarding', () => {
+    const builder = useFormBuilder(schema)
+    const section = schema.sections[0]
+
+    const wrapper = mount(FormSection, {
+      props: {
+        section,
+        builder,
+      },
+      slots: {
+        'field:threshold': '<div class="custom-field">Custom threshold</div>',
+        'section:parameters:after': '<div class="section-after">After section</div>',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Parameters')
+    expect(wrapper.find('.custom-field').text()).toBe('Custom threshold')
+    expect(wrapper.find('.section-after').text()).toBe('After section')
+    expect(wrapper.find('input').exists()).toBe(false)
+  })
+
+  it('keeps FormSection whole-section slot forwarding', () => {
+    const builder = useFormBuilder(schema)
+    const section = schema.sections[0]
+
+    const wrapper = mount(FormSection, {
+      props: {
+        section,
+        builder,
+      },
+      slots: {
+        'section:parameters': '<div class="custom-section">Custom section</div>',
+      },
+    })
+
+    expect(wrapper.find('.custom-section').text()).toBe('Custom section')
+    expect(wrapper.text()).not.toContain('Threshold')
+  })
+})

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

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import GroupAssigner from '../../components/GroupAssigner.vue'
+import type { GroupItem } from '../../types'
+
+const groups: GroupItem[] = [
+  { name: 'control-a', color: '#3B82F6', count: 3 },
+  { name: 'treatment-a', color: '#F43F5E', count: 4 },
+]
+
+describe('GroupAssigner', () => {
+  it('uses shared assignment state for counts, validation, and emitted updates', async () => {
+    const wrapper = mount(GroupAssigner, {
+      props: {
+        groups,
+        group1: ['control-a'],
+        group2: [],
+        minPerGroup: 1,
+      },
+    })
+
+    expect(wrapper.text()).toContain('3 samples')
+    expect(wrapper.text()).toContain('0 samples')
+    expect(wrapper.text()).toContain('Add 1 more to Treatment')
+
+    await wrapper.find('.mint-group-assigner__pill-remove').trigger('click')
+    expect(wrapper.emitted('update:group1')?.[0]).toEqual([[]])
+    expect(wrapper.emitted('update:group2')).toBeUndefined()
+  })
+})