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

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

@@ -0,0 +1,178 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const mockGet = vi.fn()
+const mockPost = vi.fn()
+const mockPatch = vi.fn()
+
+vi.mock('../../composables/useApi', () => ({
+  useApi: () => ({ get: mockGet, post: mockPost, patch: mockPatch }),
+}))
+
+import ArtifactSelectorModal from '../../components/ArtifactSelectorModal.vue'
+import type { AnalysisArtifactSummary } from '../../types/analysisArtifactTypes'
+
+function makeArtifact(
+  overrides: Partial<AnalysisArtifactSummary> = {},
+): AnalysisArtifactSummary {
+  return {
+    id: 1,
+    experiment_id: 42,
+    plugin_id: 'plugin-a',
+    artifact_key: 'fit',
+    display_name: 'Dose Response Fit',
+    status: 'active',
+    result_keys: ['summary'],
+    created_at: '2026-07-01T10:00:00Z',
+    updated_at: '2026-07-02T10:00:00Z',
+    ...overrides,
+  }
+}
+
+const ARTIFACTS = [
+  makeArtifact({ id: 1 }),
+  makeArtifact({ id: 2, plugin_id: 'plugin-b', artifact_key: 'peaks', display_name: 'Peak Table' }),
+]
+
+async function mountModal(props: Record<string, unknown> = {}) {
+  const wrapper = mount(ArtifactSelectorModal, {
+    props: { modelValue: true, experimentId: 42, ...props },
+    global: { stubs: { teleport: true } },
+  })
+  await flushPromises()
+  return wrapper
+}
+
+describe('ArtifactSelectorModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Fresh rows per call: the list is stored by reference and spliced on mutation.
+    mockGet.mockImplementation(async () => ({ artifacts: ARTIFACTS.map((a) => ({ ...a })) }))
+    mockPost.mockResolvedValue(makeArtifact({ status: 'archived' }))
+    delete (window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__
+    window.history.replaceState({}, '', '/')
+  })
+
+  it('should emit the summary and close on select', async () => {
+    const wrapper = await mountModal()
+
+    await wrapper.get('.mint-artifact-selector__row').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({ id: 1 })
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+  })
+
+  it('should emit selectDetail alongside select when fetchDetailOnSelect is set', async () => {
+    const wrapper = await mountModal({ fetchDetailOnSelect: true })
+    mockGet.mockResolvedValueOnce({ ...makeArtifact(), result: { x: 1 }, tree: [], summary: null })
+
+    await wrapper.get('.mint-artifact-selector__row').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('selectDetail')).toHaveLength(1)
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+
+  // A failed detail fetch must not look like a successful pick.
+  it('should stay open and not emit select when the detail fetch fails', async () => {
+    const wrapper = await mountModal({ fetchDetailOnSelect: true })
+    mockGet.mockRejectedValueOnce(new Error('Detail unavailable'))
+
+    await wrapper.get('.mint-artifact-selector__row').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('selectDetail')).toBeUndefined()
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.get('.mint-artifact-selector__error').text()).toContain('Detail unavailable')
+  })
+
+  it('should archive a row without selecting it', async () => {
+    const wrapper = await mountModal()
+
+    await wrapper.get('.mint-artifact-selector__action').trigger('click')
+    await flushPromises()
+
+    expect(mockPost).toHaveBeenCalledWith('/experiments/42/analysis-artifacts/1/archive')
+    expect(wrapper.emitted('archive')).toHaveLength(1)
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  // The row we clicked still says "active"; listeners must get the backend's version.
+  it('should emit the post-mutation summary on archive', async () => {
+    const wrapper = await mountModal()
+
+    await wrapper.get('.mint-artifact-selector__action').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('archive')?.[0]?.[0]).toMatchObject({ id: 1, status: 'archived' })
+  })
+
+  it('should not emit archive when the mutation fails', async () => {
+    mockPost.mockRejectedValueOnce(new Error('Conflict'))
+    const wrapper = await mountModal()
+
+    await wrapper.get('.mint-artifact-selector__action').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('archive')).toBeUndefined()
+  })
+
+  // The container's Enter handler must not hijack a focused row button.
+  it('should leave Enter alone when it targets a row action button', async () => {
+    const wrapper = await mountModal()
+    await wrapper.get('.mint-artifact-selector').trigger('keydown', { key: 'ArrowDown' })
+
+    await wrapper.get('.mint-artifact-selector__action').trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('should select the arrow-highlighted row on Enter', async () => {
+    const wrapper = await mountModal()
+
+    await wrapper.get('.mint-artifact-selector').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.get('.mint-artifact-selector').trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+
+    expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({ id: 1 })
+  })
+
+  it('should hide row actions without the experiments.edit permission', async () => {
+    ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+      user: { id: '1', username: 'viewer', role: 'viewer', permissions: ['experiments.view'] },
+    }
+    const wrapper = await mountModal()
+
+    expect(wrapper.find('.mint-artifact-selector__action').exists()).toBe(false)
+  })
+
+  it('should show row actions with the experiments.edit permission', async () => {
+    ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+      user: {
+        id: '1',
+        username: 'member',
+        role: 'member',
+        permissions: ['experiments.view', 'experiments.edit'],
+      },
+    }
+    const wrapper = await mountModal()
+
+    expect(wrapper.find('.mint-artifact-selector__action').exists()).toBe(true)
+  })
+
+  it('should scope rows to a reactive pluginId prop', async () => {
+    const wrapper = await mountModal({ pluginId: 'plugin-a' })
+    expect(wrapper.findAll('.mint-artifact-selector__row')).toHaveLength(1)
+
+    await wrapper.setProps({ pluginId: 'plugin-b' })
+    await flushPromises()
+
+    const rows = wrapper.findAll('.mint-artifact-selector__row')
+    expect(rows).toHaveLength(1)
+    expect(rows[0].text()).toContain('Peak Table')
+  })
+})

package/src/__tests__/components/AutoGroupModal.adapter.test.ts

@@ -0,0 +1,204 @@
+import { describe, expect, it } from 'vitest'
+import {
+  candidateColumns,
+  engineFieldsToCards,
+  engineGroupsToRail,
+  engineSchemasToCards,
+  engineToQcRoute,
+  manualSamplesToResult,
+  qcRouteToEngine,
+  roleLabel,
+  seedFromGroups,
+} from '../../components/AutoGroupModal.adapter'
+import type { ClassSchema, ColumnInfo } from '../../types/auto-group'
+import type { SampleGroup } from '../../types'
+import type { ManualSample } from '../../components/SmartGroupManual.cohorts'
+
+function col(partial: Partial<ColumnInfo> & { index: number }): ColumnInfo {
+  return {
+    name: `c${partial.index}`,
+    sourceIndices: [partial.index],
+    uniqueValues: [],
+    cardinality: 0,
+    ...partial,
+  }
+}
+
+describe('roleLabel', () => {
+  it('should map known roles to their display label', () => {
+    expect(roleLabel('factor')).toBe('Factor')
+    expect(roleLabel('replicate')).toBe('Replicate')
+    expect(roleLabel('run-order')).toBe('Run')
+  })
+
+  it('should default to Factor when the role is undefined', () => {
+    expect(roleLabel(undefined)).toBe('Factor')
+  })
+})
+
+describe('candidateColumns', () => {
+  it('should include factors and replicates and drop constants/ignore', () => {
+    const columns = [
+      col({ index: 0, role: 'factor' }),
+      col({ index: 1, role: 'constant' }),
+      col({ index: 2, role: 'replicate' }),
+      col({ index: 3, role: 'ignore' }),
+    ]
+    expect(candidateColumns(columns, []).map(c => c.index)).toEqual([0, 2])
+  })
+
+  it('should also include a non-factor column already enabled in groupBy', () => {
+    const columns = [
+      col({ index: 0, role: 'factor' }),
+      col({ index: 1, role: 'numeric' }),
+    ]
+    expect(candidateColumns(columns, [1]).map(c => c.index)).toEqual([0, 1])
+  })
+})
+
+describe('engineFieldsToCards', () => {
+  it('should build cards with role label, joined values, rep flag, and aligned enabled state', () => {
+    const columns = [
+      col({ index: 0, name: 'Condition', role: 'factor', uniqueValues: ['Control', 'Treatment'] }),
+      col({ index: 1, name: 'Replicate', role: 'replicate', uniqueValues: ['Rep1', 'Rep2'] }),
+    ]
+    const { fields, enabled } = engineFieldsToCards(columns, [0])
+    expect(fields).toEqual([
+      { key: 'Condition', role: 'Factor', vals: 'Control, Treatment', rep: false },
+      { key: 'Replicate', role: 'Replicate', vals: 'Rep1, Rep2', rep: true },
+    ])
+    expect(enabled).toEqual([true, false])
+  })
+
+  it('should prefer displayName over name when present', () => {
+    const columns = [col({ index: 0, name: 'c0', displayName: 'Dose', role: 'factor', uniqueValues: ['Low'] })]
+    expect(engineFieldsToCards(columns, []).fields[0].key).toBe('Dose')
+  })
+
+  it('should map each card to its 1-based hierarchy layer from the groupBy order', () => {
+    const columns = [
+      col({ index: 0, name: 'Tissue', role: 'factor' }),
+      col({ index: 1, name: 'Timepoint', role: 'factor' }),
+      col({ index: 2, name: 'Rep', role: 'replicate' }),
+    ]
+    // Layer 1 = Timepoint (column 1), layer 2 = Tissue (column 0); Rep is off.
+    expect(engineFieldsToCards(columns, [1, 0]).layers).toEqual([2, 1, null])
+  })
+})
+
+describe('engineSchemasToCards', () => {
+  it('should expose enabled fields from another schema when the active schema has none enabled', () => {
+    const schemas: Record<string, ClassSchema> = {
+      active: {
+        classKind: 'unknown',
+        columns: [col({ index: 0, name: 'Token 1', role: 'factor', uniqueValues: ['5916', '5918'] })],
+        groupBy: [],
+      },
+      other: {
+        classKind: 'unknown',
+        columns: [
+          col({ index: 0, name: 'Token 1', role: 'constant', uniqueValues: ['sample'] }),
+          col({ index: 1, name: 'Token 2', role: 'factor', uniqueValues: ['1x', '2x'] }),
+        ],
+        groupBy: [1],
+      },
+    }
+
+    expect(engineSchemasToCards(schemas, 'active')).toEqual({
+      fields: [
+        { key: 'Token 1', role: 'Factor', vals: '5916, 5918', rep: false },
+        { key: 'Token 2', role: 'Factor', vals: '1x, 2x', rep: false },
+      ],
+      enabled: [false, true],
+      layers: [null, 1],
+    })
+  })
+})
+
+describe('engineGroupsToRail', () => {
+  it('should map groups to {name, count, color} using sample length', () => {
+    const groups: SampleGroup[] = [{ name: 'Control', color: '#111', samples: ['a', 'b'] }]
+    expect(engineGroupsToRail(groups)).toEqual([{ name: 'Control', count: 2, color: '#111' }])
+  })
+})
+
+describe('QC route mapping', () => {
+  it('should round-trip between Field Recipe labels and engine routing', () => {
+    expect(qcRouteToEngine('Overlay only')).toBe('overlay')
+    expect(qcRouteToEngine('Exclude')).toBe('exclude')
+    expect(qcRouteToEngine('Mix into groups')).toBe('mix')
+    expect(engineToQcRoute('overlay')).toBe('Overlay only')
+    expect(engineToQcRoute('exclude')).toBe('Exclude')
+    expect(engineToQcRoute('mix')).toBe('Mix into groups')
+  })
+})
+
+describe('seedFromGroups', () => {
+  it('should split a hierarchical group name into group/sub/sub2 per sample', () => {
+    const groups: SampleGroup[] = [
+      { name: 'Responder/Day 7/Batch 1', color: '#0EA5A4', samples: ['s1'] },
+      { name: 'Control', color: '#3B82F6', samples: ['s2', 's3'] },
+    ]
+    expect(seedFromGroups(groups)).toEqual({
+      s1: { group: 'Responder', sub: 'Day 7', sub2: 'Batch 1', color: '#0EA5A4' },
+      s2: { group: 'Control', sub: undefined, sub2: undefined, color: '#3B82F6' },
+      s3: { group: 'Control', sub: undefined, sub2: undefined, color: '#3B82F6' },
+    })
+  })
+})
+
+describe('manualSamplesToResult', () => {
+  function sample(name: string, group: string | null, sub: string | null = null, color = 'var(--grp-1)'): ManualSample {
+    return { name, group, sub, sub2: null, color: group ? color : null }
+  }
+
+  it('should build a hierarchical group name and wrap as an AutoGroupResult', () => {
+    const samples: ManualSample[] = [
+      { name: 'S1', group: 'Treatment', sub: 'Baseline', sub2: null, color: 'var(--grp-1)' },
+      sample('S2', null),
+    ]
+    const result = manualSamplesToResult(samples)
+    expect(result.groups).toHaveLength(1)
+    expect(result.groups[0]).toMatchObject({ name: 'Treatment/Baseline', samples: ['S1'] })
+    expect(result.experimentalGroups).toEqual(result.groups)
+    expect(result.qcGroups).toEqual([])
+  })
+
+  it('should round-trip a 4-segment group name through seedFromGroups without losing segments', () => {
+    const groups: SampleGroup[] = [{ name: 'a/b/c/d', color: '#123456', samples: ['s1'] }]
+    const seeded = seedFromGroups(groups).s1
+    const samples: ManualSample[] = [
+      {
+        name: 's1',
+        group: seeded.group ?? null,
+        sub: seeded.sub ?? null,
+        sub2: seeded.sub2 ?? null,
+        color: seeded.color ?? null,
+      },
+    ]
+    // No baseGroups, so the name is reconstructed purely from the seeded levels.
+    const result = manualSamplesToResult(samples, [])
+    expect(result.groups).toHaveLength(1)
+    expect(result.groups[0]).toMatchObject({ name: 'a/b/c/d', samples: ['s1'] })
+  })
+
+  it('should preserve base group order and colour, leaving emptied groups in place', () => {
+    const samples: ManualSample[] = [sample('S1', 'Treatment'), sample('S2', null)]
+    const base: SampleGroup[] = [
+      { name: 'Control', color: '#3B82F6', samples: ['S1'] },
+      { name: 'Treatment', color: '#10B981', samples: [] },
+    ]
+    expect(manualSamplesToResult(samples, base).groups).toEqual([
+      { name: 'Control', color: '#3B82F6', samples: [] },
+      { name: 'Treatment', color: '#10B981', samples: ['S1'] },
+    ])
+  })
+
+  it('should keep a base group colour when samples are added to it', () => {
+    const samples: ManualSample[] = [sample('S1', 'Control', null, '#10B981'), sample('S2', 'Control', null, '#10B981')]
+    const base: SampleGroup[] = [{ name: 'Control', color: '#10B981', samples: ['S1'] }]
+    expect(manualSamplesToResult(samples, base).groups).toEqual([
+      { name: 'Control', color: '#10B981', samples: ['S1', 'S2'] },
+    ])
+  })
+})

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

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseInput from '../../components/BaseInput.vue'
+
+describe('BaseInput', () => {
+  describe('text input', () => {
+    it('should emit string value on input', async () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: '', type: 'text' },
+      })
+      const input = wrapper.find('input')
+      await input.setValue('hello')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['hello'])
+    })
+  })
+
+  describe('number input', () => {
+    it('should emit number value on input', async () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: 0, type: 'number' },
+      })
+      const input = wrapper.find('input')
+      // Simulate typing a number
+      Object.defineProperty(input.element, 'value', { value: '42', writable: true })
+      await input.trigger('input')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([42])
+    })
+
+    it('should emit null for empty number input', async () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: 5, type: 'number' },
+      })
+      const input = wrapper.find('input')
+      // Simulate clearing the input
+      Object.defineProperty(input.element, 'value', { value: '', writable: true })
+      await input.trigger('input')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
+    })
+
+    it('should not emit NaN for empty number input', async () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: 5, type: 'number' },
+      })
+      const input = wrapper.find('input')
+      Object.defineProperty(input.element, 'value', { value: '', writable: true })
+      await input.trigger('input')
+      const emitted = wrapper.emitted('update:modelValue')?.[0]?.[0]
+      expect(emitted).not.toBeNaN()
+    })
+  })
+
+  describe('props', () => {
+    it('should apply disabled attribute', () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: '', disabled: true },
+      })
+      expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+    })
+
+    it('should apply placeholder', () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: '', placeholder: 'Enter text' },
+      })
+      expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
+    })
+
+    it('should apply error class', () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: '', error: true },
+      })
+      expect(wrapper.find('input').classes()).toContain('mint-input--error')
+    })
+
+    it('should apply size class', () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: '', size: 'lg' },
+      })
+      expect(wrapper.find('input').classes()).toContain('mint-input--lg')
+    })
+  })
+
+  describe('events', () => {
+    it('should emit focus event', async () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: '' },
+      })
+      await wrapper.find('input').trigger('focus')
+      expect(wrapper.emitted('focus')).toHaveLength(1)
+    })
+
+    it('should emit blur event', async () => {
+      const wrapper = mount(BaseInput, {
+        props: { modelValue: '' },
+      })
+      await wrapper.find('input').trigger('blur')
+      expect(wrapper.emitted('blur')).toHaveLength(1)
+    })
+  })
+})

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

@@ -0,0 +1,133 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseModal from '../../components/BaseModal.vue'
+import type { ModalTab } from '../../types'
+
+const stripTabs: ModalTab[] = [
+  { id: 'processing', label: 'Processing', meta: '6' },
+  { id: 'peaks', label: 'Peak detection' },
+  { id: 'correction', label: 'Correction', disabled: true },
+  { id: 'appearance', label: 'Appearance' },
+]
+
+const railTabs: ModalTab[] = [
+  { id: 'profile', label: 'Profile', icon: 'M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8' },
+  { id: 'security', label: 'Security', meta: '2', description: 'Passkeys and institutional sign-in.' },
+  { id: 'appearance', label: 'Appearance' },
+]
+
+function mountModal(props: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+  return mount(BaseModal, {
+    props: {
+      modelValue: true,
+      title: 'Settings',
+      ...props,
+    },
+    slots: {
+      default: '<p class="body-content">Body</p>',
+      ...slots,
+    },
+    global: {
+      stubs: {
+        teleport: true,
+      },
+    },
+  })
+}
+
+describe('BaseModal', () => {
+  describe('plain layout', () => {
+    it('should not render a tab strip when layout is omitted', () => {
+      const wrapper = mountModal()
+      expect(wrapper.find('.mint-modal__tabs').exists()).toBe(false)
+    })
+  })
+
+  describe('tabs layout', () => {
+    it('should render a shell-level tablist when layout is tabs', () => {
+      const wrapper = mountModal({ layout: 'tabs', tabs: stripTabs, activeTab: 'processing' })
+      expect(wrapper.find('.mint-modal__tabs[role="tablist"]').exists()).toBe(true)
+    })
+
+    it('should mark the active tab with aria-selected when a tab is active', () => {
+      const wrapper = mountModal({ layout: 'tabs', tabs: stripTabs, activeTab: 'peaks' })
+      const active = wrapper.findAll('.mint-modal__tab')[1]
+      expect(active.attributes('aria-selected')).toBe('true')
+    })
+
+    it('should render the tab meta when a tab defines one', () => {
+      const wrapper = mountModal({ layout: 'tabs', tabs: stripTabs, activeTab: 'processing' })
+      expect(wrapper.find('.mint-modal__tab-meta').text()).toBe('6')
+    })
+
+    it('should emit update:activeTab when another tab is clicked', async () => {
+      const wrapper = mountModal({ layout: 'tabs', tabs: stripTabs, activeTab: 'processing' })
+      await wrapper.findAll('.mint-modal__tab')[1].trigger('click')
+      expect(wrapper.emitted('update:activeTab')?.at(-1)).toEqual(['peaks'])
+    })
+
+    it('should not emit update:activeTab when a disabled tab is clicked', async () => {
+      const wrapper = mountModal({ layout: 'tabs', tabs: stripTabs, activeTab: 'processing' })
+      await wrapper.findAll('.mint-modal__tab')[2].trigger('click')
+      expect(wrapper.emitted('update:activeTab')).toBeUndefined()
+    })
+
+    it('should skip disabled tabs when moving with ArrowRight', async () => {
+      const wrapper = mountModal({ layout: 'tabs', tabs: stripTabs, activeTab: 'peaks' })
+      await wrapper.findAll('.mint-modal__tab')[1].trigger('keydown.right')
+      expect(wrapper.emitted('update:activeTab')?.at(-1)).toEqual(['appearance'])
+    })
+
+    it('should apply the fixed-height body modifier when layout is tabs', () => {
+      const wrapper = mountModal({ layout: 'tabs', tabs: stripTabs, activeTab: 'processing' })
+      expect(wrapper.find('.mint-modal__body').classes()).toContain('mint-modal__body--tabbed')
+    })
+  })
+
+  describe('rail layout', () => {
+    it('should render a vertical tablist when layout is rail', () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'profile' })
+      expect(wrapper.find('.mint-modal__rail[aria-orientation="vertical"]').exists()).toBe(true)
+    })
+
+    it('should show the active tab label as the pane title', () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'security' })
+      expect(wrapper.find('.mint-modal__pane-title').text()).toBe('Security')
+    })
+
+    it('should show the active tab description as the pane subtitle', () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'security' })
+      expect(wrapper.find('.mint-modal__pane-subtitle').text()).toBe('Passkeys and institutional sign-in.')
+    })
+
+    it('should emit update:activeTab when a rail item is clicked', async () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'profile' })
+      await wrapper.findAll('.mint-modal__rail-item')[1].trigger('click')
+      expect(wrapper.emitted('update:activeTab')?.at(-1)).toEqual(['security'])
+    })
+
+    it('should move to the next tab when ArrowDown is pressed on a rail item', async () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'profile' })
+      await wrapper.findAll('.mint-modal__rail-item')[0].trigger('keydown.down')
+      expect(wrapper.emitted('update:activeTab')?.at(-1)).toEqual(['security'])
+    })
+
+    it('should render the rail-footer slot inside the rail', () => {
+      const wrapper = mountModal(
+        { layout: 'rail', tabs: railTabs, activeTab: 'profile' },
+        { 'rail-footer': '<button class="rail-logout">Log out</button>' },
+      )
+      expect(wrapper.find('.mint-modal__rail .rail-logout').exists()).toBe(true)
+    })
+
+    it('should not render the plain body when layout is rail', () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'profile' })
+      expect(wrapper.find('.mint-modal__body').exists()).toBe(false)
+    })
+
+    it('should render the default slot inside the pane body when layout is rail', () => {
+      const wrapper = mountModal({ layout: 'rail', tabs: railTabs, activeTab: 'profile' })
+      expect(wrapper.find('.mint-modal__pane-body .body-content').exists()).toBe(true)
+    })
+  })
+})