@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

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

@@ -11,7 +11,7 @@ describe('SettingsModal', () => {
   function mountSettingsModal(props = {}, slots = {}, pinia = createPinia()) {
     return mount(SettingsModal, {
       props: {
-        modelValue: true,
+        open: true,
         showAppearance: false,
         ...props,
       },
@@ -77,10 +77,10 @@ describe('SettingsModal', () => {
       ],
     }
 
-    const wrapper = mountSettingsModal({ schema: baseSchema, layout: 'horizontal' })
+    const wrapper = mountSettingsModal({ spec: baseSchema, layout: 'horizontal' })
 
     await wrapper.find('.mint-settings-modal input').setValue('0.5')
-    await wrapper.setProps({ schema: nextSchema })
+    await wrapper.setProps({ spec: nextSchema })
 
     // "1" = the tab's modified-from-default count (threshold 0.1 → 0.5).
     const tabs = wrapper.findAll('.mint-modal__tab')
@@ -119,12 +119,12 @@ describe('SettingsModal', () => {
     }
 
     const wrapper = mountSettingsModal({
-      schema: baseSchema,
+      spec: baseSchema,
       values: { threshold: '0.25' },
     })
 
     await wrapper.find('.mint-settings-modal input').setValue('0.5')
-    await wrapper.setProps({ schema: nextSchema })
+    await wrapper.setProps({ spec: nextSchema })
 
     const inputs = wrapper.findAll('.mint-settings-modal input')
     expect((inputs[0].element as HTMLInputElement).value).toBe('0.25')
@@ -148,7 +148,7 @@ describe('SettingsModal', () => {
       ],
     }
     const wrapper = mountSettingsModal({
-      schema,
+      spec: schema,
       values: {
         threshold: 0.25,
         database_url: '**********',
@@ -163,7 +163,7 @@ describe('SettingsModal', () => {
     })
   })
 
-  it('renders compact controls as schema-driven settings', async () => {
+  it('renders a control model as schema-driven settings', async () => {
     const controls: ControlSchema = {
       threshold: {
         label: 'Threshold',
@@ -180,7 +180,7 @@ describe('SettingsModal', () => {
       },
     }
 
-    const wrapper = mountSettingsModal({ controls, layout: 'horizontal' })
+    const wrapper = mountSettingsModal({ spec: defineControlModel({ controls }), layout: 'horizontal' })
 
     const tabs = wrapper.findAll('.mint-modal__tab')
     expect(tabs.map(tab => tab.text())).toEqual(['Parameters', 'Advanced'])
@@ -196,7 +196,7 @@ describe('SettingsModal', () => {
     })
   })
 
-  it('uses controlOptions initialValues for compact control settings', async () => {
+  it('uses the control model initialValues over control defaults', async () => {
     const controls: ControlSchema = {
       threshold: {
         label: 'Threshold',
@@ -213,13 +213,13 @@ describe('SettingsModal', () => {
     }
 
     const wrapper = mountSettingsModal({
-      controls,
-      controlOptions: {
+      spec: defineControlModel({
+        controls,
         initialValues: {
           threshold: 0.35,
           method: 'logistic',
         },
-      },
+      }),
     })
 
     expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('0.35')
@@ -251,7 +251,7 @@ describe('SettingsModal', () => {
       },
     })
 
-    const wrapper = mountSettingsModal({ model })
+    const wrapper = mountSettingsModal({ spec: model })
 
     expect(wrapper.text()).toContain('Threshold')
     expect(wrapper.text()).toContain('Method')
@@ -265,42 +265,7 @@ describe('SettingsModal', () => {
     })
   })
 
-  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('.mint-settings-modal 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 () => {
+  it('activates a control model that is loaded after mount', async () => {
     const controls: ControlSchema = {
       threshold: {
         label: 'Threshold',
@@ -318,7 +283,7 @@ describe('SettingsModal', () => {
 
     expect(wrapper.find('.manual-tab').exists()).toBe(true)
 
-    await wrapper.setProps({ controls })
+    await wrapper.setProps({ spec: defineControlModel({ controls }) })
 
     expect(wrapper.text()).toContain('Threshold')
     expect(wrapper.find('.manual-tab').exists()).toBe(false)
@@ -351,14 +316,14 @@ describe('SettingsModal', () => {
       ],
     }
 
-    const userWrapper = mountSettingsModal({ schema, userType: 'user' })
+    const userWrapper = mountSettingsModal({ spec: schema, userType: 'user' })
 
     expect(userWrapper.text()).toContain('Common')
     expect(userWrapper.text()).toContain('User Note')
     expect(userWrapper.text()).not.toContain('Admin Secret')
     expect(userWrapper.text()).not.toContain('Admin Only')
 
-    const adminWrapper = mountSettingsModal({ schema, userType: 'admin', layout: 'horizontal' })
+    const adminWrapper = mountSettingsModal({ spec: schema, userType: 'admin', layout: 'horizontal' })
 
     expect(adminWrapper.findAll('.mint-modal__tab').map(tab => tab.text())).toEqual([
       'General',
@@ -376,7 +341,7 @@ describe('SettingsModal', () => {
   it('uses SDK auth permissions when no user type override is passed', () => {
     const pinia = createPinia()
     const auth = useAuthStore(pinia)
-    auth.setUserInfo({
+    auth.userInfo = ({
       id: 1,
       username: 'admin',
       shortname: null,
@@ -402,7 +367,7 @@ describe('SettingsModal', () => {
       ],
     }
 
-    const wrapper = mountSettingsModal({ schema }, {}, pinia)
+    const wrapper = mountSettingsModal({ spec: schema }, {}, pinia)
 
     expect(wrapper.text()).toContain('Registry')
     expect(wrapper.text()).not.toContain('Danger Zone')
@@ -410,7 +375,7 @@ describe('SettingsModal', () => {
 
   it('should hide an admin-only group from a non-admin when the Python SDK marks it admin', () => {
     const pinia = createPinia()
-    useAuthStore(pinia).setUserInfo({
+    useAuthStore(pinia).userInfo = ({
       id: 2,
       username: 'member',
       shortname: null,
@@ -432,11 +397,38 @@ describe('SettingsModal', () => {
       ],
     }
 
-    const wrapper = mountSettingsModal({ schema }, {}, pinia)
+    const wrapper = mountSettingsModal({ spec: schema }, {}, pinia)
 
     expect(wrapper.text()).not.toContain('NAS root')
   })
 
+  it.each([
+    [false, true],
+    [true, false],
+  ])('should show an admin-only group to an integrated page with no user when authRequired is %s', (authRequired, shown) => {
+    // With sign-in turned off every caller is the implicit administrator.
+    const injected = window as Window & { __MINT_PLATFORM__?: unknown }
+    injected.__MINT_PLATFORM__ = { isIntegrated: true, authRequired, platformOrigin: '', platformApiUrl: '/api', features: {} }
+    try {
+      const schema: SettingsModalSchema = {
+        groups: [
+          {
+            id: 'storage',
+            label: 'Storage',
+            access: { requiresAdmin: true },
+            fields: [{ name: 'nasRoot', label: 'NAS root', type: 'text' }],
+          },
+        ],
+      }
+
+      const wrapper = mountSettingsModal({ spec: schema })
+
+      expect(wrapper.text().includes('NAS root')).toBe(shown)
+    } finally {
+      delete injected.__MINT_PLATFORM__
+    }
+  })
+
   it('should read access rules only from the nested access policy', () => {
     // The flat duplicates were removed in 1.3; a leftover flat key no longer gates anything.
     const schema = {
@@ -450,7 +442,7 @@ describe('SettingsModal', () => {
       ],
     } as unknown as SettingsModalSchema
 
-    const wrapper = mountSettingsModal({ schema, userType: 'user' })
+    const wrapper = mountSettingsModal({ spec: schema, userType: 'user' })
 
     expect(wrapper.text()).toContain('Legacy field')
   })
@@ -517,25 +509,25 @@ describe('SettingsModal', () => {
     }
 
     it('should render the rail when the schema has more than three groups', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       expect(wrapper.find('.mint-modal__rail').exists()).toBe(true)
     })
 
     it('should stack every group without a rail when the schema has three groups or fewer', () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema })
+      const wrapper = mountSettingsModal({ spec: shortSchema })
 
       expect(wrapper.findAll('.mint-settings-modal__group')).toHaveLength(2)
     })
 
     it('should keep the tab strip when the layout is horizontal', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema, layout: 'horizontal' })
+      const wrapper = mountSettingsModal({ spec: railSchema, layout: 'horizontal' })
 
       expect(wrapper.findAll('.mint-modal__tab')).toHaveLength(4)
     })
 
     it('should split the rail into Plugin and Personal sections when appearance is shown', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema, showAppearance: true })
+      const wrapper = mountSettingsModal({ spec: railSchema, showAppearance: true })
 
       expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Plugin', 'Personal'])
     })
@@ -563,38 +555,38 @@ describe('SettingsModal', () => {
     })
 
     it('should not render rail section headings when appearance is hidden', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       expect(wrapper.find('.mint-modal__rail-section').exists()).toBe(false)
     })
 
     it('should show the group description in the pane header when a group is active', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       expect(wrapper.get('.mint-modal__pane-header').text()).toContain('Name and locale')
     })
 
     it('should show the modified count in the rail when a group has changed fields', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema, values: { bottom: 5, top: 50 } })
+      const wrapper = mountSettingsModal({ spec: railSchema, values: { bottom: 5, top: 50 } })
 
       expect(railItem(wrapper, 'Model').get('.mint-modal__rail-item-meta').text()).toBe('2')
     })
 
     it('should mark a row modified when its value differs from the default', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema, values: { pluginName: 'Dose' } })
+      const wrapper = mountSettingsModal({ spec: railSchema, values: { pluginName: 'Dose' } })
 
       expect(wrapper.find('.mint-settings-modal__row--modified').exists()).toBe(true)
     })
 
     it('should not mark a row modified when the field has no default', () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema, values: { note: 'hello' } })
+      const wrapper = mountSettingsModal({ spec: shortSchema, values: { note: 'hello' } })
 
       expect(wrapper.find('.mint-settings-modal__row--modified').exists()).toBe(false)
     })
 
     it('should not mark a stored secret modified when its default is null', () => {
       const wrapper = mountSettingsModal({
-        schema: { groups: [{ id: 'auth', label: 'Auth', fields: [{ name: 'apiKey', label: 'API key', type: 'secret', defaultValue: null }] }] },
+        spec: { groups: [{ id: 'auth', label: 'Auth', fields: [{ name: 'apiKey', label: 'API key', type: 'secret', defaultValue: null }] }] },
         values: { apiKey: { $secret: 'sec_1', set: true } },
       })
 
@@ -602,7 +594,7 @@ describe('SettingsModal', () => {
     })
 
     it('should restore the field default when the row reset button is clicked', async () => {
-      const wrapper = mountSettingsModal({ schema: railSchema, values: { pluginName: 'Dose' } })
+      const wrapper = mountSettingsModal({ spec: railSchema, values: { pluginName: 'Dose' } })
 
       await wrapper.get('.mint-settings-modal__reset').trigger('click')
 
@@ -610,13 +602,13 @@ describe('SettingsModal', () => {
     })
 
     it('should place the row reset in the field cell when the row is modified', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema, values: { pluginName: 'Dose' } })
+      const wrapper = mountSettingsModal({ spec: railSchema, values: { pluginName: 'Dose' } })
 
       expect(wrapper.find('.mint-settings-modal__row-field > .mint-settings-modal__reset').exists()).toBe(true)
     })
 
     it('should restore every field in the group when Restore group defaults is clicked', async () => {
-      const wrapper = mountSettingsModal({ schema: railSchema, values: { bottom: 5, top: 50 } })
+      const wrapper = mountSettingsModal({ spec: railSchema, values: { bottom: 5, top: 50 } })
       await railItem(wrapper, 'Model').trigger('click')
 
       await wrapper.get('.mint-settings-modal__restore-group').trigger('click')
@@ -625,13 +617,13 @@ describe('SettingsModal', () => {
     })
 
     it('should disable Restore group defaults when nothing in the group is modified', () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       expect(wrapper.get('.mint-settings-modal__restore-group').attributes('disabled')).toBeDefined()
     })
 
     it('should list matching fields from every group when searching by hint', async () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       await wrapper.get('.mint-settings-modal__search input').setValue('flagged')
 
@@ -639,7 +631,7 @@ describe('SettingsModal', () => {
     })
 
     it('should label each search result with its group', async () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       await wrapper.get('.mint-settings-modal__search input').setValue('flagged')
 
@@ -647,7 +639,7 @@ describe('SettingsModal', () => {
     })
 
     it('should show the result count in the pane header when searching', async () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       await wrapper.get('.mint-settings-modal__search input').setValue('o')
 
@@ -655,7 +647,7 @@ describe('SettingsModal', () => {
     })
 
     it('should show an empty state when nothing matches the search', async () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
 
       await wrapper.get('.mint-settings-modal__search input').setValue('zzz')
 
@@ -663,7 +655,7 @@ describe('SettingsModal', () => {
     })
 
     it('should clear the search when a rail item is clicked', async () => {
-      const wrapper = mountSettingsModal({ schema: railSchema })
+      const wrapper = mountSettingsModal({ spec: railSchema })
       await wrapper.get('.mint-settings-modal__search input').setValue('flagged')
 
       await railItem(wrapper, 'Model').trigger('click')
@@ -672,27 +664,27 @@ describe('SettingsModal', () => {
     })
 
     it('should render a checkbox field as a toggle inside settings rows', () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema })
+      const wrapper = mountSettingsModal({ spec: shortSchema })
 
       expect(wrapper.find('.mint-settings-modal__row .mint-toggle').exists()).toBe(true)
     })
 
     it('should print a toggle hint under the row when the boolean field has one', () => {
       const wrapper = mountSettingsModal({
-        schema: { groups: [{ id: 'g', label: 'G', fields: [{ name: 'weighted', label: 'Weighted', type: 'toggle', hint: 'Use when variance differs' }] }] },
+        spec: { groups: [{ id: 'g', label: 'G', fields: [{ name: 'weighted', label: 'Weighted', type: 'toggle', hint: 'Use when variance differs' }] }] },
       })
 
       expect(wrapper.get('.mint-settings-modal__row-hint').text()).toBe('Use when variance differs')
     })
 
     it('should say changes take effect immediately before anything changes', () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema })
+      const wrapper = mountSettingsModal({ spec: shortSchema })
 
       expect(wrapper.get('.mint-settings-modal__status').text()).toBe('Changes take effect immediately')
     })
 
     it('should show the applied status after a value changes', async () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema })
+      const wrapper = mountSettingsModal({ spec: shortSchema })
 
       await wrapper.get('.mint-settings-modal input').setValue('Dose')
 
@@ -700,7 +692,7 @@ describe('SettingsModal', () => {
     })
 
     it('should keep the not-yet-applied status when the parent replaces the values', async () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema, values: { pluginName: 'IC50' } })
+      const wrapper = mountSettingsModal({ spec: shortSchema, values: { pluginName: 'IC50' } })
 
       await wrapper.setProps({ values: { pluginName: 'Loaded' } })
 
@@ -708,15 +700,15 @@ describe('SettingsModal', () => {
     })
 
     it('should close when Done is clicked', async () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema })
+      const wrapper = mountSettingsModal({ spec: shortSchema })
 
       await wrapper.get('.mint-settings-modal__done').trigger('click')
 
-      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+      expect(wrapper.emitted('update:open')?.at(-1)).toEqual([false])
     })
 
     it('should render a custom footer slot in place of the Done button', () => {
-      const wrapper = mountSettingsModal({ schema: shortSchema }, { footer: '<button class="custom-save">Save</button>' })
+      const wrapper = mountSettingsModal({ spec: shortSchema }, { footer: '<button class="custom-save">Save</button>' })
 
       expect(wrapper.find('.mint-settings-modal__done').exists()).toBe(false)
     })

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

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import StaleFormBanner from '../../components/StaleFormBanner.vue'
+import VersionConflictDialog from '../../components/VersionConflictDialog.vue'
+
+const at = new Date().toISOString()
+
+describe('StaleFormBanner', () => {
+  it.each([
+    [['Alice Chen'], ['Notes', 'Status'], 'Alice Chen changed Notes and Status'],
+    [['Alice Chen', 'Dana Wu'], ['Notes', 'Status', 'Tags'], 'Alice Chen and Dana Wu changed 3 fields'],
+    [['Alice Chen'], [], 'Alice Chen changed this experiment'],
+  ])('should name the writers %j and the fields %j', (actors, fields, summary) => {
+    const wrapper = mount(StaleFormBanner, {
+      props: { change: { actors, fields, at }, entityNoun: 'this experiment' },
+    })
+
+    expect(wrapper.find('strong').text()).toBe(summary)
+    wrapper.unmount()
+  })
+
+  it.each([
+    ['/experiments/42', true],
+    ['', false],
+  ])('should offer Review only with a review link (%s)', (reviewHref, shown) => {
+    const wrapper = mount(StaleFormBanner, {
+      props: { change: { actors: ['Alice Chen'], fields: [], at }, reviewHref },
+    })
+
+    expect(wrapper.find('a.mint-stale-banner__action').exists()).toBe(shown)
+    wrapper.unmount()
+  })
+})
+
+describe('VersionConflictDialog', () => {
+  it.each([
+    [['Notes', 'End date'], 'Your 2 changes (Notes, End date) are not saved. Pick what to keep.'],
+    [['Notes'], 'Your 1 change (Notes) is not saved. Pick what to keep.'],
+    [[], 'Your changes are not saved. Pick what to keep.'],
+  ])('should name the unsaved changes %j', (changes, message) => {
+    const wrapper = mount(VersionConflictDialog, {
+      props: { open: true, changes },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.find('.mint-version-conflict__message').text()).toBe(message)
+  })
+})

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

@@ -29,7 +29,7 @@ describe('ThemeToggle', () => {
     })
   })
 
-  it('renders through IconButton while preserving the public theme-toggle class', async () => {
+  it('renders an icon-only BaseButton while preserving the public theme-toggle class', async () => {
     const wrapper = mount(ThemeToggle, {
       props: { size: 'sm' },
     })

package/src/__tests__/components/WellPlate.decoration.test.ts

@@ -7,15 +7,17 @@ describe('WellPlate per-well decoration', () => {
   it('applies custom classes and lets custom styles override heatmap borders', () => {
     const wrapper = mount(WellPlate, {
       props: {
-        format: 6,
+        spec: {
+          format: 6,
+          heatmap: { enabled: true, min: 0, max: 1 },
+          wellClass: well => well.id === 'A1' ? 'mint-well-plate__well--outlier' : undefined,
+          wellStyle: well => well.id === 'A1'
+            ? { borderWidth: '2px', borderStyle: 'solid', borderColor: 'var(--mint-warning)' }
+            : undefined,
+        },
         wells: {
           A1: { id: 'A1', row: 0, col: 0, state: 'filled', value: 0.5 },
         },
-        heatmap: { enabled: true, min: 0, max: 1 },
-        wellClass: well => well.id === 'A1' ? 'mint-well-plate__well--outlier' : undefined,
-        wellStyle: well => well.id === 'A1'
-          ? { borderWidth: '2px', borderStyle: 'solid', borderColor: 'var(--mint-warning)' }
-          : undefined,
       },
     })
 
@@ -29,7 +31,7 @@ describe('WellPlate per-well decoration', () => {
   it('should render no glyph when a QC well has no label or id', () => {
     const wrapper = mount(WellPlate, {
       props: {
-        format: 6,
+        spec: { format: 6 },
         wells: { A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'qc' } },
       },
     })
@@ -38,7 +40,7 @@ describe('WellPlate per-well decoration', () => {
   })
 
   it('should draw plain legend swatches when the legend is shown', () => {
-    const wrapper = mount(WellPlate, { props: { format: 6, showLegend: true } })
+    const wrapper = mount(WellPlate, { props: { spec: { format: 6, showLegend: true } } })
 
     const dots = wrapper.findAll('.mint-well-plate__sample-legend-dot')
     expect(dots.map(dot => dot.text())).toEqual(['', '', '', ''])

package/src/__tests__/components/WellPlate.interaction.test.ts

@@ -292,15 +292,14 @@ describe('WellPlate interaction for PlateEditor (7a)', () => {
 describe('WellPlate well names', () => {
   it('should name the sample in the well label even when names are not drawn', () => {
     const wrapper = mount(WellPlate, {
-      props: { format: 6, showWellLabels: false, wells: { A1: { sampleType: 'sample', metadata: { label: 'S001' } } } },
+      props: { spec: { format: 6, showWellLabels: false }, wells: { A1: { sampleType: 'sample', metadata: { label: 'S001' } } } },
     })
 
     expect(wrapper.find('[aria-label="Well A1, Name: S001, Sample type: sample"]').exists()).toBe(true)
   })
 
   const grouped = {
-    format: 6 as const,
-    legendItems: [{ type: 'ctrl', label: 'Control', color: 'red' }],
+    spec: { format: 6 as const, legendItems: [{ type: 'ctrl', label: 'Control', color: 'red' }] },
     wells: { A1: { sampleType: 'qc', group: 'ctrl' } },
   }
 
@@ -319,11 +318,11 @@ describe('WellPlate well names', () => {
 
 describe('WellPlate edit popover', () => {
   it('should not reopen a popover that closed when the plate stopped being editable', async () => {
-    const wrapper = mount(WellPlate, { props: { format: 6, editable: true }, global: { stubs: { teleport: true } } })
+    const wrapper = mount(WellPlate, { props: { spec: { format: 6, editable: true } }, global: { stubs: { teleport: true } } })
     await wrapper.get('[aria-label="Well B2"]').trigger('click')
 
-    await wrapper.setProps({ editable: false })
-    await wrapper.setProps({ editable: true })
+    await wrapper.setProps({ spec: { format: 6, editable: false } })
+    await wrapper.setProps({ spec: { format: 6, editable: true } })
 
     expect(wrapper.findComponent(WellEditPopupInternal).exists()).toBe(false)
   })
@@ -431,7 +430,7 @@ describe('WellPlate Shift-click range selection', () => {
   })
 
   it('should emit the range on Shift+Enter from a focused well', async () => {
-    const wrapper = mount(WellPlate, { props: { format: 6 } })
+    const wrapper = mount(WellPlate, { props: { spec: { format: 6 } } })
     const cells = wrapper.findAll('[role="gridcell"]')
 
     await cells[0].trigger('keydown', { key: 'Enter' })

package/src/__tests__/components/WellPlate.keyboard.test.ts

@@ -6,7 +6,7 @@ import WellPlate from '../../components/WellPlate.vue'
 // unrelated input must keep selecting text.
 describe('WellPlate keyboard scope', () => {
   it('should ignore Ctrl+A pressed outside the plate', () => {
-    const wrapper = mount(WellPlate, { props: { format: 6 }, attachTo: document.body })
+    const wrapper = mount(WellPlate, { props: { spec: { format: 6 } }, attachTo: document.body })
 
     document.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', ctrlKey: true, bubbles: true }))
 
@@ -15,7 +15,7 @@ describe('WellPlate keyboard scope', () => {
   })
 
   it('should select every well on Ctrl+A pressed inside the plate', async () => {
-    const wrapper = mount(WellPlate, { props: { format: 6 } })
+    const wrapper = mount(WellPlate, { props: { spec: { format: 6 } } })
 
     await wrapper.get('[role="gridcell"]').trigger('keydown', { key: 'a', ctrlKey: true })