CoverageList
<caos-coverage-list>
per-artifact code coverage, ordered worst-first and marked against a required floor
May be placed on a page inside an app and a record page.
Inputs
Section titled “Inputs”| Name | Attribute | Description | Type | Default | Required |
|---|---|---|---|---|---|
entries |
property only | The artifacts to list: { name, covered, total }[], where the two numbers are LINE COUNTS rather than a pre-computed percentage — the component derives the percentage so that “no executable lines” stays distinguishable from “zero percent covered”. A property, because it is structured data. |
json | none declared | Optional |
required |
required, markup only |
The coverage floor, in percent. Rows below it are marked in text as well as colour. | number | 75 | Optional |
order |
order, markup only |
How the rows are ordered. coverage (the default) is worst-first, for deciding what is blocking a deploy; name is alphabetical, for looking up a known artifact. |
text — one of coverage, name | coverage | Optional |
emptyText |
empty-text, markup only |
What to say when no coverage has been reported. | text | No coverage reported. | Optional |
Events
Section titled “Events”Not documented yet — this piece has not said.
Not documented yet — this piece has not said.
Styling hooks
Section titled “Styling hooks”Not documented yet — this piece has not said.
Methods
Section titled “Methods”Not documented yet — this piece has not said.
Readable state
Section titled “Readable state”| Name | Type | What it tells you |
|---|---|---|
below |
CaosCoverageEntry[] | The artifacts under the floor, worst first. Uncoverable artifacts are absent by construction — they have no percentage to be below anything. Worst first whatever order is set to, because this is a work list rather than a view. Read it to gate an action, or to drive a “fix these” list elsewhere, without recomputing the rule. |
required |
number | The floor currently in force, resolved from the attribute or the default. |
Styling parts
Section titled “Styling parts”| Part | Which piece of it | When it is there |
|---|---|---|
::part(list) |
The outer column. | Always |
::part(summary) |
The “N below X%” verdict line. | Always |
::part(row) |
One artifact’s row. | Always |
::part(name) |
The artifact name. | Always |
::part(bar) |
The coverage bar in a row. | Always |
::part(percent) |
The percentage, or “no lines”. | Always |
When to use it
Section titled “When to use it”On a test-results surface, where coverage gates something and the reader needs to know what is blocking them.
What to use instead
Section titled “What to use instead”- DataTable — coverage is one column among many being sorted, filtered and exported — a table is for comparing values, this list is for finding what is short.
- UsageBar — there is a single aggregate coverage figure rather than a per-artifact breakdown.
Accessibility
Section titled “Accessibility”The summary is a role="status" live region, so a completed run that drops an artifact below the floor is announced rather than only redrawn. Each row carries an aria-label reading the name, the percentage, the line counts and — when it applies — that it is below the requirement, so being short is spoken rather than conveyed only by the red. Uncoverable rows say “no executable lines” rather than reading as zero.
Examples
Section titled “Examples”What is blocking the deploy
Section titled “What is blocking the deploy”The default order. Three artifacts are short of the floor and they are the first three rows, so the question the screen is open to answer is answered without scanning.
{ "id": "example", "section": "What is blocking the deploy", "columns": 1, "items": [ { "id": "coverage_list_1", "type": "component", "key": "coverage_list", "inputs": { "entries": [ { "name": "BillingService", "covered": 412, "total": 455 }, { "name": "AccountTrigger", "covered": 31, "total": 104 }, { "name": "InvoiceHelper", "covered": 148, "total": 200 }, { "name": "QuoteCalculator", "covered": 66, "total": 120 }, { "name": "OrderSyncBatch", "covered": 290, "total": 300 } ] } } ]}<caos-coverage-list id="coverageList1"></caos-coverage-list>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const coverageList1 = document.getElementById('coverageList1');coverageList1.entries = [ { "name": "BillingService", "covered": 412, "total": 455 }, { "name": "AccountTrigger", "covered": 31, "total": 104 }, { "name": "InvoiceHelper", "covered": 148, "total": 200 }, { "name": "QuoteCalculator", "covered": 66, "total": 120 }, { "name": "OrderSyncBatch", "covered": 290, "total": 300 }];An artifact with nothing to cover
Section titled “An artifact with nothing to cover”A constants file and a type-only module have no executable lines. They read “no lines”, sort to the END of a worst-first list, and count in neither the shortfall nor the measured total — scoring them zero would pin them to the top for ever while nothing was wrong.
{ "id": "example", "section": "An artifact with nothing to cover", "columns": 1, "items": [ { "id": "coverage_list_1", "type": "component", "key": "coverage_list", "inputs": { "entries": [ { "name": "PricingConstants", "covered": 0, "total": 0 }, { "name": "BillingTypes", "covered": 0, "total": 0 }, { "name": "AccountTrigger", "covered": 31, "total": 104 }, { "name": "OrderSyncBatch", "covered": 290, "total": 300 } ] } } ]}<caos-coverage-list id="coverageList1"></caos-coverage-list>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const coverageList1 = document.getElementById('coverageList1');coverageList1.entries = [ { "name": "PricingConstants", "covered": 0, "total": 0 }, { "name": "BillingTypes", "covered": 0, "total": 0 }, { "name": "AccountTrigger", "covered": 31, "total": 104 }, { "name": "OrderSyncBatch", "covered": 290, "total": 300 }];A stricter requirement
Section titled “A stricter requirement”The same artifacts against a 90% floor. The shortfall is a function of the requirement, not a property of the numbers, so moving the floor moves the count and the colours together.
{ "id": "example", "section": "A stricter requirement", "columns": 1, "items": [ { "id": "coverage_list_1", "type": "component", "key": "coverage_list", "inputs": { "required": 90, "entries": [ { "name": "BillingService", "covered": 412, "total": 455 }, { "name": "InvoiceHelper", "covered": 148, "total": 200 }, { "name": "OrderSyncBatch", "covered": 290, "total": 300 } ] } } ]}<caos-coverage-list id="coverageList1" required="90"></caos-coverage-list>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const coverageList1 = document.getElementById('coverageList1');coverageList1.entries = [ { "name": "BillingService", "covered": 412, "total": 455 }, { "name": "InvoiceHelper", "covered": 148, "total": 200 }, { "name": "OrderSyncBatch", "covered": 290, "total": 300 }];Looking one up
Section titled “Looking one up”Alphabetical, for the other task: somebody who can already name the artifact and wants its number. The shortfall read off below stays worst-first regardless — it is a work list.
{ "id": "example", "section": "Looking one up", "columns": 1, "items": [ { "id": "coverage_list_1", "type": "component", "key": "coverage_list", "inputs": { "order": "name", "entries": [ { "name": "BillingService", "covered": 412, "total": 455 }, { "name": "AccountTrigger", "covered": 31, "total": 104 }, { "name": "InvoiceHelper", "covered": 148, "total": 200 } ] } } ]}<caos-coverage-list id="coverageList1" order="name"></caos-coverage-list>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const coverageList1 = document.getElementById('coverageList1');coverageList1.entries = [ { "name": "BillingService", "covered": 412, "total": 455 }, { "name": "AccountTrigger", "covered": 31, "total": 104 }, { "name": "InvoiceHelper", "covered": 148, "total": 200 }];