@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

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

@@ -0,0 +1,466 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import AutoGroupModal from '../../components/AutoGroupModal.vue'
+import SampleSelector from '../../components/SampleSelector.vue'
+import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
+import type { AutoGroupResult, SampleGroup } from '../../types'
+
+// Wait for the FileReader-backed CSV read (a macrotask, not a microtask) plus
+// the ensuing reactive renders to settle.
+async function settle() {
+  for (let i = 0; i < 3; i++) {
+    await new Promise(resolve => setTimeout(resolve, 0))
+    await flushPromises()
+  }
+}
+
+describe('SampleSelector', () => {
+  it('uses shared list selection for select-all and individual sample toggles', async () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        samples: ['S1', 'A very long sample name that gets truncated'],
+        modelValue: [],
+        enableGrouping: false,
+        enableSmartGroup: false,
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    await wrapper.find('.mint-sample-selector__select-all input').trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['S1', 'A very long sample name that gets truncated']])
+
+    await wrapper.setProps({ modelValue: ['S1'] })
+    await wrapper.findAll('.mint-sample-selector__flat-item input')[0].trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([[]])
+
+    await wrapper.findAll('.mint-sample-selector__flat-item input')[1].trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[2]).toEqual([['S1', 'A very long sample name that gets truncated']])
+    expect(wrapper.findAll('.mint-sample-selector__flat-item')[1].attributes('title')).toBe(
+      'A very long sample name that gets truncated',
+    )
+  })
+
+  it('uses shared expansion state for grouped sample sections', async () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        samples: ['S1', 'S2'],
+        modelValue: [],
+        groups: [
+          { name: 'Control/A', color: '#3B82F6', samples: ['S1'] },
+          { name: 'Control/B', color: '#06B6D4', samples: ['S2'] },
+        ],
+        enableSmartGroup: false,
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    expect(wrapper.find('.mint-sample-selector__sample-name').exists()).toBe(false)
+
+    await wrapper.find('.mint-sample-selector__expand-btn').trigger('click')
+
+    expect(wrapper.findAll('.mint-sample-selector__sample-name').map(item => item.text())).toEqual(['S1', 'S2'])
+
+    await wrapper.findAll('.mint-sample-selector__expand-btn')[1].trigger('click')
+
+    expect(wrapper.find('.mint-sample-selector__sample-name').exists()).toBe(false)
+  })
+
+  it('can derive samples directly from experiment design data', () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        modelValue: [],
+        designData: {
+          samples: [
+            { sample_name: 'S1', sample_type: 'sample' },
+            { sample_name: 'Blank', sample_type: 'blank' },
+            { sample_name: 'S2', sample_type: 'sample' },
+          ],
+        },
+        enableGrouping: false,
+        enableSmartGroup: false,
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('2 samples')
+    expect(wrapper.findAll('.mint-sample-selector__flat-name').map(item => item.text())).toEqual(['S1', 'S2'])
+  })
+
+  it('merges smart and manual grouping into one launcher', async () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        samples: ['S1', 'S2'],
+        modelValue: [],
+        groups: [],
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    const labels = wrapper.findAll('.mint-sample-selector__actions-row .mint-sample-selector__action-label')
+    expect(labels.map(label => label.text())).toEqual(['Grouping'])
+    expect(wrapper.findAll('.mint-sample-selector__actions-row > .mint-sample-selector__action-btn')).toHaveLength(2)
+
+    await wrapper.findAllComponents({ name: 'BaseButton' })[0].trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'AutoGroupModal' })
+    expect(modal.props('initialMode')).toBe('auto')
+  })
+
+  it('opens the grouping modal in manual mode', async () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        samples: ['S1', 'S2'],
+        modelValue: [],
+        groups: [],
+        enableSmartGroup: false,
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    const labels = wrapper.findAll('.mint-sample-selector__actions-row .mint-sample-selector__action-label')
+    expect(labels.map(label => label.text())).toEqual(['Grouping'])
+
+    await wrapper.findAllComponents({ name: 'BaseButton' })[0].trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'AutoGroupModal' })
+    expect(modal.props('initialMode')).toBe('manual')
+    expect(modal.props('groups')).toEqual([])
+  })
+})
+
+describe('AutoGroupModal manual workflow', () => {
+  it('assigns selected samples to a manual group and subgroup', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: {
+        modelValue: true,
+        initialMode: 'manual',
+        samples: ['S1', 'S2'],
+        groups: [],
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.findAll('.mg2-row')[0].trigger('click')
+    const fields = wrapper.findAll('.mg2-bar .mg2-combo input')
+    await fields[0].setValue('Treatment')
+    await fields[1].setValue('Baseline')
+    await wrapper.find('.mg2-bar .sg-btn--primary').trigger('click')
+    await wrapper.find('.sg-foot .mint-button--primary').trigger('click')
+
+    const result = wrapper.emitted('apply')?.at(-1)?.[0] as AutoGroupResult
+    expect(result.groups).toHaveLength(1)
+    expect(result.groups[0]).toMatchObject({
+      name: 'Treatment/Baseline',
+      samples: ['S1'],
+      // A newly-created manual cohort must carry a concrete hex colour (the
+      // first SAMPLE_GROUP_COLOR_OPTIONS swatch), not a `var(--grp-*)` string
+      // that breaks SampleSelector's hex8 tint concatenation.
+      color: '#3B82F6',
+    })
+  })
+
+  it('moves manual selections out of existing groups before assigning them', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: {
+        modelValue: true,
+        initialMode: 'manual',
+        samples: ['S1', 'S2'],
+        groups: [
+          { name: 'Control', color: '#3B82F6', samples: ['S1'] },
+          { name: 'Treatment', color: '#10B981', samples: [] },
+        ],
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.findAll('.mg2-row')[0].trigger('click')
+    await wrapper.findAll('.mg2-bar .mg2-combo input')[0].setValue('Treatment')
+    await wrapper.find('.mg2-bar .sg-btn--primary').trigger('click')
+    await wrapper.find('.sg-foot .mint-button--primary').trigger('click')
+
+    const result = wrapper.emitted('apply')?.at(-1)?.[0] as AutoGroupResult
+    expect(result.groups).toEqual([
+      { name: 'Control', color: '#3B82F6', samples: [] },
+      { name: 'Treatment', color: '#10B981', samples: ['S1'] },
+    ])
+  })
+
+  it('preserves an existing cohort color when the target is typed manually', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: {
+        modelValue: true,
+        initialMode: 'manual',
+        samples: ['S1', 'S2'],
+        groups: [
+          { name: 'Control', color: '#10B981', samples: ['S1'] },
+        ],
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.findAll('.mg2-row')[1].trigger('click')
+    await wrapper.findAll('.mg2-bar .mg2-combo input')[0].setValue('Control')
+    await wrapper.find('.mg2-bar .sg-btn--primary').trigger('click')
+    await wrapper.find('.sg-foot .mint-button--primary').trigger('click')
+
+    const result = wrapper.emitted('apply')?.at(-1)?.[0] as AutoGroupResult
+    expect(result.groups).toEqual([
+      { name: 'Control', color: '#10B981', samples: ['S1', 'S2'] },
+    ])
+  })
+})
+
+describe('AutoGroupModal multi-schema auto workflow', () => {
+  it('should keep apply enabled when another sample schema still has a grouping field', async () => {
+    const samples = [
+      ...['5916', '5918', '5919', '5920', '5921'].map((id, index) =>
+        `${id}_batch_project_matrix_subject_${String(index + 1).padStart(3, '0')}`,
+      ),
+      ...Array.from({ length: 5 }, (_, index) =>
+        `sample_1x_${String(index + 1).padStart(3, '0')}`,
+      ),
+      ...Array.from({ length: 5 }, (_, index) =>
+        `sample_2x_${String(index + 6).padStart(3, '0')}`,
+      ),
+      'IQC_Pool_001',
+      'IQC_Pool_002',
+      'IQC_Pool_003',
+    ]
+    const wrapper = mount(AutoGroupModal, {
+      props: {
+        modelValue: true,
+        samples,
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.find('.sg-switch').trigger('click')
+
+    expect(wrapper.find('.sg-foot .mint-button--primary').attributes('disabled')).toBeUndefined()
+  })
+
+  it('should scroll the token field list when many fields exceed the modal height', () => {
+    const styles = readFileSync(
+      resolve(process.cwd(), 'src/styles/components/smart-group.css'),
+      'utf8',
+    )
+    const mainPanelStyles = styles.match(/\.sg-body__main\s*\{([^}]*)\}/)?.[1]
+
+    expect(mainPanelStyles).toContain('overflow-y: auto')
+  })
+
+  it('should let the token field panel shrink within the fixed modal body', () => {
+    const styles = readFileSync(
+      resolve(process.cwd(), 'src/styles/components/smart-group.css'),
+      'utf8',
+    )
+    const mainPanelStyles = styles.match(/\.sg-body__main\s*\{([^}]*)\}/)?.[1]
+
+    expect(mainPanelStyles).toContain('min-height: 0')
+  })
+
+  it('should scroll the group preview when generated groups exceed the modal height', () => {
+    const styles = readFileSync(
+      resolve(process.cwd(), 'src/styles/components/smart-group.css'),
+      'utf8',
+    )
+    const sidePanelStyles = styles.match(/\.sg-body__side\s*\{([^}]*)\}/)?.[1]
+
+    expect(sidePanelStyles).toMatch(/min-height:\s*0;[\s\S]*overflow-y:\s*auto;/)
+  })
+})
+
+describe('SampleSelector — QC overlay regression', () => {
+  it('keeps QC samples in the emitted groups via the concat compat rule', async () => {
+    const exp: SampleGroup[] = [
+      { name: 'Kidney', color: '#3B82F6', samples: ['s1', 's2'] },
+    ]
+    const qc: SampleGroup[] = [
+      { name: 'IQC', color: '#6B7280', samples: ['iqc1'] },
+    ]
+    const result: AutoGroupResult = {
+      groups: [...exp, ...qc],
+      experimentalGroups: exp,
+      qcGroups: qc,
+      metadata: [],
+      excludedSamples: [],
+    }
+    const wrapper = mount(SampleSelector, {
+      props: { samples: ['s1', 's2', 'iqc1'], modelValue: [] },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+    ;(wrapper.vm as unknown as { handleSmartGroupApply: (r: AutoGroupResult) => void })
+      .handleSmartGroupApply(result)
+    const emitted = wrapper.emitted('update:groups')!.at(-1)![0] as SampleGroup[]
+    const allSamples = emitted.flatMap(g => g.samples)
+    expect(allSamples).toContain('iqc1')
+  })
+})
+
+describe('AutoGroupModal CSV upload', () => {
+  it('loads an uploaded CSV into the engine so samples reach both auto and manual modes', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: { modelValue: true, samples: [], groups: [] },
+      global: {
+        plugins: [createPinia()],
+        stubs: { Teleport: true },
+      },
+    })
+
+    const csv = 'sample_name,Condition\nS1,Control\nS2,Control\nS3,Treatment\n'
+    const file = new File([csv], 'samples.csv', { type: 'text/csv' })
+    wrapper.findComponent(SmartGroupFieldRecipe).vm.$emit('csv-file', file)
+    await settle()
+
+    // Auto mode: the CSV populated the engine's field cards + grouped all 3 samples.
+    const recipe = wrapper.findComponent(SmartGroupFieldRecipe)
+    expect((recipe.props('fields') as unknown[]).length).toBeGreaterThan(0)
+    const rail = recipe.props('groups') as Array<{ count: number }>
+    expect(rail.reduce((acc, g) => acc + g.count, 0)).toBe(3)
+
+    // Manual mode: the CSV sample names populate the manual list (sourced from
+    // the engine, not props.samples — which is empty here).
+    recipe.vm.$emit('manual')
+    await flushPromises()
+    const names = wrapper.findAll('.mg2-row__name').map(n => n.text())
+    expect(names).toEqual(['S1', 'S2', 'S3'])
+  })
+
+  it('surfaces an error (without throwing) for an empty/header-only CSV, then loads a valid one', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: { modelValue: true, samples: [], groups: [] },
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    const recipe = wrapper.findComponent(SmartGroupFieldRecipe)
+
+    // Header-only CSV → parseCSV throws; onCsvFile must catch + surface the error.
+    recipe.vm.$emit('csv-file', new File(['sample_name\n'], 'bad.csv', { type: 'text/csv' }))
+    await settle()
+    expect(wrapper.find('.sg-host__error').exists()).toBe(true)
+    // Engine left un-mutated: no groups loaded from the bad file.
+    expect((recipe.props('groups') as unknown[]).length).toBe(0)
+
+    // A subsequent valid CSV clears the error and loads.
+    recipe.vm.$emit(
+      'csv-file',
+      new File(['sample_name,Condition\nS1,Control\nS2,Treatment\n'], 'good.csv', { type: 'text/csv' }),
+    )
+    await settle()
+    expect(wrapper.find('.sg-host__error').exists()).toBe(false)
+    const rail = recipe.props('groups') as Array<{ count: number }>
+    expect(rail.reduce((acc, g) => acc + g.count, 0)).toBe(2)
+  })
+})
+
+describe('SmartGroupFieldRecipe CSV menu', () => {
+  it('emits download-template from its menu item', async () => {
+    const wrapper = mount(SmartGroupFieldRecipe)
+    await wrapper.find('.fr-upload').trigger('click')
+    const items = wrapper.findAll('.fr-csv-item')
+    expect(items).toHaveLength(3)
+    await items[1].trigger('click')
+    expect(wrapper.emitted('download-template')).toHaveLength(1)
+  })
+
+  it('emits download-prefilled from its menu item', async () => {
+    const wrapper = mount(SmartGroupFieldRecipe)
+    await wrapper.find('.fr-upload').trigger('click')
+    await wrapper.findAll('.fr-csv-item')[2].trigger('click')
+    expect(wrapper.emitted('download-prefilled')).toHaveLength(1)
+  })
+
+  it('disables the download items (and emits nothing) when canDownloadTemplate is false', async () => {
+    const wrapper = mount(SmartGroupFieldRecipe, { props: { canDownloadTemplate: false } })
+    await wrapper.find('.fr-upload').trigger('click')
+    const items = wrapper.findAll('.fr-csv-item')
+    expect(items[1].attributes('disabled')).toBeDefined()
+    expect(items[2].attributes('disabled')).toBeDefined()
+    await items[1].trigger('click')
+    expect(wrapper.emitted('download-template')).toBeUndefined()
+  })
+})
+
+describe('AutoGroupModal template download wiring', () => {
+  it('maps the menu actions to engine downloadTemplate (blank vs prefilled)', async () => {
+    const blobs: Blob[] = []
+    const origCreate = URL.createObjectURL
+    const origRevoke = URL.revokeObjectURL
+    URL.createObjectURL = vi.fn((b: Blob) => {
+      blobs.push(b)
+      return 'blob:mock'
+    }) as typeof URL.createObjectURL
+    URL.revokeObjectURL = vi.fn() as typeof URL.revokeObjectURL
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    try {
+      const wrapper = mount(AutoGroupModal, {
+        props: { modelValue: true, samples: ['Ctrl_R1', 'Ctrl_R2', 'Drug_R1', 'Drug_R2'], groups: [] },
+        global: { plugins: [createPinia()], stubs: { Teleport: true } },
+      })
+      const recipe = wrapper.findComponent(SmartGroupFieldRecipe)
+      recipe.vm.$emit('download-template')
+      await flushPromises()
+      recipe.vm.$emit('download-prefilled')
+      await flushPromises()
+
+      expect(blobs).toHaveLength(2)
+      const blankText = await blobs[0].text()
+      const prefilledText = await blobs[1].text()
+      // download-template → blank mode: the canonical generic DEFAULT_BLANK_HEADERS.
+      // download-prefilled → prefilled mode: a different, detected-column header.
+      expect(blankText.split('\n')[0]).toBe('sample_name,group,class,replicate,notes')
+      expect(prefilledText.split('\n')[0]).not.toBe(blankText.split('\n')[0])
+      expect(blankText).not.toBe(prefilledText)
+    } finally {
+      URL.createObjectURL = origCreate
+      URL.revokeObjectURL = origRevoke
+      clickSpy.mockRestore()
+    }
+  })
+})

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

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SampleSelectorSampleRow from '../../components/SampleSelectorSampleRow.vue'
+
+describe('SampleSelectorSampleRow', () => {
+  it('renders selected and dragging states', () => {
+    const sampleName = 'A very long sample name that gets truncated in narrow panes'
+    const wrapper = mount(SampleSelectorSampleRow, {
+      props: {
+        sample: sampleName,
+        selected: true,
+        dragging: true,
+        accentColor: '#3B82F6',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-sample-selector__sample--dragging')
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+    expect(wrapper.get('input').attributes('style')).toContain('accent-color')
+    expect(wrapper.text()).toContain(sampleName)
+    expect(wrapper.attributes('title')).toBe(sampleName)
+    expect(wrapper.attributes('aria-label')).toBe(`Sample: ${sampleName}`)
+  })
+
+  it('emits toggle and remove actions', async () => {
+    const wrapper = mount(SampleSelectorSampleRow, {
+      props: {
+        sample: 'S2',
+        selected: false,
+        removable: true,
+      },
+    })
+
+    await wrapper.get('input').trigger('change')
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('toggle')).toHaveLength(1)
+    expect(wrapper.emitted('remove')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ScheduleCalendar from '../../components/ScheduleCalendar.vue'
+
+describe('ScheduleCalendar', () => {
+  it('renders week events with layout styles from the schedule model', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:30:00',
+          },
+        ],
+      },
+    })
+
+    const event = wrapper.find('.mint-schedule__event')
+    expect(event.exists()).toBe(true)
+    expect(event.find('.mint-schedule__event-title').text()).toBe('LCMS run')
+    expect(event.attributes('style')).toContain('top: 80px')
+    expect(event.attributes('style')).toContain('height: 120px')
+  })
+
+  it('renders the month grid from the extracted calendar layout', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        view: 'month',
+      },
+    })
+
+    expect(wrapper.findAll('.mint-schedule__month-weekday')).toHaveLength(7)
+    expect(wrapper.findAll('.mint-schedule__month-cell')).toHaveLength(42)
+    expect(wrapper.find('.mint-schedule__title').text()).toBe('May 2024')
+  })
+})

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

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SecretInput from '../../components/SecretInput.vue'
+import {
+  isPluginSecretRef,
+  keepPluginSecret,
+  pluginSecretLabel,
+  pluginSecretState,
+} from '../../utils/pluginSecrets'
+
+const storedRef = { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true }
+const lockedRef = { $secret: null, locked: true }
+
+describe('pluginSecrets helpers', () => {
+  it('should classify each marker the settings response can publish', () => {
+    expect([
+      pluginSecretState(storedRef),
+      pluginSecretState(null),
+      pluginSecretState(lockedRef),
+      pluginSecretLabel(storedRef),
+      pluginSecretLabel(null),
+      pluginSecretLabel(lockedRef),
+    ]).toEqual(['set', 'unset', 'environment', 'Set', 'Not set', 'Provided by environment'])
+  })
+
+  it('should only treat reserved marker shapes as references', () => {
+    expect([
+      isPluginSecretRef(storedRef),
+      isPluginSecretRef({ $mint: 'placeholder' }),
+      isPluginSecretRef({ $secret: 'x', label: 'not a marker' }),
+      isPluginSecretRef('plain-string'),
+      keepPluginSecret(storedRef),
+      keepPluginSecret('typed'),
+    ]).toEqual([true, false, false, false, { ...storedRef }, null])
+  })
+})
+
+describe('SecretInput', () => {
+  it('should show the stored state without exposing a value', () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    expect([
+      wrapper.find('.mint-secret-input__badge').text(),
+      wrapper.find('input').exists(),
+    ]).toEqual(['Set', false])
+  })
+
+  it('should submit the typed string once the user enters a new value', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    await wrapper.findAll('button')[0]!.trigger('click')
+    await wrapper.setProps({ modelValue: '' })
+    await wrapper.find('input').setValue('typed-secret')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[''], ['typed-secret']])
+  })
+
+  it('should submit null when the user clears a stored secret', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    const clear = wrapper.findAll('button').at(-1)!
+    await clear.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
+  })
+
+  it('should restore the stored reference when an edit is cancelled', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    await wrapper.findAll('button')[0]!.trigger('click')
+    await wrapper.setProps({ modelValue: 'partial' })
+    await wrapper.findAll('button')[0]!.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ ...storedRef }])
+  })
+
+  it('should keep an environment-provided secret read-only', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: lockedRef } })
+
+    expect([
+      wrapper.find('.mint-secret-input__badge').text(),
+      wrapper.find('.mint-secret-input__hint').exists(),
+      wrapper.findAll('button').every(button => button.attributes('disabled') !== undefined),
+      wrapper.emitted('update:modelValue'),
+    ]).toEqual(['Provided by environment', true, true, undefined])
+  })
+})