@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

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

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SequenceInput from '../../components/SequenceInput.vue'
+
+describe('SequenceInput', () => {
+  it('should lead the toolbar with the sequence type when tools are shown', () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATGC' } })
+    expect(wrapper.get('.mint-sequence-input__toolbar').element.firstElementChild?.className)
+      .toBe('mint-sequence-input__type-badge')
+  })
+})
+
+describe('SequenceInput problems (9c)', () => {
+  it('should keep emitting the sanitised value when invalid characters are typed', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATG' } })
+    await wrapper.get('textarea').setValue('ATGXZ')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['ATG'])
+  })
+
+  it('should keep the typed text in the field when invalid characters are typed', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATG' } })
+    await wrapper.get('textarea').setValue('ATGXZ')
+    await wrapper.setProps({ modelValue: 'ATG' })
+    expect((wrapper.get('textarea').element as HTMLTextAreaElement).value).toBe('ATGXZ')
+  })
+
+  it('should show an error naming the invalid characters when they are typed', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATG' } })
+    await wrapper.get('textarea').setValue('ATGXZ')
+    expect(wrapper.get('.mint-sequence-input__problem--error').text()).toBe('Invalid characters: X Z')
+  })
+
+  it('should mark the field as error when invalid characters are typed', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATG' } })
+    await wrapper.get('textarea').setValue('ATGX')
+    expect(wrapper.classes()).toContain('mint-sequence-input--error')
+  })
+
+  it('should warn with the count when the sequence has N bases', () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATNNG' } })
+    expect(wrapper.get('.mint-sequence-input__problem--warning').text()).toBe('2 ambiguous bases (N)')
+  })
+
+  it('should show the typed text when the parent replaces the value', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATG' } })
+    await wrapper.get('textarea').setValue('ATGX')
+    await wrapper.setProps({ modelValue: 'CCC' })
+    expect((wrapper.get('textarea').element as HTMLTextAreaElement).value).toBe('CCC')
+  })
+
+  it('should show the model value when a tool returns it to the last typed text', async () => {
+    const wrapper = mount(SequenceInput, {
+      props: { modelValue: '', 'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value }) },
+    })
+    await wrapper.get('textarea').setValue('ACG')
+    const revComp = wrapper.findAll('button').find(button => button.text() === 'Rev Comp')!
+    await revComp.trigger('click')
+    await revComp.trigger('click')
+    expect((wrapper.get('textarea').element as HTMLTextAreaElement).value).toBe('ACG')
+  })
+
+  it('should not report protein residues typed after a DNA-like prefix when the type is auto', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: 'ATG' } })
+    await wrapper.get('textarea').setValue('ATGKLV')
+    expect(wrapper.find('.mint-sequence-input__problem--error').exists()).toBe(false)
+  })
+})
+
+describe('SequenceInput maxLength', () => {
+  it('should count only valid bases against maxLength when invalid characters are typed', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: '', type: 'dna', maxLength: 5 } })
+    await wrapper.get('textarea').setValue('AT??GC')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['ATGC'])
+  })
+
+  it('should cap the emitted sequence at maxLength bases when more are typed', async () => {
+    const wrapper = mount(SequenceInput, { props: { modelValue: '', type: 'dna', maxLength: 5 } })
+    await wrapper.get('textarea').setValue('ATGCATG')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['ATGCA'])
+  })
+})

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

@@ -19,14 +19,14 @@ describe('SettingsModal schema helpers', () => {
         icon: '<svg />',
         fields: [
           { name: 'title', label: 'Title', type: 'text' },
-          { name: 'adminOnly', label: 'Admin Only', type: 'text', requiresAdmin: true },
+          { name: 'adminOnly', label: 'Admin Only', type: 'text', access: { requiresAdmin: true } },
         ],
         columns: 2,
       },
       {
         id: 'hidden',
         label: 'Hidden',
-        requiresAdmin: true,
+        access: { requiresAdmin: true },
         fields: [
           { name: 'secret', label: 'Secret', type: 'text' },
         ],
@@ -58,7 +58,7 @@ describe('SettingsModal schema helpers', () => {
   it('filters groups and fields with the caller access policy', () => {
     const filtered = filterSettingsSchemaByAccess(
       schema,
-      (item) => !item.requiresAdmin
+      (item) => !item.access?.requiresAdmin
     )
 
     expect(filtered.groups).toHaveLength(1)
@@ -78,11 +78,11 @@ describe('SettingsModal schema helpers', () => {
   it('normalizes manual tabs before access filtering', () => {
     const tabs: SettingsTabInput[] = [
       'General',
-      { id: 'admin', label: 'Admin', requiresAdmin: true },
+      { id: 'admin', label: 'Admin', access: { requiresAdmin: true } },
     ]
 
     expect(
-      normalizeVisibleSettingsTabs(tabs, (item) => !item.requiresAdmin)
+      normalizeVisibleSettingsTabs(tabs, (item) => !item.access?.requiresAdmin)
     ).toEqual([
       { id: 'General', label: 'General' },
     ])

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

@@ -4,6 +4,7 @@ import { describe, expect, it } from 'vitest'
 import SettingsModal from '../../components/SettingsModal.vue'
 import { defineControlModel, type ControlSchema } from '../../composables/useControlSchema'
 import { useAuthStore } from '../../stores/auth'
+import { colorPalettes, useSettingsStore } from '../../stores/settings'
 import type { SettingsModalSchema } from '../../types'
 
 describe('SettingsModal', () => {
@@ -27,6 +28,7 @@ describe('SettingsModal', () => {
   it('accepts string shorthand manual tabs', async () => {
     const wrapper = mountSettingsModal({
       tabs: ['General', 'Advanced'],
+      layout: 'horizontal',
     }, {
       'tab-General': '<div class="general-tab">General Content</div>',
       'tab-Advanced': '<div class="advanced-tab">Advanced Content</div>',
@@ -75,19 +77,20 @@ describe('SettingsModal', () => {
       ],
     }
 
-    const wrapper = mountSettingsModal({ schema: baseSchema })
+    const wrapper = mountSettingsModal({ schema: baseSchema, layout: 'horizontal' })
 
-    await wrapper.find('input').setValue('0.5')
+    await wrapper.find('.mint-settings-modal input').setValue('0.5')
     await wrapper.setProps({ schema: nextSchema })
 
+    // "1" = the tab's modified-from-default count (threshold 0.1 → 0.5).
     const tabs = wrapper.findAll('.mint-modal__tab')
-    expect(tabs.map(tab => tab.text())).toEqual(['General', 'Advanced'])
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.5')
+    expect(tabs.map(tab => tab.text())).toEqual(['General 1', 'Advanced'])
+    expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('0.5')
 
     await tabs[1].trigger('click')
 
     expect(wrapper.text()).toContain('Method')
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('linear')
+    expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('linear')
   })
 
   it('uses controlled values when a schema changes', async () => {
@@ -120,10 +123,10 @@ describe('SettingsModal', () => {
       values: { threshold: '0.25' },
     })
 
-    await wrapper.find('input').setValue('0.5')
+    await wrapper.find('.mint-settings-modal input').setValue('0.5')
     await wrapper.setProps({ schema: nextSchema })
 
-    const inputs = wrapper.findAll('input')
+    const inputs = wrapper.findAll('.mint-settings-modal input')
     expect((inputs[0].element as HTMLInputElement).value).toBe('0.25')
     expect((inputs[1].element as HTMLInputElement).value).toBe('linear')
     expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
@@ -152,7 +155,7 @@ describe('SettingsModal', () => {
       },
     })
 
-    await wrapper.find('input').setValue('0.5')
+    await wrapper.find('.mint-settings-modal input').setValue('0.5')
 
     expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toEqual({
       threshold: 0.5,
@@ -177,13 +180,13 @@ describe('SettingsModal', () => {
       },
     }
 
-    const wrapper = mountSettingsModal({ controls })
+    const wrapper = mountSettingsModal({ controls, layout: 'horizontal' })
 
     const tabs = wrapper.findAll('.mint-modal__tab')
     expect(tabs.map(tab => tab.text())).toEqual(['Parameters', 'Advanced'])
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('0.25')
 
-    await wrapper.find('input').setValue('0.5')
+    await wrapper.find('.mint-settings-modal input').setValue('0.5')
     await tabs[1].trigger('click')
 
     expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
@@ -219,10 +222,10 @@ describe('SettingsModal', () => {
       },
     })
 
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.35')
+    expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('0.35')
     expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
 
-    await wrapper.find('input').setValue('0.5')
+    await wrapper.find('.mint-settings-modal input').setValue('0.5')
 
     expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
       threshold: 0.5,
@@ -252,9 +255,9 @@ describe('SettingsModal', () => {
 
     expect(wrapper.text()).toContain('Threshold')
     expect(wrapper.text()).toContain('Method')
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('0.25')
 
-    await wrapper.find('input').setValue('0.5')
+    await wrapper.find('.mint-settings-modal input').setValue('0.5')
 
     expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
       threshold: 0.5,
@@ -293,7 +296,7 @@ describe('SettingsModal', () => {
       },
     })
 
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.75')
+    expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('0.75')
     expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
   })
 
@@ -319,7 +322,7 @@ describe('SettingsModal', () => {
 
     expect(wrapper.text()).toContain('Threshold')
     expect(wrapper.find('.manual-tab').exists()).toBe(false)
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    expect((wrapper.find('.mint-settings-modal input').element as HTMLInputElement).value).toBe('0.25')
     expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
       threshold: 0.25,
     })
@@ -333,14 +336,14 @@ describe('SettingsModal', () => {
           label: 'General',
           fields: [
             { name: 'common', label: 'Common', type: 'text', defaultValue: 'shared' },
-            { name: 'adminSecret', label: 'Admin Secret', type: 'text', visibleFor: 'admin' },
-            { name: 'userNote', label: 'User Note', type: 'text', visibleFor: 'user' },
+            { name: 'adminSecret', label: 'Admin Secret', type: 'text', access: { visibleFor: 'admin' } },
+            { name: 'userNote', label: 'User Note', type: 'text', access: { visibleFor: 'user' } },
           ],
         },
         {
           id: 'admin',
           label: 'Admin',
-          visibleFor: 'admin',
+          access: { visibleFor: 'admin' },
           fields: [
             { name: 'adminOnly', label: 'Admin Only', type: 'text' },
           ],
@@ -355,7 +358,7 @@ describe('SettingsModal', () => {
     expect(userWrapper.text()).not.toContain('Admin Secret')
     expect(userWrapper.text()).not.toContain('Admin Only')
 
-    const adminWrapper = mountSettingsModal({ schema, userType: 'admin' })
+    const adminWrapper = mountSettingsModal({ schema, userType: 'admin', layout: 'horizontal' })
 
     expect(adminWrapper.findAll('.mint-modal__tab').map(tab => tab.text())).toEqual([
       'General',
@@ -390,10 +393,10 @@ describe('SettingsModal', () => {
         {
           id: 'plugins',
           label: 'Plugins',
-          permissions: ['plugins.configure'],
+          access: { permissions: ['plugins.configure'] },
           fields: [
             { name: 'registry', label: 'Registry', type: 'text' },
-            { name: 'danger', label: 'Danger Zone', type: 'text', requiresAdmin: true },
+            { name: 'danger', label: 'Danger Zone', type: 'text', access: { requiresAdmin: true } },
           ],
         },
       ],
@@ -404,4 +407,349 @@ describe('SettingsModal', () => {
     expect(wrapper.text()).toContain('Registry')
     expect(wrapper.text()).not.toContain('Danger Zone')
   })
+
+  it('should hide an admin-only group from a non-admin when the Python SDK marks it admin', () => {
+    const pinia = createPinia()
+    useAuthStore(pinia).setUserInfo({
+      id: 2,
+      username: 'member',
+      shortname: null,
+      email: null,
+      role: 'member',
+      roleObj: { slug: 'member', permissions: ['plugins.configure'] },
+      isActive: true,
+    })
+    // The shape mint_sdk.schema.apply_settings_form_admin_policy emits for config_requires_admin plugins.
+    const schema: SettingsModalSchema = {
+      groups: [
+        { id: 'general', label: 'General', fields: [{ name: 'note', label: 'Note', type: 'text' }] },
+        {
+          id: 'storage',
+          label: 'Storage',
+          access: { requiresAdmin: true },
+          fields: [{ name: 'nasRoot', label: 'NAS root', type: 'text' }],
+        },
+      ],
+    }
+
+    const wrapper = mountSettingsModal({ schema }, {}, pinia)
+
+    expect(wrapper.text()).not.toContain('NAS root')
+  })
+
+  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 = {
+      groups: [
+        {
+          id: 'legacy',
+          label: 'Legacy',
+          visibleFor: 'admin',
+          fields: [{ name: 'legacyField', label: 'Legacy field', type: 'text' }],
+        },
+      ],
+    } as unknown as SettingsModalSchema
+
+    const wrapper = mountSettingsModal({ schema, userType: 'user' })
+
+    expect(wrapper.text()).toContain('Legacy field')
+  })
+
+  describe('redesign (5d)', () => {
+    const railSchema: SettingsModalSchema = {
+      groups: [
+        {
+          id: 'general',
+          label: 'General',
+          description: 'Name and locale',
+          fields: [
+            { name: 'pluginName', label: 'Plugin name', type: 'text', defaultValue: 'IC50', hint: 'Shown in breadcrumbs' },
+          ],
+        },
+        {
+          id: 'model',
+          label: 'Model',
+          description: 'Curve model and bounds',
+          fields: [
+            { name: 'bottom', label: 'Bottom', type: 'number', defaultValue: 0 },
+            { name: 'top', label: 'Top', type: 'number', defaultValue: 100 },
+          ],
+        },
+        {
+          id: 'qc',
+          label: 'Quality control',
+          fields: [
+            { name: 'minR2', label: 'Minimum R²', type: 'number', defaultValue: 0.95, hint: 'Fits below this threshold are flagged for review' },
+          ],
+        },
+        {
+          id: 'notifications',
+          label: 'Notifications',
+          fields: [
+            { name: 'emailQc', label: 'Email on QC failure', type: 'checkbox', defaultValue: false },
+          ],
+        },
+      ],
+    }
+
+    const shortSchema: SettingsModalSchema = {
+      groups: [
+        {
+          id: 'general',
+          label: 'General',
+          fields: [
+            { name: 'pluginName', label: 'Plugin name', type: 'text', defaultValue: 'IC50' },
+            { name: 'note', label: 'Note', type: 'text' },
+          ],
+        },
+        {
+          id: 'notifications',
+          label: 'Notifications',
+          fields: [
+            { name: 'emailQc', label: 'Email on QC failure', type: 'checkbox', defaultValue: false },
+          ],
+        },
+      ],
+    }
+
+    function railItem(wrapper: ReturnType<typeof mountSettingsModal>, label: string) {
+      return wrapper.findAll('.mint-modal__rail-item').find(item => item.find('.mint-modal__rail-item-label').text() === label)!
+    }
+
+    it('should render the rail when the schema has more than three groups', () => {
+      const wrapper = mountSettingsModal({ schema: 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 })
+
+      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' })
+
+      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 })
+
+      expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Plugin', 'Personal'])
+    })
+
+    it('should list and open Appearance first when appearanceFirst is set', () => {
+      const wrapper = mountSettingsModal({
+        tabs: [{ id: 'plugins', label: 'Plugins' }],
+        showAppearance: true,
+        appearanceFirst: true,
+        layout: 'vertical',
+      })
+
+      expect(wrapper.get('.mint-modal__rail-item--active').text()).toContain('Appearance')
+    })
+
+    it('should label a manual tab rail section from its section', () => {
+      const wrapper = mountSettingsModal({
+        tabs: [{ id: 'plugins', label: 'Plugins', section: 'Platform' }],
+        showAppearance: true,
+        appearanceFirst: true,
+        layout: 'vertical',
+      })
+
+      expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Personal', 'Platform'])
+    })
+
+    it('should not render rail section headings when appearance is hidden', () => {
+      const wrapper = mountSettingsModal({ schema: 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 })
+
+      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 } })
+
+      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' } })
+
+      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' } })
+
+      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 }] }] },
+        values: { apiKey: { $secret: 'sec_1', set: true } },
+      })
+
+      expect(wrapper.find('.mint-settings-modal__row--modified').exists()).toBe(false)
+    })
+
+    it('should restore the field default when the row reset button is clicked', async () => {
+      const wrapper = mountSettingsModal({ schema: railSchema, values: { pluginName: 'Dose' } })
+
+      await wrapper.get('.mint-settings-modal__reset').trigger('click')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({ pluginName: 'IC50' })
+    })
+
+    it('should place the row reset in the field cell when the row is modified', () => {
+      const wrapper = mountSettingsModal({ schema: 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 } })
+      await railItem(wrapper, 'Model').trigger('click')
+
+      await wrapper.get('.mint-settings-modal__restore-group').trigger('click')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({ bottom: 0, top: 100 })
+    })
+
+    it('should disable Restore group defaults when nothing in the group is modified', () => {
+      const wrapper = mountSettingsModal({ schema: 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 })
+
+      await wrapper.get('.mint-settings-modal__search input').setValue('flagged')
+
+      expect(wrapper.findAll('.mint-settings-modal__row')).toHaveLength(1)
+    })
+
+    it('should label each search result with its group', async () => {
+      const wrapper = mountSettingsModal({ schema: railSchema })
+
+      await wrapper.get('.mint-settings-modal__search input').setValue('flagged')
+
+      expect(wrapper.get('.mint-settings-modal__row-group').text()).toBe('Quality control')
+    })
+
+    it('should show the result count in the pane header when searching', async () => {
+      const wrapper = mountSettingsModal({ schema: railSchema })
+
+      await wrapper.get('.mint-settings-modal__search input').setValue('o')
+
+      expect(wrapper.get('.mint-modal__pane-header').text()).toContain('5 results')
+    })
+
+    it('should show an empty state when nothing matches the search', async () => {
+      const wrapper = mountSettingsModal({ schema: railSchema })
+
+      await wrapper.get('.mint-settings-modal__search input').setValue('zzz')
+
+      expect(wrapper.find('.mint-settings-modal__empty').exists()).toBe(true)
+    })
+
+    it('should clear the search when a rail item is clicked', async () => {
+      const wrapper = mountSettingsModal({ schema: railSchema })
+      await wrapper.get('.mint-settings-modal__search input').setValue('flagged')
+
+      await railItem(wrapper, 'Model').trigger('click')
+
+      expect((wrapper.get('.mint-settings-modal__search input').element as HTMLInputElement).value).toBe('')
+    })
+
+    it('should render a checkbox field as a toggle inside settings rows', () => {
+      const wrapper = mountSettingsModal({ schema: 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' }] }] },
+      })
+
+      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 })
+
+      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 })
+
+      await wrapper.get('.mint-settings-modal input').setValue('Dose')
+
+      expect(wrapper.get('.mint-settings-modal__status').text()).toBe('Applied · changes take effect immediately')
+    })
+
+    it('should keep the not-yet-applied status when the parent replaces the values', async () => {
+      const wrapper = mountSettingsModal({ schema: shortSchema, values: { pluginName: 'IC50' } })
+
+      await wrapper.setProps({ values: { pluginName: 'Loaded' } })
+
+      expect(wrapper.get('.mint-settings-modal__status').text()).toBe('Changes take effect immediately')
+    })
+
+    it('should close when Done is clicked', async () => {
+      const wrapper = mountSettingsModal({ schema: shortSchema })
+
+      await wrapper.get('.mint-settings-modal__done').trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.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>' })
+
+      expect(wrapper.find('.mint-settings-modal__done').exists()).toBe(false)
+    })
+
+    it('should render a preview card for each theme when appearance is shown', () => {
+      const wrapper = mountSettingsModal({ showAppearance: true })
+
+      expect(wrapper.findAll('.mint-settings-modal__theme')).toHaveLength(3)
+    })
+
+    it('should set the theme when a theme card is clicked', async () => {
+      const pinia = createPinia()
+      const wrapper = mountSettingsModal({ showAppearance: true }, {}, pinia)
+
+      await wrapper.findAll('.mint-settings-modal__theme')[1].trigger('click')
+
+      expect(useSettingsStore(pinia).theme).toBe('dark')
+    })
+
+    it('should render a swatch strip for each palette when appearance is shown', () => {
+      const wrapper = mountSettingsModal({ showAppearance: true })
+
+      expect(wrapper.findAll('.mint-settings-modal__palette')).toHaveLength(Object.keys(colorPalettes).length)
+    })
+
+    it('should resize the density preview when the density changes', async () => {
+      const pinia = createPinia()
+      const wrapper = mountSettingsModal({ showAppearance: true }, {}, pinia)
+
+      useSettingsStore(pinia).tableDensity = 'compact'
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.get('.mint-settings-modal__density-preview').classes()).toContain('mint-settings-modal__density-preview--compact')
+    })
+  })
 })

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

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import Skeleton from '../../components/Skeleton.vue'
+
+describe('Skeleton', () => {
+  it('should carry its own shape class when a variant is set', () => {
+    const wrapper = mount(Skeleton, { props: { variant: 'circular' } })
+
+    expect(wrapper.classes()).toEqual(['mint-skeleton', 'mint-skeleton--circular', 'skeleton-wave'])
+  })
+
+  it('should breathe for pulse like it does for wave when animation is pulse', () => {
+    const wrapper = mount(Skeleton, { props: { animation: 'pulse' } })
+
+    expect(wrapper.classes()).toContain('skeleton-wave')
+  })
+
+  it('should stay static when animation is none', () => {
+    const wrapper = mount(Skeleton, { props: { animation: 'none' } })
+
+    expect(wrapper.classes()).not.toContain('skeleton-wave')
+  })
+})

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

@@ -0,0 +1,12 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
+
+describe('SmartGroupFieldRecipe', () => {
+  it('should draw the QC chip dot as the neutral QC marker when a qcColor is set', () => {
+    const wrapper = mount(SmartGroupFieldRecipe, { props: { qcColor: '#f43f5e' } })
+
+    const dot = wrapper.find('.sg-qc__chip .sg-dot').element as HTMLElement
+    expect(dot.style.borderColor).toBe('var(--text-secondary-strong)')
+  })
+})