10.7k
New

Test Results

PreviousNext

Displays a test run by the agent, with its suites and failures.

Run the checkout tests.
charges the saved card
Expected 2 charge attempts, received 1

  at Object.<anonymous> (src/payment.test.ts:58:22)

One test failed. The payment client does not retry a declined card, so the second charge attempt never happens.

<script setup lang="ts">
import {
  CheckIcon,
  CircleDashedIcon,
  FileCodeIcon,
  FlaskConicalIcon,
  XIcon,
} from '@lucide/vue'
import { promiseTimeout, tryOnScopeDispose } from '@vueuse/core'
import { computed, ref } from 'vue'
import { Bubble, BubbleContent } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button'
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'
import { Message, MessageContent } from '@/components/ui/message'
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from '@/components/ui/trace'

interface Test {
  name: string
  status: 'passed' | 'failed' | 'skipped'
  error?: string
}

interface ToolPart {
  toolCallId: string
  state: 'input-available' | 'output-available' | 'output-error'
  input: { command: string }
  output?: { suites: { name: string, tests: Test[] }[] }
}

const QUESTION = 'Run the checkout tests.'
const ANSWER
  = 'One test failed. The payment client does not retry a declined card, so the second charge attempt never happens.'

const OUTPUT: NonNullable<ToolPart['output']> = {
  suites: [
    {
      name: 'cart.test.ts',
      tests: [
        { name: 'adds an item', status: 'passed' },
        { name: 'removes an item', status: 'passed' },
        { name: 'applies a discount code', status: 'passed' },
      ],
    },
    {
      name: 'payment.test.ts',
      tests: [
        { name: 'charges the saved card', status: 'passed' },
        {
          name: 'retries a declined card',
          status: 'failed',
          error: `Expected 2 charge attempts, received 1

  at Object.<anonymous> (src/payment.test.ts:58:22)`,
        },
      ],
    },
  ],
}

const part = ref<ToolPart | undefined>({
  toolCallId: 'tests',
  state: 'output-available',
  input: { command: 'pnpm test checkout' },
  output: OUTPUT,
})
const text = ref(ANSWER)
const busy = ref(false)

function countTests(tests: Test[]) {
  return {
    total: tests.length,
    failed: tests.filter(test => test.status === 'failed').length,
    skipped: tests.filter(test => test.status === 'skipped').length,
  }
}

function formatCounts({ total, failed, skipped }: ReturnType<typeof countTests>) {
  return [
    `${total} tests`,
    failed > 0 && `${failed} failed`,
    skipped > 0 && `${skipped} skipped`,
  ]
    .filter(Boolean)
    .join(', ')
}

const suites = computed(() =>
  (part.value?.output?.suites ?? []).map(suite => ({
    ...suite,
    counts: countTests(suite.tests),
  })),
)
const summary = computed(() =>
  countTests(suites.value.flatMap(suite => suite.tests)),
)

// Unmounting bumps `run`, so a running script stops at its next wait.
let run = 0
tryOnScopeDispose(() => run++)

async function wait(ms: number, id: number) {
  await promiseTimeout(ms)
  return id === run
}

async function replay() {
  const id = ++run
  busy.value = true
  text.value = ''

  part.value = {
    toolCallId: 'tests',
    state: 'input-available',
    input: { command: 'pnpm test checkout' },
  }
  if (!(await wait(1500, id)))
    return
  part.value = { ...part.value, state: 'output-available', output: OUTPUT }

  for (const word of ANSWER.split(/(?<= )/)) {
    if (!(await wait(20, id)))
      return
    text.value += word
  }

  busy.value = false
}
</script>

<template>
  <div class="flex min-h-72 w-full max-w-sm flex-col gap-4 py-6 text-sm">
    <Message align="end">
      <MessageContent>
        <Bubble align="end" variant="muted">
          <BubbleContent>{{ QUESTION }}</BubbleContent>
        </Bubble>
      </MessageContent>
    </Message>
    <Message v-if="part || text">
      <MessageContent class="gap-4">
        <Trace v-if="part">
          <TraceCollapsible
            v-if="part.state === 'output-available'"
            :default-open="summary.failed > 0"
            :unmount-on-hide="false"
          >
            <TraceCollapsibleTrigger>
              <TraceLine :status="summary.failed > 0 ? 'error' : undefined">
                <TraceIcon>
                  <FlaskConicalIcon />
                </TraceIcon>
                <TraceTitle>Ran {{ formatCounts(summary) }}</TraceTitle>
              </TraceLine>
            </TraceCollapsibleTrigger>
            <TraceCollapsibleContent>
              <Trace>
                <TraceCollapsible
                  v-for="suite in suites"
                  :key="suite.name"
                  :default-open="suite.counts.failed > 0"
                  :unmount-on-hide="false"
                >
                  <TraceCollapsibleTrigger>
                    <TraceLine :status="suite.counts.failed > 0 ? 'error' : undefined">
                      <TraceIcon>
                        <FileCodeIcon />
                      </TraceIcon>
                      <TraceTitle>
                        {{ suite.name }}, {{ formatCounts(suite.counts) }}
                      </TraceTitle>
                    </TraceLine>
                  </TraceCollapsibleTrigger>
                  <TraceCollapsibleContent>
                    <Trace>
                      <template v-for="test in suite.tests" :key="test.name">
                        <TraceCollapsible v-if="test.status === 'failed'" default-open>
                          <TraceCollapsibleTrigger>
                            <TraceLine status="error">
                              <TraceIcon>
                                <XIcon />
                              </TraceIcon>
                              <TraceTitle>{{ test.name }}</TraceTitle>
                            </TraceLine>
                          </TraceCollapsibleTrigger>
                          <TraceCollapsibleContent>
                            <CodeBlock size="sm">
                              <CodeBlockContent wrap class="max-h-64">
                                {{ test.error }}
                              </CodeBlockContent>
                            </CodeBlock>
                          </TraceCollapsibleContent>
                        </TraceCollapsible>
                        <TraceLine v-else>
                          <TraceIcon>
                            <CircleDashedIcon v-if="test.status === 'skipped'" />
                            <CheckIcon v-else />
                          </TraceIcon>
                          <TraceTitle>
                            {{ test.status === 'skipped' ? `Skipped ${test.name}` : test.name }}
                          </TraceTitle>
                        </TraceLine>
                      </template>
                    </Trace>
                  </TraceCollapsibleContent>
                </TraceCollapsible>
              </Trace>
            </TraceCollapsibleContent>
          </TraceCollapsible>
          <TraceLine
            v-else
            :status="busy && part.state !== 'output-error' ? 'running' : 'error'"
          >
            <TraceIcon>
              <FlaskConicalIcon />
            </TraceIcon>
            <TraceTitle>
              {{ busy && part.state !== 'output-error' ? 'Running' : 'Failed to run' }} {{ part.input.command }}
            </TraceTitle>
          </TraceLine>
        </Trace>
        <p v-if="text">
          {{ text }}
        </p>
      </MessageContent>
    </Message>
    <Button
      v-if="!busy"
      variant="outline"
      size="sm"
      class="mt-auto self-start"
      @click="replay"
    >
      Replay
    </Button>
  </div>
</template>

Test Results is a test run by the agent. The summary line counts what passed and failed. Open it to see each suite, its tests, and the error for each failure.

Test Results is built with Trace with a TraceCollapsible for the run and for each suite.

Installation

Test Results is built with the Trace and Code Block components.

pnpm dlx shadcn-vue@latest add trace code-block

Usage

<script setup lang="ts">
import { CheckIcon, FlaskConicalIcon, XIcon } from '@lucide/vue'
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from '@/components/ui/trace'
</script>

<template>
  <Trace>
    <TraceCollapsible>
      <TraceCollapsibleTrigger>
        <TraceLine status="error">
          <TraceIcon>
            <FlaskConicalIcon />
          </TraceIcon>
          <TraceTitle>Ran 2 tests, 1 failed</TraceTitle>
        </TraceLine>
      </TraceCollapsibleTrigger>
      <TraceCollapsibleContent>
        <Trace>
          <TraceLine>
            <TraceIcon>
              <CheckIcon />
            </TraceIcon>
            <TraceTitle>creates a user</TraceTitle>
          </TraceLine>
          <TraceCollapsible>
            <TraceCollapsibleTrigger>
              <TraceLine status="error">
                <TraceIcon>
                  <XIcon />
                </TraceIcon>
                <TraceTitle>updates a user profile</TraceTitle>
              </TraceLine>
            </TraceCollapsibleTrigger>
            <TraceCollapsibleContent>
              <CodeBlock size="sm">
                <CodeBlockContent wrap class="max-h-64">
                  Expected status 200, received 500
                </CodeBlockContent>
              </CodeBlock>
            </TraceCollapsibleContent>
          </TraceCollapsible>
        </Trace>
      </TraceCollapsibleContent>
    </TraceCollapsible>
  </Trace>
</template>

Suites

Group tests by file. Each suite is a collapsible line with a Trace of its tests. Open the suites that have a failure.

creates a user
Skipped deletes a user
connects to the database
<script setup lang="ts">
import {
  CheckIcon,
  CircleDashedIcon,
  FileCodeIcon,
  FlaskConicalIcon,
  XIcon,
} from '@lucide/vue'
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from '@/components/ui/trace'

interface Test {
  name: string
  status: 'passed' | 'failed' | 'skipped'
  error?: string
}

const suites: { name: string, tests: Test[] }[] = [
  {
    name: 'auth.test.ts',
    tests: [
      { name: 'logs in with valid credentials', status: 'passed' },
      { name: 'rejects an invalid password', status: 'passed' },
      { name: 'refreshes an expired token', status: 'passed' },
    ],
  },
  {
    name: 'user-api.test.ts',
    tests: [
      { name: 'creates a user', status: 'passed' },
      {
        name: 'updates a user profile',
        status: 'failed',
        error: `Expected status 200, received 500

  at Object.<anonymous> (src/user-api.test.ts:45:12)`,
      },
      { name: 'deletes a user', status: 'skipped' },
    ],
  },
  {
    name: 'db.test.ts',
    tests: [
      { name: 'connects to the database', status: 'passed' },
      {
        name: 'times out a slow query',
        status: 'failed',
        error: `Exceeded timeout of 5000 ms for a test.

  at Object.<anonymous> (src/db.test.ts:22:3)`,
      },
    ],
  },
]

function countTests(tests: Test[]) {
  return {
    total: tests.length,
    failed: tests.filter(test => test.status === 'failed').length,
    skipped: tests.filter(test => test.status === 'skipped').length,
  }
}

function formatCounts({ total, failed, skipped }: ReturnType<typeof countTests>) {
  return [
    `${total} tests`,
    failed > 0 && `${failed} failed`,
    skipped > 0 && `${skipped} skipped`,
  ]
    .filter(Boolean)
    .join(', ')
}

const summary = countTests(suites.flatMap(suite => suite.tests))
</script>

<template>
  <Trace class="max-w-sm">
    <TraceCollapsible default-open :unmount-on-hide="false">
      <TraceCollapsibleTrigger>
        <TraceLine :status="summary.failed > 0 ? 'error' : undefined">
          <TraceIcon>
            <FlaskConicalIcon />
          </TraceIcon>
          <TraceTitle>Ran {{ formatCounts(summary) }}</TraceTitle>
        </TraceLine>
      </TraceCollapsibleTrigger>
      <TraceCollapsibleContent>
        <Trace>
          <TraceCollapsible
            v-for="suite in suites"
            :key="suite.name"
            :default-open="countTests(suite.tests).failed > 0"
            :unmount-on-hide="false"
          >
            <TraceCollapsibleTrigger>
              <TraceLine :status="countTests(suite.tests).failed > 0 ? 'error' : undefined">
                <TraceIcon>
                  <FileCodeIcon />
                </TraceIcon>
                <TraceTitle>
                  {{ suite.name }}, {{ formatCounts(countTests(suite.tests)) }}
                </TraceTitle>
              </TraceLine>
            </TraceCollapsibleTrigger>
            <TraceCollapsibleContent>
              <Trace>
                <template v-for="test in suite.tests" :key="test.name">
                  <TraceCollapsible v-if="test.status === 'failed'">
                    <TraceCollapsibleTrigger>
                      <TraceLine status="error">
                        <TraceIcon>
                          <XIcon />
                        </TraceIcon>
                        <TraceTitle>{{ test.name }}</TraceTitle>
                      </TraceLine>
                    </TraceCollapsibleTrigger>
                    <TraceCollapsibleContent>
                      <CodeBlock size="sm">
                        <CodeBlockContent wrap class="max-h-64">
                          {{ test.error }}
                        </CodeBlockContent>
                      </CodeBlock>
                    </TraceCollapsibleContent>
                  </TraceCollapsible>
                  <TraceLine v-else>
                    <TraceIcon>
                      <CircleDashedIcon v-if="test.status === 'skipped'" />
                      <CheckIcon v-else />
                    </TraceIcon>
                    <TraceTitle>
                      {{ test.status === 'skipped' ? `Skipped ${test.name}` : test.name }}
                    </TraceTitle>
                  </TraceLine>
                </template>
              </Trace>
            </TraceCollapsibleContent>
          </TraceCollapsible>
        </Trace>
      </TraceCollapsibleContent>
    </TraceCollapsible>
  </Trace>
</template>
<template>
  <TraceCollapsible :default-open="failed > 0">
    <TraceCollapsibleTrigger>
      <TraceLine :status="failed > 0 ? 'error' : undefined">
        <TraceIcon>
          <FileCodeIcon />
        </TraceIcon>
        <TraceTitle>user-api.test.ts, 14 tests, 2 failed</TraceTitle>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>
      <Trace>…</Trace>
    </TraceCollapsibleContent>
  </TraceCollapsible>
</template>

AI SDK

Run the tests as a tool and render its output. The tool states map the same way as in Tool.

<script setup lang="ts">
const tests = computed(() => props.part.output.suites.flatMap(suite => suite.tests))
const failed = computed(() => tests.value.filter(test => test.status === 'failed').length)
</script>

<template>
  <TraceCollapsible :default-open="failed > 0">
    <TraceCollapsibleTrigger>
      <TraceLine :status="failed > 0 ? 'error' : undefined">
        <TraceIcon>
          <FlaskConicalIcon />
        </TraceIcon>
        <TraceTitle>
          Ran {{ tests.length }} tests<template v-if="failed > 0">, {{ failed }} failed</template>
        </TraceTitle>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>…</TraceCollapsibleContent>
  </TraceCollapsible>
</template>

Migrating from AI Elements Vue

If you added Test Results from AI Elements Vue, your project has a components/ai-elements/test-results/ folder. Paste this prompt into your coding agent to rebuild it on Trace and Code Block. Every export keeps its name and props, so the code that uses it keeps working.

Migrate components/ai-elements/test-results/ from AI Elements Vue to the shadcn-vue Trace and Code Block components.

Keep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.

1. Install the components: npx shadcn-vue@latest add trace code-block
2. Read https://www.shadcn-vue.com/docs/ai-elements/test-results and build Test Results the same way.
3. Rebuild each part:
   - Import CodeBlock and CodeBlockContent from @/components/ui/code-block, not from ../code-block.
   - TestResults renders a Trace with a TraceCollapsible. Keep summary.
   - TestResultsHeader renders a TraceCollapsibleTrigger with a TraceLine, and TestResultsSummary a TraceTitle with the counts, like "Ran 42 tests, 2 failed". Set status="error" when a test failed.
   - TestResultsContent renders a TraceCollapsibleContent with a Trace for the suites.
   - TestSuite renders a TraceCollapsible, open when it has a failure. TestSuiteName renders a TraceCollapsibleTrigger with a TraceLine, and TestSuiteContent a TraceCollapsibleContent with a Trace for the tests.
   - Test renders a TraceLine with a TraceTitle for its name. Set status="error" when it failed.
   - TestError renders a CodeBlock with size="sm", with TestErrorMessage and TestErrorStack in a CodeBlockContent.
   - Keep TestResultsDuration, TestResultsProgress, TestSuiteStats, TestName, TestDuration and TestStatus as they are.
4. Remove the imports the files no longer use.
5. Run vue-tsc and fix any errors.

API Reference

See Trace.

TerminalTool