@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0

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

@@ -57,4 +57,20 @@ describe('BatchProgressList', () => {
     await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
     expect(wrapper.findAll('.mint-batch-progress__item')).toHaveLength(3)
   })
+
+  it.each([
+    ['completed', undefined, '100%', '100%'],
+    ['processing', 40, '40%', '40%'],
+    ['pending', undefined, 'Queued', '0%'],
+    ['error', undefined, 'Failed', '0%'],
+    ['skipped', undefined, 'Skipped', '0%'],
+  ] as const)('should show %s rows with their status text and bar width', async (status, progress, text, width) => {
+    const wrapper = mount(BatchProgressList, {
+      props: { items: [{ id: 'x', label: 'X', status, progress }], autoScroll: false },
+    })
+    if (status === 'completed') await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
+
+    expect(wrapper.get('.mint-batch-progress__item-status').text()).toBe(text)
+    expect(wrapper.get('.mint-batch-progress__item-progress-bar').attributes('style')).toContain(`width: ${width}`)
+  })
 })

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

@@ -13,7 +13,7 @@ describe('CalendarGridPanelInternal', () => {
   it('renders calendar state and emits navigation and selection events', async () => {
     const wrapper = mount(CalendarGridPanelInternal, {
       props: {
-        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         monthYear: 'April 2026',
         days,
         selectedDate: days[1].date,
@@ -38,7 +38,7 @@ describe('CalendarGridPanelInternal', () => {
     const today = new Date()
     const wrapper = mount(CalendarGridPanelInternal, {
       props: {
-        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         monthYear: 'Today',
         days: [{ date: today, isCurrentMonth: true, isDisabled: false }],
         selectedDate: today,

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

@@ -21,6 +21,17 @@ describe('ChartContainer', () => {
     expect(wrapper.text()).toContain('Chart')
     expect(wrapper.get('.mint-chart__footer').text()).toBe('Footer')
   })
+
+  it.each([
+    [undefined, 'No data'],
+    ['Pick samples to draw the distribution.', 'No dataPick samples to draw the distribution.'],
+  ])('should render the empty title and hint %s when empty', (emptyHint, text) => {
+    const wrapper = mount(ChartContainer, { props: { empty: true, emptyText: 'No data', emptyHint } })
+
+    const empty = wrapper.get('.mint-chart__empty')
+    expect(empty.text()).toBe(text)
+    expect(empty.find('.mint-chart__empty-hint').exists()).toBe(emptyHint !== undefined)
+  })
 })
 
 describe('ChartContainer header legend (9a)', () => {

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

@@ -25,9 +25,12 @@ describe('ChemicalFormula', () => {
     expect(mount(ChemicalFormula, { props: { emptyText: 'Unknown' } }).text()).toBe('Unknown')
   })
 
-  it('supports standalone sans-serif adduct labels', () => {
-    expect(mount(AdductText, { props: { value: '[M-H]-', font: 'sans' } }).classes())
-      .toContain('mint-adduct-text--sans')
+  it.each([
+    [undefined, 'sans'],
+    ['mono', 'mono'],
+  ] as const)('should use the %s font prop as the %s adduct font', (font, cls) => {
+    expect(mount(AdductText, { props: { value: '[M-H]-', font } }).classes())
+      .toContain(`mint-adduct-text--${cls}`)
   })
 
   it('should render a trailing adduct charge as a superscript when the value is bracketed', () => {

package/src/__tests__/components/DatePicker.datetime.test.ts

@@ -28,6 +28,12 @@ describe('DatePicker type="datetime"', () => {
     expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-04-22T09:00'])
   })
 
+  it('should show the date as ISO YYYY-MM-DD when a value is set', () => {
+    const wrapper = mount(DatePicker, { props: { type: 'datetime', modelValue: '2026-04-22T14:30' } })
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('2026-04-22 14:30')
+  })
+
   it('uses shared dropdown state for Escape close behavior', async () => {
     const wrapper = mount(DatePicker, {
       props: {

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

@@ -43,6 +43,27 @@ describe('DatePicker', () => {
     wrapper.unmount()
   })
 
+  it('should show the bound date as ISO YYYY-MM-DD when a value is set', () => {
+    const wrapper = mount(DatePicker, { props: { modelValue: '2026-02-10' } })
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('2026-02-10')
+  })
+
+  it('should clear the value from the field button when clearable', async () => {
+    const wrapper = mount(DatePicker, { props: { modelValue: '2026-02-10' } })
+
+    await wrapper.get('[aria-label="Clear date"]').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[undefined]])
+    expect(dropdown()).toBeNull()
+  })
+
+  it('should hide the clear button when the field is disabled', () => {
+    const wrapper = mount(DatePicker, { props: { modelValue: '2026-02-10', disabled: true } })
+
+    expect(wrapper.find('[aria-label="Clear date"]').exists()).toBe(false)
+  })
+
   it('opens from the input with Enter, Space and ArrowDown', async () => {
     const wrapper = mount(DatePicker, { attachTo: document.body })
 

package/src/__tests__/components/DatePicker.time.test.ts

@@ -114,12 +114,12 @@ describe('DatePicker type="time"', () => {
     expect(wrapper.findAll('.mint-time-picker__slot')[1].classes()).toContain('mint-menu-item--selected')
   })
 
-  it('should reserve the check column on unselected slots when opened', async () => {
+  it('should mark the selected slot without a check icon when opened', async () => {
     const wrapper = mount(DatePicker, { props: { type: 'time', modelValue: '00:15' } })
 
     await wrapper.get('input').trigger('click')
 
-    expect(wrapper.findAll('.mint-time-picker__slot')[0].find('.mint-menu-item__check').exists()).toBe(true)
+    expect(wrapper.findAll('.mint-time-picker__slot')[1].find('.mint-menu-item__check').exists()).toBe(false)
   })
 
   it('should mark a slot unavailable when disabledSlots returns a reason', async () => {

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

@@ -13,7 +13,7 @@ describe('EmptyState', () => {
 
     const button = wrapper.find('.mint-button')
     expect(button.exists()).toBe(true)
-    expect(button.classes()).toContain('mint-button--secondary')
+    expect(button.classes()).toEqual(expect.arrayContaining(['mint-button--secondary', 'mint-button--sm']))
     expect(button.text()).toBe('Create experiment')
 
     await button.trigger('click')

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

@@ -1,5 +1,5 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 
 function mountPopover(props = {}) {
@@ -16,15 +16,25 @@ function mountPopover(props = {}) {
   })
 }
 
+function findOption(wrapper: ReturnType<typeof mountPopover>, label: string) {
+  return wrapper.findAll('.mint-experiment-popover__option').find(option => option.text().includes(label))
+}
+
 describe('ExperimentPopover', () => {
   afterEach(() => {
     document.body.innerHTML = ''
+    vi.useRealTimers()
+    vi.restoreAllMocks()
   })
 
   it('requests experiment selection on the first click when no experiment is selected', async () => {
     const wrapper = mountPopover()
 
-    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    const trigger = wrapper.find('.mint-experiment-popover__trigger')
+    expect(trigger.classes()).toContain('mint-experiment-popover__trigger--empty')
+    expect(trigger.text()).toContain('Attach experiment')
+
+    await trigger.trigger('click')
 
     expect(wrapper.emitted('select')).toHaveLength(1)
     expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
@@ -51,15 +61,18 @@ describe('ExperimentPopover', () => {
     wrapper.unmount()
   })
 
-  it('prefers the experiment name in the trigger when both name and code are available', () => {
+  it('shows the code badge and the truncated name in the trigger, with both in its title', () => {
     const wrapper = mountPopover({
       experimentName: 'Dose response run',
       experimentCode: 'EXP-001',
+      maxNameWidth: 120,
     })
 
     const trigger = wrapper.find('.mint-experiment-popover__trigger')
-    expect(trigger.text()).toContain('Dose response run')
-    expect(trigger.text()).not.toContain('EXP-001')
+    expect(trigger.find('.mint-exp-code').text()).toBe('EXP-001')
+    expect(trigger.find('.mint-experiment-popover__trigger-text').text()).toBe('Dose response run')
+    expect(trigger.find('.mint-experiment-popover__trigger-text').attributes('style')).toContain('max-width: 120px')
+    expect(trigger.attributes('title')).toBe('EXP-001 · Dose response run')
 
     wrapper.unmount()
   })
@@ -92,31 +105,48 @@ describe('ExperimentPopover', () => {
     wrapper.unmount()
   })
 
-  it('shows a placeholder instead of "No experiment" while the record resolves', () => {
+  it.each([
+    { panelRight: 900, alignedEnd: false },
+    { panelRight: 1100, alignedEnd: true },
+  ])('should align the panel to the right edge only when it would overflow the viewport (right $panelRight)', async ({ panelRight, alignedEnd }) => {
+    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(1024)
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({ right: panelRight } as DOMRect)
+    const wrapper = mountPopover({ experimentName: 'Dose response run', experimentCode: 'EXP-001' })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.get('.mint-experiment-popover__panel').classes('mint-experiment-popover__panel--end')).toBe(alignedEnd)
+    wrapper.unmount()
+  })
+
+  it('shows a placeholder instead of the empty label while the record resolves', () => {
     const wrapper = mountPopover({ isResolving: true, showDetach: true })
 
     const trigger = wrapper.find('.mint-experiment-popover__trigger')
     expect(trigger.find('.mint-experiment-popover__trigger-skeleton').exists()).toBe(true)
-    expect(trigger.text()).not.toContain('No experiment')
+    expect(trigger.text()).not.toContain('Attach experiment')
     expect(trigger.attributes('aria-busy')).toBe('true')
 
     wrapper.unmount()
   })
 
-  it('never renders the bound id as a stand-in name while resolving', () => {
-    const wrapper = mountPopover({ isResolving: true, showDetach: true })
+  it('never renders the bound id as a stand-in name while resolving', async () => {
+    const wrapper = mountPopover({ isResolving: true, showDetach: true, experimentId: 12 })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
 
     expect(wrapper.text()).not.toMatch(/\d/)
 
     wrapper.unmount()
   })
 
-  it('shows the resolution failure instead of "No experiment"', () => {
+  it('shows the resolution failure instead of the empty label', () => {
     const wrapper = mountPopover({ error: 'Experiment not found', showDetach: true })
 
     const trigger = wrapper.find('.mint-experiment-popover__trigger')
     expect(trigger.text()).toContain('Experiment unavailable')
-    expect(trigger.text()).not.toContain('No experiment')
+    expect(trigger.text()).not.toContain('Attach experiment')
     expect(trigger.classes()).toContain('mint-experiment-popover__trigger--error')
 
     wrapper.unmount()
@@ -130,7 +160,7 @@ describe('ExperimentPopover', () => {
     const panel = wrapper.find('.mint-experiment-popover__panel')
     expect(panel.text()).toContain('Experiment not found')
 
-    await wrapper.find('.mint-experiment-popover__detach-btn').trigger('click')
+    await findOption(wrapper, 'Detach')!.trigger('click')
     expect(wrapper.emitted('detach')).toHaveLength(1)
 
     wrapper.unmount()
@@ -143,7 +173,7 @@ describe('ExperimentPopover', () => {
 
     const panel = wrapper.find('.mint-experiment-popover__panel')
     expect(panel.findAll('.mint-experiment-popover__skeleton-line').length).toBeGreaterThan(0)
-    expect(panel.find('.mint-experiment-popover__select-btn').exists()).toBe(false)
+    expect(panel.find('.mint-experiment-popover__meta').exists()).toBe(false)
 
     wrapper.unmount()
   })
@@ -151,7 +181,8 @@ describe('ExperimentPopover', () => {
   it('hides the inline save action while no resolved experiment exists', () => {
     const wrapper = mountPopover({ isResolving: true, showSave: true })
 
-    expect(wrapper.find('.mint-experiment-popover__save-trigger').exists()).toBe(false)
+    expect(wrapper.find('.mint-experiment-popover__save').exists()).toBe(false)
+    expect(wrapper.find('.mint-experiment-popover--save').exists()).toBe(false)
 
     wrapper.unmount()
   })
@@ -163,11 +194,89 @@ describe('ExperimentPopover', () => {
     })
 
     await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
-    await wrapper.find('.mint-experiment-popover__change-btn').trigger('click')
+    await findOption(wrapper, 'Change experiment')!.trigger('click')
 
     expect(wrapper.emitted('select')).toHaveLength(1)
     expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
 
     wrapper.unmount()
   })
+
+  it('lists project, status, owner and relative update time in the panel', async () => {
+    vi.useFakeTimers({ toFake: ['Date'] })
+    vi.setSystemTime(new Date('2026-10-28T12:00:00Z'))
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      experimentCode: 'EXP-001',
+      experimentStatus: 'ongoing',
+      experimentProject: 'Hypoxia atlas',
+      experimentOwner: 'J. Doe',
+      experimentUpdatedAt: '2026-10-28T10:00:00Z',
+    })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    const rows = wrapper.findAll('.mint-experiment-popover__meta dt').map(dt => [dt.text(), dt.element.nextElementSibling?.textContent])
+    expect(rows).toEqual([
+      ['Project', 'Hypoxia atlas'],
+      ['Status', 'Ongoing'],
+      ['Owner', 'J. Doe'],
+      ['Updated', '2 hours ago'],
+    ])
+    expect(wrapper.find('.mint-experiment-popover__panel button:not(.mint-experiment-popover__option)').exists()).toBe(false)
+    expect(findOption(wrapper, 'Detach')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { experimentId: 12, href: '/experiments/12' },
+    { experimentId: null, href: undefined },
+  ])('links "Open in MINT" to the experiment in a new tab for id $experimentId', async ({ experimentId, href }) => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', experimentId })
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    const link = findOption(wrapper, 'Open in MINT')
+    expect(link?.attributes('href')).toBe(href)
+    if (link) {
+      expect(link.attributes('target')).toBe('_blank')
+      expect(link.attributes('rel')).toBe('noopener')
+    }
+
+    wrapper.unmount()
+  })
+
+  it('saves at once from the joined Save button when confirmation is off', async () => {
+    const wrapper = mountPopover({
+      experimentName: 'Dose response run',
+      showSave: true,
+      confirmSave: false,
+      saveLabel: 'Push',
+    })
+
+    expect(wrapper.find('.mint-experiment-popover--save').exists()).toBe(true)
+    const save = wrapper.find('.mint-experiment-popover__save')
+    expect(save.text()).toBe('Push')
+
+    await save.trigger('click')
+
+    expect(wrapper.emitted('save')).toHaveLength(1)
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { saveLoading: false, dirty: true, label: 'Save', disabled: false, dot: true },
+    { saveLoading: true, dirty: true, label: 'Saving…', disabled: true, dot: false },
+  ])('renders Save as "$label" with the dirty dot $dot', ({ saveLoading, dirty, label, disabled, dot }) => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', showSave: true, saveLoading, dirty })
+
+    const save = wrapper.find('.mint-experiment-popover__save')
+    expect(save.text()).toBe(label)
+    expect(save.attributes('disabled') !== undefined).toBe(disabled)
+    expect(save.find('.mint-experiment-popover__dirty').exists()).toBe(dot)
+
+    wrapper.unmount()
+  })
 })

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

@@ -1,35 +1,45 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { computed, reactive, ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import { useExperimentSelector } from '../../composables/useExperimentSelector'
 import { useExperimentStore } from '../../stores/experiment'
-import type { ExperimentSummary } from '../../types'
+import type { ExperimentFilters, ExperimentSummary } from '../../types'
 
 const fetchExperiments = vi.fn(async () => undefined)
 const fetchFilterOptions = vi.fn(async () => undefined)
+const fetchStatusCounts = vi.fn(async () => undefined)
 const experiments = ref<ExperimentSummary[]>([])
+const experimentTypes = ref<{ value: string; label: string }[]>([])
+const projects = ref<{ value: string; label: string }[]>([])
+const statusCounts = ref<Record<string, number>>({})
+let filters: ExperimentFilters = newFilters()
+
+function newFilters(): ExperimentFilters {
+  return reactive({
+    search: undefined,
+    status: undefined,
+    project: undefined,
+    experimentType: undefined,
+    datePreset: undefined,
+    mine: undefined,
+  })
+}
 
 vi.mock('../../composables/useExperimentSelector', () => ({
   useExperimentSelector: vi.fn(() => ({
     experiments,
-    filters: reactive({
-      search: undefined,
-      status: undefined,
-      project: undefined,
-      experimentType: undefined,
-      datePreset: undefined,
-    }),
+    filters,
     isLoading: ref(false),
     error: ref(null),
-    sortKey: ref('created_at:desc'),
-    experimentTypes: ref([]),
-    projects: ref([]),
-    groupedByProject: computed(() => []),
+    experimentTypes,
+    projects,
+    statusCounts,
     fetch: fetchExperiments,
     fetchFilterOptions,
+    fetchStatusCounts,
   })),
 }))
 
@@ -49,19 +59,30 @@ function experiment(overrides: Partial<ExperimentSummary> = {}): ExperimentSumma
 
 interface ModalProps {
   open: boolean
+  experimentType?: string
   allowedExperimentTypes?: string[] | null
   currentExperimentId?: number | null
 }
 
-function mountModal(props: ModalProps) {
+function mountModal(props: ModalProps, slots: Record<string, string> = {}) {
   return mount(ExperimentSelectorModal, {
     props,
+    slots,
     global: {
       stubs: {
         BaseModal: {
           props: ['open', 'title', 'size'],
           template: '<div><slot /></div>',
         },
+        // Renders the trigger and every item inline, without the teleported panel.
+        ActionMenu: {
+          props: ['label', 'items'],
+          emits: ['select'],
+          template: `<div class="menu-stub" :data-label="label">
+            <slot name="trigger" :open="false" :toggle="() => {}" :keydown="() => {}" />
+            <button v-for="item in items" :key="item.id" class="menu-stub__item" :data-checked="item.checked" @click="$emit('select', item)">{{ item.label }}</button>
+          </div>`,
+        },
       },
     },
   })
@@ -71,8 +92,13 @@ describe('ExperimentSelectorModal', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     experiments.value = []
+    experimentTypes.value = []
+    projects.value = []
+    statusCounts.value = {}
+    filters = newFilters()
     fetchExperiments.mockClear()
     fetchFilterOptions.mockClear()
+    fetchStatusCounts.mockClear()
     vi.mocked(useExperimentSelector).mockClear()
   })
 
@@ -81,6 +107,7 @@ describe('ExperimentSelectorModal', () => {
 
     expect(fetchFilterOptions).toHaveBeenCalledTimes(1)
     expect(fetchExperiments).toHaveBeenCalledTimes(1)
+    expect(fetchStatusCounts).toHaveBeenCalledTimes(1)
   })
 
   it('does not fetch while mounted closed', () => {
@@ -96,6 +123,7 @@ describe('ExperimentSelectorModal', () => {
     expect(useExperimentSelector).toHaveBeenCalledWith({
       experimentType: undefined,
       allowedExperimentTypes: ['mass_spectrometry'],
+      withStatusCounts: true,
     })
   })
 
@@ -129,6 +157,12 @@ describe('ExperimentSelectorModal', () => {
     expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
 
+  it('should mark the search field autofocus when the modal opens', () => {
+    const wrapper = mountModal({ open: true })
+
+    expect(wrapper.get('input[type="search"]').attributes()).toHaveProperty('autofocus')
+  })
+
   it('should show the experiment code as a pill on the second line', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ open: true })
@@ -168,4 +202,109 @@ describe('ExperimentSelectorModal', () => {
     expect(store.currentId).toBeNull()
     expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
+
+  it('should show the description slot above the experiment list', () => {
+    const wrapper = mountModal({ open: true }, { description: '<p class="why">Keep the result with its samples.</p>' })
+
+    const description = wrapper.get('.mint-experiment-selector__description')
+    expect(description.find('.why').text()).toBe('Keep the result with its samples.')
+    expect(description.element.compareDocumentPosition(wrapper.get('.mint-experiment-selector').element))
+      .toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+  })
+
+  it.each([
+    [null, false],
+    [7, true],
+  ])('should render the footer slot when the current experiment is %s, with the clear button %s', (currentExperimentId, hasClear) => {
+    const wrapper = mountModal({ open: true, currentExperimentId }, { footer: '<span class="extra">Skip</span>' })
+
+    const footer = wrapper.get('.mint-experiment-selector__footer')
+    expect(footer.find('.extra').exists()).toBe(true)
+    expect(footer.find('.mint-experiment-selector__clear-btn').exists()).toBe(hasClear)
+  })
+
+  it('should close without touching the store from the footer slot close()', async () => {
+    const store = useExperimentStore()
+    const wrapper = mountModal({ open: true }, {
+      footer: '<template #footer="{ close }"><button class="skip" @click="close">Skip</button></template>',
+    })
+
+    await wrapper.get('.skip').trigger('click')
+
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+    expect(store.current).toBeNull()
+  })
+
+  it('should list each status with its count and check the current one', async () => {
+    statusCounts.value = { ongoing: 3, planned: 1, completed: 0, cancelled: 2 }
+    filters.status = 'ongoing'
+    const wrapper = mountModal({ open: true })
+
+    const items = wrapper.get('[data-label="Status"]').findAll('.menu-stub__item')
+    expect(items.map(item => item.text())).toEqual([
+      'Any status', 'Ongoing · 3', 'Planned · 1', 'Completed · 0', 'Cancelled · 2',
+    ])
+    expect(items.map(item => item.attributes('data-checked'))).toEqual(['false', 'true', 'false', 'false', 'false'])
+  })
+
+  it('should show the active status with its dot on the trigger and reset it from Any status', async () => {
+    filters.status = 'completed'
+    const wrapper = mountModal({ open: true })
+    const menu = wrapper.get('[data-label="Status"]')
+
+    const trigger = menu.get('.mint-experiment-selector__toggle')
+    expect(trigger.classes()).toContain('mint-experiment-selector__toggle--active')
+    expect(trigger.text()).toBe('Completed')
+    expect(trigger.find('.mint-experiment-selector__dot--success').exists()).toBe(true)
+
+    await menu.findAll('.menu-stub__item')[0].trigger('click')
+
+    expect(filters.status).toBeUndefined()
+  })
+
+  it('should filter by the chosen project', async () => {
+    projects.value = [{ value: 'Screen', label: 'Screen' }]
+    const wrapper = mountModal({ open: true })
+    const menu = wrapper.get('[data-label="Project"]')
+
+    await menu.findAll('.menu-stub__item')[1].trigger('click')
+
+    expect(filters.project).toBe('Screen')
+    expect(menu.get('.mint-experiment-selector__toggle').text()).toBe('Screen')
+  })
+
+  it.each([
+    { experimentType: undefined, shown: true },
+    { experimentType: 'screen', shown: false },
+  ])('should show the type menu only when the type is choosable (experimentType=$experimentType)', ({ experimentType, shown }) => {
+    experimentTypes.value = [{ value: 'screen', label: 'Screen' }, { value: 'lcms', label: 'LC-MS' }]
+    const wrapper = mountModal({ open: true, experimentType })
+
+    expect(wrapper.find('[data-label="Type"]').exists()).toBe(shown)
+  })
+
+  it('should toggle the mine filter from the Mine button', async () => {
+    const wrapper = mountModal({ open: true })
+    const mine = wrapper.get('[aria-pressed]')
+
+    await mine.trigger('click')
+
+    expect(filters.mine).toBe(true)
+    expect(mine.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('should clear status, project and mine but keep the search when Clear N is clicked', async () => {
+    const wrapper = mountModal({ open: true })
+    expect(wrapper.find('.mint-experiment-selector__clear-filters').exists()).toBe(false)
+
+    Object.assign(filters, { search: 'glu', status: 'planned', project: 'Screen', mine: true })
+    await wrapper.vm.$nextTick()
+    const clear = wrapper.get('.mint-experiment-selector__clear-filters')
+    expect(clear.text()).toBe('Clear 3')
+
+    await clear.trigger('click')
+
+    expect(filters).toMatchObject({ search: 'glu', status: undefined, project: undefined, mine: undefined })
+    expect(wrapper.find('.mint-experiment-selector__clear-filters').exists()).toBe(false)
+  })
 })