@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

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

@@ -0,0 +1,160 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { computed, defineComponent, h, nextTick } from 'vue'
+import { createPinia } from 'pinia'
+import AppTopBar from '../../components/AppTopBar.vue'
+import { provideOnboarding, type OnboardingDefinition } from '../../composables/useOnboarding'
+
+vi.mock('../../composables/usePlatform', () => ({
+  usePlatform: vi.fn(() => ({
+    integrated: computed(() => false),
+    isAdmin: computed(() => true),
+    can: () => true,
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+  })),
+}))
+
+const definition: OnboardingDefinition = {
+  tours: [{
+    id: 'intro',
+    title: 'Top bar tour',
+    steps: [
+      { id: 'settings', anchor: 'topbar-settings', title: 'Settings live here', body: 'Theme and palette.' },
+      { id: 'help', anchor: 'topbar-help', title: 'Help', body: 'Replay tours.', advanceOn: 'click' },
+    ],
+  }],
+  checklist: [{ id: 'create', title: 'Create an experiment' }],
+}
+
+enableAutoUnmount(afterEach)
+
+function mountTopBar(onboarding?: OnboardingDefinition) {
+  return mount(defineComponent({
+    setup() {
+      if (onboarding) provideOnboarding(onboarding, { appId: 'test', userId: 1, autoStart: false })
+      return () => h(AppTopBar, { spec: { settings: { tabs: [] } } })
+    },
+  }), { global: { plugins: [createPinia()], stubs: { 'router-link': true } }, attachTo: document.body })
+}
+
+const card = () => document.querySelector('.mint-onboarding__card')
+
+describe('AppTopBar onboarding', () => {
+  beforeEach(() => localStorage.clear())
+
+  it.each([
+    [undefined, false],
+    [definition, true],
+  ])('should show the Help button and checklist chip when onboarding is %s', (onboarding, shown) => {
+    const wrapper = mountTopBar(onboarding)
+
+    expect(wrapper.find('[data-onboarding="topbar-help"]').exists()).toBe(shown)
+    expect(wrapper.find('.mint-onboarding-help__chip').exists()).toBe(shown)
+    if (shown) expect(wrapper.find('.mint-onboarding-help__chip').text()).toContain('0/1')
+  })
+
+  it('should run a tour picked in the Help panel and end it with Escape', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    const tour = [...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!
+    tour.click()
+    await flushPromises()
+
+    expect(document.querySelector('.mint-onboarding-help__panel')).toBeNull()
+    expect(card()?.getAttribute('role')).toBe('dialog')
+    expect(card()?.textContent).toContain('Settings live here')
+    expect(card()?.textContent).toContain('Next')
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+
+    expect(card()).toBeNull()
+    expect(JSON.parse(localStorage.getItem('mint.onboarding.test.1')!)).toEqual(
+      expect.arrayContaining(['step:intro/settings', 'step:intro/help']),
+    )
+  })
+
+  it('should focus the card, not the Next button, when a step opens', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+
+    expect(document.activeElement).toBe(card())
+  })
+
+  it.each([
+    [{ key: 'Tab', shiftKey: true }, 'Next'],
+    [{ key: 'Tab', shiftKey: false }, ''],
+  ])('should keep %o from the focused card inside the card', async (init, label) => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { ...init, bubbles: true, cancelable: true }))
+
+    expect(card()!.contains(document.activeElement)).toBe(true)
+    expect((document.activeElement as HTMLElement).textContent?.trim()).toBe(label)
+  })
+
+  it('should leave Escape and Tab to a control outside the tour that has focus', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+    const input = document.body.appendChild(document.createElement('input'))
+    input.focus()
+
+    for (const key of ['Tab', 'Escape']) document.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+    await nextTick()
+
+    expect(document.activeElement).toBe(input)
+    expect(card()).not.toBeNull()
+    input.remove()
+  })
+
+  it('should go to the next step when Enter is pressed on the focused card', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+    await flushPromises()
+
+    expect(card()?.textContent).toContain('Replay tours.')
+  })
+
+  it('should show no Next button on an advanceOn click step', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    document.querySelector<HTMLElement>('.mint-menu-item')!.click()
+    await flushPromises()
+    ;(document.querySelector('.mint-onboarding__card .mint-button') as HTMLElement).click()
+    await flushPromises()
+
+    expect(card()?.textContent).toContain('Click the highlighted control.')
+    expect(card()?.textContent).not.toContain('Done')
+  })
+
+  it('should keep Tab on the anchor and the card on an advanceOn click step', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    document.querySelector<HTMLElement>('.mint-menu-item')!.click()
+    await flushPromises()
+    ;(document.querySelector('.mint-onboarding__card .mint-button') as HTMLElement).click()
+    await flushPromises()
+    const anchor = document.querySelector<HTMLElement>('[data-onboarding="topbar-help"]')!
+    expect(document.activeElement).toBe(anchor)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }))
+
+    expect(card()?.contains(document.activeElement)).toBe(true)
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }))
+    expect(document.activeElement).toBe(anchor)
+  })
+})

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

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import AppTopBarPageSelectorInternal from '../../components/internal/AppTopBarPageSelectorInternal.vue'
 
@@ -24,26 +25,139 @@ describe('AppTopBarPageSelectorInternal', () => {
     expect(wrapper.emitted('select')).toEqual([[{ id: 'Results', label: 'Results' }]])
   })
 
-  it('omits page hints from the menu for compact scanning', async () => {
+  it('should show each page hint under its label when the page has one', async () => {
     const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         currentPageId: 'downloads',
         pages: [
           { id: 'downloads', label: 'Downloads', hint: 'Paste links and queue downloads' },
-          { id: 'settings', label: 'Settings', hint: 'Credentials and destination' },
+          { id: 'settings', label: 'Settings' },
         ],
       },
     })
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
-      'Downloads',
-      'Settings',
+    const rows = wrapper.findAll('.mint-page-selector__item')
+    expect(rows.map(row => row.find('.mint-page-selector__item-hint').exists() ? row.get('.mint-page-selector__item-hint').text() : null)).toEqual([
+      'Paste links and queue downloads',
+      null,
     ])
-    expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
-    expect(wrapper.text()).not.toContain('Paste links')
-    expect(wrapper.text()).not.toContain('Credentials')
+  })
+
+  it.each([
+    { pluginName: 'LEAF', crumb: ['LEAF', '/'], title: 'LEAF pages' },
+    { pluginName: undefined, crumb: [], title: 'Pages' },
+  ])('should name the menu after the plugin when pluginName is $pluginName', async ({ pluginName, crumb, title }) => {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: { pluginName, currentPageId: 'Extract', pages: ['Extract', 'Analysis'] },
+    })
+
+    expect(wrapper.findAll('.mint-page-selector__plugin, .mint-page-selector__slash').map(el => el.text())).toEqual(crumb)
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    expect(wrapper.get('.mint-page-selector__menu-title').text()).toBe(title)
+    expect(wrapper.get('[role="menu"]').attributes('aria-label')).toBe(title)
+  })
+
+  it('should show number keys for the first nine pages only', async () => {
+    const pages = Array.from({ length: 10 }, (_, i) => `Page ${i + 1}`)
+    const wrapper = mount(AppTopBarPageSelectorInternal, { props: { pages } })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    expect(wrapper.findAll('.mint-page-selector__item').map(row => row.find('.mint-page-selector__item-key').exists() ? row.get('.mint-page-selector__item-key').text() : null)).toEqual(
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', null],
+    )
+  })
+
+  describe('keyboard', () => {
+    const pages = [
+      { id: 'check', label: 'Quick check' },
+      { id: 'extract', label: 'Extract' },
+      { id: 'locked', label: 'Locked', disabled: true },
+      { id: 'analysis', label: 'Analysis' },
+    ]
+    const focusedLabel = () => document.activeElement?.querySelector('.mint-page-selector__item-label')?.textContent
+
+    function mountAttached() {
+      return mount(AppTopBarPageSelectorInternal, {
+        props: { pages, currentPageId: 'extract' },
+        attachTo: document.body,
+      })
+    }
+
+    it.each(['ArrowDown', 'Enter', ' '])('should open the menu on the current row when %j is pressed on the trigger', async (key) => {
+      const wrapper = mountAttached()
+
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key })
+      await nextTick()
+
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(true)
+      expect(focusedLabel()).toBe('Extract')
+      wrapper.unmount()
+    })
+
+    it('should move between enabled rows with arrows, Home and End', async () => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      const menu = wrapper.get('.mint-page-selector__menu')
+
+      const visited: Array<string | null | undefined> = []
+      for (const key of ['ArrowDown', 'ArrowDown', 'ArrowUp', 'Home', 'ArrowUp', 'End']) {
+        await menu.trigger('keydown', { key })
+        visited.push(focusedLabel())
+      }
+
+      expect(visited).toEqual(['Analysis', 'Quick check', 'Analysis', 'Quick check', 'Analysis', 'Analysis'])
+      wrapper.unmount()
+    })
+
+    it.each(['Enter', ' '])('should activate the focused row and refocus the trigger when %j is pressed', async (key) => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      const menu = wrapper.get('.mint-page-selector__menu')
+
+      await menu.trigger('keydown', { key: 'ArrowDown' })
+      await menu.trigger('keydown', { key })
+
+      expect(wrapper.emitted('select')).toEqual([[pages[3]]])
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
+      expect(document.activeElement).toBe(wrapper.get('.mint-page-selector__trigger').element)
+      wrapper.unmount()
+    })
+
+    it.each([
+      { key: '4', emitted: [[pages[3]]], open: false },
+      { key: '3', emitted: undefined, open: true },
+      { key: '9', emitted: undefined, open: true },
+    ])('should handle digit $key as a jump to that page', async ({ key, emitted, open }) => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      await wrapper.get('.mint-page-selector__menu').trigger('keydown', { key })
+
+      expect(wrapper.emitted('select')).toEqual(emitted)
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(open)
+      wrapper.unmount()
+    })
+
+    it('should close on Escape and return focus to the trigger', async () => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      await wrapper.get('.mint-page-selector__menu').trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
+      expect(document.activeElement).toBe(wrapper.get('.mint-page-selector__trigger').element)
+      wrapper.unmount()
+    })
   })
 
   it('closes linked page actions without emitting select', async () => {
@@ -171,6 +285,8 @@ describe('AppTopBarPageSelectorInternal', () => {
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.findAll('.mint-page-selector__item')[0].classes()).toContain('mint-page-selector__item--active')
+    const rows = wrapper.findAll('.mint-page-selector__item')
+    expect(rows[0].classes()).toContain('mint-page-selector__item--active')
+    expect(rows.map(row => row.attributes('aria-current'))).toEqual(['page', undefined])
   })
 })

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

@@ -196,4 +196,39 @@ describe('AppTopBarPillNavInternal', () => {
 
     expect(wrapper.find('.mint-pill-nav__item').text()).toBe('Records')
   })
+  const SIX = ['One', 'Two', 'Three', 'Four', 'Five', { id: 'grp', label: 'Group', children: ['Six'] }]
+
+  it('should fold the items after the fourth into a More dropdown', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'One', items: SIX } })
+
+    expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+      'One', 'Two', 'Three', 'Four', 'More',
+    ])
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    expect(wrapper.findAll('.mint-pill-nav__dropdown-label').map(option => option.text())).toEqual(['Five', 'Six'])
+  })
+
+  it('should emit the original item or group when a folded entry is chosen', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'One', items: SIX } })
+
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[0].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[{ id: 'Five', label: 'Five' }]])
+    expect(wrapper.emitted('option-select')?.[0]).toEqual([
+      { id: 'Six', label: 'Six' },
+      { id: 'grp', label: 'Group', children: [{ id: 'Six', label: 'Six' }] },
+    ])
+  })
+
+  it('should label the More pill with a folded item when that item is current', () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'Five', items: SIX } })
+
+    const more = wrapper.findAll('.mint-pill-nav__item')[4]
+    expect(more.text()).toBe('Five')
+    expect(more.find('.mint-pill-nav__chevron').exists()).toBe(true)
+    expect(more.classes()).toContain('mint-pill-nav__item--active')
+  })
 })

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

@@ -565,4 +565,82 @@ describe('ArtifactSaveDialog', () => {
       expect(wrapper.find('.mint-artifact-save-dialog__error').exists()).toBe(true)
     })
   })
+
+  // -------------------------------------------------------------------------
+  // Save mode (replace vs new) and experiment strip
+  // -------------------------------------------------------------------------
+
+  describe('save mode', () => {
+    it.each([
+      [null, false],
+      [makeDetail(), true],
+    ])('should offer the replace/new cards only when an artifact can be replaced (%#)', (existingArtifact, shown) => {
+      const { wrapper } = mountDialog({ result: { x: 1 }, existingArtifact })
+
+      expect(wrapper.find('.mint-artifact-save-dialog__modes').exists()).toBe(shown)
+    })
+
+    it('should send a create payload when save as new is picked over an existing artifact', async () => {
+      const { wrapper, saveHandler } = mountDialog({ mode: 'json', result: { x: 1 }, existingArtifact: makeDetail() })
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').text()).toBe('Replace result')
+
+      await wrapper.findAll('.mint-artifact-save-dialog__mode')[1].trigger('click')
+      expect(wrapper.find('.mint-artifact-save-dialog__name').exists()).toBe(true)
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').text()).toBe('Save result')
+      await submit(wrapper)
+
+      expect(saveHandler.mock.calls[0][0]).toMatchObject({ kind: 'json', mode: 'create', artifactKey: 'default' })
+    })
+
+    // An explicit "new result" must never upsert over an existing JSON artifact.
+    it.each(['fit', 'other'])('should block a json save as new when the key %s exists', async (key) => {
+      const { wrapper, saveHandler } = mountDialog({
+        mode: 'json',
+        result: { x: 1 },
+        existingArtifact: makeDetail(),
+        existingArtifactKeys: ['other'],
+      })
+
+      await wrapper.findAll('.mint-artifact-save-dialog__mode')[1].trigger('click')
+      await wrapper.get('.mint-artifact-save-dialog__key input').setValue(key)
+      await submit(wrapper)
+
+      expect(saveHandler).not.toHaveBeenCalled()
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').attributes('disabled')).toBeDefined()
+      expect(wrapper.get('.mint-artifact-save-dialog__key').text()).toContain('already used')
+    })
+
+    it('should show the experiment strip with code and name when the experiment is known', () => {
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, experiment_code: 'EXP-042', name: 'Dose response' },
+      })
+
+      expect(wrapper.get('.mint-artifact-save-dialog__experiment').text()).toContain('EXP-042')
+      expect(wrapper.get('.mint-artifact-save-dialog__experiment-name').text()).toBe('Dose response')
+    })
+
+    it.each([
+      [false, false],
+      [true, true],
+    ])('should show the Change link only when a change-experiment listener is bound (%s)', (bound, shown) => {
+      const listener = vi.fn()
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, name: 'Dose response' },
+        ...(bound ? { onChangeExperiment: listener } : {}),
+      })
+
+      expect(wrapper.find('.mint-artifact-save-dialog__change').exists()).toBe(shown)
+    })
+
+    it('should emit change-experiment when Change is clicked', async () => {
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, name: 'Dose response' },
+        onChangeExperiment: vi.fn(),
+      })
+
+      await wrapper.get('.mint-artifact-save-dialog__change').trigger('click')
+
+      expect(wrapper.emitted('change-experiment')).toHaveLength(1)
+    })
+  })
 })

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

@@ -35,6 +35,25 @@ describe('BaseButton icon', () => {
   })
 })
 
+// Text-only labels get a span so the stylesheet can trim the text box to the cap
+// height (Geist sits ~1.6px high in a flex-centred button otherwise). Element
+// children keep their flex layout, so they are not wrapped.
+describe('BaseButton label', () => {
+  it.each([
+    ['plain text', 'Cancel', 'Cancel'],
+    ['element children', '<svg /><span>Export</span>', null],
+  ])('should wrap the label in a span only for a %s slot', (_case, slot, label) => {
+    const wrapper = mount(BaseButton, { slots: { default: slot } })
+    const span = wrapper.find('.mint-button__label')
+    expect(span.exists() ? span.text() : null).toBe(label)
+  })
+
+  it('should trim the label text box to the cap height', () => {
+    const css = readFileSync(resolve(__dirname, '../../styles/components/button.css'), 'utf8')
+    expect(css).toMatch(/\.mint-button__label \{\s*text-box: trim-both cap alphabetic;\s*\}/)
+  })
+})
+
 // jsdom has no layout, so this pins the stylesheet contract instead: a bare
 // <svg> rendered by an icon-only BaseButton must be sized by the icon box, otherwise it
 // collapses to zero width as a flex item (FilePicker source toggles, beta.14).

package/src/__tests__/components/BaseSelect.multiple.test.ts

@@ -8,56 +8,111 @@ const options = [
   { value: 'c', label: 'C' },
 ]
 
+function mountMultiple(props: Record<string, unknown> = {}) {
+  return mount(BaseSelect, { props: { multiple: true, modelValue: ['a'], options, ...props } })
+}
+
+async function openPanel(wrapper: ReturnType<typeof mountMultiple>) {
+  await wrapper.find('.mint-multi-select__field').trigger('click')
+  return wrapper
+}
+
 describe('BaseSelect multiple', () => {
-  it('should render the chip list when multiple is a bare template attribute', () => {
+  it('should render the chip field when multiple is a bare template attribute', () => {
     // A compiled `<BaseSelect multiple>` passes '' because `multiple` has no runtime Boolean type.
     const wrapper = mount(BaseSelect, { props: { multiple: '' as unknown as true, modelValue: [], options } })
 
-    expect(wrapper.find('.mint-multi-select').exists()).toBe(true)
+    expect(wrapper.find('.mint-multi-select__field').exists()).toBe(true)
   })
 
   it('accepts string and number shorthand options', async () => {
-    const wrapper = mount(BaseSelect, {
-      props: {
-        multiple: true,
-        modelValue: ['glucose', 2],
-        options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
-      },
-    })
+    const wrapper = await openPanel(mountMultiple({
+      modelValue: ['glucose', 2],
+      options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
+    }))
 
-    expect(wrapper.findAll('button').map(button => button.text())).toEqual([
-      'glucose',
-      '2',
-      'Doxorubicin',
-    ])
-    expect(wrapper.find('.mint-multi-select__summary').text()).toBe('glucose, 2')
+    expect(wrapper.findAll('.mint-multi-select__chip').map(chip => chip.text())).toEqual(['glucose', '2'])
+    expect(wrapper.findAll('[role="option"]').map(row => row.text())).toEqual(['glucose', '2', 'Doxorubicin'])
 
-    await wrapper.findAll('button')[2].trigger('click')
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
 
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
-      ['glucose', 2, 'dox'],
-    ])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['glucose', 2, 'dox']])
   })
 
   it('uses the shared selection limit for max', async () => {
-    const wrapper = mount(BaseSelect, {
-      props: {
-        multiple: true,
-        modelValue: ['a'],
-        options,
-        max: 1,
-      },
-    })
+    const wrapper = await openPanel(mountMultiple({ max: 1 }))
 
-    await wrapper.findAll('button')[1].trigger('click')
+    await wrapper.findAll('[role="option"]')[1].trigger('click')
 
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-    expect(wrapper.findAll('button')[1].attributes('disabled')).toBeDefined()
+    expect(wrapper.findAll('[role="option"]')[1].attributes('aria-disabled')).toBe('true')
+  })
+
+  it('should reserve the check box on every row when only one is selected', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    expect(wrapper.findAll('.mint-multi-select__check')).toHaveLength(3)
+    expect(wrapper.findAll('.mint-multi-select__check--on')).toHaveLength(1)
+  })
+
+  it.each(['Enter', ' ', 'ArrowDown'])('should open the listbox when %j is pressed on the field', async (key) => {
+    const wrapper = mountMultiple()
+
+    await wrapper.find('.mint-multi-select__field').trigger('keydown', { key })
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    expect(wrapper.find('.mint-multi-select__field').attributes('aria-expanded')).toBe('true')
+  })
+
+  it('should close the listbox when the field is clicked while it is open', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    await wrapper.find('.mint-multi-select__field').trigger('click')
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    expect(wrapper.find('.mint-multi-select__field').attributes('aria-expanded')).toBe('false')
+  })
+
+  it('should close the listbox when Escape is pressed in the filter', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    await wrapper.find('input[type="search"]').trigger('keydown', { key: 'Escape' })
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('should remove the last chip when Backspace is pressed in an empty filter', async () => {
+    const wrapper = await openPanel(mountMultiple({ modelValue: ['a', 'b'] }))
+
+    await wrapper.find('input[type="search"]').trigger('keydown', { key: 'Backspace' })
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['a']])
+  })
+
+  it('should remove a chip without opening the listbox when its remove button is clicked', async () => {
+    const wrapper = mountMultiple({ modelValue: ['a', 'b'] })
+
+    await wrapper.find('button[aria-label="Remove A"]').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['b']])
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('should narrow the rows and toggle the active row with Enter when the filter has text', async () => {
+    const wrapper = await openPanel(mountMultiple())
+    const filter = wrapper.find('input[type="search"]')
+
+    await filter.setValue('c')
+    await filter.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.findAll('[role="option"]').map(row => row.text())).toEqual(['C'])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['a', 'c']])
   })
 
-  it('should reserve the check slot on every chip when only one is selected', () => {
-    const wrapper = mount(BaseSelect, { props: { multiple: true, modelValue: ['a'], options } })
+  it('should neither open nor offer chip removal when disabled', async () => {
+    const wrapper = await openPanel(mountMultiple({ disabled: true }))
 
-    expect(wrapper.findAll('.mint-multi-select__chip-check')).toHaveLength(3)
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    expect(wrapper.find('.mint-multi-select__chip-remove').exists()).toBe(false)
   })
 })

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

@@ -58,7 +58,8 @@ describe('BaseSelect', () => {
   it.each([
     ['aria-labelledby', 'native', {}, 'select'],
     ['aria-describedby', 'searchable', { searchable: true }, '.mint-searchable-select__trigger'],
-    ['aria-describedby', 'multiple', { multiple: true, modelValue: [] as string[] }, null],
+    ['aria-describedby', 'multiple', { multiple: true, modelValue: [] as string[] }, '.mint-multi-select__field'],
+    ['aria-labelledby', 'multiple', { multiple: true, modelValue: [] as string[] }, '.mint-multi-select__field'],
   ] as const)('should forward %s when the select is %s', (attr, _, extra, selector) => {
     const wrapper = mount(BaseSelect, { props: { options: ['linear'], ...extra }, attrs: { [attr]: 'hint' } })
     const target = selector ? wrapper.get(selector) : wrapper

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