Skill Tracer
Skills › Compound Engineering › ce-dogfood › test-matrix-taxonomy.md

test-matrix-taxonomy.md

62 lines · skills/ce-dogfood/references/test-matrix-taxonomy.md at 3449230

Open on GitHub
1# Test Matrix Taxonomy
2
3Use these dimensions to turn a branch diff into an exhaustive browser test matrix. Not every dimension applies to every change — pick the ones the diff actually touches, but err toward coverage. The goal is to test **complete user journeys**, not isolated widgets.
4

Test Matrix Taxonomy

Use these dimensions to turn a branch diff into an exhaustive browser test matrix. Not every dimension applies to every change — pick the ones the diff actually touches, but err toward coverage. The goal is to test complete user journeys, not isolated widgets.

Raw lines 1 to 4
5## 1. Journeys (the spine of the matrix)
6
7For each user-visible change, trace the full path a real user takes, end to end:
8
9- **Entry** — how does the user arrive? (link, redirect, notification, deep link)
10- **Action** — what do they do? (click, fill, submit, upload, drag)
11- **Result** — what should happen? (navigation, state change, message, side effect)
12- **Destination** — does it land them in the *right* place, with the *right* item focused/scrolled into view, showing the *right* data?
13- **Aftermath** — follow side effects to their real end state. If an email/notification/job fires, did it reach the right recipient with sensible content? If a record was created, does it appear correctly everywhere it should?
15The email test is the canonical example: "an email sends" is not a pass. Right recipient, click-through scrolls to the right message, content makes sense, whole flow coheres.

1. Journeys (the spine of the matrix)

For each user-visible change, trace the full path a real user takes, end to end:

  • Entry — how does the user arrive? (link, redirect, notification, deep link)
  • Action — what do they do? (click, fill, submit, upload, drag)
  • Result — what should happen? (navigation, state change, message, side effect)
  • Destination — does it land them in the right place, with the right item focused/scrolled into view, showing the right data?
  • Aftermath — follow side effects to their real end state. If an email/notification/job fires, did it reach the right recipient with sensible content? If a record was created, does it appear correctly everywhere it should?

The email test is the canonical example: "an email sends" is not a pass. Right recipient, click-through scrolls to the right message, content makes sense, whole flow coheres.

Raw lines 5 to 16
17## 2. Functional checks — "does it work?"
19- Primary content renders; headings/titles present.
20- Forms have the expected fields; validation accepts good input and rejects bad input with clear messages.
21- Buttons/links go where they claim; nothing dead-ends.
22- Data shown matches data saved (round-trip create -> view -> edit -> view).
23- No console errors or failed network requests during the journey (`agent-browser errors`).
24- Auth/permission boundaries hold (the right users can/can't do the thing).

2. Functional checks — "does it work?"

  • Primary content renders; headings/titles present.
  • Forms have the expected fields; validation accepts good input and rejects bad input with clear messages.
  • Buttons/links go where they claim; nothing dead-ends.
  • Data shown matches data saved (round-trip create -> view -> edit -> view).
  • No console errors or failed network requests during the journey (agent-browser errors).
  • Auth/permission boundaries hold (the right users can/can't do the thing).
Raw lines 17 to 25
26## 3. Experiential checks — "does it feel right?"
28- Does it align with the product's vision and existing UX patterns?
29- Is the copy clear and consistent with the rest of the app?
30- Are loading, success, and transition states present and unsurprising?
31- Does the layout look intentional, or is something visibly broken/misaligned?
32- Would a real user understand what to do without explanation?

3. Experiential checks — "does it feel right?"

  • Does it align with the product's vision and existing UX patterns?
  • Is the copy clear and consistent with the rest of the app?
  • Are loading, success, and transition states present and unsurprising?
  • Does the layout look intentional, or is something visibly broken/misaligned?
  • Would a real user understand what to do without explanation?
Raw lines 26 to 33
34### Persona paper cuts
36Walk each flow as each primary persona (from STRATEGY.md or PRODUCT.md "Users" — "Who it's for" in older strategy files — VISION.md, or a persona doc). A **paper cut** is small friction that passes functional tests but degrades the experience for that persona: confusing label, extra click, unexpected jump, slow-feeling step, missing feedback, copy that doesn't match how they think. Record the paper cut, which persona feels it, and severity. Functionally-passing scenarios can still carry paper cuts.

Persona paper cuts

Walk each flow as each primary persona (from STRATEGY.md or PRODUCT.md "Users" — "Who it's for" in older strategy files — VISION.md, or a persona doc). A paper cut is small friction that passes functional tests but degrades the experience for that persona: confusing label, extra click, unexpected jump, slow-feeling step, missing feedback, copy that doesn't match how they think. Record the paper cut, which persona feels it, and severity. Functionally-passing scenarios can still carry paper cuts.

Raw lines 34 to 37
38## 4. Edge, error, and empty states
40- **Empty:** no data yet — is there a sensible empty state, not a blank/broken page?
41- **Boundary:** very long text, zero, max values, special characters, unicode.
42- **Error:** server error, validation failure, expired session, lost network — handled gracefully?
43- **Concurrency / re-entry:** double-submit, back button, refresh mid-flow, stale tab.

4. Edge, error, and empty states

  • Empty: no data yet — is there a sensible empty state, not a blank/broken page?
  • Boundary: very long text, zero, max values, special characters, unicode.
  • Error: server error, validation failure, expired session, lost network — handled gracefully?
  • Concurrency / re-entry: double-submit, back button, refresh mid-flow, stale tab.
Raw lines 38 to 44
45## 5. Cross-cutting
47- **Responsiveness:** key pages at mobile and desktop widths.
48- **Accessibility:** focus order, labels on inputs, keyboard operability of new interactive elements.
49- **Regression:** adjacent journeys a change could plausibly have broken, even if not directly modified.

5. Cross-cutting

  • Responsiveness: key pages at mobile and desktop widths.
  • Accessibility: focus order, labels on inputs, keyboard operability of new interactive elements.
  • Regression: adjacent journeys a change could plausibly have broken, even if not directly modified.
Raw lines 45 to 50
51## Mapping files to routes
53| Changed file | Routes to test |
54|--------------|----------------|
55| `app/views/<x>/*`, `src/app/<x>/*` | The pages for `<x>` (index, show, new, edit) |
56| component files | Every page that renders the component |
57| layout / global stylesheet | All key pages (visual regression) — at minimum the homepage |
58| controller / route handler | The routes it serves |
59| helper / util used in views | Pages relying on it |
60| JS / Stimulus / client controller | Pages where that behavior is wired |
62Build the URL list from this mapping, then expand each URL into the journeys above.

Mapping files to routes

Changed fileRoutes to test
app/views/<x>/*, src/app/<x>/*The pages for <x> (index, show, new, edit)
component filesEvery page that renders the component
layout / global stylesheetAll key pages (visual regression) — at minimum the homepage
controller / route handlerThe routes it serves
helper / util used in viewsPages relying on it
JS / Stimulus / client controllerPages where that behavior is wired

Build the URL list from this mapping, then expand each URL into the journeys above.

Raw lines 51 to 62