@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.6

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

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import SampleSelector from '../../components/SampleSelector.vue'
+import type { AutoGroupResult, SampleGroup } from '../../types'
 
 describe('SampleSelector', () => {
   it('uses shared list selection for select-all and individual sample toggles', async () => {
@@ -83,3 +84,34 @@ describe('SampleSelector', () => {
     expect(wrapper.findAll('.mint-sample-selector__flat-name').map(item => item.text())).toEqual(['S1', 'S2'])
   })
 })
+
+describe('SampleSelector — QC overlay regression', () => {
+  it('keeps QC samples in the emitted groups via the concat compat rule', async () => {
+    const exp: SampleGroup[] = [
+      { name: 'Kidney', color: '#3B82F6', samples: ['s1', 's2'] },
+    ]
+    const qc: SampleGroup[] = [
+      { name: 'IQC', color: '#6B7280', samples: ['iqc1'] },
+    ]
+    const result: AutoGroupResult = {
+      groups: [...exp, ...qc],
+      experimentalGroups: exp,
+      qcGroups: qc,
+      metadata: [],
+      excludedSamples: [],
+    }
+    const wrapper = mount(SampleSelector, {
+      props: { samples: ['s1', 's2', 'iqc1'], modelValue: [] },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+    ;(wrapper.vm as unknown as { handleSmartGroupApply: (r: AutoGroupResult) => void })
+      .handleSmartGroupApply(result)
+    const emitted = wrapper.emitted('update:groups')!.at(-1)![0] as SampleGroup[]
+    const allSamples = emitted.flatMap(g => g.samples)
+    expect(allSamples).toContain('iqc1')
+  })
+})

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SampleSelectorSampleRow from '../../components/SampleSelectorSampleRow.vue'
+
+describe('SampleSelectorSampleRow', () => {
+  it('renders selected and dragging states', () => {
+    const wrapper = mount(SampleSelectorSampleRow, {
+      props: {
+        sample: 'S1',
+        selected: true,
+        dragging: true,
+        accentColor: '#3B82F6',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-sample-selector__sample--dragging')
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+    expect(wrapper.get('input').attributes('style')).toContain('accent-color')
+    expect(wrapper.text()).toContain('S1')
+  })
+
+  it('emits toggle and remove actions', async () => {
+    const wrapper = mount(SampleSelectorSampleRow, {
+      props: {
+        sample: 'S2',
+        selected: false,
+        removable: true,
+      },
+    })
+
+    await wrapper.get('input').trigger('change')
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('toggle')).toHaveLength(1)
+    expect(wrapper.emitted('remove')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ScheduleCalendar from '../../components/ScheduleCalendar.vue'
+
+describe('ScheduleCalendar', () => {
+  it('renders week events with layout styles from the schedule model', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:30:00',
+          },
+        ],
+      },
+    })
+
+    const event = wrapper.find('.mint-schedule__event')
+    expect(event.exists()).toBe(true)
+    expect(event.find('.mint-schedule__event-title').text()).toBe('LCMS run')
+    expect(event.attributes('style')).toContain('top: 80px')
+    expect(event.attributes('style')).toContain('height: 120px')
+  })
+
+  it('renders the month grid from the extracted calendar layout', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        view: 'month',
+      },
+    })
+
+    expect(wrapper.findAll('.mint-schedule__month-weekday')).toHaveLength(7)
+    expect(wrapper.findAll('.mint-schedule__month-cell')).toHaveLength(42)
+    expect(wrapper.find('.mint-schedule__title').text()).toBe('May 2024')
+  })
+})

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,
+    ])
+  })
+})

package/src/__tests__/components/WellPlate.colors.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import {
+  conditionGradientStyle,
+  formatConcentration,
+  getHeatmapColor,
+  HEATMAP_COLORS,
+} from '../../components/WellPlate.colors'
+
+describe('WellPlate color helpers', () => {
+  it('formats concentrations for compact condition headers', () => {
+    expect(formatConcentration(1000)).toBe('1k')
+    expect(formatConcentration(0.001)).toBe('1e-3')
+    expect(formatConcentration(12.5)).toBe('12.5')
+  })
+
+  it('creates readable condition gradient styles', () => {
+    expect(conditionGradientStyle('#000000', 10, [0, 10])).toEqual({
+      backgroundColor: 'rgba(0, 0, 0, 0.75)',
+      color: '#ffffff',
+    })
+  })
+
+  it('resolves configured heatmap palette colors', () => {
+    expect(getHeatmapColor({ enabled: false }, 1)).toBeNull()
+    expect(getHeatmapColor({ enabled: true, min: 0, max: 100 }, 0)).toBe(HEATMAP_COLORS.viridis[0])
+    expect(getHeatmapColor({ enabled: true, colorScale: 'custom', customColors: ['#111', '#222'] }, 1)).toBe('#222')
+  })
+})

package/src/__tests__/components/WellPlate.conditions.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import type { ColumnCondition, RowCondition } from '../../types'
+import {
+  createColumnConditionMap,
+  createColumnConditionSpans,
+  createRowConditionMap,
+  createRowConditionSpanByRow,
+  createRowConditionSpans,
+} from '../../components/WellPlate.conditions'
+
+const columnCondition: ColumnCondition = {
+  label: 'Drug A',
+  color: '#10b981',
+  concentrations: [1, 10],
+  cols: [2, 3],
+  unit: 'uM',
+}
+
+const rowCondition: RowCondition = {
+  label: 'Drug B',
+  color: '#6366f1',
+  concentrations: [0.1, 1],
+  rows: ['B', 'C'],
+}
+
+describe('WellPlate condition helpers', () => {
+  it('maps column and row labels to their condition index', () => {
+    expect(createColumnConditionMap([columnCondition]).get(3)).toEqual({
+      condition: columnCondition,
+      indexInGroup: 1,
+    })
+    expect(createRowConditionMap([rowCondition]).get('C')).toEqual({
+      condition: rowCondition,
+      indexInGroup: 1,
+    })
+  })
+
+  it('creates column spans with gaps around condition groups', () => {
+    const spans = createColumnConditionSpans(
+      [1, 2, 3, 4],
+      createColumnConditionMap([columnCondition]),
+    )
+
+    expect(spans).toEqual([
+      { gap: true, colspan: 1 },
+      { condition: columnCondition, colspan: 2 },
+      { gap: true, colspan: 1 },
+    ])
+  })
+
+  it('creates row spans and indexes them by starting row', () => {
+    const spans = createRowConditionSpans(
+      ['A', 'B', 'C', 'D'],
+      createRowConditionMap([rowCondition]),
+    )
+
+    expect(spans).toEqual([
+      { gap: true, rowspan: 1, startRow: 0 },
+      { condition: rowCondition, rowspan: 2, startRow: 1 },
+      { gap: true, rowspan: 1, startRow: 3 },
+    ])
+    expect(createRowConditionSpanByRow(spans).get(1)).toEqual({
+      condition: rowCondition,
+      rowspan: 2,
+      startRow: 1,
+    })
+  })
+})

package/src/__tests__/components/WellPlate.geometry.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import {
+  createPlateColumnLabels,
+  createPlateRowLabels,
+  createWellGrid,
+  getRectangleWellIds,
+  PLATE_CONFIGS,
+  WELL_PLATE_SIZE_CONFIGS,
+} from '../../components/WellPlate.geometry'
+
+describe('WellPlate geometry helpers', () => {
+  it('exposes supported plate dimensions and size presets', () => {
+    expect(PLATE_CONFIGS[96]).toEqual({ rows: 8, cols: 12 })
+    expect(PLATE_CONFIGS[384]).toEqual({ rows: 16, cols: 24 })
+    expect(WELL_PLATE_SIZE_CONFIGS.fill.cellWidth).toBe('100%')
+  })
+
+  it('creates row and column labels from a plate config', () => {
+    const config = PLATE_CONFIGS[24]
+
+    expect(createPlateRowLabels(config)).toEqual(['A', 'B', 'C', 'D'])
+    expect(createPlateColumnLabels(config)).toEqual([1, 2, 3, 4, 5, 6])
+  })
+
+  it('creates a well grid with partial well data merged into defaults', () => {
+    const config = PLATE_CONFIGS[6]
+    const rows = createPlateRowLabels(config)
+    const grid = createWellGrid(config, rows, {
+      A1: { state: 'filled', sampleType: 'qc', value: 42, metadata: { label: 'QC 1' } },
+    })
+
+    expect(grid[0][0]).toEqual({
+      id: 'A1',
+      row: 0,
+      col: 0,
+      state: 'filled',
+      sampleType: 'qc',
+      value: 42,
+      metadata: { label: 'QC 1' },
+    })
+    expect(grid[1][2]).toMatchObject({ id: 'B3', row: 1, col: 2, state: 'empty' })
+  })
+
+  it('creates rectangle well ids independent of drag direction', () => {
+    expect(Array.from(getRectangleWellIds({ row: 1, col: 2 }, { row: 0, col: 0 }, ['A', 'B']))).toEqual([
+      'A1',
+      'A2',
+      'A3',
+      'B1',
+      'B2',
+      'B3',
+    ])
+  })
+})

package/src/__tests__/components/WellPlate.interaction.test.ts

@@ -0,0 +1,171 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  nextClickedWellSelection,
+  useWellPlateInteraction,
+} from '../../components/WellPlate.interaction'
+import type { Well, WellPlateSelectionMode } from '../../types'
+
+function well(overrides: Partial<Well> = {}): Well {
+  return {
+    id: 'A1',
+    row: 0,
+    col: 0,
+    state: 'empty',
+    ...overrides,
+  }
+}
+
+function mouseEvent(overrides: Partial<MouseEvent> = {}): MouseEvent {
+  return {
+    preventDefault: vi.fn(),
+    button: 0,
+    shiftKey: false,
+    metaKey: false,
+    ctrlKey: false,
+    currentTarget: {
+      getBoundingClientRect: () => ({ right: 10, top: 20 }),
+    },
+    ...overrides,
+  } as unknown as MouseEvent
+}
+
+function dragEvent(data: Record<string, string> = {}): DragEvent {
+  return {
+    preventDefault: vi.fn(),
+    dataTransfer: {
+      effectAllowed: '',
+      dropEffect: '',
+      getData: (format: string) => data[format] ?? '',
+      setData: vi.fn(),
+    },
+  } as unknown as DragEvent
+}
+
+function createInteraction(overrides: Partial<Parameters<typeof useWellPlateInteraction>[0]> = {}) {
+  const emitted: Record<string, unknown[]> = {}
+  const selected = { value: [] as string[] }
+  const selectionMode = { value: 'multiple' as WellPlateSelectionMode }
+  const rows = ['A', 'B']
+  const grid = [
+    [well({ id: 'A1', row: 0, col: 0 }), well({ id: 'A2', row: 0, col: 1 })],
+    [well({ id: 'B1', row: 1, col: 0 }), well({ id: 'B2', row: 1, col: 1 })],
+  ]
+
+  const interaction = useWellPlateInteraction({
+    modelValue: () => selected.value,
+    selectionMode: () => selectionMode.value,
+    disabled: () => false,
+    readonly: () => false,
+    editable: () => false,
+    allowSampleDrop: () => false,
+    sampleDropParser: () => undefined,
+    rowLabels: () => rows,
+    wellGrid: () => grid,
+    emitSelected: (wellIds) => {
+      emitted.selected = [...(emitted.selected ?? []), wellIds]
+      selected.value = wellIds
+    },
+    emitWellClick: (wellId, event) => {
+      emitted.click = [...(emitted.click ?? []), [wellId, event]]
+    },
+    emitWellHover: (wellId, event) => {
+      emitted.hover = [...(emitted.hover ?? []), [wellId, event]]
+    },
+    emitContextMenu: (wellId, event) => {
+      emitted.context = [...(emitted.context ?? []), [wellId, event]]
+    },
+    emitWellMove: (sourceWellId, targetWellId) => {
+      emitted.move = [...(emitted.move ?? []), [sourceWellId, targetWellId]]
+    },
+    emitWellEdit: (wellId, data) => {
+      emitted.edit = [...(emitted.edit ?? []), [wellId, data]]
+    },
+    emitWellClear: (wellId) => {
+      emitted.clear = [...(emitted.clear ?? []), wellId]
+    },
+    emitSampleDrop: (wellId, data, event) => {
+      emitted.drop = [...(emitted.drop ?? []), [wellId, data, event]]
+    },
+    ...overrides,
+  })
+
+  return { emitted, grid, interaction, selected, selectionMode }
+}
+
+describe('WellPlate interaction helpers', () => {
+  it('calculates clicked well selection for single and multi-select modes', () => {
+    expect(nextClickedWellSelection([], 'A1', 'single', mouseEvent())).toEqual(['A1'])
+    expect(nextClickedWellSelection(['A1'], 'A1', 'single', mouseEvent())).toEqual([])
+    expect(nextClickedWellSelection(['A1'], 'A2', 'multiple', mouseEvent({ shiftKey: true }))).toEqual(['A1', 'A2'])
+    expect(nextClickedWellSelection(['A1', 'A2'], 'A1', 'multiple', mouseEvent({ ctrlKey: true }))).toEqual(['A2'])
+    expect(nextClickedWellSelection(['A1'], 'A1', 'multiple', mouseEvent())).toEqual([])
+  })
+
+  it('emits click selection changes and opens editor instead when editable', () => {
+    const { emitted, grid, interaction } = createInteraction()
+
+    interaction.handleWellClick(grid[0][0], mouseEvent())
+
+    expect(emitted.click?.[0]).toEqual(['A1', expect.anything()])
+    expect(emitted.selected?.[0]).toEqual(['A1'])
+
+    const editable = createInteraction({ editable: () => true })
+    editable.interaction.handleWellClick(grid[0][1], mouseEvent())
+
+    expect(editable.interaction.editingWellId.value).toBe('A2')
+    expect(editable.interaction.editPopupPosition.value).toEqual({ x: 18, y: 20 })
+    expect(editable.emitted.selected).toBeUndefined()
+  })
+
+  it('tracks rectangle drag selection and emits on mouseup', () => {
+    const { emitted, grid, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'rectangle'
+
+    interaction.handleWellMouseDown(grid[0][0], mouseEvent())
+    interaction.handleWellMouseEnter(grid[1][1], mouseEvent())
+
+    expect(Array.from(interaction.dragSelectedWells.value)).toEqual(['A1', 'A2', 'B1', 'B2'])
+
+    interaction.handleMouseUp()
+
+    expect(emitted.selected?.[0]).toEqual(['A1', 'A2', 'B1', 'B2'])
+    expect(interaction.isDragging.value).toBe(false)
+  })
+
+  it('moves wells in drag mode and resets drag state', () => {
+    const { emitted, grid, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'drag'
+
+    interaction.handleDragStart({ ...grid[0][0], sampleType: 'sample' }, dragEvent())
+    interaction.handleDrop(grid[1][1], dragEvent())
+
+    expect(emitted.move?.[0]).toEqual(['A1', 'B2'])
+    expect(interaction.dragSourceWell.value).toBeNull()
+    expect(interaction.dragTargetWell.value).toBeNull()
+  })
+
+  it('parses dropped samples when sample drop is enabled', () => {
+    const { emitted, grid, interaction } = createInteraction({ allowSampleDrop: () => true })
+
+    interaction.handleDrop(grid[0][0], dragEvent({ 'text/plain': 'Sample A' }))
+
+    expect(emitted.drop?.[0]).toEqual([
+      'A1',
+      { sampleName: 'Sample A', label: 'Sample A', raw: 'Sample A' },
+      expect.anything(),
+    ])
+  })
+
+  it('handles keyboard clear and select all shortcuts', () => {
+    const { emitted, interaction, selected } = createInteraction()
+    selected.value = ['A1']
+
+    interaction.handleKeyDown(new KeyboardEvent('keydown', { key: 'Escape' }))
+    interaction.handleKeyDown(new KeyboardEvent('keydown', { key: 'a', metaKey: true }))
+
+    expect(emitted.selected).toEqual([
+      [],
+      ['A1', 'A2', 'B1', 'B2'],
+    ])
+  })
+})

package/src/__tests__/components/WellPlate.legend.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { DEFAULT_WELL_LEGEND_ITEMS } from '../../components/WellPlate.legend'
+
+describe('WellPlate legend helpers', () => {
+  it('keeps default sample legend item order stable', () => {
+    expect(DEFAULT_WELL_LEGEND_ITEMS.map(item => item.type)).toEqual([
+      'sample',
+      'blank',
+      'qc',
+      'iqc',
+    ])
+  })
+})

package/src/__tests__/components/WellPlate.rendering.test.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest'
+import {
+  sampleTypeIndicator,
+  wellBadge,
+  wellClasses,
+  wellLabel,
+  wellStyle,
+} from '../../components/WellPlate.rendering'
+import type { Well } from '../../types'
+
+function well(overrides: Partial<Well> = {}): Well {
+  return {
+    id: 'A1',
+    row: 0,
+    col: 0,
+    state: 'empty',
+    ...overrides,
+  }
+}
+
+describe('WellPlate rendering helpers', () => {
+  it('derives well classes from selection and drag priority', () => {
+    expect(wellClasses(well({ sampleType: 'sample' }), {
+      wellShape: 'circle',
+      selectionMode: 'drag',
+      selected: true,
+      dragOver: false,
+      hovered: false,
+      disabled: false,
+      readonly: false,
+      dragSource: false,
+      dragTarget: true,
+    })).toEqual([
+      'mint-well-plate__well',
+      'mint-well-plate__well--circle',
+      'mint-well-plate__well--draggable',
+      'mint-well-plate__well--drag-target',
+    ])
+  })
+
+  it('suppresses hover styling when readonly and includes disabled/filled states', () => {
+    expect(wellClasses(well({ state: 'filled' }), {
+      wellShape: 'rounded',
+      selectionMode: 'multiple',
+      selected: false,
+      dragOver: false,
+      hovered: true,
+      disabled: true,
+      readonly: true,
+      dragSource: false,
+      dragTarget: false,
+    })).toEqual([
+      'mint-well-plate__well',
+      'mint-well-plate__well--rounded',
+      'mint-well-plate__well--disabled',
+      'mint-well-plate__well--filled',
+    ])
+  })
+
+  it('prefers heatmap and custom sample colors before defaults', () => {
+    expect(wellStyle(well({ value: 0.5 }), {
+      heatmap: { enabled: true, colorScale: 'viridis', min: 0, max: 1 },
+      sampleColors: {},
+    })).toEqual({
+      backgroundColor: expect.any(String),
+      border: '1px solid transparent',
+    })
+
+    expect(wellStyle(well({ sampleType: 'treated' }), {
+      heatmap: { enabled: false },
+      sampleColors: { treated: '#123456' },
+    })).toEqual({
+      backgroundColor: '#12345626',
+      border: '1px solid #12345666',
+    })
+
+    expect(wellStyle(well({ sampleType: 'qc' }), {
+      heatmap: { enabled: false },
+      sampleColors: {},
+    })).toEqual({
+      backgroundColor: 'rgba(139, 92, 246, 0.15)',
+      border: '1px solid rgba(139, 92, 246, 0.4)',
+    })
+  })
+
+  it('falls back to empty or filled well styles', () => {
+    expect(wellStyle(well(), {
+      heatmap: { enabled: false },
+      sampleColors: {},
+    })).toEqual({
+      backgroundColor: 'var(--bg-tertiary)',
+      border: '1px dashed var(--border-color)',
+    })
+
+    expect(wellStyle(well({ state: 'filled' }), {
+      heatmap: { enabled: false },
+      sampleColors: {},
+    })).toEqual({
+      backgroundColor: 'var(--bg-tertiary)',
+      border: '1px solid var(--border-color)',
+    })
+  })
+
+  it('formats indicators, labels, and badges for optional overlays', () => {
+    expect(sampleTypeIndicator(well({ sampleType: 'qc' }), true)).toBe('Q')
+    expect(sampleTypeIndicator(well({ sampleType: 'treated' }), true)).toBe('T')
+    expect(sampleTypeIndicator(well({ sampleType: 'treated' }), false)).toBeNull()
+
+    expect(wellLabel(well({ metadata: { label: 'Dose A' } }), true)).toBe('Dose A')
+    expect(wellLabel(well({ metadata: { label: 'Dose A' } }), false)).toBeUndefined()
+
+    expect(wellBadge(well({ metadata: { injectionCount: 3 } }), true)).toEqual({
+      text: '3',
+      color: '#6366f1',
+    })
+    expect(wellBadge(well({ metadata: { customMethod: 'LCMS-2' } }), true)).toEqual({
+      text: '+',
+      color: '#ec4899',
+    })
+    expect(wellBadge(well({ metadata: { injectionCount: 1 } }), true)).toBeNull()
+  })
+})