AI Elements

Test Results

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.

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 UiTrace with a UiTraceCollapsible for the run and for each suite.

Installation

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

Usage

<template>
  <UiTrace>
    <UiTraceCollapsible>
      <UiTraceCollapsibleTrigger>
        <UiTraceLine status="error">
          <UiTraceIcon>
            <UiIcon name="lucide:flask-conical" />
          </UiTraceIcon>
          <UiTraceTitle>Ran 2 tests, 1 failed</UiTraceTitle>
        </UiTraceLine>
      </UiTraceCollapsibleTrigger>
      <UiTraceCollapsibleContent>
        <UiTrace>
          <UiTraceLine>
            <UiTraceIcon>
              <UiIcon name="lucide:check" />
            </UiTraceIcon>
            <UiTraceTitle>creates a user</UiTraceTitle>
          </UiTraceLine>
          <UiTraceCollapsible>
            <UiTraceCollapsibleTrigger>
              <UiTraceLine status="error">
                <UiTraceIcon>
                  <UiIcon name="lucide:x" />
                </UiTraceIcon>
                <UiTraceTitle>updates a user profile</UiTraceTitle>
              </UiTraceLine>
            </UiTraceCollapsibleTrigger>
            <UiTraceCollapsibleContent>
              <UiCodeBlock size="sm">
                <UiCodeBlockContent wrap class="max-h-64">
                  Expected status 200, received 500
                </UiCodeBlockContent>
              </UiCodeBlock>
            </UiTraceCollapsibleContent>
          </UiTraceCollapsible>
        </UiTrace>
      </UiTraceCollapsibleContent>
    </UiTraceCollapsible>
  </UiTrace>
</template>

Suites

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

creates a user

Skipped deletes a user

connects to the database

<template>
  <UiTraceCollapsible :default-open="failed > 0">
    <UiTraceCollapsibleTrigger>
      <UiTraceLine :status="failed > 0 ? 'error' : undefined">
        <UiTraceIcon>
          <FileCodeIcon />
        </UiTraceIcon>
        <UiTraceTitle>user-api.test.ts, 14 tests, 2 failed</UiTraceTitle>
      </UiTraceLine>
    </UiTraceCollapsibleTrigger>
    <UiTraceCollapsibleContent>
      <UiTrace>…</UiTrace>
    </UiTraceCollapsibleContent>
  </UiTraceCollapsible>
</template>

AI SDK

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

<template>
  <UiTraceCollapsible :default-open="failed > 0">
    <UiTraceCollapsibleTrigger>
      <UiTraceLine :status="failed > 0 ? 'error' : undefined">
        <UiTraceIcon>
          <FlaskConicalIcon />
        </UiTraceIcon>
        <UiTraceTitle>
          Ran {{ tests.length }} tests<template v-if="failed > 0">, {{ failed }} failed</template>
        </UiTraceTitle>
      </UiTraceLine>
    </UiTraceCollapsibleTrigger>
    <UiTraceCollapsibleContent>…</UiTraceCollapsibleContent>
  </UiTraceCollapsible>
</template>

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

API Reference

See Trace.

Terminal

Displays a command the agent runs, with its output as it streams.

Tool

Displays a tool call the agent makes, from input to output.