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

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/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()
+  })
+})

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

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import MultiSelect from '../../components/MultiSelect.vue'
+
+const options = [
+  { value: 'a', label: 'A' },
+  { value: 'b', label: 'B' },
+  { value: 'c', label: 'C' },
+]
+
+describe('MultiSelect', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(MultiSelect, {
+      props: {
+        modelValue: ['glucose', 2],
+        options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
+      },
+    })
+
+    expect(wrapper.findAll('button').map(button => button.text())).toEqual([
+      'glucose',
+      '2',
+      'Doxorubicin',
+    ])
+    expect(wrapper.find('.mint-multi-select__summary').text()).toBe('glucose, 2')
+
+    await wrapper.findAll('button')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
+      ['glucose', 2, 'dox'],
+    ])
+  })
+
+  it('uses the shared selection limit for maxSelections', async () => {
+    const wrapper = mount(MultiSelect, {
+      props: {
+        modelValue: ['a'],
+        options,
+        maxSelections: 1,
+      },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.findAll('button')[1].attributes('disabled')).toBeDefined()
+  })
+})