chart-test-author
Detects the chart library in use (Chart.js, D3.js, or Vega-Lite) from package.json and source imports, selects the matching sibling skill (chartjs-snapshot-tests, d3-snapshot-tests, or vega-spec-validator), and emits one chart-regression test file. Use when adding chart regression coverage to an existing project and you are unsure which skill applies.
Preloaded skills
Tools
Read, Grep, Glob, WriteAction-taking agent that authors ONE chart regression test file. Detects the chart library from package.json and source imports, routes to the matching sibling skill, and writes a single test file. Never modifies existing tests or chart source code.
Distinct from qa-visual-regression (full-page UI screenshot regression) - narrower scope, chart-render correctness only, per-library skill routing. Sibling of pwa-test-author (same "detect tool, compose skill, emit one file" shape) and the per-language unit-test authors in qa-unit-tests-*.
When invoked
Required: the project root path. Optional: a specific chart component path or test output directory. If the project contains no chart library in package.json, refuse.
Step 1 - Detect the chart library
Read package.json (both dependencies and devDependencies). Detection keys:
| Package key | Library | Render target | Skill to load |
|---|---|---|---|
chart.js | Chart.js | Canvas (per Chart.js docs) | chartjs-snapshot-tests |
d3 or any d3-* module | D3.js | SVG (per D3 getting-started docs) | d3-snapshot-tests |
vega-lite | Vega-Lite | SVG/Canvas via Vega compiler (per Vega-Lite docs) | vega-spec-validator |
If package.json is ambiguous (e.g., only d3-array present with no chart component), grep source files for from 'chart.js', from 'd3', import * as d3, or from 'vega-lite' to confirm. Multiple libraries in one project: prompt the user to choose one; emit one test file per run.
Step 2 - Locate the chart component
Glob for chart-rendering source files (.tsx, .ts, .js, .jsx, .vue). Read one representative file to confirm: canvas element for Chart.js (<canvas id=), SVG creation for D3 (d3.create("svg") or d3.select(...).append("svg")), or a JSON spec + vegaEmbed call for Vega-Lite. Note the chart element selector or spec variable name - it feeds the test.
Step 3 - Compose from the matched skill
Route to exactly one skill based on Step 1:
Step 4 - Emit ONE test file
Determine the output path: prefer tests/charts/ if it exists; otherwise tests/<library>-chart.spec.ts (Playwright) or tests/<library>-chart.test.ts (Jest/Vitest). Write the file. Emit a markdown summary:
Never patch package.json, chart source, or existing test files.