frontend-testing

Frontend Testing

Start by writing tests that validate acceptance criteria. Then add implementation tests where they provide value.

Core Principle

"The more your tests resemble the way your software is used, the more confidence they can give you." — Kent C. Dodds

This principle guides testing decisions, but isn't the whole picture:

• Acceptance criteria tests verify the system does what users/stakeholders need. These should be stable across refactors.
• Implementation tests verify the pieces are robust — edge cases, error handling, complex logic. These may change when you refactor.

Both have value. The anti-pattern to avoid is tests that only mirror implementation without validating meaningful behavior.

When to Load References

Load reference files based on test type:

• Unit tests with DOM: references/locator-strategies.md
• E2E tests: references/locator-strategies.md, references/aria-snapshots.md
• Visual regression tests: references/visual-regression.md
• Accessibility audits: references/accessibility-testing.md
• Structure validation: references/aria-snapshots.md — consolidate multiple assertions into one
• All tests: Start with this file for core workflow

Workflow

Step 1: Start with Acceptance Criteria

Before writing any test, identify what the code should do from the user's perspective.

Ask for or extract criteria from:

• Ticket description or user story
• Figma annotations
• Functional requirements
• Product owner clarification

Document criteria as a checklist. These become your first tests.

Write acceptance tests before reading implementation. This prevents circular validation where tests just confirm "code does what code does."

Step 2: Map Criteria to Test Cases

For each criterion, identify:

• Happy path: Normal expected behavior
• Edge cases: Boundary conditions
• Error cases: Invalid inputs, failures

Example mapping:

Criterion: "User can filter products by category"
├─ Happy path: Select category, products filter correctly
├─ Edge case: No products match filter, show empty state
├─ Edge case: Clear filter, all products show again
├─ Error case: Filter API fails, show error message
└─ Accessibility: Filter controls are keyboard accessible