Plain-function tests with a tiny runner
Vitest's expect does the same job with a nicer message and a diff. The last check is wrong on purpose: its message names the expected and the real value.
Most of a chart's logic is plain functions (scales, shaping, rules) that a test can check in milliseconds. Test those first, check the marks in the DOM second, pin time zones, and treat screenshots as a last, small layer.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Vitest test for fileName(parts, ext): it must lower-case, replace odd characters with dashes and drop empty parts. Which inputs do you use?
Write a DOM test that drawBars with a negative number (rides: -5) does not put a negative height in the chart. What should the chart do?
Explain it without notes
Why test scales and data shaping before the DOM?
What would a good DOM test of a bar chart check?
How do you make a date test independent of the machine?
When is a visual regression test worth its cost?
Preview
Console
Nothing logged yet.Expected console output
PASS scale maps the ends and the middle
PASS nice() rounds the domain outwards
PASS equal values give the middle of the range
PASS missing input gives undefined, not NaN
PASS percentChange refuses to divide by zero
PASS describeChange says it in words
PASS ageText never prints a negative age
PASS csvCell quotes and defuses
PASS a late message is ignored
PASS counts are clamped to the docks
PASS emptiest sorts by share
PASS the same seed gives the same messages
FAIL (on purpose) a wrong expectation shows both numbers - expected 300 but got 280
12 passed, 1 failed (the one on purpose)