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

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

@@ -0,0 +1,460 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+
+enableAutoUnmount(afterEach)
+
+import FileBrowserModal from '../../components/FileBrowserModal.vue'
+import type { FileEntry, ServerMount } from '../../types/fileBrowserTypes'
+
+const MOUNTS: ServerMount[] = [
+  {
+    id: 'qe',
+    label: '/mnt/instrument-qe',
+    count: 4,
+    children: [{ id: 'qe:2026-07', label: '2026-07', count: 12 }],
+  },
+  { id: 'nas', label: '/mnt/nas-shared', count: 18 },
+  { id: 'seq', label: '/mnt/sequencer-01', available: false },
+]
+
+const ENTRIES: FileEntry[] = [
+  { name: 'calibration', path: 'raw/calibration', kind: 'directory', child_count: 2 },
+  { name: 'blanks', path: 'raw/blanks', kind: 'directory', child_count: 6 },
+  {
+    name: 'HeLa_norm_0h_r1.raw',
+    path: 'raw/HeLa_norm_0h_r1.raw',
+    kind: 'file',
+    size_bytes: 1_900_000_000,
+    extension: '.raw',
+  },
+  {
+    name: 'acquisition_log.txt',
+    path: 'raw/acquisition_log.txt',
+    kind: 'file',
+    size_bytes: 48_000,
+    extension: '.txt',
+    matches_type_rules: false,
+  },
+]
+
+function mountBrowser(props: Record<string, unknown> = {}) {
+  return mount(FileBrowserModal, {
+    props: {
+      modelValue: true,
+      mounts: MOUNTS,
+      mountId: 'qe',
+      path: 'raw',
+      entries: ENTRIES,
+      breadcrumbs: [
+        { label: '/mnt/instrument-qe', path: '' },
+        { label: 'raw', path: 'raw' },
+      ],
+      ...props,
+    },
+    global: { stubs: { teleport: true } },
+  })
+}
+
+function rowAt(wrapper: ReturnType<typeof mountBrowser>, index: number) {
+  return wrapper.findAll('.mint-file-browser__row')[index]
+}
+
+describe('FileBrowserModal', () => {
+  it('should render one row per entry', () => {
+    expect(mountBrowser().findAll('.mint-file-browser__row')).toHaveLength(ENTRIES.length)
+  })
+
+  it('should render a row per configured mount', () => {
+    expect(mountBrowser().findAll('.mint-file-browser__mount')).toHaveLength(4)
+  })
+
+  it('should mark an unavailable mount as offline', () => {
+    expect(mountBrowser().text()).toContain('offline')
+  })
+
+  // The listing never lies about what is there: non-matching entries dim.
+  it('should keep a non-matching entry in the listing', () => {
+    expect(mountBrowser().text()).toContain('acquisition_log.txt')
+  })
+
+  it('should dim a non-matching entry when dimNonMatching is set', () => {
+    expect(rowAt(mountBrowser(), 3).classes()).toContain('mint-file-browser__row--dimmed')
+  })
+
+  it('should not dim a non-matching entry when dimNonMatching is false', () => {
+    const wrapper = mountBrowser({ dimNonMatching: false })
+
+    expect(rowAt(wrapper, 3).classes()).not.toContain('mint-file-browser__row--dimmed')
+  })
+
+  it('should not dim a matching entry', () => {
+    expect(rowAt(mountBrowser(), 2).classes()).not.toContain('mint-file-browser__row--dimmed')
+  })
+
+  // Ticking a folder takes the whole directory; clicking the row opens it.
+  it('should emit navigate when a directory row is clicked', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({ path: 'raw/calibration' })
+  })
+
+  it('should not emit navigate when a file row is clicked', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 2).trigger('click')
+
+    expect(wrapper.emitted('navigate')).toBeUndefined()
+  })
+
+  it('should select the whole folder when a directory checkbox is ticked', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).find('.mint-file-browser__checkbox').setValue(true)
+
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toMatchObject([
+      { path: 'raw/calibration', kind: 'directory' },
+    ])
+  })
+
+  // setValue only dispatches `change`; a real user also clicks, and it is the
+  // @click.stop that keeps the tick from bubbling into a navigation.
+  it('should not navigate when a directory checkbox is clicked', async () => {
+    const wrapper = mountBrowser()
+    const checkbox = rowAt(wrapper, 0).find('.mint-file-browser__checkbox')
+    await checkbox.trigger('click')
+    await checkbox.setValue(true)
+
+    expect(wrapper.emitted('navigate')).toBeUndefined()
+  })
+
+  // The row is a div, so this button is the only thing Tab can reach.
+  it('should expose a focusable open button on a directory row', () => {
+    expect(rowAt(mountBrowser(), 0).find('button.mint-file-browser__open').exists()).toBe(true)
+  })
+
+  it('should not expose an open button on a file row', () => {
+    expect(rowAt(mountBrowser(), 2).find('button.mint-file-browser__open').exists()).toBe(false)
+  })
+
+  it('should navigate when the open button is activated', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).find('button.mint-file-browser__open').trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({ path: 'raw/calibration' })
+  })
+
+  it('should not select when the open button is activated', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).find('button.mint-file-browser__open').trigger('click')
+
+    expect(wrapper.emitted('update:selected')).toBeUndefined()
+  })
+
+  it('should label the open button with the folder name', () => {
+    const button = rowAt(mountBrowser(), 0).find('button.mint-file-browser__open')
+
+    expect(button.attributes('aria-label')).toBe('Open calibration')
+  })
+
+  it('should describe a ticked folder by its child count', async () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory', child_count: 6 },
+      ],
+    })
+
+    // "items", not "files": the server counts every visible entry, subdirectories included.
+    expect(wrapper.text()).toContain('whole folder, 6 items')
+  })
+
+  it('should emit selectFolder for the directory being viewed', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.find('.mint-file-browser__select-folder').trigger('click')
+
+    expect(wrapper.emitted('selectFolder')?.[0]?.[0]).toMatchObject({ mount_id: 'qe', path: 'raw' })
+  })
+
+  it('should show the local picker button by default', () => {
+    expect(mountBrowser().find('.mint-file-browser__local').exists()).toBe(true)
+  })
+
+  it('should hide the local picker when showLocalPicker is false', () => {
+    expect(
+      mountBrowser({ showLocalPicker: false }).find('.mint-file-browser__local').exists(),
+    ).toBe(false)
+  })
+
+  it('should emit chooseLocal when the local picker is clicked', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.find('.mint-file-browser__local').trigger('click')
+
+    expect(wrapper.emitted('chooseLocal')).toHaveLength(1)
+  })
+
+  it('should render the type rules', () => {
+    expect(mountBrowser({ typeRules: ['.raw', '.mzML'] }).text()).toContain('.raw .mzML')
+  })
+
+  it('should report how many entries match the type rules', () => {
+    expect(mountBrowser({ totalCount: 1284, matchCount: 9 }).text()).toContain(
+      '9 match the type rules',
+    )
+  })
+
+  it('should summarise the selection count', () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory' },
+        { mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' },
+      ],
+    })
+
+    expect(wrapper.text()).toContain('2 selected')
+  })
+
+  it('should render a chip per selected item', () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory' },
+        { mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' },
+      ],
+    })
+
+    expect(wrapper.findAll('.mint-file-browser__chip')).toHaveLength(2)
+  })
+
+  it('should clear the selection', async () => {
+    const wrapper = mountBrowser({
+      selected: [{ mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' }],
+    })
+    await wrapper.find('.mint-file-browser__clear').trigger('click')
+
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toEqual([])
+  })
+
+  it('should remove one item from the selection via its chip', async () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory' },
+        { mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' },
+      ],
+    })
+    await wrapper.findAll('.mint-file-browser__chip-remove')[0].trigger('click')
+
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toMatchObject([{ path: 'raw/a.raw' }])
+  })
+
+  it('should confirm with the current selection', async () => {
+    const wrapper = mountBrowser({
+      selected: [{ mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' }],
+    })
+    await wrapper.find('.mint-file-browser__confirm').trigger('click')
+
+    expect(wrapper.emitted('confirm')?.[0]?.[0]).toMatchObject([{ path: 'raw/a.raw' }])
+  })
+
+  it('should disable confirming an empty selection', () => {
+    expect(mountBrowser().find('.mint-file-browser__confirm').attributes('disabled')).toBeDefined()
+  })
+
+  it('should emit navigate for the parent when the back button is used', async () => {
+    const wrapper = mountBrowser({ parent: '' })
+    await wrapper.find('.mint-file-browser__back').trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({ mount_id: 'qe', path: '' })
+  })
+
+  it('should disable the back button at a mount root', () => {
+    const wrapper = mountBrowser({ path: '', parent: null })
+
+    expect(wrapper.find('.mint-file-browser__back').attributes('disabled')).toBeDefined()
+  })
+
+  it('should emit navigate when a mount is chosen', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.findAll('.mint-file-browser__mount')[1].trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({
+      mount_id: 'qe:2026-07',
+      path: '',
+    })
+  })
+
+  it('should not navigate to an unavailable mount', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.findAll('.mint-file-browser__mount')[3].trigger('click')
+
+    expect(wrapper.emitted('navigate')).toBeUndefined()
+  })
+
+  it('should emit search updates', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.find('input[aria-label="Search this folder"]').setValue('hela')
+
+    expect(wrapper.emitted('update:search')?.[0]?.[0]).toBe('hela')
+  })
+
+  it('should show an empty state when the directory has no entries', () => {
+    expect(mountBrowser({ entries: [] }).text()).toContain('This folder is empty')
+  })
+
+  it('should show a loading skeleton while listing', () => {
+    expect(mountBrowser({ loading: true }).find('.mint-file-browser__skeleton').exists()).toBe(true)
+  })
+
+  it('should surface a listing error', () => {
+    expect(mountBrowser({ error: 'Mount is offline' }).text()).toContain('Mount is offline')
+  })
+
+  it('should state that mounts are read-only', () => {
+    expect(mountBrowser().text()).toContain('Read-only · Select paths, not copies')
+  })
+})
+
+describe('FileBrowserModal review fixes', () => {
+  // A search filters server-side while totalCount stays the whole directory.
+  it('should say how many rows are shown when a search narrows the listing', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: {
+        modelValue: true,
+        mounts: MOUNTS,
+        mountId: 'qe',
+        path: 'raw',
+        entries: ENTRIES,
+        totalCount: 1284,
+      },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).toContain('4 shown')
+  })
+
+  it('should not claim rows are hidden when nothing is filtered', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: {
+        modelValue: true,
+        mounts: MOUNTS,
+        mountId: 'qe',
+        path: 'raw',
+        entries: ENTRIES,
+        totalCount: 4,
+      },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).not.toContain('shown')
+  })
+
+  it('should report a capped listing', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: {
+        modelValue: true,
+        mounts: MOUNTS,
+        mountId: 'qe',
+        path: 'raw',
+        entries: ENTRIES,
+        totalCount: 4,
+        truncated: true,
+      },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).toContain('listing capped')
+  })
+
+  it('should label a folder count as items rather than files', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: { modelValue: true, mounts: MOUNTS, mountId: 'qe', path: 'raw', entries: ENTRIES },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).toContain('2 items')
+  })
+})
+
+describe('FileBrowserModal polish', () => {
+  it.each([{ loading: true }, { error: 'Offline' }, { mountId: '' }])(
+    'disables current-folder selection without a ready listing: %o',
+    (props) => {
+      const wrapper = mountBrowser(props)
+      const button = wrapper.get('.mint-file-browser__select-folder')
+      expect(button.attributes('disabled')).toBeDefined()
+    },
+  )
+
+  it('distinguishes no configured mounts from an empty folder', () => {
+    const wrapper = mountBrowser({ mounts: [], mountId: '', entries: [] })
+    expect(wrapper.text()).toContain('No server mounts configured')
+  })
+
+  it('offers a retry after a browse failure', async () => {
+    const wrapper = mountBrowser({ error: 'NAS offline' })
+    await wrapper.get('button[aria-label="Retry folder listing"]').trigger('click')
+    expect(wrapper.emitted('refresh')).toHaveLength(1)
+  })
+
+  it('keeps selections with separator characters in their mount IDs distinct', async () => {
+    const wrapper = mountBrowser({
+      mountId: 'a',
+      entries: [{ name: 'x', path: 'b::c', kind: 'file' }],
+      selected: [{ mount_id: 'a::b', path: 'c', name: 'c', kind: 'file' }],
+    })
+    await wrapper.get('input[type="checkbox"]').setValue(true)
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toHaveLength(2)
+  })
+})
+
+describe('FileBrowserModal dialog workspace', () => {
+  it('uses SDK actions and an accessible independently labelled dialog', () => {
+    const wrapper = mountBrowser({ title: 'Choose instrument files' })
+    expect(wrapper.get('[role="dialog"]').attributes('aria-label')).toBe('Choose instrument files')
+    expect(wrapper.get('.mint-file-browser__confirm').classes()).toContain('mint-button--primary')
+    expect(wrapper.get('.mint-file-browser__cancel').classes()).toContain('mint-button--secondary')
+    expect(wrapper.get('[aria-label="Go to parent folder"]').classes()).toContain(
+      'mint-icon-button',
+    )
+    expect(wrapper.get('[aria-label="Search this folder"]').classes()).toContain('mint-input')
+  })
+
+  it('focuses an initially open dialog, traps Tab and restores focus and scroll on close', async () => {
+    const launcher = document.createElement('button')
+    document.body.append(launcher)
+    launcher.focus()
+    document.body.style.overflow = 'scroll'
+    const wrapper = mount(FileBrowserModal, {
+      attachTo: document.body,
+      props: { modelValue: true, showLocalPicker: false },
+      global: { stubs: { teleport: true } },
+    })
+    try {
+      await nextTick()
+      const close = wrapper.get('[aria-label="Close modal"]')
+      expect(document.activeElement).toBe(close.element)
+      expect(document.body.style.overflow).toBe('hidden')
+      await close.trigger('keydown', { key: 'Tab', shiftKey: true })
+      expect(document.activeElement).toBe(wrapper.get('.mint-file-browser__cancel').element)
+      await wrapper.get('.mint-file-browser__cancel').trigger('keydown', { key: 'Tab' })
+      expect(document.activeElement).toBe(close.element)
+      await close.trigger('keydown', { key: 'Escape' })
+      expect(wrapper.emitted('cancel')).toHaveLength(1)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+      await wrapper.setProps({ modelValue: false })
+      expect(document.activeElement).toBe(launcher)
+      expect(document.body.style.overflow).toBe('scroll')
+    } finally {
+      wrapper.unmount()
+      launcher.remove()
+      document.body.style.overflow = ''
+    }
+  })
+
+  it('restores the existing scroll setting when unmounted while open', async () => {
+    document.body.style.overflow = 'auto'
+    const wrapper = mountBrowser()
+    await nextTick()
+    expect(document.body.style.overflow).toBe('hidden')
+    wrapper.unmount()
+    expect(document.body.style.overflow).toBe('auto')
+    document.body.style.overflow = ''
+  })
+})