Skip to content

AssertionList

A checklist of eval assertions: passed, failed or not checked, each with the evidence found. Used by the eval run view; EvalStatusBadge shows a run or case status.

DataServer-rendered

Examples

Step assertions

Evidence is what the run found. A flipped assertion gets an aside badge.

  • Passed: not_errorisError: false
  • Failed: path $.items min_items 1found 0 itemsNow fails
  • Not checked: latency_ms 1000not checked: an earlier assertion failed
Example
<AssertionList
  items={step.assertions.map((a) => ({ label: a.label, ok: a.ok, evidence: a.evidence }))}
  empty="No assertions on this step."
/>

Run and case statuses

Light
PassedFailedErrorRunningBlockedSkipped
Dark
PassedFailedErrorRunningBlockedSkipped
Example
<EvalStatusBadge status={run.status} />
<EvalStatusBadge status={result.status} />

Usage

Usage
import { AssertionList, EvalStatusBadge } from '@switchboard/ui'

<EvalStatusBadge status={result.status} />
<AssertionList items={[{ label: 'not_error', ok: true, evidence: 'isError: false' }]} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

AssertionList

AssertionList props
PropTypeDefaultDescription
items*AssertionItem[]–{ label, ok: true | false | null, evidence?, aside? }. null = not checked.
emptyRemixNode–Shown when items is empty.

Also accepts every <ul> attribute.

EvalStatusBadge

EvalStatusBadge props
PropTypeDefaultDescription
status*'passed' | 'failed' | 'error' | 'aborted' | 'running' | 'queued' | 'pass' | 'fail' | 'blocked' | 'skipped'–Run or case status; the word is the label.

Accessibility

  • Each row starts with a visually hidden "Passed:", "Failed:" or "Not checked:"; the ✓ / ✗ / ? mark is aria-hidden.
  • Status badges say the status in words; the tone only backs it up.

Guidance

Do

  • Show the evidence for failures.
  • Mark assertions that did not run as not checked, not failed.

Don’t

  • Colour rows without words.
  • Hide passing assertions; the checklist is the record.