Test pyramid and testing trophy

Choose the test mix whose observations justify its cost for this product.

Before you read: predict

EXH-1860 is a local media fixture. titleFor(x) returns x.trim(); card(item) renders that title and img.src=item.poster; page(item) adds data-state="published". The replay patches are titleFor=x=>x, img.src=item.thumbnail, and data-state="draft", applied separately. R asserts the function result for padded strings. S renders the card and asserts its image URL using {poster:'p',thumbnail:'t'}. T renders the page and asserts its dataset value. Each repetition is one maintained case with another input.

Which allocation rejects the replay set at the lowest case count?

The 30-second version

Define test levels by the boundaries that remain real and those replaced. Inspect assertions and inputs before counting confidence. A pyramid favors many fast, inexpensive checks; a trophy emphasizes integration plus static checks. Compare reproduced defects with maintenance cost, and let evidence from escapes change the mix.

Choose the test mix whose observations justify its cost for this product.

How it works

Step 1 of 10

Start with behavior. Name the user promise and plausible failure, rather than a coverage percentage or file count. Pyramid

Analogy: A sail loft preparing one sail for a harbour launch

The loft checks cloth seams on the bench, fits joined panels on a frame, then hoists the sail once at the harbour.

Sail loft observation	Test-mix observation
individual seam samples	isolated rule variations
joined panels on the frame	real pieces working together
sail hoisted on the boat	an assembled path's observed promise
time spent maintaining each inspection	the upkeep cost of retained cases

The loft keeps inspections that reveal different defects; another identical seam sample does not tell it whether the whole sail fits. Breaks down when: software has external services, timing or browser behavior. Their costs and boundaries need direct evidence, and the cloth analogy supplies none.

Examples, run for real

4.1 ExamHall: inspect a real composition (executed)

EXH-1860 is an authored candidate-app media fixture. Its local formatter, card renderer and document renderer execute together; jsdom supplies the document. There is no remote playback service. These facts describe the boundary, while the assertion describes what the test observes.

The teaching run formats an Observatory title and renders a Night sky card. Testing Library reads the actual image attribute. These values are separate from the assessed configurations.

teaching: title=Observatory; poster=art-sky

Seeing this result demonstrates those two observations. It does not establish a test-mix ratio or say which future fault a different assertion would expose. A team can record each observation beside the real collaborators it exercised before deciding which cases to retain.

4.2 Media streaming: budget evidence (worked application)

A video team can replay recorded failures against candidate suites, retaining a healthy control for each. A repeated mapping defect and a rare local formatting defect need not justify equal investment. Compare the observations gained by another case with its ongoing setup and assertion maintenance. This is the practical tension behind the pyramid and trophy, rather than a requirement to make a chart resemble either picture.

The local fixture grades case counts and changed assertions, not elapsed time, browser behavior or production confidence. Choosing which collaborator to substitute belongs to test-doubles-boundaries; query APIs and waiting belong to test-react-testing-library; real browser journeys belong to test-playwright-e2e.

Picture it

Concept illustration for this lesson. — An illustration to help it stick. The mechanism is in the sections above.

Try it

Answer first, then check. Nothing is saved.

Question 1 of 5

The media fixture has two titleFor assertions. A report shows a small preview where the release artwork belongs; the sample has {poster:'p1',thumbnail:'t1'}. Each offered addition has two cases.

Which addition exposes the reported rendering error?

Question 2 of 5

Ten archived release failures replay as follows: one titleFor=x=>x; seven img.src=item.thumbnail patches conditional on different IDs m1–m7; two data-state="draft" releases. A U case invokes the formatter on a padded string; an I case renders mN and compares its image URL to pN, with thumbnail tN; a J case renders a document and checks dataset.state against published. Additional I cases use m1, m2, … in order. Each U or J repeats its assertion on another input.

With capacity for ten maintained cases, which portfolio catches the most archived failures, breaking detection ties with fewer maintained cases?

Question 3 of 5

An image-tile release is checked with R: titleFor(" Meridian") === "Meridian"; S: the image attribute from card({title:"Meridian",poster:"p1",thumbnail:"t1"}) equals p1; T: page(item).dataset.state === "published". The replay queue contains titleFor=x=>x and img.src=item.thumbnail. Each repetition uses another input.

Which retained allocation rejects the queue with the fewest maintained cases?

Question 4 of 5

A playlist export renders the strings ["episode-11","episode-12","episode-13"] as list entries. The candidate implementation inserts selected.filter((_, i) => i !== 1) before rendering. rows contains the resulting list elements.

Which assertion passes on the release version and rejects the candidate?

Question 5 of 5

The suite runs these six rows: titleFor("Night")==="Night"; titleFor("Dawn")==="Dawn"; image-attribute comparisons for {title:'Night',poster:'p1',thumbnail:'p1'} against p1 and {title:'Dawn',poster:'p2',thumbnail:'t2'} against p2; page(item).dataset.state === "published" for those same two objects. Replay titleFor=x=>x, img.src=item.thumbnail, and data-state="draft" separately.

What is the report, in function/image/dataset order?

Go deeper

Pro tip

Record why each expensive test exists. Link it to an observed behavior and revisit that note when the implementation boundary changes. This makes a test portfolio easier to revise without treating its current shape as a permanent quota. Pyramid, trophy

Source

“healthy, fast and maintainable test suite”. Valid as of 2026-09-30.
Kent C. “Integration tests are those which test multiple units integrating with one another.” Valid as of 2026-09-30.
Vitest Test API and DOM Testing Library API are implementation API references, not assessment-key sources. Both saved conceptual snapshots carry URL, Read, SHA256 and Via metadata.

Checked against the tools and docs as of 2026-09-30.

Predict first