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

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

@@ -2,6 +2,8 @@ import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import FilePicker from '../../components/FilePicker.vue'
 import FileUploader from '../../components/FileUploader.vue'
+import BaseModal from '../../components/BaseModal.vue'
+import { formatModified } from '../../components/internal/filePickerPresentation'
 import type { PickerAdapter, PickerNode, PickerSelection } from '../../types/filePicker'
 import { localFilesAdapter } from '../../composables/filePicker/localFiles'
 import { pickerExclusion } from '../../composables/filePicker/validation'
@@ -58,6 +60,7 @@ async function setup(props: Record<string, unknown> = {}) {
       open: true,
       adapter: adapter(),
       capabilities: { server: { formats: ['raw'] } },
+      view: 'tree',
       ...props,
     },
     global: { stubs: { teleport: true } },
@@ -66,17 +69,38 @@ async function setup(props: Record<string, unknown> = {}) {
   return wrapper
 }
 function row(wrapper: Awaited<ReturnType<typeof setup>>, path: string) {
-  return wrapper.findAll('[role="treeitem"]').find((item) => item.attributes('data-path') === path)!
+  return wrapper
+    .findAll('[role="treeitem"],[role="option"]')
+    .find((item) => item.attributes('data-path') === path)!
 }
 function confirm(wrapper: Awaited<ReturnType<typeof setup>>) {
   return wrapper.findAll('.mint-picker__actions button').at(-1)!
 }
+function sources(wrapper: Awaited<ReturnType<typeof setup>>) {
+  return wrapper.findAll('[aria-label="Data source"] button')
+}
 async function expand(wrapper: Awaited<ReturnType<typeof setup>>) {
   await wrapper.get('[aria-label="Expand Tissue liver"]').trigger('click')
   await flushPromises()
 }
 
 describe('FilePicker', () => {
+  it('should focus the search input when / is pressed in the source panel', async () => {
+    const wrapper = await setup()
+    wrapper.element.ownerDocument.body.appendChild(wrapper.element)
+    await wrapper.get('.mint-picker__source-panel').trigger('keydown', { key: '/' })
+
+    expect(document.activeElement).toBe(wrapper.get('.mint-picker__search input').element)
+  })
+
+  it('should focus the search input when / is pressed on the source switcher', async () => {
+    const wrapper = await setup({ sources: ['server', 'localFile'] })
+    wrapper.element.ownerDocument.body.appendChild(wrapper.element)
+    await sources(wrapper)[0]!.trigger('keydown', { key: '/' })
+
+    expect(document.activeElement).toBe(wrapper.get('.mint-picker__search input').element)
+  })
+
   it('selects a folder without navigating, resolves metadata and excludes unsupported files', async () => {
     const wrapper = await setup()
     await row(wrapper, folder.path).trigger('click')
@@ -276,16 +300,12 @@ describe('FilePicker', () => {
 
   it('offers only server and local files and has a text-only confirm action', async () => {
     const wrapper = await setup({ sources: ['server', 'localFile'] })
-    expect(
-      wrapper
-        .findAll('[aria-label="Data source"] button')
-        .map((button) => button.attributes('aria-label')),
-    ).toEqual(['Server', 'Local files'])
+    expect(sources(wrapper).map((button) => button.text())).toEqual(['Server', 'Local files'])
     expect(confirm(wrapper).text()).toBe('Use selection')
-    expect(wrapper.get('.mint-picker__receipt > span').text()).toBe('No selection')
-    await wrapper.get('[aria-label="Local files"]').trigger('click')
+    expect(wrapper.get('.mint-picker__summary').text()).toBe('No selection')
+    await sources(wrapper)[1]!.trigger('click')
     await flushPromises()
-    expect(wrapper.get('[aria-label="Local files"]').attributes('aria-pressed')).toBe('true')
+    expect(sources(wrapper)[1]!.attributes('aria-checked')).toBe('true')
     expect(wrapper.find('[aria-label="Absolute path"]').exists()).toBe(false)
     expect(wrapper.text()).toContain('Drop files or a folder')
   })
@@ -436,7 +456,7 @@ describe('FilePicker', () => {
 
   it('does not render sources the host did not supply', async () => {
     const wrapper = await setup({ sources: ['server'] })
-    expect(wrapper.find('[aria-label="Local files"]').exists()).toBe(false)
+    expect(wrapper.find('[aria-label="Data source"]').exists()).toBe(false)
     expect(wrapper.find('[aria-label="This machine"]').exists()).toBe(false)
   })
 
@@ -453,14 +473,12 @@ describe('FilePicker', () => {
     expect(confirm(wrapper).attributes('disabled')).toBeUndefined()
   })
 
-  it('keyboard disclosure never selects and Escape cancels', async () => {
+  it('keyboard disclosure never selects', async () => {
     const wrapper = await setup()
     await row(wrapper, folder.path).trigger('keydown', { key: 'ArrowRight' })
     await flushPromises()
     expect(row(wrapper, folder.path).attributes('aria-expanded')).toBe('true')
     expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('false')
-    await row(wrapper, folder.path).trigger('keydown', { key: 'Escape' })
-    expect(wrapper.emitted('cancel')).toHaveLength(1)
   })
 })
 
@@ -485,3 +503,332 @@ describe('local metadata and capability validation', () => {
     expect(nodes.map((node) => node.kind === 'file' && node.file)).toEqual(files)
   })
 })
+
+describe('local file modification time', () => {
+  it('should expose the browser file lastModified as an ISO timestamp', async () => {
+    const file = new File(['a'], 'run.raw', { lastModified: Date.UTC(2026, 8, 24, 14, 32) })
+    const [node] = await localFilesAdapter([file]).listRoot()
+    expect(node!.modifiedAt).toBe('2026-09-24T14:32:00.000Z')
+  })
+})
+
+const mountA: PickerNode = { kind: 'folder', path: 'mount:a', name: 'Instrument', parentPath: null }
+const mountB: PickerNode = { kind: 'folder', path: 'mount:b', name: 'Shared', parentPath: null }
+const offline: PickerNode = {
+  kind: 'folder',
+  path: 'mount:c',
+  name: 'Archive',
+  parentPath: null,
+  unavailableReason: 'This mount is offline.',
+}
+const inA: PickerNode = { kind: 'file', path: 'a/run.raw', name: 'run.raw', format: 'raw', bytes: 20 }
+const inB: PickerNode = { kind: 'file', path: 'b/qc.raw', name: 'qc.raw', format: 'raw', bytes: 30 }
+function mountAdapter(): PickerAdapter {
+  return {
+    mounts: true,
+    listRoot: vi.fn(async () => [mountA, mountB, offline]),
+    listChildren: vi.fn(async (path) => (path === mountA.path ? [inA] : path === mountB.path ? [inB] : [])),
+    search: vi.fn(async () => []),
+  }
+}
+
+describe('FilePicker list view', () => {
+  it('should render a flat list without disclosure controls by default', async () => {
+    const wrapper = await setup({ view: undefined })
+    expect(wrapper.find('[aria-label="Expand Tissue liver"]').exists()).toBe(false)
+  })
+
+  it('should expose list rows as listbox options', async () => {
+    const wrapper = await setup({ view: undefined })
+    expect(wrapper.findAll('[role="listbox"] [role="option"]')).toHaveLength(2)
+  })
+
+  it('should enter a folder on double-click', async () => {
+    const wrapper = await setup({ view: undefined })
+    await row(wrapper, folder.path).trigger('dblclick')
+    await flushPromises()
+    expect(wrapper.findAll('[role="option"]').map((item) => item.attributes('data-path'))).toEqual([
+      // Undated rows fall back to name order under the default newest-first sort.
+      unsupported.path,
+      one.path,
+      two.path,
+    ])
+  })
+
+  it('should not select a folder opened by double-click', async () => {
+    const wrapper = await setup({ view: undefined })
+    await row(wrapper, folder.path).trigger('click', { detail: 1 })
+    await row(wrapper, folder.path).trigger('click', { detail: 2 })
+    await row(wrapper, folder.path).trigger('dblclick')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__summary').text()).toBe('No selection')
+  })
+
+  it('should keep a folder opened by double-click selected in folder mode', async () => {
+    const wrapper = await setup({ view: undefined, selectionMode: 'folder' })
+    await row(wrapper, folder.path).trigger('click', { detail: 1 })
+    await row(wrapper, folder.path).trigger('click', { detail: 2 })
+    await row(wrapper, folder.path).trigger('dblclick')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__summary').text()).not.toBe('No selection')
+  })
+
+  it('should not confirm a file on ArrowRight', async () => {
+    const wrapper = await setup({ view: undefined, selectionMode: 'single-file' })
+    await row(wrapper, folder.path).trigger('dblclick')
+    await flushPromises()
+    await row(wrapper, one.path).trigger('keydown', { key: 'ArrowRight' })
+    await flushPromises()
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('should render a checkbox on every selectable row in multi modes', async () => {
+    const wrapper = await setup({ view: undefined })
+    expect(wrapper.findAll('[role="option"] .mint-checkbox')).toHaveLength(2)
+  })
+
+  it('should reflect the row selection in its checkbox', async () => {
+    const wrapper = await setup({ view: undefined })
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    expect(row(wrapper, folder.path).find<HTMLInputElement>('input[type="checkbox"]').element.checked).toBe(true)
+  })
+
+  it('should show a lock instead of a checkbox on an unreadable row', async () => {
+    const locked: PickerNode = { ...other, unavailableReason: 'No read permission' }
+    const data = adapter()
+    vi.mocked(data.listRoot).mockResolvedValue([folder, locked])
+    const wrapper = await setup({ view: undefined, adapter: data })
+    expect(row(wrapper, locked.path).find('.mint-picker__lock').exists()).toBe(true)
+  })
+
+  it('should name the reason on an unreadable row', async () => {
+    const locked: PickerNode = { ...other, unavailableReason: 'No read permission' }
+    const data = adapter()
+    vi.mocked(data.listRoot).mockResolvedValue([folder, locked])
+    const wrapper = await setup({ view: undefined, adapter: data })
+    expect(row(wrapper, locked.path).get('.mint-picker__reason').text()).toBe('No read permission')
+  })
+
+  it('should show the modification time in its own column', async () => {
+    const stamped: PickerNode = { ...folder, modifiedAt: '2026-09-24T14:32:00' }
+    const data = adapter()
+    vi.mocked(data.listRoot).mockResolvedValue([stamped])
+    const wrapper = await setup({ view: undefined, adapter: data })
+    expect(row(wrapper, stamped.path).get('.mint-picker__cell--time').text()).toBe(
+      formatModified(stamped.modifiedAt),
+    )
+  })
+
+  it('should render in an extra-large BaseModal', async () => {
+    const wrapper = await setup()
+    expect(wrapper.getComponent(BaseModal).props('size')).toBe('xl')
+  })
+
+  it('should cancel on Escape', async () => {
+    const wrapper = await setup()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+})
+
+describe('FilePicker receipt', () => {
+  it('should summarise the selected files and their total size', async () => {
+    const wrapper = await setup({ view: undefined, selectionMode: 'multi-file' })
+    await row(wrapper, folder.path).trigger('dblclick')
+    await flushPromises()
+    await row(wrapper, one.path).trigger('click')
+    await row(wrapper, two.path).trigger('click')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__summary').text()).toBe('2 files selected · 40 B')
+  })
+
+  it('should render the footer clear as a text link when files are selected', async () => {
+    const wrapper = await setup()
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__clear').classes()).toContain('mint-picker__link')
+  })
+
+  it('should render the scope toggle at path-bar scale when the source is a server', async () => {
+    const wrapper = await setup()
+    expect(wrapper.get('.mint-picker__scope').classes()).not.toContain('mint-button')
+  })
+
+  it('should render the refresh action at path-bar scale when the source is a server', async () => {
+    const wrapper = await setup()
+    expect(wrapper.get('[aria-label="Refresh location"]').classes()).not.toContain('mint-icon-button')
+  })
+
+  it('should clear the selection from the footer', async () => {
+    const wrapper = await setup()
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    await wrapper.get('.mint-picker__clear').trigger('click')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__summary').text()).toBe('No selection')
+  })
+})
+
+describe('FilePicker mounts', () => {
+  it('should offer each mount as a header source', async () => {
+    const wrapper = await setup({ adapter: mountAdapter() })
+    expect(sources(wrapper).map((button) => button.text())).toEqual([
+      'Instrument',
+      'Shared',
+      'Archive',
+    ])
+  })
+
+  it('should disable an offline mount', async () => {
+    const wrapper = await setup({ adapter: mountAdapter() })
+    expect(sources(wrapper)[2]!.attributes('disabled')).toBeDefined()
+  })
+
+  it('should open the first reachable mount', async () => {
+    const wrapper = await setup({ adapter: mountAdapter(), view: undefined })
+    expect(wrapper.findAll('[role="option"]').map((item) => item.attributes('data-path'))).toEqual([
+      inA.path,
+    ])
+  })
+
+  it('should list another mount when its source is chosen', async () => {
+    const wrapper = await setup({ adapter: mountAdapter(), view: undefined })
+    await sources(wrapper)[1]!.trigger('click')
+    await flushPromises()
+    expect(wrapper.findAll('[role="option"]').map((item) => item.attributes('data-path'))).toEqual([
+      inB.path,
+    ])
+  })
+
+  it('should keep the selection when switching mounts', async () => {
+    const wrapper = await setup({ adapter: mountAdapter(), view: undefined })
+    await row(wrapper, inA.path).trigger('click')
+    await sources(wrapper)[1]!.trigger('click')
+    await flushPromises()
+    await row(wrapper, inB.path).trigger('click')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__summary').text()).toBe('2 files selected · 50 B')
+  })
+
+  it('should name the previewed file’s own mount as its source after switching mounts', async () => {
+    const wrapper = await setup({ adapter: mountAdapter(), view: undefined })
+    await row(wrapper, inA.path).trigger('click')
+    await sources(wrapper)[1]!.trigger('click')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__metadata dd:last-of-type').text()).toBe(mountA.name)
+  })
+
+  it('should start the breadcrumb at the mount instead of the mount list', async () => {
+    const wrapper = await setup({ adapter: mountAdapter() })
+    expect(wrapper.get('[aria-label="Breadcrumb"]').text()).toBe('Instrument')
+  })
+
+  it('should reach the mount list from an initial folder inside a mount', async () => {
+    const adapter = mountAdapter()
+    vi.mocked(adapter.listChildren).mockImplementation(async (path) => (path === 'a/sub' ? [inA] : []))
+    const wrapper = await setup({ adapter, view: undefined, initialPath: 'a/sub' })
+    await row(wrapper, inA.path).trigger('keydown', { key: 'ArrowLeft' })
+    await flushPromises()
+    expect(wrapper.findAll('[role="option"]').map((item) => item.attributes('data-path'))).toContain(
+      mountA.path,
+    )
+  })
+
+  it('should mark the containing mount selected for an initial folder inside it', async () => {
+    const adapter = { ...mountAdapter(), mountOf: (path: string) => `mount:${path.split('/')[0]}` }
+    vi.mocked(adapter.listChildren).mockImplementation(async (path) => (path === 'a/sub' ? [inA] : []))
+    const wrapper = await setup({ adapter, view: undefined, initialPath: 'a/sub' })
+    expect(sources(wrapper)[0]!.attributes('aria-checked')).toBe('true')
+  })
+
+  it('should name the containing mount as the source of a file under an initial folder', async () => {
+    const adapter = { ...mountAdapter(), mountOf: (path: string) => `mount:${path.split('/')[0]}` }
+    vi.mocked(adapter.listChildren).mockImplementation(async (path) =>
+      path === 'a/sub' ? [{ ...inA, parentPath: 'a/sub' }] : [],
+    )
+    const wrapper = await setup({ adapter, view: undefined, initialPath: 'a/sub' })
+    await row(wrapper, inA.path).trigger('click')
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__metadata dd:last-of-type').text()).toBe(mountA.name)
+  })
+
+  it('should add local files as a source after the mounts', async () => {
+    const wrapper = await setup({ adapter: mountAdapter(), sources: ['server', 'localFile'] })
+    expect(sources(wrapper).at(-1)!.text()).toBe('Local files')
+  })
+})
+
+describe('formatModified', () => {
+  const now = new Date(2026, 8, 25)
+  it('should show month, day and time within the current year', () => {
+    expect(formatModified('2026-09-24T14:32:00', now)).toBe('09-24 14:32')
+  })
+
+  it('should show the full date outside the current year', () => {
+    expect(formatModified('2025-01-02T08:00:00', now)).toBe('2025-01-02')
+  })
+
+  it('should list the newest folder first when opened', async () => {
+    const wrapper = await setup({
+      adapter: {
+        ...adapter(),
+        listRoot: vi.fn(async () => [
+          { ...folder, modifiedAt: '2026-01-01T00:00:00Z' },
+          { ...other, modifiedAt: '2026-09-29T00:00:00Z' },
+        ]),
+      },
+    })
+    expect(wrapper.findAll('[role="treeitem"]').map((item) => item.attributes('data-path'))).toEqual([
+      other.path, folder.path,
+    ])
+  })
+
+  it('should reorder rows by name when Name A–Z is chosen from the sort menu', async () => {
+    const wrapper = await setup({ defaultSort: 'name-desc' })
+    await wrapper.get('.mint-picker__sort').trigger('click')
+    await wrapper.findAll('[role="menuitemradio"]').find((item) => item.text() === 'Name A–Z')!.trigger('click')
+    expect(wrapper.findAll('[role="treeitem"]').map((item) => item.attributes('data-path'))).toEqual([
+      other.path, folder.path,
+    ])
+  })
+
+  it('should label the sort trigger with the active order', async () => {
+    const wrapper = await setup()
+    expect(wrapper.get('.mint-picker__sort').text()).toContain('Newest first')
+  })
+
+  it('should tell the user when search results are partial', async () => {
+    vi.useFakeTimers()
+    const base = adapter()
+    const wrapper = await setup({
+      adapter: { ...base, search: vi.fn(async () => ({ nodes: [one], truncated: true })) },
+    })
+    await wrapper.get('[aria-label="Search folders and files"]').setValue('sample')
+    await vi.advanceTimersByTimeAsync(400)
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__truncated').text()).toContain('first 1')
+  })
+
+  it('should still list the partial search results', async () => {
+    vi.useFakeTimers()
+    const wrapper = await setup({
+      adapter: { ...adapter(), search: vi.fn(async () => ({ nodes: [one], truncated: true })) },
+    })
+    await wrapper.get('[aria-label="Search folders and files"]').setValue('sample')
+    await vi.advanceTimersByTimeAsync(400)
+    await flushPromises()
+    expect(wrapper.findAll('[role="treeitem"]').map((item) => item.attributes('data-path'))).toEqual([one.path])
+  })
+
+  it('should say the search stopped early when a truncated search found nothing', async () => {
+    vi.useFakeTimers()
+    const wrapper = await setup({
+      adapter: { ...adapter(), search: vi.fn(async () => ({ nodes: [], truncated: true })) },
+    })
+    await wrapper.get('[aria-label="Search folders and files"]').setValue('sample')
+    await vi.advanceTimersByTimeAsync(400)
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__empty').text()).toContain('stopped')
+  })
+})

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

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import FileUploader from '../../components/FileUploader.vue'
+
+describe('FileUploader', () => {
+  it('should name the accepted formats in the prompt when accept is set', () => {
+    const wrapper = mount(FileUploader, { props: { accept: '.raw, .mzML' } })
+    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Drop RAW, MZML or click')
+  })
+
+  it('should prompt for any file when accept is not set', () => {
+    const wrapper = mount(FileUploader)
+    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Drop any file or click')
+  })
+})

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

@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import FitPanel from '../../components/FitPanel.vue'
+import type { FitResultSummary, FitSeries } from '../../types'
+
+const results: FitResultSummary[] = [
+  { label: 'IC50 (nM)', value: '42.7' },
+  { label: 'Hill slope', value: '-1.12', variant: 'success' },
+  { label: 'R²', value: '0.982', variant: 'success', verdict: true },
+]
+
+function mountCompleted() {
+  return mount(FitPanel, { props: { state: 'completed', results } })
+}
+
+describe('FitPanel', () => {
+  it('should list results as table rows when they carry no verdict, even with a variant', () => {
+    expect(mountCompleted().findAll('.mint-fit-panel__result-row').map(row => row.text()))
+      .toEqual(['IC50 (nM)42.7', 'Hill slope-1.12'])
+  })
+
+  it('should move a result into the check row when it is marked as a verdict', () => {
+    expect(mountCompleted().get('.mint-fit-panel__check--success').text()).toBe('R² 0.982')
+  })
+})
+
+const parameters: FitResultSummary[] = [
+  { label: 'IC50', unit: 'nM', value: '631', ci: '512 – 778' },
+  { label: 'Hill slope', value: '1.10', ci: '0.94 – 1.26' },
+]
+
+const series: FitSeries[] = [
+  { label: 'Control', results: parameters },
+  { label: 'Treatment A', color: 'var(--mint-sample-4)', results: [{ label: 'IC50', unit: 'nM', value: '39.8' }] },
+]
+
+describe('FitPanel parameter table (9b)', () => {
+  it('should render the unit in its own element when a result has a unit', () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', results: parameters } })
+    expect(wrapper.get('.mint-fit-panel__result-unit').text()).toBe('nM')
+  })
+
+  it('should render a header row when results are shown', () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', results: parameters } })
+    expect(wrapper.get('.mint-fit-panel__result-head').text()).toBe('ParameterValue95% CI')
+  })
+
+  it('should render the confidence interval when a result has one', () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', results: parameters } })
+    expect(wrapper.get('.mint-fit-panel__result-ci').text()).toBe('512 – 778')
+  })
+
+  it('should omit the CI column when no result has a confidence interval', () => {
+    expect(mountCompleted().get('.mint-fit-panel__result-head').text()).toBe('ParameterValue')
+  })
+
+  it('should use custom column labels when columnLabels is set', () => {
+    const wrapper = mount(FitPanel, {
+      props: { state: 'completed', results: parameters, columnLabels: { parameter: '参数', value: '值' } },
+    })
+    expect(wrapper.get('.mint-fit-panel__result-head').text()).toBe('参数值95% CI')
+  })
+})
+
+describe('FitPanel series switch (9b)', () => {
+  it('should show the first series when series are given', () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', series } })
+    expect(wrapper.findAll('.mint-fit-panel__result-row')).toHaveLength(2)
+  })
+
+  it('should show another series when its segment is selected', async () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', series } })
+    await wrapper.findAll('[role="radio"]')[1].trigger('click')
+    expect(wrapper.findAll('.mint-fit-panel__result-row')).toHaveLength(1)
+  })
+
+  it('should emit the selected series index when a segment is selected', async () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', series } })
+    await wrapper.findAll('[role="radio"]')[1].trigger('click')
+    expect(wrapper.emitted('update:activeSeries')?.[0]).toEqual([1])
+  })
+
+  it('should color a series segment with the group palette when the series has no color', () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', series } })
+    expect(wrapper.get('.mint-segmented-control__swatch').attributes('style')).toContain('var(--mint-sample-1)')
+  })
+
+  it('should render no series switch when series are not given', () => {
+    expect(mountCompleted().find('.mint-fit-panel__series').exists()).toBe(false)
+  })
+
+  it('should keep the series switch when the active series has no results', () => {
+    const wrapper = mount(FitPanel, { props: { state: 'completed', series: [{ label: 'Empty', results: [] }, ...series] } })
+    expect(wrapper.find('.mint-fit-panel__series').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormulaInput from '../../components/FormulaInput.vue'
+
+function mountFormula(props: Record<string, unknown> = {}) {
+  return mount(FormulaInput, { props: { modelValue: 'C6H12O6', ...props } })
+}
+
+describe('FormulaInput inline rendering (4b)', () => {
+  it('should render the formula inside the field when blurred', () => {
+    const wrapper = mountFormula()
+    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(true)
+  })
+
+  it('should render counts as subscripts when blurred', () => {
+    const wrapper = mountFormula()
+    expect(wrapper.findAll('.mint-formula-input__sub').map(n => n.text())).toEqual(['6', '12', '6'])
+  })
+
+  it('should show the raw text instead of the rendering when focused', async () => {
+    const wrapper = mountFormula()
+    await wrapper.find('input').trigger('focus')
+    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(false)
+  })
+
+  it('should render the formula again when blurred after focus', async () => {
+    const wrapper = mountFormula()
+    await wrapper.find('input').trigger('focus')
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(true)
+  })
+
+  it('should not render the formula when showPreview is false', () => {
+    const wrapper = mountFormula({ showPreview: false })
+    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(false)
+  })
+
+  it('should render the hydrate coefficient full size when blurred', () => {
+    const wrapper = mountFormula({ modelValue: 'CuSO4·5H2O' })
+    expect(wrapper.findAll('.mint-formula-input__sub').map(n => n.text())).toEqual(['4', '2'])
+  })
+})
+
+describe('FormulaInput molecular weight segment (4b)', () => {
+  it('should show MW, the value and g/mol as text when the formula is valid', () => {
+    const wrapper = mountFormula()
+    expect(wrapper.find('.mint-formula-input__mw').text()).toBe('MW 180.16 g/mol')
+  })
+
+  it('should show a dash for the value when the field is empty', () => {
+    const wrapper = mountFormula({ modelValue: '' })
+    expect(wrapper.find('.mint-formula-input__mw-value').text()).toBe('—')
+  })
+
+  it('should hide the segment when showMW is false', () => {
+    const wrapper = mountFormula({ showMW: false })
+    expect(wrapper.find('.mint-formula-input__mw').exists()).toBe(false)
+  })
+
+  it('should emit the molecular weight when the formula changes', async () => {
+    const wrapper = mountFormula({ modelValue: '' })
+    await wrapper.find('input').setValue('H2O')
+    expect(wrapper.emitted('mw')?.[0]?.[0]).toBeCloseTo(18.015, 2)
+  })
+})
+
+describe('FormulaInput error state (4b)', () => {
+  it('should put the field in the error state when a symbol is unknown', () => {
+    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
+    expect(wrapper.classes()).toContain('mint-formula-input--error')
+  })
+
+  it('should mark the input invalid when a symbol is unknown', () => {
+    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
+    expect(wrapper.find('input').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('should name the unknown symbol when parsing fails', () => {
+    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
+    expect(wrapper.find('.mint-formula-input__error-text').text()).toBe('Unknown element: Xx')
+  })
+
+  it('should show the raw text when the formula is invalid', () => {
+    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
+    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(false)
+  })
+
+  it('should accept an element outside the common set when the symbol is real', () => {
+    const wrapper = mountFormula({ modelValue: 'SeO2' })
+    expect(wrapper.find('input').attributes('aria-invalid')).toBeUndefined()
+  })
+
+  it('should accept a trailing charge when the formula is an ion', () => {
+    const wrapper = mountFormula({ modelValue: 'SO4^2-' })
+    expect(wrapper.find('input').attributes('aria-invalid')).toBeUndefined()
+  })
+})