@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

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

@@ -0,0 +1,90 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { describe, expect, it } from 'vitest'
+
+import PresenceAvatars from '../../components/PresenceAvatars.vue'
+import { arrangePresence, type PresencePerson } from '../../utils/presenceAvatars'
+
+function person(id: string, activity: PresencePerson['activity'] = 'viewing_design'): PresencePerson {
+  return { id, name: `User ${id}`, activity }
+}
+
+const six = [
+  person('2'),
+  person('3', 'viewing_results'),
+  person('4'),
+  person('5', 'viewing_results'),
+  person('6'),
+  person('1', 'editing'),
+]
+
+describe('arrangePresence', () => {
+  it.each([
+    ['puts an editor first and among the shown when it comes last', six, {}, ['1', '2', '3', '4'], 2, 6],
+    ['leaves out the current user', [person('9'), person('2')], { selfId: '9' }, ['2'], 0, 1],
+    ['counts the people the platform did not list', [person('9'), person('2')], { selfId: '9', count: 25 }, ['2'], 23, 24],
+    ['shows everyone at the cap without an overflow', six.slice(0, 4), {}, ['2', '3', '4', '5'], 0, 4],
+  ])('should %s', (_case, people, options, shownIds, overflow, total) => {
+    const arrangement = arrangePresence(people, options)
+
+    expect(arrangement.shown.map(entry => entry.id)).toEqual(shownIds)
+    expect(arrangement.overflow).toBe(overflow)
+    expect(arrangement.total).toBe(total)
+  })
+})
+
+describe('PresenceAvatars', () => {
+  it('should name each shown person and activity in one button label when others are here', async () => {
+    const wrapper = mount(PresenceAvatars, { props: { people: [...six, person('9')], selfId: '9' }, attachTo: document.body })
+    const trigger = wrapper.get('button')
+
+    expect(trigger.attributes('aria-label')).toBe(
+      '6 other people here: User 1 editing, User 2 viewing design, User 3 viewing results, User 4 viewing design, and 2 more',
+    )
+    expect(wrapper.findAll('.mint-presence__stack .mint-presence__avatar')).toHaveLength(4)
+    expect(wrapper.get('.mint-presence__more').text()).toBe('+2')
+
+    await trigger.trigger('click')
+
+    expect(trigger.attributes('aria-expanded')).toBe('true')
+    expect(wrapper.findAll('.mint-presence__panel li')).toHaveLength(6)
+    wrapper.unmount()
+  })
+
+  it('should come back closed when everyone else left with the list open', async () => {
+    const wrapper = mount(PresenceAvatars, { props: { people: six }, attachTo: document.body })
+    await wrapper.get('button').trigger('click')
+
+    await wrapper.setProps({ people: [] })
+    await wrapper.setProps({ people: six })
+
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('false')
+    expect(wrapper.find('.mint-presence__panel').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it.each([
+    ['close the list and keep the focus on the next control', '#edit', 'false', '#edit'],
+    ['close the list and return the focus to the button', '.mint-presence__trigger', 'false', '.mint-presence__trigger'],
+  ])('should %s when Escape is pressed with the list open', async (_case, from, expanded, focused) => {
+    const wrapper = mount({
+      render: () => [h(PresenceAvatars, { people: six }), h('button', { id: 'edit', type: 'button' }, 'Edit')],
+    }, { attachTo: document.body })
+    await wrapper.get('.mint-presence__trigger').trigger('click')
+    const target = wrapper.get(from)
+    ;(target.element as HTMLElement).focus()
+
+    await target.trigger('keydown', { key: 'Escape' })
+    await flushPromises()
+
+    expect(wrapper.get('.mint-presence__trigger').attributes('aria-expanded')).toBe(expanded)
+    expect(document.activeElement).toBe(wrapper.get(focused).element)
+    wrapper.unmount()
+  })
+
+  it('should render nothing when only the current user is here', () => {
+    const wrapper = mount(PresenceAvatars, { props: { people: [person('9')], selfId: '9' } })
+
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+})

package/src/__tests__/components/ProtocolStep.presentation.test.ts

@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
 import {
-  PROTOCOL_STEP_TYPE_COLORS,
   PROTOCOL_STEP_TYPE_ICONS,
   formatProtocolDuration,
 } from '../../components/ProtocolStep.presentation'
@@ -14,7 +13,7 @@ describe('ProtocolStep presentation helpers', () => {
     expect(formatProtocolDuration(95)).toBe('1h 35m')
   })
 
-  it('keeps icons and colors available for every protocol step type', () => {
+  it('keeps icons available for every protocol step type', () => {
     expect(Object.keys(PROTOCOL_STEP_TYPE_ICONS).sort()).toEqual([
       'addition',
       'centrifuge',
@@ -25,7 +24,6 @@ describe('ProtocolStep presentation helpers', () => {
       'transfer',
       'wash',
     ])
-    expect(PROTOCOL_STEP_TYPE_COLORS.measurement).toBe('#8B5CF6')
     expect(PROTOCOL_STEP_TYPE_ICONS.custom).toContain('M10.325')
   })
 })

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

@@ -3,9 +3,8 @@ import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import BaseButton from '../../components/BaseButton.vue'
 import BaseInput from '../../components/BaseInput.vue'
-import BaseTextarea from '../../components/BaseTextarea.vue'
 import ProtocolStepEditor from '../../components/ProtocolStepEditor.vue'
-import SearchableSelect from '../../components/SearchableSelect.vue'
+import SelectSearchableInternal from '../../components/internal/SelectSearchableInternal.vue'
 import type { StepTemplate } from '../../composables/useProtocolTemplates'
 
 const templates: StepTemplate[] = [
@@ -38,24 +37,24 @@ describe('ProtocolStepEditor (6c)', () => {
     expect(wrapper.get(`[id="${labelEl.attributes('for')}"]`).element.tagName.toLowerCase()).toBe(tag)
   })
 
-  it('should pick the template with SearchableSelect', async () => {
+  it('should pick the template with a searchable BaseSelect', async () => {
     const wrapper = await mountEditor()
 
-    expect(wrapper.findComponent(SearchableSelect).props('modelValue')).toBe('inc')
+    expect(wrapper.findComponent(SelectSearchableInternal).props('modelValue')).toBe('inc')
   })
 
-  it('should offer each template with its description in the SearchableSelect', async () => {
+  it('should offer each template with its description in the searchable BaseSelect', async () => {
     const wrapper = await mountEditor()
 
-    expect(wrapper.findComponent(SearchableSelect).props('options')[0]).toMatchObject({
+    expect(wrapper.findComponent(SelectSearchableInternal).props('options')[0]).toMatchObject({
       value: 'inc', label: 'Incubation', description: 'Hold at temperature',
     })
   })
 
-  it('should switch the step to the template chosen in the SearchableSelect', async () => {
+  it('should switch the step to the template chosen in the searchable BaseSelect', async () => {
     const wrapper = await mountEditor()
 
-    wrapper.findComponent(SearchableSelect).vm.$emit('update:modelValue', 'wash')
+    wrapper.findComponent(SelectSearchableInternal).vm.$emit('update:modelValue', 'wash')
     await nextTick()
 
     expect(wrapper.findComponent(BaseInput).props('modelValue')).toBe('Wash')
@@ -73,10 +72,10 @@ describe('ProtocolStepEditor (6c)', () => {
     expect(wrapper.find('[class*="mode-badge"]').exists()).toBe(false)
   })
 
-  it('should edit the description with BaseTextarea', async () => {
+  it('should edit the description in a textarea BaseInput', async () => {
     const wrapper = await mountEditor()
 
-    expect(wrapper.findComponent(BaseTextarea).exists()).toBe(true)
+    expect(wrapper.find('textarea.mint-textarea').exists()).toBe(true)
   })
 
   it('should render the save action as a primary BaseButton', async () => {
@@ -98,7 +97,7 @@ describe('ProtocolStepEditor (6c)', () => {
   it('should size the template picker to the 32px control height', async () => {
     const wrapper = await mountEditor()
 
-    expect(wrapper.findComponent(SearchableSelect).props('size')).toBe('sm')
+    expect(wrapper.findComponent(SelectSearchableInternal).props('size')).toBe('sm')
   })
 
   it('should size the step name field to the 32px control height', async () => {

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

@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import BaseInput from '../../components/BaseInput.vue'
 import BaseSelect from '../../components/BaseSelect.vue'
+import BaseInput from '../../components/BaseInput.vue'
 import FormField from '../../components/FormField.vue'
+import NumberInput from '../../components/NumberInput.vue'
 import ProtocolStepParameterField from '../../components/ProtocolStepParameterField.vue'
 import type { ParameterDefinition } from '../../composables/useProtocolTemplates'
 
@@ -38,10 +39,10 @@ describe('ProtocolStepParameterField', () => {
     expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([25])
   })
 
-  it('should show the unit in the BaseInput suffix segment (6c)', () => {
+  it('should show the unit in the NumberInput unit label (6c)', () => {
     const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })
 
-    expect(wrapper.get('.mint-input-group__suffix').text()).toBe('°C')
+    expect(wrapper.get('.mint-number-input__unit').text()).toBe('°C')
   })
 
   it('should render text parameters with BaseInput (6c)', () => {
@@ -57,10 +58,10 @@ describe('ProtocolStepParameterField', () => {
     expect(wrapper.findComponent(BaseSelect).exists()).toBe(true)
   })
 
-  it('should mark the BaseSelect as errored when the parameter has an error (6c)', () => {
+  it('should mark the BaseSelect as invalid when the parameter has an error (6c)', () => {
     const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, error: 'Buffer is required' } })
 
-    expect(wrapper.findComponent(BaseSelect).props('error')).toBe(true)
+    expect((wrapper.findComponent(BaseSelect).props() as { invalid?: boolean }).invalid).toBe(true)
   })
 
   it('should show the validation error through FormField (6c)', () => {
@@ -78,12 +79,12 @@ describe('ProtocolStepParameterField', () => {
   it('should size a numeric parameter to the 32px control height', () => {
     const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })
 
-    expect(wrapper.findComponent(BaseInput).props('size')).toBe('sm')
+    expect(wrapper.findComponent(NumberInput).props('size')).toBe('sm')
   })
 
   it('should size a select parameter to the 32px control height', () => {
     const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, modelValue: 'PBS' } })
 
-    expect(wrapper.findComponent(BaseSelect).props('size')).toBe('sm')
+    expect((wrapper.findComponent(BaseSelect).props() as { size?: string }).size).toBe('sm')
   })
 })

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

@@ -44,9 +44,9 @@ describe('ResourcePickerListInternal', () => {
     expect(setup().get('.mint-resource-picker__code').classes()).toContain('mint-exp-code')
   })
 
-  it('should tint the status by its variant', () => {
+  it('should tint the status by its tone', () => {
     const wrapper = setup({
-      describe: (item: unknown) => ({ title: (item as Item).name, status: { label: 'Completed', variant: 'success' } }),
+      describe: (item: unknown) => ({ title: (item as Item).name, status: { label: 'Completed', tone: 'success' } }),
     })
     expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--success')
   })
@@ -107,17 +107,6 @@ describe('ResourcePickerListInternal', () => {
     expect(wrapper.emitted('update:search')?.[0]).toEqual(['plasma'])
   })
 
-  it('should head each group with its label and a count', () => {
-    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
-    expect(wrapper.get('.mint-resource-picker__group').text()).toBe('Recent2')
-  })
-
-  it('should hide the rows of a collapsed group', async () => {
-    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
-    await wrapper.get('.mint-resource-picker__group').trigger('click')
-    expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
-  })
-
   it('should show skeleton rows while loading', () => {
     expect(setup({ loading: true }).findAll('.mint-resource-picker__skeleton-row')).toHaveLength(4)
   })
@@ -129,13 +118,4 @@ describe('ResourcePickerListInternal', () => {
   it('should show the empty title when there are no items', () => {
     expect(setup({ items: [], emptyTitle: 'Nothing here' }).text()).toContain('Nothing here')
   })
-
-  it('should leave Enter to a group header while a row is highlighted', async () => {
-    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
-    await wrapper.findAll('[role="option"]')[0]!.trigger('mouseenter')
-
-    await wrapper.get('.mint-resource-picker__group').trigger('keydown', { key: 'Enter' })
-
-    expect(wrapper.emitted('select')).toBeUndefined()
-  })
 })

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

@@ -15,9 +15,6 @@ const retiredSelectors: Record<string, readonly string[]> = {
   'dose-calculator.css': [
     'mint-dose-calculator__mw-input',
   ],
-  'experiment-data-viewer.css': [
-    'mint-data-viewer__empty',
-  ],
   'experiment-popover.css': [
     'mint-experiment-popover__check-icon',
     'mint-experiment-popover__divider',
@@ -33,24 +30,9 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-experiment-selector__filters',
     'mint-experiment-selector__status-filter',
   ],
-  'experiment-timeline.css': [
-    'mint-timeline__empty',
-    'mint-timeline__empty-btn',
-    'mint-timeline__empty-content',
-    'mint-timeline__empty-text',
-  ],
   'protocol-step-editor.css': [
     'mint-protocol-editor__field-row',
   ],
-  'reagent-editor.css': [
-    'mint-reagent-editor__row',
-  ],
-  'reagent-list.css': [
-    'mint-reagent-list__empty',
-    'mint-reagent-list__empty-btn',
-    'mint-reagent-list__empty-icon',
-    'mint-reagent-list__empty-text',
-  ],
   'sample-hierarchy-tree.css': [
     'mint-sample-tree__empty',
     'mint-sample-tree__empty-icon',

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

@@ -3,7 +3,7 @@ import { resolve } from 'node:path'
 import { flushPromises, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import { describe, expect, it, vi } from 'vitest'
-import AutoGroupModal from '../../components/AutoGroupModal.vue'
+import AutoGroupModal from '../../components/internal/AutoGroupModalInternal.vue'
 import SampleSelector from '../../components/SampleSelector.vue'
 import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
 import type { AutoGroupResult, SampleGroup } from '../../types'
@@ -28,7 +28,7 @@ describe('SampleSelector', () => {
       },
       global: {
         stubs: {
-          AutoGroupModal: true,
+          AutoGroupModalInternal: true,
         },
       },
     })
@@ -60,7 +60,7 @@ describe('SampleSelector', () => {
       },
       global: {
         stubs: {
-          AutoGroupModal: true,
+          AutoGroupModalInternal: true,
         },
       },
     })
@@ -92,12 +92,12 @@ describe('SampleSelector', () => {
       },
       global: {
         stubs: {
-          AutoGroupModal: true,
+          AutoGroupModalInternal: true,
         },
       },
     })
 
-    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('0 / 2')
+    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('0/2')
     expect(wrapper.findAll('.mint-sample-selector__flat-name').map(item => item.text())).toEqual(['S1', 'S2'])
   })
 
@@ -110,18 +110,18 @@ describe('SampleSelector', () => {
       },
       global: {
         stubs: {
-          AutoGroupModal: true,
+          AutoGroupModalInternal: true,
         },
       },
     })
 
-    const labels = wrapper.findAll('.mint-sample-selector__actions-row .mint-sample-selector__action-label')
-    expect(labels.map(label => label.text())).toEqual(['Grouping'])
-    expect(wrapper.findAll('.mint-sample-selector__actions-row > .mint-sample-selector__action-btn')).toHaveLength(2)
+    const buttons = wrapper.findAll('.mint-sample-selector__header-actions > .mint-sample-selector__action-btn')
+    expect(buttons.map(button => button.text())).toEqual(['Smart group'])
+    expect(wrapper.find('.mint-sample-selector__header').text()).toContain('Samples0 selected')
 
     await wrapper.findAllComponents({ name: 'BaseButton' })[0].trigger('click')
 
-    const modal = wrapper.findComponent({ name: 'AutoGroupModal' })
+    const modal = wrapper.findComponent({ name: 'AutoGroupModalInternal' })
     expect(modal.props('initialMode')).toBe('auto')
   })
 
@@ -135,17 +135,17 @@ describe('SampleSelector', () => {
       },
       global: {
         stubs: {
-          AutoGroupModal: true,
+          AutoGroupModalInternal: true,
         },
       },
     })
 
-    const labels = wrapper.findAll('.mint-sample-selector__actions-row .mint-sample-selector__action-label')
-    expect(labels.map(label => label.text())).toEqual(['Grouping'])
+    const buttons = wrapper.findAll('.mint-sample-selector__header-actions > .mint-sample-selector__action-btn')
+    expect(buttons.map(button => button.text())).toEqual(['Group'])
 
     await wrapper.findAllComponents({ name: 'BaseButton' })[0].trigger('click')
 
-    const modal = wrapper.findComponent({ name: 'AutoGroupModal' })
+    const modal = wrapper.findComponent({ name: 'AutoGroupModalInternal' })
     expect(modal.props('initialMode')).toBe('manual')
     expect(modal.props('groups')).toEqual([])
   })
@@ -155,7 +155,7 @@ describe('AutoGroupModal manual workflow', () => {
   it('assigns selected samples to a manual group and subgroup', async () => {
     const wrapper = mount(AutoGroupModal, {
       props: {
-        modelValue: true,
+        open: true,
         initialMode: 'manual',
         samples: ['S1', 'S2'],
         groups: [],
@@ -190,7 +190,7 @@ describe('AutoGroupModal manual workflow', () => {
   it('moves manual selections out of existing groups before assigning them', async () => {
     const wrapper = mount(AutoGroupModal, {
       props: {
-        modelValue: true,
+        open: true,
         initialMode: 'manual',
         samples: ['S1', 'S2'],
         groups: [
@@ -221,7 +221,7 @@ describe('AutoGroupModal manual workflow', () => {
   it('preserves an existing cohort color when the target is typed manually', async () => {
     const wrapper = mount(AutoGroupModal, {
       props: {
-        modelValue: true,
+        open: true,
         initialMode: 'manual',
         samples: ['S1', 'S2'],
         groups: [
@@ -266,7 +266,7 @@ describe('AutoGroupModal multi-schema auto workflow', () => {
     ]
     const wrapper = mount(AutoGroupModal, {
       props: {
-        modelValue: true,
+        open: true,
         samples,
       },
       global: {
@@ -336,7 +336,7 @@ describe('SampleSelector — QC overlay regression', () => {
       props: { samples: ['s1', 's2', 'iqc1'], modelValue: [] },
       global: {
         stubs: {
-          AutoGroupModal: true,
+          AutoGroupModalInternal: true,
         },
       },
     })
@@ -351,7 +351,7 @@ describe('SampleSelector — QC overlay regression', () => {
 describe('AutoGroupModal CSV upload', () => {
   it('loads an uploaded CSV into the engine so samples reach both auto and manual modes', async () => {
     const wrapper = mount(AutoGroupModal, {
-      props: { modelValue: true, samples: [], groups: [] },
+      props: { open: true, samples: [], groups: [] },
       global: {
         plugins: [createPinia()],
         stubs: { Teleport: true },
@@ -379,7 +379,7 @@ describe('AutoGroupModal CSV upload', () => {
 
   it('surfaces an error (without throwing) for an empty/header-only CSV, then loads a valid one', async () => {
     const wrapper = mount(AutoGroupModal, {
-      props: { modelValue: true, samples: [], groups: [] },
+      props: { open: true, samples: [], groups: [] },
       global: { plugins: [createPinia()], stubs: { Teleport: true } },
     })
     const recipe = wrapper.findComponent(SmartGroupFieldRecipe)
@@ -438,7 +438,7 @@ describe('AutoGroupModal template download wiring', () => {
     const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
     try {
       const wrapper = mount(AutoGroupModal, {
-        props: { modelValue: true, samples: ['Ctrl_R1', 'Ctrl_R2', 'Drug_R1', 'Drug_R2'], groups: [] },
+        props: { open: true, samples: ['Ctrl_R1', 'Ctrl_R2', 'Drug_R1', 'Drug_R2'], groups: [] },
         global: { plugins: [createPinia()], stubs: { Teleport: true } },
       })
       const recipe = wrapper.findComponent(SmartGroupFieldRecipe)
@@ -470,11 +470,16 @@ describe('SampleSelector checkboxes (7c)', () => {
     groups: [{ name: 'Control', color: '#3B82F6', samples: ['S1', 'S2'] }],
     enableSmartGroup: false,
   }
-  const stubs = { global: { stubs: { AutoGroupModal: true } } }
+  const stubs = { global: { stubs: { AutoGroupModalInternal: true } } }
 
-  it('should show the mono selected / total count when some samples are selected', () => {
+  it('should show the mono selected/total count when some samples are selected', () => {
     const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
-    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('1 / 3')
+    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('1/3')
+  })
+
+  it('should offer clear-all-groups in the header when groups exist', () => {
+    const wrapper = mount(SampleSelector, { props: { ...grouped, enableGrouping: true }, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__header-actions [aria-label="Clear all groups"]').exists()).toBe(true)
   })
 
   it('should mark the select-all checkbox mixed when some samples are selected', () => {

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

@@ -1,36 +1,31 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import SecretInput from '../../components/SecretInput.vue'
-import {
-  isPluginSecretRef,
-  keepPluginSecret,
-  pluginSecretLabel,
-  pluginSecretState,
-} from '../../utils/pluginSecrets'
+import * as pluginSecret from '../../utils/pluginSecrets'
 
 const storedRef = { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true }
 const lockedRef = { $secret: null, locked: true }
 
-describe('pluginSecrets helpers', () => {
+describe('pluginSecret helpers', () => {
   it('should classify each marker the settings response can publish', () => {
     expect([
-      pluginSecretState(storedRef),
-      pluginSecretState(null),
-      pluginSecretState(lockedRef),
-      pluginSecretLabel(storedRef),
-      pluginSecretLabel(null),
-      pluginSecretLabel(lockedRef),
+      pluginSecret.state(storedRef),
+      pluginSecret.state(null),
+      pluginSecret.state(lockedRef),
+      pluginSecret.label(storedRef),
+      pluginSecret.label(null),
+      pluginSecret.label(lockedRef),
     ]).toEqual(['set', 'unset', 'environment', 'Set', 'Not set', 'Provided by environment'])
   })
 
   it('should only treat reserved marker shapes as references', () => {
     expect([
-      isPluginSecretRef(storedRef),
-      isPluginSecretRef({ $mint: 'placeholder' }),
-      isPluginSecretRef({ $secret: 'x', label: 'not a marker' }),
-      isPluginSecretRef('plain-string'),
-      keepPluginSecret(storedRef),
-      keepPluginSecret('typed'),
+      pluginSecret.isRef(storedRef),
+      pluginSecret.isRef({ $mint: 'placeholder' }),
+      pluginSecret.isRef({ $secret: 'x', label: 'not a marker' }),
+      pluginSecret.isRef('plain-string'),
+      pluginSecret.keep(storedRef),
+      pluginSecret.keep('typed'),
     ]).toEqual([true, false, false, false, { ...storedRef }, null])
   })
 })

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

@@ -36,4 +36,16 @@ describe('SequenceProgressBar', () => {
     expect(wrapper.get('.mint-sequence-progress__label').text()).toBe('2 / 4 injections')
     expect(wrapper.find('.mint-sequence-progress__footer').exists()).toBe(false)
   })
+
+  it.each([
+    [0, null],
+    [2, '2 failed'],
+  ])('should show the failed count when %i injections failed', (failed, expected) => {
+    const wrapper = mount(SequenceProgressBar, {
+      props: { failed, progress: { current_sample: 3, total_samples: 6 } },
+    })
+
+    const node = wrapper.find('.mint-sequence-progress__failed')
+    expect(node.exists() ? node.text() : null).toBe(expected)
+  })
 })