Test Results Tree

ProNew

A tree of suites and tests with pass, fail and skip written out, durations, counts that roll up and a switch to show only failures. Use this when a run has hundreds of tests and the reader wants the broken ones first.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

defaultFailuresOnly

Guide and examples

When to use it

Use it for CI dashboards, test report pages and any run where suites contain many results and a few failures matter most.

Do not use it for a single list of checks (use a list) or for logs (use log-groups-virtual-tree).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`suites`	`TreeNode<TestData>[]`	-	Suites with test leaves carrying `data: { outcome, ms?, message? }`.
`defaultFailuresOnly`	`boolean`	`false`	Start with only failures shown.

Accessibility

Outcome and duration are in each row's accessible name; the icon is decorative.
A suite adds ", n failed" to its name; failure messages are shown under the failing test.
The switch is a real switch with a label; the totals are a polite live region.

Testing

The pattern ships with a Testing Library test (test-results-tree.test.tsx) that covers counts, spoken outcomes, failure messages and the failures-only switch.

Guide and examples

When to use it

Use it for CI dashboards, test report pages and any run where suites contain many results and a few failures matter most.

Do not use it for a single list of checks (use a list) or for logs (use log-groups-virtual-tree).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`suites`	`TreeNode<TestData>[]`	-	Suites with test leaves carrying `data: { outcome, ms?, message? }`.
`defaultFailuresOnly`	`boolean`	`false`	Start with only failures shown.

Accessibility

Outcome and duration are in each row's accessible name; the icon is decorative.
A suite adds ", n failed" to its name; failure messages are shown under the failing test.
The switch is a real switch with a label; the totals are a polite live region.

Testing

The pattern ships with a Testing Library test (test-results-tree.test.tsx) that covers counts, spoken outcomes, failure messages and the failures-only switch.