Testing

Coframe Agent includes a built-in testing panel powered by vitest — the same test runner used in production development. Tests run in the sandbox environment alongside your code, so results reflect the real behavior of your changes.

The Tests panel

The Tests panel gives you a live view of your test suite:

• Test results — pass, fail, and skip counts for every test file.
• Requirement mapping — tests are linked to requirements, so you can see which requirements have passing coverage and which don’t.
• Real-time streaming — results appear as tests complete, streamed over a WebSocket reporter.
• Error details — failed tests show the full assertion message and stack trace.

How it works

1. The agent starts a vitest process in the sandbox when tests are needed.
2. A custom WebSocket reporter streams results to the Tests panel as they complete.
3. Results are mapped to requirements when test names reference them, giving you traceability from requirement to verification.
4. The agent can restart vitest to re-run after making fixes.

Storybook integration

Beyond unit and integration tests, Coframe Agent also runs a Storybook dev server in the sandbox:

• Component isolation — see individual components rendered in isolation.
• Visual verification — the agent can check Storybook stories to verify component-level changes look correct.
• Design system work — when you’re iterating on a component rather than a full page, Storybook provides a tighter feedback loop.

The preview panel lets you switch between the Browser (full page) and Storybook (component isolation) views.

Agent-driven testing

The agent uses tests as part of its workflow:

• Runs tests after making changes to verify nothing broke.
• Writes tests when you ask for coverage or when requirements need verification.
• Reads failures and uses them to guide fixes — a failing assertion is a concrete signal, not a guess.
• Auto-fixes failures — when a test fails, the agent automatically analyzes the error, adjusts the code, and re-runs the suite. You don’t need to intervene unless the agent can’t resolve the issue on its own.

Requirements ↔ tests

Each test can be linked to a requirement via naming convention. When the agent writes tests, it tags them with the corresponding requirement ID (e.g. REQ-pricing-display). The requirements panel then shows each requirement’s test status inline — passed, failed, or pending — so you get a single view of what’s verified and what needs work.

Why built-in testing matters

Most AI design tools treat testing as an afterthought — you generate a change, export it, and test somewhere else. With Coframe Agent:

• Immediate feedback — tests run in the same environment where changes are made.
• Requirement traceability — every test maps to a requirement, so you know what’s verified.
• Regression safety — catch breakages before publishing, not after.
• Agent accountability — the agent verifies its own work, not just claims it looks right.

Tip

If you have existing vitest tests in your project, the agent will discover and run them automatically. You can also ask it to write new tests for specific requirements.