---
title: "Tests and budgets · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/tests-and-budgets
updated: 2026-10-20
licence: "All rights reserved"
---

# Tests and budgets

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> Test every component in every state, catch visual changes with screenshots, and give each route a size budget the build enforces.

**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`.

## Required

- [Test every state of every data view](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/component-state-tests): Write 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](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/route-bundle-budget): Give 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](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/visual-regression): Take 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](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/split-heavy-code): Load each route, and each widget over 20 kB compressed, such as a chart, an editor or a map, only when someone opens it.

- Previous: [Permissions, flags and failures](https://agentwranglers.se/playbook/app-ui/permissions-flags-and-failures)
- [All chapters](https://agentwranglers.se/playbook/app-ui)