Automated Test Report Changelog Block for React

Edit SUITES at the top of the file. A suite has its passed, failed and skipped counts and a list of flaky tests (each a name and how many retries it took). The suite's total, the bar's slices, the counts under it, the page total and the pass rate are all computed from those numbers, so the bar, the text and the headline always agree.

A test that failed at first and passed after a retry. It is counted once, as flaky, in the total and in the pass rate (it did pass), and drawn with the hatched pattern. The popover lists each flaky test and how many retries it took.

By pattern and word: solid for passed, hatched for flaky, an outline for failed, dots for skipped, with the same patterns in the key. Each slice also appears as a count in words under the bar, and the bar itself is a labelled image whose text lists the counts.

The trigger is a button; Enter or Space opens the list, Escape closes it and focus returns to the trigger. Suites without flaky tests say "No flaky tests" instead of a trigger.

On a phone the flaky trigger sits beside the suite's name and the counts wrap under the bar. Bars are always drawn from the start of the suite in reading order of the key; in a right-to-left layout the rest of the block mirrors while numbers keep their reading order.

The header and the suites fade up once on load, with CSS transitions, and the popover animates open. With reduced motion they are off.