← ClaudeAtlas

write-frontend-testslisted

Analyze the current branch diff against dev, plan integration tests for changed frontend pages/components, and write them. TRIGGER when user asks to write frontend tests, add test coverage, or 'write tests for my changes'.
HIDORAKAI002/ai-workspace-archive · ★ 31 · AI & Automation · score 78
Install: claude install-skill HIDORAKAI002/ai-workspace-archive
# Write Frontend Tests Analyze the current branch's frontend changes, plan integration tests, and write them. ## References Before writing any tests, read the testing rules and conventions: - `autogpt_platform/frontend/TESTING.md` — testing strategy, file locations, examples - `autogpt_platform/frontend/src/tests/AGENTS.md` — detailed testing rules, MSW patterns, decision flowchart - `autogpt_platform/frontend/src/tests/integrations/test-utils.tsx` — custom render with providers - `autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsx` — MSW server setup ## Step 1: Identify changed frontend files ```bash BASE_BRANCH="${ARGUMENTS:-dev}" cd autogpt_platform/frontend # Get changed frontend files (excluding generated, config, and test files) git diff "$BASE_BRANCH"...HEAD --name-only -- src/ \ | grep -v '__generated__' \ | grep -v '__tests__' \ | grep -v '\.test\.' \ | grep -v '\.stories\.' \ | grep -v '\.spec\.' ``` Also read the diff to understand what changed: ```bash git diff "$BASE_BRANCH"...HEAD --stat -- src/ git diff "$BASE_BRANCH"...HEAD -- src/ | head -500 ``` ## Step 2: Categorize changes and find test targets For each changed file, determine: 1. **Is it a page?** (`page.tsx`) — these are the primary test targets 2. **Is it a hook?** (`use*.ts`) — test via the page/component that uses it; avoid direct `renderHook()` tests unless it is a shared reusable hook with standalone business logic 3. **Is it a component?** (`.tsx` in `components