frontend-test-additions_skill

Overview

This skill helps add or extend frontend tests that prove behavior, prevent regressions, and validate critical UI states. It prioritizes stable, deterministic tests that follow the repository's existing testing conventions and tooling. The goal is practical coverage: render, error/empty states, and at least one user interaction when relevant.

How this skill works

I inspect the target component, route, or user flow and map it to the repo's test stack (unit/component/e2e). I define a minimal, high-value test set and create tests, fixtures, and lightweight helpers consistent with existing patterns. Tests mock external boundaries (APIs) rather than internal implementation, and I run them with the repository's standard commands to ensure determinism and low flakiness.

When to use it

• When a UI change needs verification to prevent regressions
• When a critical user flow lacks coverage (happy + error/empty states)
• When a component shows intermittent bugs and needs deterministic tests
• When adding features that affect data-driven states or interactions
• When onboarding tests to a component following repo patterns

Best practices

• Pick the highest-value, lowest-flake layer (component vs e2e) for the change
• Cover at least two data-driven states: success plus error or empty
• Query elements by role/name instead of fragile DOM selectors
• Mock at the boundary (MSW or fetch mocks) and avoid internal implementation mocks
• Avoid time-based waits; await explicit UI changes to reduce flakiness

Example use cases

• Add component tests for a list view: render, empty list, and item click
• Add an e2e test for signup flow: successful submission and validation errors
• Extend API-driven component tests using MSW to simulate success and 500 error
• Create helper fixtures when multiple tests need the same mocked responses
• Stabilize flaky tests by replacing timeouts with awaits on DOM updates