TestRunGrid

<caos-test-run-grid>

choose test classes and methods for a run, with the run options and the abort

May be placed on a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
classes	property only	What can be run: { name, methods }[]. A selection naming a test that is no longer in the list is dropped, so the count at the top never claims more than a run would contain.	json	empty list	Optional
selected	property only	The tests picked in, as Class.method keys. Settable, so a surface can restore a selection.	json	empty list	Optional
failed	property only	Which tests failed in the last run, as Class.method keys. Marks them in the list and drives “Select what failed”.	json	empty list	Optional
running	running, markup only	A run is in flight. The primary control becomes Abort — a real control raising its own event, not the run button greyed out.	boolean	false	Optional
openWhenFinished	open-when-finished, markup only	Run option: show the run as soon as it finishes.	boolean	false	Optional
skipCoverage	skip-coverage, markup only	Run option: do not gather coverage. Faster, which is why somebody turns it off.	boolean	false	Optional
alwaysAsynchronous	always-asynchronous, markup only	Run option: always run asynchronously, even for a selection small enough to run inline.	boolean	false	Optional
emptyText	empty-text, markup only	What to say when there are no test classes.	text	No test classes found.	Optional

Events

Name	When it fires	What it carries
caos-test-run	Run is pressed with something selected.	{ tests, options } — the three run options travel WITH the run rather than being remembered here, because they change what the application does with a run it has been asked for.
caos-test-abort	Abort is pressed while running.	nothing
caos-test-selection	The selection changes, by any of the three ways it can be changed.	{ selected }.
caos-test-options	A run option is toggled.	The three options as an object.

Slots

Not documented yet — this piece has not said.

Styling hooks

Not documented yet — this piece has not said.

Methods

Not documented yet — this piece has not said.

Readable state

Name	Type	What it tells you
selected	string[]	The picked tests, in the order the classes are listed.
options	CaosTestRunOptions	The three run options as they currently stand.
totalMethods	number	How many tests there are in total.

Styling parts

Part	Which piece of it	When it is there
::part(grid)	The outer column.	Always
::part(summary)	The “N of M tests selected” line.	Always
::part(options)	The run-option row.	Always
::part(option)	One run option.	Always
::part(classes)	The scrolling list of classes.	Always
::part(class)	One class and its methods.	Always
::part(class-toggle)	A class’s own row and tri-state box.	Always
::part(methods)	The methods under a class.	Always
::part(method)	One method’s row.	Always
::part(actions)	The run and re-run cluster.	Always
::part(run)	The run button, which becomes Abort while running.	Always
::part(rerun-failed)	The “select what failed” button.	Always

When to use it

Wherever somebody chooses a subset of a large, two-level set to act on. It is written for tests, and the shape — classes with methods, tri-state parents, a count of what is picked — is the general one.

What to use instead

• TestResultTable — the run has happened and the question is what it DID.
• Tree — the hierarchy is deeper than two levels, or is being navigated rather than selected from.

Accessibility

A partly-selected class sets indeterminate on its own box rather than showing empty, so the class row actually reports what is under it — that is what makes a hundred checkboxes into a control. Every box carries its own accessible name: a class names itself and its method count, a method names itself as Class.method and says “failed last run” when it did, so failure is spoken rather than conveyed by the red alone. The count line is a role="status" live region, so ticking a class announces what that actually selected. “Select what failed” is disabled, not hidden, with nothing failed — an absent control would read as “this run had no failures” on a screen that has not run anything.

Examples

Three methods out of two classes

The case a flat list of checkboxes cannot show: one class fully picked, one partly. The partly-picked class reports it on its own box rather than looking empty.

{
  "id": "example",
  "section": "Three methods out of two classes",
  "columns": 1,
  "items": [
    {
      "id": "test_run_grid_1",
      "type": "component",
      "key": "test_run_grid",
      "inputs": {
        "selected": [
          "BillingServiceTest.chargesTax",
          "BillingServiceTest.roundsHalfUp",
          "AccountTriggerTest.insertsHandler"
        ],
        "classes": [
          {
            "name": "BillingServiceTest",
            "methods": [
              "chargesTax",
              "roundsHalfUp",
              "splitsByLine",
              "refundsWhole"
            ]
          },
          {
            "name": "AccountTriggerTest",
            "methods": [
              "insertsHandler"
            ]
          },
          {
            "name": "QuoteCalculatorTest",
            "methods": [
              "appliesDiscount",
              "clampsToFloor"
            ]
          }
        ]
      }
    }
  ]
}

<caos-test-run-grid id="testRunGrid1"></caos-test-run-grid>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const testRunGrid1 = document.getElementById('testRunGrid1');
testRunGrid1.selected = [
  "BillingServiceTest.chargesTax",
  "BillingServiceTest.roundsHalfUp",
  "AccountTriggerTest.insertsHandler"
];
testRunGrid1.classes = [
  {
    "name": "BillingServiceTest",
    "methods": [
      "chargesTax",
      "roundsHalfUp",
      "splitsByLine",
      "refundsWhole"
    ]
  },
  {
    "name": "AccountTriggerTest",
    "methods": [
      "insertsHandler"
    ]
  },
  {
    "name": "QuoteCalculatorTest",
    "methods": [
      "appliesDiscount",
      "clampsToFloor"
    ]
  }
];

After a run with failures

The failed tests are marked in the list and “Select what failed” is enabled. Pressing it REPLACES the selection — re-running what failed means what failed.

{
  "id": "example",
  "section": "After a run with failures",
  "columns": 1,
  "items": [
    {
      "id": "test_run_grid_1",
      "type": "component",
      "key": "test_run_grid",
      "inputs": {
        "failed": [
          "BillingServiceTest.roundsHalfUp",
          "QuoteCalculatorTest.clampsToFloor"
        ],
        "classes": [
          {
            "name": "BillingServiceTest",
            "methods": [
              "chargesTax",
              "roundsHalfUp",
              "splitsByLine"
            ]
          },
          {
            "name": "QuoteCalculatorTest",
            "methods": [
              "appliesDiscount",
              "clampsToFloor"
            ]
          }
        ]
      }
    }
  ]
}

<caos-test-run-grid id="testRunGrid1"></caos-test-run-grid>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const testRunGrid1 = document.getElementById('testRunGrid1');
testRunGrid1.failed = [
  "BillingServiceTest.roundsHalfUp",
  "QuoteCalculatorTest.clampsToFloor"
];
testRunGrid1.classes = [
  {
    "name": "BillingServiceTest",
    "methods": [
      "chargesTax",
      "roundsHalfUp",
      "splitsByLine"
    ]
  },
  {
    "name": "QuoteCalculatorTest",
    "methods": [
      "appliesDiscount",
      "clampsToFloor"
    ]
  }
];

A run in flight

Abort is a real control raising its own event, not the run button greyed out.

{
  "id": "example",
  "section": "A run in flight",
  "columns": 1,
  "items": [
    {
      "id": "test_run_grid_1",
      "type": "component",
      "key": "test_run_grid",
      "inputs": {
        "running": true,
        "skip_coverage": true,
        "selected": [
          "BillingServiceTest.chargesTax"
        ],
        "classes": [
          {
            "name": "BillingServiceTest",
            "methods": [
              "chargesTax",
              "roundsHalfUp"
            ]
          }
        ]
      }
    }
  ]
}

<caos-test-run-grid id="testRunGrid1" running skip-coverage></caos-test-run-grid>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const testRunGrid1 = document.getElementById('testRunGrid1');
testRunGrid1.selected = [
  "BillingServiceTest.chargesTax"
];
testRunGrid1.classes = [
  {
    "name": "BillingServiceTest",
    "methods": [
      "chargesTax",
      "roundsHalfUp"
    ]
  }
];