@morscherlab/mint-sdk 1.4.0-beta.17 → 1.4.0-beta.18

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

@@ -1505,7 +1505,10 @@ describe('AppTopBar', () => {
     })
   })
   describe('run slot', () => {
-    function mountRunSlot(job: TopBarJob | null | undefined, { experiment }: { experiment: boolean }) {
+    function mountRunSlot(
+      job: TopBarJob | null | undefined,
+      { experiment, jobsDone, jobsOpen, jobsPanelId }: { experiment: boolean; jobsDone?: number; jobsOpen?: boolean; jobsPanelId?: string },
+    ) {
       vi.mocked(usePlatform).mockReturnValueOnce({
         integrated: computed(() => experiment),
         isAdmin: computed(() => true),
@@ -1524,7 +1527,9 @@ describe('AppTopBar', () => {
         handleDetach: vi.fn(),
       } as unknown as AppExperimentState
       return mount(AppTopBar, {
-        props: job === undefined ? { title: 'LEAF' } : { title: 'LEAF', job },
+        props: job === undefined
+          ? { title: 'LEAF', jobsDone, jobsOpen, jobsPanelId }
+          : { title: 'LEAF', job, jobsDone, jobsOpen, jobsPanelId },
         global: {
           plugins: [createPinia()],
           provide: { [APP_EXPERIMENT_KEY as symbol]: appExperiment },
@@ -1648,6 +1653,32 @@ describe('AppTopBar', () => {
       if (bar) expect(chip.get('.mint-topbar__job-bar > span').attributes('style')).toContain('width: 40%')
     })
 
+    it.each([
+      [null, undefined, null, undefined],
+      [null, 0, null, undefined],
+      [null, 2, '2', 'Jobs, 2 completed'],
+      [running, 2, null, 'Extracting 40%'],
+    ])('should show the completed count only on the idle button when the job is %o and jobsDone %s', async (job, jobsDone, count, name) => {
+      const wrapper = mountRunSlot(job, { experiment: false, jobsDone })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect([chip.find('.mint-topbar__job-count').exists() ? chip.get('.mint-topbar__job-count').text() : null, chip.attributes('aria-label')])
+        .toEqual([count, name])
+    })
+
+    it.each([
+      [null, undefined, undefined, [undefined, undefined]],
+      [null, true, 'jobs-panel', ['true', 'jobs-panel']],
+      [running, false, 'jobs-panel', ['false', 'jobs-panel']],
+    ])('should expose the tray state on the job control when it is %o and open is %s', async (job, jobsOpen, jobsPanelId, expected) => {
+      const wrapper = mountRunSlot(job, { experiment: false, jobsOpen, jobsPanelId })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect([chip.attributes('aria-expanded'), chip.attributes('aria-controls')]).toEqual(expected)
+    })
+
     it.each([null, running])('should emit job-click when the job control is %s', async (job) => {
       const wrapper = mountRunSlot(job, { experiment: false })
       await waitForAsyncComponents(wrapper)

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: {

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

@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { h } from 'vue'
+import { defineComponent, h, nextTick } from 'vue'
 
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
-import type { PluginJobCenterSource } from '../../composables/useJobCenter'
+import { useJobCenter, type PluginJobCenterSource, type UseJobCenterReturn } from '../../composables/useJobCenter'
 import type { JobState, JobStateInput, JobStatus } from '../../types/jobs'
 
 function job(status: JobStatus, id: string = status): JobStateInput {
@@ -44,32 +44,35 @@ async function openTray(options: {
   source: PluginJobCenterSource
   slots?: Record<string, (props: { job: JobState }) => unknown>
 }) {
-  const { slots, ...props } = options
-  const wrapper = mount(JobsStatusTray, {
-    attachTo: document.body,
-    props: {
-      ...props,
-      loadOnMount: false,
-      teleportTo: false,
+  const Host = defineComponent({
+    setup() {
+      const center = useJobCenter({ source: options.source, loadOnMount: false })
+      return () => [
+        h('button', { class: 'opener', onClick: center.toggle }, 'Jobs'),
+        h(JobsStatusTray, { center, teleportTo: false }, options.slots),
+      ]
     },
-    slots,
   })
-  await wrapper.get('.mint-jobs-tray__trigger').trigger('click')
+  const wrapper = mount(Host, { attachTo: document.body })
+  const opener = wrapper.get('.opener')
+  ;(opener.element as HTMLElement).focus()
+  await opener.trigger('click')
   return wrapper
 }
 
 describe('JobsStatusTray', () => {
-  it('shows awaiting input as active without default actions', async () => {
+  it('should show awaiting input as active without default actions when the job has no capability', async () => {
     const wrapper = await openTray({ source: { jobs: [job('awaiting_input')] } })
 
     expect([
-      wrapper.text().includes('Waiting for input'),
-      wrapper.find('[aria-label="Cancel job"]').exists(),
-      wrapper.find('[aria-label="Delete job"]').exists(),
-    ]).toEqual([true, false, false])
+      wrapper.find('[data-section="active"]').exists(),
+      wrapper.find('[role="img"][aria-label="Waiting for input"]').exists(),
+      wrapper.find('[aria-label="Cancel Job awaiting_input"]').exists(),
+      wrapper.find('[aria-label="Delete Job awaiting_input"]').exists(),
+    ]).toEqual([true, true, false, false])
   })
 
-  it('shows only actions supported by both capability and source', async () => {
+  it('should show only actions supported by both capability and source when rows render', async () => {
     const wrapper = await openTray({
       source: {
         jobs: [
@@ -82,24 +85,9 @@ describe('JobsStatusTray', () => {
     })
 
     expect([
-      wrapper.find('[aria-label="Cancel job"]').exists(),
-      wrapper.find('[aria-label="Delete job"]').exists(),
-    ]).toEqual([true, false])
-
-    await wrapper.get('[role="tab"][data-tab="history"]').trigger('click')
-    expect(wrapper.find('[aria-label="Delete job"]').exists()).toBe(true)
-  })
-
-  it('exposes dialog state and closes on Escape', async () => {
-    const wrapper = await openTray({ source: { jobs: [job('running')] } })
-    const trigger = wrapper.get('.mint-jobs-tray__trigger')
-
-    await wrapper.get('[role="dialog"]').trigger('keydown', { key: 'Escape' })
-
-    expect([trigger.attributes('aria-expanded'), wrapper.find('[role="dialog"]').exists()]).toEqual([
-      'false',
-      false,
-    ])
+      wrapper.find('[data-status="awaiting_input"] [aria-label="Cancel Job input"]').exists(),
+      wrapper.find('[data-status="completed"] [aria-label="Delete Job done"]').exists(),
+    ]).toEqual([true, true])
   })
 
   it('renders an individual delete action for an active capable job', async () => {
@@ -110,83 +98,161 @@ describe('JobsStatusTray', () => {
       },
     })
 
-    expect(wrapper.find('[aria-label="Delete job"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Delete Job awaiting_input"]').exists()).toBe(true)
+  })
+
+  it('should render a non-modal panel that does not trap Tab when open', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
+    const panel = wrapper.get('.mint-jobs-tray__panel')
+    const tab = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true })
+    panel.element.dispatchEvent(tab)
+
+    expect([
+      panel.attributes('role'),
+      panel.attributes('aria-modal'),
+      tab.defaultPrevented,
+    ]).toEqual([undefined, undefined, false])
   })
 
-  it('traps forward Tab navigation inside the modal dialog', async () => {
+  it('should close and return focus to the opener when Escape is pressed', async () => {
     const wrapper = await openTray({ source: { jobs: [job('running')] } })
-    const focusable = wrapper.findAll('button')
-    const firstInsidePanel = wrapper.get('[aria-label="Close jobs"]')
-    const lastInsidePanel = focusable[focusable.length - 1]!
-    lastInsidePanel.element.focus()
+    expect(document.activeElement).toBe(wrapper.get('.mint-jobs-tray__panel').element)
 
-    await wrapper.get('[role="dialog"]').trigger('keydown', { key: 'Tab' })
+    await wrapper.get('.mint-jobs-tray__panel').trigger('keydown', { key: 'Escape' })
 
-    expect(document.activeElement).toBe(firstInsidePanel.element)
+    expect([
+      wrapper.find('.mint-jobs-tray__panel').exists(),
+      document.activeElement,
+    ]).toEqual([false, wrapper.get('.opener').element])
   })
 
-  it('traps reverse Tab navigation from the dialog container', async () => {
+  it('should close when the page outside the panel is clicked', async () => {
     const wrapper = await openTray({ source: { jobs: [job('running')] } })
-    const panel = wrapper.get('[role="dialog"]')
-    const focusable = panel.findAll('button')
-    const panelElement = panel.element as HTMLElement
-    panelElement.focus()
 
-    await panel.trigger('keydown', { key: 'Tab', shiftKey: true })
+    await wrapper.get('.mint-jobs-tray__scrim').trigger('click')
 
-    expect(document.activeElement).toBe(focusable[focusable.length - 1]!.element)
+    expect(wrapper.find('.mint-jobs-tray__panel').exists()).toBe(false)
   })
 
-  it('exposes job selection through a keyboard-accessible button', async () => {
+  it('should emit select from a keyboard-accessible title button when a row is chosen', async () => {
     const wrapper = await openTray({ source: { jobs: [job('running')] } })
 
-    await wrapper.get('.mint-jobs-tray__job-select').trigger('click')
+    await wrapper.get('.mint-jobs-tray__row-title').trigger('click')
 
-    expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({ job_id: 'running' })
+    expect(wrapper.findComponent(JobsStatusTray).emitted('select')?.[0]?.[0]).toMatchObject({ job_id: 'running' })
   })
 
-  it('renders the job-actions slot once per row in both tabs with the row job', async () => {
+  it('should render each row slot once per row with the row job when slots are given', async () => {
     const wrapper = await openTray({
       source: { jobs: [job('running', 'R-1'), job('completed', 'C-1')] },
       slots: {
-        'job-actions': ({ job: row }) =>
-          h('button', { 'data-testid': 'open', 'data-job': row.job_id }, 'Open'),
+        'job-actions': ({ job: row }) => h('button', { 'data-testid': 'open', 'data-job': row.job_id }, 'Open'),
+        'job-title': ({ job: row }) => h('span', { 'data-testid': 'title' }, `Title ${row.job_id}`),
+        'job-detail': ({ job: row }) => h('span', { 'data-testid': 'detail' }, `Detail ${row.job_id}`),
       },
     })
 
-    const active = wrapper.findAll('[data-testid="open"]')
-    expect(active.map((b) => b.attributes('data-job'))).toEqual(['R-1'])
-
-    await wrapper.get('[role="tab"][data-tab="history"]').trigger('click')
-
-    const history = wrapper.findAll('[data-testid="open"]')
-    expect(history.map((b) => b.attributes('data-job'))).toEqual(['C-1'])
+    expect(['open', 'title', 'detail'].map(id => wrapper.findAll(`[data-testid="${id}"]`).map(el => el.attributes('data-job') ?? el.text())))
+      .toEqual([['R-1', 'C-1'], ['Title R-1', 'Title C-1'], ['Detail R-1', 'Detail C-1']])
   })
 
   it('should pin awaiting-input jobs to the top when they arrive after other active jobs', async () => {
     const wrapper = await openTray({
       source: { jobs: [job('running', 'R-1'), job('queued', 'Q-1'), job('awaiting_input', 'A-1')] },
     })
-    expect(wrapper.findAll('.mint-jobs-tray__job-select').map((b) => b.text()))
+    expect(wrapper.findAll('.mint-jobs-tray__row-title').map((b) => b.text()))
       .toEqual(['Job A-1', 'Job R-1', 'Job Q-1'])
   })
 
   it('should tint the awaiting-input row when a job waits for input', async () => {
     const wrapper = await openTray({ source: { jobs: [job('awaiting_input')] } })
-    expect(wrapper.get('.mint-jobs-tray__job').classes()).toContain('mint-jobs-tray__job--awaiting-input')
+    expect(wrapper.get('.mint-jobs-tray__row').classes()).toContain('mint-jobs-tray__row--awaiting-input')
   })
 
-  it('should show a mono percent next to the status when a job is running', async () => {
+  it('should show a mono percent as the row value when a job is running', async () => {
     const running = job('running')
     running.progress = { ...running.progress, percent: 62 }
     const wrapper = await openTray({ source: { jobs: [running] } })
-    expect(wrapper.get('.mint-jobs-tray__percent').text()).toBe('62%')
+    expect([wrapper.get('.mint-jobs-tray__value').text(), wrapper.get('[role="progressbar"]').attributes('aria-label')])
+      .toEqual(['62%', 'Job running progress'])
   })
 
-  it('should summarize active jobs by state in the header when jobs are active', async () => {
-    const wrapper = await openTray({
-      source: { jobs: [job('running', 'R-1'), job('queued', 'Q-1'), job('awaiting_input', 'A-1')] },
+  it('should show the error in error ink when a job failed', async () => {
+    const wrapper = await openTray({ source: { jobs: [{ ...job('failed'), error: 'Peaks not found' }] } })
+    const detail = wrapper.get('.mint-jobs-tray__detail')
+    expect([detail.text(), detail.classes()]).toEqual(['Peaks not found', expect.arrayContaining(['mint-jobs-tray__detail--error'])])
+  })
+
+  it.each([
+    [[job('running', 'R-1'), job('queued', 'Q-1'), job('completed', 'C-1')], '2 active · 1 done', ['Active · 2', 'Finished · 1']],
+    [[job('failed', 'F-1'), job('cancelled', 'X-1')], '1 failed', ['Finished · 2']],
+    [[], 'No jobs', []],
+  ])('should count jobs in the header and sections for %#', async (jobs, count, sections) => {
+    const wrapper = await openTray({ source: { jobs } })
+    expect({
+      count: wrapper.get('.mint-jobs-tray__head-count').text(),
+      sections: wrapper.findAll('.mint-jobs-tray__section').map(el => el.text().replace(/\s+/g, ' ')),
+      empty: wrapper.find('.mint-jobs-tray__empty').exists(),
+    }).toEqual({ count, sections, empty: jobs.length === 0 })
+  })
+
+  it('should clear finished jobs from the Finished section when the source can clear', async () => {
+    const clear = vi.fn(async () => 1)
+    const wrapper = await openTray({ source: { jobs: [job('running', 'R-1'), job('completed', 'C-1')], clear } })
+
+    await wrapper.get('[data-section="finished"] .mint-jobs-tray__section-action').trigger('click')
+
+    expect([wrapper.find('[data-section="active"] .mint-jobs-tray__section-action').exists(), clear.mock.calls.length])
+      .toEqual([false, 1])
+  })
+
+  describe('focus and Escape', () => {
+    function mountWithChip() {
+      let center!: UseJobCenterReturn
+      const Host = defineComponent({
+        setup() {
+          center = useJobCenter({ source: { jobs: [job('running')] }, loadOnMount: false })
+          return () => [
+            h('button', { class: 'mint-topbar__job' }, 'Jobs'),
+            h('button', { class: 'outside' }, 'Elsewhere'),
+            h(JobsStatusTray, { center, teleportTo: false }),
+          ]
+        },
+      })
+      return { wrapper: mount(Host, { attachTo: document.body }), center: () => center }
+    }
+
+    it.each([
+      ['the page body', () => (document.activeElement as HTMLElement | null)?.blur()],
+      ['a detached element', () => {
+        const gone = document.body.appendChild(document.createElement('button'))
+        gone.focus()
+        return () => gone.remove()
+      }],
+    ])('should focus the top-bar jobs control on Escape when the opener was %s', async (_case, focusOpener) => {
+      const { wrapper, center } = mountWithChip()
+      const detach = focusOpener()
+      center().open()
+      await nextTick()
+      detach?.()
+
+      await wrapper.get('.mint-jobs-tray__panel').trigger('keydown', { key: 'Escape' })
+
+      expect(document.activeElement).toBe(wrapper.get('.mint-topbar__job').element)
+      wrapper.unmount()
+    })
+
+    it('should close on Escape when focus has left the open panel', async () => {
+      const { wrapper, center } = mountWithChip()
+      center().open()
+      await nextTick()
+      ;(wrapper.get('.outside').element as HTMLElement).focus()
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      await nextTick()
+
+      expect(wrapper.find('.mint-jobs-tray__panel').exists()).toBe(false)
+      wrapper.unmount()
     })
-    expect(wrapper.get('.mint-jobs-tray__subtitle').text()).toBe('1 running · 1 queued · 1 waiting')
   })
 })

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

@@ -1,7 +1,7 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import type { VueWrapper } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { computed, h, nextTick, ref } from 'vue'
+import { computed, h, nextTick, ref, shallowRef } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import AppLayout from '../../components/AppLayout.vue'
 import AppSidebar from '../../components/AppSidebar.vue'
@@ -10,6 +10,7 @@ import ExperimentPopover from '../../components/ExperimentPopover.vue'
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
 import AppToastContainer from '../../components/AppToastContainer.vue'
+import JobsStatusTray from '../../components/JobsStatusTray.vue'
 import { defineControlModel, defineDoseDesignControlModel } from '../../composables/useControlSchema'
 import { usePlatform } from '../../composables/usePlatform'
 import { useExperimentStore } from '../../stores/experiment'
@@ -18,6 +19,7 @@ import type {
   PillNavItem,
   SidebarToolSection,
 } from '../../types'
+import type { JobStateInput, JobStatus } from '../../types/jobs'
 
 vi.mock('../../composables/usePlatform', () => ({
   usePlatform: vi.fn(() => ({
@@ -743,4 +745,57 @@ describe('PluginWorkspaceView', () => {
       },
     })
   })
+
+  describe('jobs', () => {
+    function workspaceJob(status: JobStatus): JobStateInput {
+      return {
+        id: 'r', job_id: 'r', kind: 'analysis', name: 'Run', status,
+        progress: { current_file: 0, total_files: 0, current_filename: null, percent: 40, message: '', stage: status },
+        queue_position: 0, warnings: [], error: null, output_path: null, save_path: null, session_id: null,
+        folders: [], folder_path: null, user_id: null, owner_user_id: null, experiment_id: null,
+        extraction_result_id: null, metadata: {}, created_at: '', started_at: null, completed_at: null,
+      }
+    }
+    const jobsGlobal = { ...globalOptions, stubs: { ...globalOptions.stubs, Teleport: true } }
+
+    it('should give the top bar no jobs control when spec.jobs is unset', () => {
+      const wrapper = mount(PluginWorkspaceView, { props: { spec: { title: 'Workspace' } }, global: jobsGlobal })
+      expect([wrapper.findComponent(AppTopBar).props('job'), wrapper.findComponent(JobsStatusTray).exists()])
+        .toEqual([undefined, false])
+    })
+
+    it('should open the jobs tray when the top-bar chip of a running job is clicked', async () => {
+      const wrapper = mount(PluginWorkspaceView, {
+        props: { spec: { title: 'Workspace', jobs: { jobs: [workspaceJob('running')] } } },
+        global: jobsGlobal,
+      })
+
+      await wrapper.get('.mint-topbar__job').trigger('click')
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect([
+        wrapper.findComponent(AppTopBar).props('job'),
+        wrapper.find('.mint-jobs-tray__panel').exists(),
+        chip.attributes('aria-expanded'),
+        chip.attributes('aria-controls') === wrapper.get('.mint-jobs-tray__panel').attributes('id'),
+      ]).toEqual([{ status: 'running', label: 'Run running', percent: 40 }, true, 'true', true])
+    })
+
+    it('should emit job-select with the held job when the chip is clicked after the job completed', async () => {
+      const jobs = shallowRef([workspaceJob('running')])
+      const wrapper = mount(PluginWorkspaceView, {
+        props: { spec: { title: 'Workspace', jobs: { jobs } } },
+        global: jobsGlobal,
+      })
+      jobs.value = [workspaceJob('completed')]
+      await nextTick()
+
+      await wrapper.get('.mint-topbar__job').trigger('click')
+
+      expect([
+        wrapper.emitted<[JobStateInput]>('job-select')?.map(([job]) => job.job_id),
+        wrapper.find('.mint-jobs-tray__panel').exists(),
+      ]).toEqual([['r'], false])
+    })
+  })
 })