shadcn.io is not affiliated with official shadcn/ui
QA Tester Profile Block for Ark UI
A QA tester coverage report where a segmented control counts all, automated or manual cases across five modules, each opening to its untested areas, with an overall figure and a seven-sprint defect trend.
Installation
Overview
Show how well a product is tested with this QA profile for React with Ark UI. A compact header holds the title, one sentence and a Segment Group that counts All, Automated or Manual cases. The frame under it opens on the tester with the overall coverage as a large figure, then a list of five modules, each with a coverage bar, a covered-of-total count and a percentage that follow the choice. Pressing a module opens a Collapsible with its three untested areas, one open at a time. In the end side cell seven bars show open defects per sprint, with a line that works out the change from the first to the last. The status line names the least covered module. Every percentage is worked out from typed test counts. It's built from Segment Group, Collapsible, Avatar and Guides, with CSS bars and a CSS entrance only. For a test-management tool, a release readiness page or any profile that reports coverage.
FAQ
How do I use my own modules?
Edit MODULES: each has a total, an automated count, a manual count and three untested areas. SPRINTS holds the defect counts. Coverage is covered over total, where All adds automated and manual, so keep the two counts from overlapping.
What does the segmented control change?
It decides which cases count as covered. Every module bar, the overall figure, the percentages and the Least covered line are recomputed, and the note over the list says what is being counted.
How is the defect trend worked out?
The line compares the first sprint with the last and says whether open defects went down or up. The bars are scaled to the highest sprint, with each count printed above its bar.
Is any of this connected to a test runner?
No. All counts are typed in the file. To make it real, load the totals from your test-management API and keep the control and the open module in state.
Is it accessible?
The segmented control is named by its label, each module title is a heading with a button inside it that reports expanded or collapsed, and the bars are decorative because their numbers are in text. The status line is a polite live region. The sprint bars run left to right in every language.