@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.10

package/src/__tests__/components/PluginWorkspaceView.internal.test.ts

@@ -0,0 +1,230 @@
+import { mount } from '@vue/test-utils'
+import { computed, h, nextTick } from 'vue'
+import { createPinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import AppLayout from '../../components/AppLayout.vue'
+import AppSidebar from '../../components/AppSidebar.vue'
+import AppTopBar from '../../components/AppTopBar.vue'
+import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+import WorkspaceControlsInternal from '../../components/internal/WorkspaceControlsInternal.vue'
+import WorkspaceShellInternal from '../../components/internal/WorkspaceShellInternal.vue'
+import WorkspaceSidebarInternal from '../../components/internal/WorkspaceSidebarInternal.vue'
+import type { PillNavItem, SidebarToolSection } from '../../types'
+
+vi.mock('../../composables/usePlatformContext', () => ({
+  usePlatformContext: vi.fn(() => ({
+    isIntegrated: computed(() => false),
+    context: { value: { isIntegrated: false, theme: 'system' } },
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+    navigate: vi.fn(),
+    notify: vi.fn(),
+    sendToPlatform: vi.fn(),
+  })),
+}))
+
+vi.mock('../../composables/useTheme', () => ({
+  useTheme: vi.fn(() => ({
+    isDark: computed(() => false),
+    theme: computed(() => 'light'),
+    toggleTheme: vi.fn(),
+  })),
+}))
+
+const pillNav: PillNavItem[] = [
+  { id: 'data', label: 'Data' },
+  { id: 'results', label: 'Results' },
+]
+
+const panels: Record<string, SidebarToolSection[]> = {
+  data: [
+    { id: 'import', label: 'Import', defaultOpen: true },
+  ],
+  results: [
+    { id: 'display', label: 'Display', defaultOpen: true },
+  ],
+}
+
+interface WorkspaceSlotProps {
+  activeView: string
+  setActiveView: (viewId: string) => void
+}
+
+const globalOptions = {
+  plugins: [createPinia()],
+  stubs: {
+    'router-link': {
+      props: ['to', 'custom'],
+      template: `
+        <slot
+          v-if="custom"
+          :href="typeof to === 'string' ? to : '#'"
+          :navigate="() => {}"
+        />
+        <a v-else :href="typeof to === 'string' ? to : '#'"><slot /></a>
+      `,
+    },
+    BaseModal: {
+      template: '<div><slot /></div>',
+    },
+  },
+}
+
+describe('PluginWorkspaceView internal split', () => {
+  it('renders through WorkspaceShellInternal, WorkspaceSidebarInternal and WorkspaceControlsInternal', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'MS Uploader',
+        subtitle: 'Import and visualize',
+        pillNav,
+        panels,
+        sidebarTitle: 'Tools',
+        sidebarSubtitle: 'Current file',
+      },
+      slots: {
+        actions: () => h('button', { 'data-test': 'topbar-action' }, 'Run'),
+        'section-import': () => h('button', { 'data-test': 'import-action' }, 'Upload'),
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    // The public adapter renders its three internal pieces...
+    expect(wrapper.findComponent(WorkspaceShellInternal).exists()).toBe(true)
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(true)
+    expect(wrapper.findComponent(WorkspaceControlsInternal).exists()).toBe(true)
+
+    // ...each of which wraps the same underlying SDK components with the same DOM output
+    // the pre-split component produced.
+    expect(wrapper.findComponent(AppLayout).props()).toMatchObject({
+      floating: true,
+      responsiveSidebar: true,
+      sidebarPosition: 'left',
+    })
+    expect(wrapper.findComponent(AppTopBar).props()).toMatchObject({
+      title: 'MS Uploader',
+      subtitle: 'Import and visualize',
+      pillNav,
+      currentPillId: 'data',
+    })
+    expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
+      panels,
+      activeView: 'data',
+      title: 'Tools',
+      subtitle: 'Current file',
+      variant: 'analysis',
+      floating: false,
+      dense: true,
+    })
+    expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
+    expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('data')
+
+    // WorkspaceControlsInternal receives exactly the scoped-slot payload the default slot sees.
+    expect(wrapper.findComponent(WorkspaceControlsInternal).props('controls')).toMatchObject({
+      activeView: 'data',
+      values: {},
+    })
+  })
+
+  it('keeps topbar navigation and sidebar panels synchronized through the internal split', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Analysis',
+        pillNav,
+        panels,
+      },
+      slots: {
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('results')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).props('sidebar')).toMatchObject({ activeView: 'results' })
+    expect(wrapper.get('[data-test="content"]').text()).toBe('results')
+    expect(wrapper.emitted('update:activeView')).toEqual([['results']])
+    expect(wrapper.emitted('pill-select')).toEqual([[{ id: 'results', label: 'Results' }]])
+  })
+
+  it('relays sidebar collapse, toggle, and form events unchanged through WorkspaceSidebarInternal', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Analysis',
+        panels,
+        forms: {
+          data: { sections: [] },
+        },
+      },
+      global: globalOptions,
+    })
+
+    const sidebar = wrapper.findComponent(AppSidebar)
+    sidebar.vm.$emit('update:collapsed', true)
+    sidebar.vm.$emit('update:toggle', 'import', false)
+    sidebar.vm.$emit('section-action', 'import', 'refresh')
+    sidebar.vm.$emit('form-submit', 'data', { value: 1 })
+    sidebar.vm.$emit('form-cancel', 'data')
+    await nextTick()
+
+    expect(wrapper.emitted('update:sidebarCollapsed')).toEqual([[true]])
+    expect(wrapper.emitted('update:toggle')).toEqual([['import', false]])
+    expect(wrapper.emitted('section-action')).toEqual([['import', 'refresh']])
+    expect(wrapper.emitted('form-submit')).toEqual([['data', { value: 1 }]])
+    expect(wrapper.emitted('form-cancel')).toEqual([['data']])
+  })
+
+  it('can render without a sidebar surface, omitting WorkspaceSidebarInternal entirely', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Simple Plugin',
+        showSidebar: false,
+      },
+      slots: {
+        default: () => h('main', { 'data-test': 'content' }, 'Ready'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).exists()).toBe(false)
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Simple Plugin')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('Ready')
+  })
+
+  it('lets a consumer-supplied sidebar slot override WorkspaceSidebarInternal', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Custom Sidebar',
+        panels,
+      },
+      slots: {
+        sidebar: () => h('aside', { 'data-test': 'custom-sidebar' }, 'Custom'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).exists()).toBe(false)
+    expect(wrapper.get('[data-test="custom-sidebar"]').text()).toBe('Custom')
+  })
+
+  it('lets a consumer-supplied topbar slot override WorkspaceShellInternal default AppTopBar rendering', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: { title: 'Custom Top Bar' },
+      slots: {
+        topbar: () => h('header', { 'data-test': 'custom-topbar' }, 'Custom'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).exists()).toBe(false)
+    expect(wrapper.get('[data-test="custom-topbar"]').text()).toBe('Custom')
+  })
+})

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

@@ -122,4 +122,39 @@ describe('RackEditor', () => {
       }),
     ])
   })
+
+  it('reorders rack tabs with Alt and the arrow keys', async () => {
+    const racks = makeRacks()
+    racks.push({ ...racks[0], id: 'rack-2', name: 'Rack 2', slot: 'G', wells: {} })
+
+    const wrapper = mount(RackEditor, { props: { modelValue: racks } })
+
+    await wrapper.findAll('.mint-rack-editor__tab')[0].trigger('keydown', {
+      key: 'ArrowRight',
+      altKey: true,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('rack-reorder')?.at(-1)?.[0]).toEqual(['rack-2', 'rack-1'])
+    expect(wrapper.findAll('.mint-rack-editor__tab').map(tab => tab.text()))
+      .toEqual([expect.stringContaining('Rack 2'), expect.stringContaining('Rack 1')])
+    expect(wrapper.get('[role="status"]').attributes('aria-live')).toBe('polite')
+  })
+
+  it('does not reorder rack tabs from the keyboard when reordering is off', async () => {
+    const racks = makeRacks()
+    racks.push({ ...racks[0], id: 'rack-2', name: 'Rack 2', slot: 'G', wells: {} })
+
+    const wrapper = mount(RackEditor, {
+      props: { modelValue: racks, allowReorder: false },
+    })
+
+    await wrapper.findAll('.mint-rack-editor__tab')[0].trigger('keydown', {
+      key: 'ArrowRight',
+      altKey: true,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('rack-reorder')).toBeUndefined()
+  })
 })

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

@@ -63,7 +63,7 @@ describe('ReagentList', () => {
       },
     })
 
-    await wrapper.findAll('th')[1].trigger('click')
+    await wrapper.findAll('th')[1].get('.mint-reagent-list__sort-btn').trigger('click')
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows.map(row => row.text())).toEqual([
@@ -72,11 +72,73 @@ describe('ReagentList', () => {
       expect.stringContaining('Pyruvate'),
     ])
 
-    await wrapper.findAll('th')[1].trigger('click')
+    await wrapper.findAll('th')[1].get('.mint-reagent-list__sort-btn').trigger('click')
     expect(wrapper.findAll('tbody tr').map(row => row.text())).toEqual([
       expect.stringContaining('Lactate'),
       expect.stringContaining('Glucose'),
       expect.stringContaining('Pyruvate'),
     ])
   })
+
+  it('exposes sortable headers as buttons that sort from the keyboard', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, columns: ['name', 'catalog'] },
+    })
+
+    const nameHeader = () => wrapper.findAll('th')[0]
+    expect(nameHeader().attributes('aria-sort')).toBe('none')
+    expect(nameHeader().get('.mint-reagent-list__sort-btn').element.tagName).toBe('BUTTON')
+
+    await nameHeader().get('.mint-reagent-list__sort-btn').trigger('keydown', { key: 'Enter' })
+    expect(nameHeader().attributes('aria-sort')).toBe('ascending')
+
+    await nameHeader().get('.mint-reagent-list__sort-btn').trigger('keydown', { key: ' ' })
+    expect(nameHeader().attributes('aria-sort')).toBe('descending')
+  })
+
+  it('omits aria-sort when sorting is disabled', () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, sortable: false, columns: ['name'] },
+    })
+
+    expect(wrapper.findAll('th')[0].attributes('aria-sort')).toBeUndefined()
+  })
+
+  it('reorders reagents from the drag handle with Alt and the arrow keys', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, columns: ['name'] },
+    })
+
+    const handle = wrapper.findAll('.mint-reagent-list__drag-handle-btn')[0]
+    expect(handle.attributes('aria-label')).toContain('Reorder Glucose')
+
+    await handle.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('reorder')?.[0]).toEqual(['reagent-1', 0, 1])
+    expect(
+      (wrapper.emitted('update:modelValue')?.[0]?.[0] as Reagent[]).map(reagent => reagent.id),
+    ).toEqual(['reagent-2', 'reagent-1'])
+  })
+
+  it('does not reorder from the keyboard while readonly', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, columns: ['name'] },
+    })
+
+    expect(wrapper.find('.mint-reagent-list__drag-handle-btn').exists()).toBe(false)
+  })
+
+  it('announces a keyboard reorder in a polite live region', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, columns: ['name'] },
+    })
+
+    await wrapper.findAll('.mint-reagent-list__drag-handle-btn')[0]
+      .trigger('keydown', { key: 'ArrowDown', altKey: true })
+    await wrapper.vm.$nextTick()
+
+    const liveRegion = wrapper.get('[role="status"]')
+    expect(liveRegion.attributes('aria-live')).toBe('polite')
+    expect(liveRegion.text()).toBe('Glucose moved to position 2 of 2.')
+  })
 })

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

@@ -6,9 +6,21 @@ const retiredSelectors: Record<string, readonly string[]> = {
   'app-plugin-switcher.css': [
     'mint-plugin-switcher__swatch',
   ],
+  'audit-trail.css': [
+    'mint-audit-trail__empty',
+  ],
+  'dataframe.css': [
+    'mint-dataframe__empty',
+    'mint-dataframe__empty-icon',
+    'mint-dataframe__empty-text',
+    'mint-dataframe__loading-spinner',
+  ],
   'dose-calculator.css': [
     'mint-dose-calculator__mw-input',
   ],
+  'experiment-data-viewer.css': [
+    'mint-data-viewer__empty',
+  ],
   'experiment-popover.css': [
     'mint-experiment-popover__check-icon',
     'mint-experiment-popover__divider',
@@ -24,13 +36,31 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-experiment-selector__filters',
     'mint-experiment-selector__status-filter',
   ],
+  'experiment-timeline.css': [
+    'mint-timeline__empty',
+    'mint-timeline__empty-btn',
+    'mint-timeline__empty-content',
+    'mint-timeline__empty-text',
+  ],
+  'lcms-sequence-table.css': [
+    'mint-lcms-sequence-table__empty',
+  ],
   'protocol-step-editor.css': [
     'mint-protocol-editor__field-row',
   ],
   'reagent-editor.css': [
     'mint-reagent-editor__row',
   ],
+  'reagent-list.css': [
+    'mint-reagent-list__empty',
+    'mint-reagent-list__empty-btn',
+    'mint-reagent-list__empty-icon',
+    'mint-reagent-list__empty-text',
+  ],
   'sample-hierarchy-tree.css': [
+    'mint-sample-tree__empty',
+    'mint-sample-tree__empty-icon',
+    'mint-sample-tree__empty-text',
     'mint-sample-tree__node--selected',
   ],
   'sample-selector.css': [
@@ -38,6 +68,7 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-popover-enter-from',
     'mint-popover-leave-active',
     'mint-popover-leave-to',
+    'mint-sample-selector__empty',
     'mint-sample-selector__level-badge',
     'mint-sample-selector__level-btn',
     'mint-sample-selector__level-desc',

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

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { describe, expect, it } from 'vitest'
 import type { SampleGroup } from '../../types'
 import { useSampleSelectorDrag } from '../../components/SampleSelector.drag'
@@ -9,6 +9,10 @@ type TestDragEvent = Omit<DragEvent, 'dataTransfer'> & {
   defaultPrevented: boolean
 }
 
+function keyboardEvent(key: string, altKey = true): KeyboardEvent {
+  return { key, altKey, preventDefault: () => {} } as unknown as KeyboardEvent
+}
+
 function createDragEvent(options: { clientY?: number; top?: number; height?: number } = {}) {
   const data: Record<string, string> = {}
   const transfer = {
@@ -123,4 +127,50 @@ describe('SampleSelector drag helpers', () => {
 
     expect(drag.reorderTarget.value).toBe('Liver / High / 10min')
   })
+
+  it('reorders sibling groups with Alt and the arrow keys', async () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Liver / High / 10min', color: '#222222', samples: ['L2'] },
+      { name: 'Liver / High / 20min', color: '#333333', samples: ['L3'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+
+    expect(state.value.map(group => group.name)).toEqual([
+      'Liver / High / 10min',
+      'Liver / High / 5min',
+      'Liver / High / 20min',
+    ])
+
+    await nextTick()
+    expect(drag.announcement.value).toBe('Liver / High / 5min moved down to position 2 of 3.')
+  })
+
+  it('keeps a group inside its own family and ignores arrows without Alt', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High / 5min', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+    const before = state.value
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown', false))
+
+    expect(state.value).toBe(before)
+  })
+
+  it('reorders whole major families with Alt and the arrow keys', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Muscle', 'major', keyboardEvent('ArrowUp'))
+
+    expect(state.value.map(group => group.name)).toEqual(['Muscle / High', 'Liver / High'])
+  })
 })

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

@@ -41,4 +41,67 @@ describe('ScheduleCalendar', () => {
     expect(wrapper.findAll('.mint-schedule__month-cell')).toHaveLength(42)
     expect(wrapper.find('.mint-schedule__title').text()).toBe('May 2024')
   })
+
+  it('reschedules an event with Alt and the arrow keys', async () => {
+    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:00:00',
+          },
+        ],
+      },
+    })
+
+    const event = wrapper.get('.mint-schedule__event')
+    expect(event.attributes('tabindex')).toBe('0')
+    expect(event.attributes('aria-label')).toContain('Press Alt with the up or down arrow keys')
+
+    await event.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    const update = wrapper.emitted('event-update')?.[0]?.[0] as {
+      newStart: Date
+      newEnd: Date
+    }
+    expect(update.newStart.getHours()).toBe(7)
+    expect(update.newStart.getMinutes()).toBe(30)
+    expect(update.newEnd.getHours()).toBe(8)
+    expect(update.newEnd.getMinutes()).toBe(30)
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.get('[role="status"]').attributes('aria-live')).toBe('polite')
+  })
+
+  it('does not reschedule from the keyboard while readonly', async () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        readonly: true,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:00:00',
+          },
+        ],
+      },
+    })
+
+    await wrapper.get('.mint-schedule__event').trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('event-update')).toBeUndefined()
+  })
 })

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])
+  })
+})