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

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

@@ -7,6 +7,7 @@ import GeneratedPluginView from '../../components/GeneratedPluginView.vue'
 import GeneratedResultRenderer from '../../components/GeneratedResultRenderer.vue'
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
 import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+import { pluginIdentity, providePluginIdentity } from '../../composables/pluginIdentity'
 
 const generated = vi.hoisted(() => ({
   refresh: vi.fn(),
@@ -16,6 +17,7 @@ const generated = vi.hoisted(() => ({
   options: undefined as unknown,
   jobs: [] as Array<Record<string, unknown>>,
   error: null as string | null,
+  ui: {} as Record<string, string>,
 }))
 
 vi.mock('../../composables/useJobsEndpoint', async () => {
@@ -30,7 +32,7 @@ vi.mock('../../composables/useJobsEndpoint', async () => {
         plugin: {
           name: 'Demo', version: '1.0.0', description: 'Demo plugin', routes_prefix: '/demo',
         },
-        ui: { title: 'Demo analysis', description: 'Backend-only workspace' },
+        ui: generated.ui,
         jobs: [
           {
             id: 'run',
@@ -120,6 +122,8 @@ describe('GeneratedPluginView', () => {
       { ...baseJob, id: 'job-2', job_id: 'job-2', session_id: 'shared-session' },
     ]
     generated.error = null
+    generated.ui = { title: 'Demo analysis', description: 'Backend-only workspace' }
+    providePluginIdentity({ plugin: { name: '' } })
     generated.refresh.mockResolvedValue(undefined)
     generated.submit.mockResolvedValue(undefined)
     generated.result.mockResolvedValue({ kind: 'text', text: 'complete' })
@@ -143,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: {
@@ -159,6 +163,23 @@ describe('GeneratedPluginView', () => {
     })
   })
 
+  it('should seed the top bar identity from the manifest ui subtitle and icon', async () => {
+    generated.ui = {
+      title: 'Demo analysis', subtitle: 'Peak triage', description: 'Backend-only workspace', icon: 'M4 4h16v16H4z',
+    }
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: {
+        plugins: [createPinia()],
+        stubs: { 'router-link': { template: '<a><slot /></a>' }, Teleport: true },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.findComponent(PluginWorkspaceView).props('spec')).toMatchObject({ subtitle: 'Peak triage' })
+    expect(pluginIdentity).toMatchObject({ name: 'Demo analysis', subtitle: 'Peak triage', icon: 'M4 4h16v16H4z' })
+  })
+
   it('should show the load error text when the workspace fails to load', async () => {
     generated.error = 'Manifest request failed'
     const wrapper = mount(GeneratedPluginView, {

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

@@ -18,9 +18,9 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.classes()).toContain('mint-instrument-state--pulse')
   })
 
-  it('should use the info tone when the instrument is running', () => {
+  it('should use the success tone when the instrument is running', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'running' } })
-    expect(wrapper.classes()).toContain('mint-instrument-state--info')
+    expect(wrapper.classes()).toContain('mint-instrument-state--success')
   })
 
   it('should use the success tone when the instrument is connected', () => {
@@ -28,7 +28,7 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.classes()).toContain('mint-instrument-state--success')
   })
 
-  it('should use the dash shape when the instrument never reported', () => {
+  it('should use the hollow square shape when the instrument never reported', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'never' } })
     expect(wrapper.classes()).toContain('mint-instrument-state--never')
   })
@@ -38,7 +38,7 @@ describe('InstrumentStateBadge', () => {
     expect(wrapper.text()).toBe('Never reported')
   })
 
-  it('should use the square shape when the instrument is inactive', () => {
+  it('should use the dash shape when the instrument is inactive', () => {
     const wrapper = mount(InstrumentStateBadge, { props: { state: 'inactive' } })
     expect(wrapper.classes()).toContain('mint-instrument-state--inactive')
   })