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

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/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/BaseModal.test.ts

@@ -196,6 +196,19 @@ describe('BaseModal', () => {
       inner.unmount()
     })
 
+    it('should stay open when a control inside it already handled the Escape', () => {
+      const wrapper = mount(BaseModal, {
+        props: { open: true, title: 'Settings' },
+        slots: { default: '<input class="handled" @keydown.escape.prevent>' },
+        attachTo: document.body,
+      })
+      document.querySelector('.handled')!.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }),
+      )
+      expect(wrapper.emitted('update:open')).toBeUndefined()
+      wrapper.unmount()
+    })
+
     it('should focus the first focusable element when mounted already open', async () => {
       const attached = mount(BaseModal, {
         props: { open: true, title: 'Settings' },

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

@@ -64,9 +64,10 @@ interface ModalProps {
   currentExperimentId?: number | null
 }
 
-function mountModal(props: ModalProps) {
+function mountModal(props: ModalProps, slots: Record<string, string> = {}) {
   return mount(ExperimentSelectorModal, {
     props,
+    slots,
     global: {
       stubs: {
         BaseModal: {
@@ -202,6 +203,38 @@ describe('ExperimentSelectorModal', () => {
     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'

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

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick } from 'vue'
+import { afterEach, describe, expect, it } from 'vitest'
+import BaseModal from '../../components/BaseModal.vue'
+import BaseSelect from '../../components/BaseSelect.vue'
+import DatePicker from '../../components/DatePicker.vue'
+import WellEditPopupInternal from '../../components/internal/WellEditPopupInternal.vue'
+
+const options = ['Orbitrap Exploris 480', 'Q Exactive HF', 'Vanquish UHPLC', 'Exploris 240', 'timsTOF Pro 2']
+
+// [name, control markup, component root, trigger selector, panel selector]
+const movedPanels = [
+  ['multiple select', '<BaseSelect multiple :model-value="[]" :options="options" />', '.mint-multi-select', '.mint-multi-select__field', '.mint-searchable-select__panel'],
+  ['searchable select', '<BaseSelect searchable :options="options" />', '.mint-searchable-select', '.mint-searchable-select__trigger', '.mint-searchable-select__panel'],
+  ['date-time picker', '<DatePicker type="datetime" />', '.mint-datetime-picker', '.mint-datetime-picker__input', '.mint-datetime-picker__dropdown'],
+  ['time picker', '<DatePicker type="time" />', '.mint-time-picker', '.mint-time-picker__input', '.mint-time-picker__dropdown'],
+] as const
+
+async function settle() {
+  for (let i = 0; i < 3; i++) await nextTick()
+}
+
+describe('floating panels inside BaseModal', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it.each(movedPanels)(
+    'should keep the %s panel in its root after the trigger and position it fixed, so the modal body cannot clip it',
+    async (_, control, rootSelector, triggerSelector, panelSelector) => {
+      mount(defineComponent({
+        components: { BaseModal, BaseSelect, DatePicker },
+        setup: () => ({ options }),
+        template: `<BaseModal open title="New service token">${control}</BaseModal>`,
+      }), { attachTo: document.body })
+      await settle()
+
+      document.querySelector<HTMLElement>(triggerSelector)!.click()
+      await settle()
+
+      const panel = document.querySelector<HTMLElement>(panelSelector)!
+      const root = document.querySelector(rootSelector)!
+      expect(root.contains(panel)).toBe(true)
+      expect(root.querySelector(triggerSelector)!.compareDocumentPosition(panel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+      expect(panel.style.position).toBe('fixed')
+    },
+  )
+})
+
+describe('Escape in a calendar panel inside BaseModal', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it.each([
+    ['date', '.mint-date-picker__input', '.mint-date-picker__dropdown'],
+    ['datetime', '.mint-datetime-picker__input', '.mint-datetime-picker__dropdown'],
+  ])('should close only the %s panel when Escape is pressed in it', async (type, triggerSelector, panelSelector) => {
+    const wrapper = mount(defineComponent({
+      components: { BaseModal, DatePicker },
+      emits: ['close'],
+      template: `<BaseModal open title="Edit experiment" @update:open="$emit('close')"><DatePicker type="${type}" /></BaseModal>`,
+    }), { attachTo: document.body })
+    await settle()
+    document.querySelector<HTMLElement>(triggerSelector)!.click()
+    await settle()
+
+    document.querySelector(panelSelector)!.querySelector('button')!.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }),
+    )
+    await settle()
+
+    expect(document.querySelector(panelSelector)).toBeNull()
+    expect(wrapper.emitted('close')).toBeUndefined()
+  })
+
+  it('should close only the well popup when Escape is pressed in it', async () => {
+    const wrapper = mount(defineComponent({
+      components: { BaseModal, WellEditPopupInternal },
+      emits: ['close', 'popupClose'],
+      template: `<BaseModal open title="Plate" @update:open="$emit('close')">
+        <WellEditPopupInternal well-id="A1" :position="{ x: 40, y: 40 }" @close="$emit('popupClose')" />
+      </BaseModal>`,
+    }), { attachTo: document.body })
+    await settle()
+
+    document.querySelector('.mint-well-edit-popup input')!.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }),
+    )
+
+    expect(wrapper.emitted('popupClose')).toHaveLength(1)
+    expect(wrapper.emitted('close')).toBeUndefined()
+  })
+})

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

@@ -147,7 +147,7 @@ describe('GeneratedPluginView', () => {
       workspace: wrapper.findComponent(PluginWorkspaceView).props(),
       result: wrapper.findComponent(GeneratedResultRenderer).text(),
       jobs: wrapper.findComponent(JobsStatusTray).exists(),
-      jobSource: wrapper.findComponent(JobsStatusTray).props('source'),
+      jobSource: wrapper.findComponent(PluginWorkspaceView).props('spec')?.jobs,
     }).toMatchObject({
       workspace: {
         spec: {