@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.4

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

@@ -0,0 +1,156 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import AppTopBarPageSelectorInternal from '../../components/internal/AppTopBarPageSelectorInternal.vue'
+
+describe('AppTopBarPageSelectorInternal', () => {
+  it('accepts string shorthand pages', async () => {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: {
+        currentPageId: 'Workspace',
+        pages: ['Workspace', 'Results'],
+      },
+    })
+
+    expect(wrapper.find('.mint-page-selector__label').text()).toBe('Workspace')
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+    expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
+      'Workspace',
+      'Results',
+    ])
+
+    await wrapper.findAll('.mint-page-selector__item')[1].trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[{ id: 'Results', label: 'Results' }]])
+  })
+
+  it('omits page hints from the menu for compact scanning', 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' },
+        ],
+      },
+    })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
+      'Downloads',
+      'Settings',
+    ])
+    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('closes linked page actions without emitting select', async () => {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: {
+        currentPageId: 'workspace',
+        pages: [
+          { id: 'workspace', label: 'Workspace' },
+          { id: 'docs', label: 'Docs', href: '/docs' },
+        ],
+      },
+    })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+    await wrapper.findAll('.mint-page-selector__item')[1].trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
+  })
+
+  it('keeps disabled linked page actions inert', async () => {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: {
+        currentPageId: 'workspace',
+        pages: [
+          { id: 'workspace', label: 'Workspace' },
+          { id: 'docs', label: 'Docs', href: '/docs', disabled: true },
+        ],
+      },
+    })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+    const disabledLink = wrapper.findAll('.mint-page-selector__item')[1]
+
+    expect(disabledLink.attributes('href')).toBeUndefined()
+
+    await disabledLink.trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(true)
+  })
+
+  it('emits select for button page actions', async () => {
+    const page = { id: 'workspace', label: 'Workspace' }
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: {
+        pages: [page],
+      },
+    })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+    await wrapper.get('.mint-page-selector__item').trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[page]])
+  })
+
+  it('renders PluginIcon-compatible metadata icons and keeps symbolic icons as fallback initials', async () => {
+    const iconPath = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
+    const pngIcon = 'data:image/png;base64,iVBORw0KGgo='
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: {
+        pages: [
+          { id: 'analysis', label: 'Analysis', icon: iconPath },
+          { id: 'image', label: 'Image', icon: pngIcon },
+          { id: 'home', label: 'Home', icon: 'home' },
+        ],
+      },
+    })
+
+    expect(wrapper.get('.mint-page-selector__trigger .mint-plugin-icon__svg path').attributes('d')).toBe(iconPath)
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    const icons = wrapper.findAllComponents({ name: 'PluginIcon' })
+    expect(icons).toHaveLength(3)
+    expect(icons[0].props('icon')).toBe(iconPath)
+    expect(icons[1].props('icon')).toBe(iconPath)
+    expect(icons[2].props('icon')).toBe(pngIcon)
+    expect(icons.every((icon) => icon.props('variant') === 'solid')).toBe(true)
+
+    const pathIcons = wrapper.findAll('.mint-plugin-icon__svg')
+    expect(pathIcons).toHaveLength(2)
+    expect(pathIcons[0].find('path').attributes('d')).toBe(iconPath)
+
+    const imageIcons = wrapper.findAll('.mint-plugin-icon__img')
+    expect(imageIcons).toHaveLength(1)
+    expect(imageIcons[0].attributes('src')).toBe(pngIcon)
+
+    const fallbackIcons = wrapper.findAll('.mint-page-selector__icon-fallback')
+    expect(fallbackIcons).toHaveLength(1)
+    expect(fallbackIcons[0].text()).toBe('H')
+  })
+
+  it('renders https page icons through PluginIcon', async () => {
+    const httpsIcon = 'https://example.com/plugin-icon.png'
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: {
+        pages: [
+          { id: 'docs', label: 'Docs', icon: httpsIcon },
+        ],
+      },
+    })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    const icon = wrapper.getComponent({ name: 'PluginIcon' })
+    expect(icon.props('icon')).toBe(httpsIcon)
+    expect(wrapper.get('.mint-plugin-icon__img').attributes('src')).toBe(httpsIcon)
+  })
+})

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

@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import AppTopBarPillNavInternal from '../../components/internal/AppTopBarPillNavInternal.vue'
+
+describe('AppTopBarPillNavInternal', () => {
+  it('accepts string shorthand items', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, {
+      props: {
+        currentItemId: 'Overview',
+        items: ['Overview', 'Analysis'],
+      },
+    })
+
+    expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+      'Overview',
+      'Analysis',
+    ])
+
+    await wrapper.findAll('.mint-pill-nav__item')[1].trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[{ id: 'Analysis', label: 'Analysis' }]])
+  })
+
+  it('emits select for button items but not linked items', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, {
+      props: {
+        currentItemId: 'overview',
+        items: [
+          { id: 'overview', label: 'Overview' },
+          { id: 'docs', label: 'Docs', href: '/docs' },
+        ],
+      },
+    })
+
+    await wrapper.findAll('.mint-pill-nav__item')[0].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__item')[1].trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[{ id: 'overview', label: 'Overview' }]])
+  })
+
+  it('renders SVG icons from item metadata', () => {
+    const icon = ['M4 12h16', 'M12 4v16']
+    const wrapper = mount(AppTopBarPillNavInternal, {
+      props: {
+        items: [
+          { id: 'run', label: 'Run', icon },
+          { id: 'results', label: 'Results', icon: 'not-a-path' },
+        ],
+      },
+    })
+
+    const icons = wrapper.findAll('.mint-pill-nav__icon')
+    expect(icons).toHaveLength(1)
+    expect(icons[0].findAll('path').map(path => path.attributes('d'))).toEqual(icon)
+    expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+      'Run',
+      'Results',
+    ])
+  })
+
+  it('prevents disabled link navigation and selection', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, {
+      props: {
+        items: [
+          { id: 'docs', label: 'Docs', href: '/docs', disabled: true },
+        ],
+      },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.attributes('href')).toBeUndefined()
+    expect(link.attributes('aria-disabled')).toBe('true')
+
+    await link.trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('supports dropdown child items for grouped pill navigation', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, {
+      props: {
+        currentItemId: 'pca',
+        items: [
+          { id: 'charts', label: 'Charts' },
+          {
+            id: 'visualize',
+            label: 'Visualize',
+            children: [
+              { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+              { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+            ],
+          },
+        ],
+      },
+    })
+
+    const visualizeButton = wrapper.findAll('.mint-pill-nav__item')[1]
+    expect(visualizeButton.classes()).toContain('mint-pill-nav__item--active')
+    expect(wrapper.find('.mint-pill-nav__dropdown').exists()).toBe(false)
+
+    await visualizeButton.trigger('click')
+
+    expect(wrapper.find('.mint-pill-nav__dropdown').exists()).toBe(true)
+    expect(wrapper.findAll('.mint-pill-nav__dropdown-item').map(item => item.text())).toEqual([
+      'PCAPrincipal component analysis',
+      'HeatmapMetabolite heatmap',
+    ])
+
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
+
+    expect(wrapper.emitted('option-select')).toEqual([
+      [
+        { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+        {
+          id: 'visualize',
+          label: 'Visualize',
+          children: [
+            { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+            { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+          ],
+        },
+      ],
+    ])
+  })
+})

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

@@ -0,0 +1,47 @@
+import { computed, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import AppTopBar from '../../components/AppTopBar.vue'
+
+const heartbeat = vi.hoisted(() => vi.fn((_options: unknown) => ({
+  clientId: 'presence-tab',
+  isRunning: ref(false),
+  sendNow: vi.fn(),
+})))
+
+vi.mock('../../composables/usePresenceHeartbeat', () => ({
+  usePresenceHeartbeat: heartbeat,
+}))
+
+vi.mock('../../composables/usePlatformContext', () => ({
+  usePlatformContext: vi.fn(() => ({
+    isIntegrated: computed(() => true),
+    context: ref({ isIntegrated: true, theme: 'system' }),
+    plugin: computed(() => ({ id: 'LEAF', name: 'Leaf Analysis' })),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+    navigate: vi.fn(),
+    notify: vi.fn(),
+    sendToPlatform: vi.fn(),
+  })),
+}))
+
+describe('AppTopBar presence', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('should report the integrated plugin id as the presence scope', () => {
+    const wrapper = mount(AppTopBar, { props: { title: 'LEAF' } })
+
+    const options = heartbeat.mock.calls[0]?.[0] as {
+      enabled: { value: boolean }
+      scope: { value: string }
+    }
+    expect({ enabled: options.enabled.value, scope: options.scope.value }).toEqual({
+      enabled: true,
+      scope: 'LEAF',
+    })
+    wrapper.unmount()
+  })
+})