Agent WranglersTests and budgets
Test every component in every state, catch visual changes with screenshots, and give each route a size budget the build enforces.
- Required 2
- Recommended 2
Required
Test every state of every data view
RequiredWrite a component test for each state of each data view. Fake the network at the request level, and find elements by role and name.
Give each route a size budget
RequiredGive the first screen and each route its own budget for compressed JavaScript, and fail the build when a change goes over it.
Recommended
Compare screenshots of every component state
RecommendedTake a screenshot of every catalogue story at a phone and a desktop width, in light and dark mode. Fail the build when one changes without a new baseline.
Load heavy parts when they are needed
RecommendedLoad each route, and each widget over 20 kB compressed, such as a chart, an editor or a map, only when someone opens it.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/tests-and-budgets.