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

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

@@ -0,0 +1,181 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SectionCard from '../../components/SectionCard.vue'
+
+describe('SectionCard', () => {
+  describe('basic rendering', () => {
+    it('should render container, header, and title when given the required title prop', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__title').text()).toBe('Experiments')
+    })
+
+    it('should render default slot content in the body', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { default: '<p class="body-probe">rows</p>' },
+      })
+      expect(wrapper.find('.mint-section-card__body .body-probe').exists()).toBe(true)
+    })
+  })
+
+  describe('count meta', () => {
+    it('should render the count in the header when provided', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Plugins', count: '10 enabled' },
+      })
+      expect(wrapper.find('.mint-section-card__count').text()).toBe('10 enabled')
+    })
+
+    it('should not render a count element when count is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Plugins' },
+      })
+      expect(wrapper.find('.mint-section-card__count').exists()).toBe(false)
+    })
+
+    it('should accept a numeric count', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Artifacts', count: 4 },
+      })
+      expect(wrapper.find('.mint-section-card__count').text()).toBe('4')
+    })
+  })
+
+  describe('title style variants', () => {
+    it('should apply the uppercase modifier when uppercase is true', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', uppercase: true },
+      })
+      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(true)
+    })
+
+    it('should not apply the uppercase modifier by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Design data' },
+      })
+      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(false)
+    })
+  })
+
+  describe('icon chip', () => {
+    it('should render an icon chip with an SVG path when icon is provided', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__icon-chip path').exists()).toBe(true)
+    })
+
+    it('should render one path per entry when icon is an array of paths', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', icon: ['M4 7v10', 'M4 7c0 2.21'] },
+      })
+      expect(wrapper.findAll('.mint-section-card__icon-chip path')).toHaveLength(2)
+    })
+
+    it('should not render an icon chip when icon is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(false)
+    })
+
+    it('should apply the accent modifier class matching the accent prop', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Projects', icon: 'M3 7v10', accent: 'project' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip--project').exists()).toBe(true)
+    })
+
+    it('should default to the primary accent when accent is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Projects', icon: 'M3 7v10' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip--primary').exists()).toBe(true)
+    })
+  })
+
+  describe('header divider', () => {
+    it('should use the strong divider by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(false)
+    })
+
+    it('should apply the light divider modifier when divider is light', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Design data', divider: 'light' },
+      })
+      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(true)
+    })
+  })
+
+  describe('fill mode', () => {
+    it('should not stretch by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(false)
+    })
+
+    it('should apply the fill modifier when fill is true', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+      })
+      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(true)
+    })
+
+    it('should render the toolbar slot outside the scrolling body', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+        slots: { toolbar: '<div class="toolbar-probe">chips</div>', default: '<p>rows</p>' },
+      })
+      expect(wrapper.find('.mint-section-card__toolbar .toolbar-probe').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__body .toolbar-probe').exists()).toBe(false)
+    })
+
+    it('should not render a toolbar region when the slot is unused', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__toolbar').exists()).toBe(false)
+    })
+
+    it('should keep the header, body and footer structure when filling', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+        slots: { default: '<p>rows</p>', footer: '<span>1 / 3</span>' },
+      })
+      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__body').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__footer').exists()).toBe(true)
+    })
+  })
+
+  describe('slots', () => {
+    it('should render the actions slot at the end of the header', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { actions: '<a class="actions-probe" href="#">All →</a>' },
+      })
+      expect(wrapper.find('.mint-section-card__header .actions-probe').exists()).toBe(true)
+    })
+
+    it('should render the footer strip only when the footer slot is provided', () => {
+      const withFooter = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { footer: '<span class="footer-probe">Showing 1–18 of 42</span>' },
+      })
+      const withoutFooter = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(withFooter.find('.mint-section-card__footer .footer-probe').exists()).toBe(true)
+      expect(withoutFooter.find('.mint-section-card__footer').exists()).toBe(false)
+    })
+  })
+})

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

@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SegmentedControl from '../../components/SegmentedControl.vue'
+
+describe('SegmentedControl', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(SegmentedControl, {
+      props: {
+        modelValue: 'linear',
+        options: ['linear', 96, { value: 'log', label: 'Log scale' }],
+      },
+    })
+
+    expect(wrapper.findAll('button').map(button => button.text())).toEqual([
+      'linear',
+      '96',
+      'Log scale',
+    ])
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([96])
+  })
+
+  it('renders option-level disabled tabs without allowing selection', async () => {
+    const wrapper = mount(SegmentedControl, {
+      props: {
+        modelValue: 'active',
+        options: [
+          { value: 'active', label: 'Active' },
+          { value: 'archived', label: 'Archived', disabled: true },
+        ],
+      },
+    })
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons).toHaveLength(2)
+    expect(buttons[1].attributes('disabled')).toBeDefined()
+    expect(buttons[1].classes()).toContain('mint-segmented-control__option--disabled')
+
+    await buttons[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('can disable tabs by value while keeping them visible', async () => {
+    const wrapper = mount(SegmentedControl, {
+      props: {
+        modelValue: 'table',
+        options: [
+          { value: 'table', label: 'Table' },
+          { value: 'chart', label: 'Chart' },
+        ],
+        disabledValues: ['chart'],
+      },
+    })
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons.map(button => button.text())).toEqual(['Table', 'Chart'])
+    expect(buttons[1].attributes('disabled')).toBeDefined()
+
+    await buttons[1].trigger('keydown.enter')
+    await buttons[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+})

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

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SequenceProgressBar from '../../components/SequenceProgressBar.vue'
+
+describe('SequenceProgressBar', () => {
+  it('renders sequence progress and remaining time', () => {
+    const wrapper = mount(SequenceProgressBar, {
+      props: {
+        progress: {
+          current_sample: 3,
+          total_samples: 6,
+          elapsed_seconds: 180,
+          sample_durations: [50, 70, 60],
+        },
+      },
+    })
+
+    expect(wrapper.get('.mint-sequence-progress__label').text()).toBe('3 / 6 samples')
+    expect(wrapper.get('.mint-sequence-progress__percent').text()).toBe('50%')
+    expect(wrapper.text()).toContain('~3m left')
+  })
+
+  it('supports compact rendering without footer labels', () => {
+    const wrapper = mount(SequenceProgressBar, {
+      props: {
+        compact: true,
+        label: 'injections',
+        progress: {
+          current_sample: 2,
+          total_samples: 4,
+          estimated_remaining_seconds: 120,
+        },
+      },
+    })
+
+    expect(wrapper.get('.mint-sequence-progress__label').text()).toBe('2 / 4 injections')
+    expect(wrapper.find('.mint-sequence-progress__footer').exists()).toBe(false)
+  })
+})

package/src/__tests__/components/SettingsModal.schema.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import type { SettingsModalSchema, SettingsTabInput } from '../../types'
+import {
+  APPEARANCE_TAB,
+  buildFlatSettingsSchema,
+  buildSettingsTabs,
+  filterSettingsSchemaByAccess,
+  normalizeVisibleSettingsTabs,
+  settingsGroupToTab,
+} from '../../components/SettingsModal.schema'
+
+describe('SettingsModal schema helpers', () => {
+  const schema: SettingsModalSchema = {
+    groups: [
+      {
+        id: 'general',
+        label: 'General',
+        description: 'Shared settings',
+        icon: '<svg />',
+        fields: [
+          { name: 'title', label: 'Title', type: 'text' },
+          { name: 'adminOnly', label: 'Admin Only', type: 'text', requiresAdmin: true },
+        ],
+        columns: 2,
+      },
+      {
+        id: 'hidden',
+        label: 'Hidden',
+        requiresAdmin: true,
+        fields: [
+          { name: 'secret', label: 'Secret', type: 'text' },
+        ],
+      },
+    ],
+  }
+
+  it('builds flat form sections from settings groups', () => {
+    expect(buildFlatSettingsSchema(schema)).toEqual({
+      sections: [
+        {
+          id: 'general',
+          title: '',
+          fields: schema.groups[0].fields,
+          columns: 2,
+          condition: undefined,
+        },
+        {
+          id: 'hidden',
+          title: '',
+          fields: schema.groups[1].fields,
+          columns: undefined,
+          condition: undefined,
+        },
+      ],
+    })
+  })
+
+  it('filters groups and fields with the caller access policy', () => {
+    const filtered = filterSettingsSchemaByAccess(
+      schema,
+      (item) => !item.requiresAdmin
+    )
+
+    expect(filtered.groups).toHaveLength(1)
+    expect(filtered.groups[0].id).toBe('general')
+    expect(filtered.groups[0].fields.map(field => field.name)).toEqual(['title'])
+  })
+
+  it('maps visible schema groups to tabs', () => {
+    expect(settingsGroupToTab(schema.groups[0])).toEqual({
+      id: 'general',
+      label: 'General',
+      description: 'Shared settings',
+      icon: '<svg />',
+    })
+  })
+
+  it('normalizes manual tabs before access filtering', () => {
+    const tabs: SettingsTabInput[] = [
+      'General',
+      { id: 'admin', label: 'Admin', requiresAdmin: true },
+    ]
+
+    expect(
+      normalizeVisibleSettingsTabs(tabs, (item) => !item.requiresAdmin)
+    ).toEqual([
+      { id: 'General', label: 'General' },
+    ])
+  })
+
+  it('appends the appearance tab when enabled', () => {
+    expect(buildSettingsTabs([{ id: 'general', label: 'General' }], true)).toEqual([
+      { id: 'general', label: 'General' },
+      APPEARANCE_TAB,
+    ])
+  })
+})