Component

Test Results

Displays a list of test case results with pass/fail/skip status indicators, optional expected/actual diffs for failures, and a summary bar — designed for mock-interview IDEs and CI dashboards.

All passing

When all tests pass the summary bar and row accents use the success/emerald semantic token.

3/3 passed
  • passadds two positive numbers
    3 ms
  • passhandles zero as operand
    2 ms
  • passhandles negative numbers
    4 ms

With failures

Failed tests show a destructive-token accent and, when expected and actual are supplied, render a side-by-side diff block beneath the row.

2/3 passed· 1 failed
  • passadds two positive numbers
    3 ms
  • failhandles overflow correctly
    2 ms
    expected0
    actualInfinity

    Expected 0 but received Infinity

  • passhandles negative numbers
    4 ms

With skipped

Skipped tests use the muted semantic token and display an optional message with the skip reason.

2/3 passed· 1 skipped
  • passadds two positive numbers
    3 ms
  • passhandles zero as operand
    2 ms
  • skiphandles floating point precision

    Skipped: pending spec clarification

Installation

$pnpm add @refraction-ui/react

Usage

tsx
import { TestResults } from '@refraction-ui/react'
import type { TestResultData } from '@refraction-ui/react'

const results: TestResultData[] = [
  { id: '1', name: 'adds two numbers', status: 'pass', durationMs: 3 },
  {
    id: '2',
    name: 'handles overflow',
    status: 'fail',
    expected: '0',
    actual: 'Infinity',
    message: 'Expected 0 but received Infinity',
  },
]

export function MyComponent() {
  return <TestResults results={results} />
}

TestResults props

PropTypeDefaultDescription
resultsTestResultData[]--Array of test case results to display.
showSummarybooleantrueWhen true, renders a summary bar showing "{passed}/{total} passed".
classNamestring--Additional CSS classes to apply to the container.

TestResultData shape

PropTypeDefaultDescription
idstring--Unique identifier for the test case.
namestring--Human-readable test name.
status'pass' | 'fail' | 'skip'--Execution status of the test.
durationMsnumber--How long the test took to run, in milliseconds.
expectedstring--Expected value — shown in the diff block when the test fails.
actualstring--Actual value received — shown in the diff block when the test fails.
messagestring--Error message on failure, skip reason, or other annotation.