- Add CSS components: .page-meta badges, .domain-header, .install-banner - Fix invisible tab navigation (explicit color for light/dark modes) - Rewrite generate-docs.py with design system templates - Domain indexes: centered headers with icons, install banners, grid cards - Skill pages: pill badges (domain, skill ID, source), install commands - Agent/command pages: type badges with domain icons - Regenerate all 210 pages (180 skills + 15 agents + 15 commands) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
107 lines
3.1 KiB
Markdown
107 lines
3.1 KiB
Markdown
---
|
|
title: "Analyze Test Coverage Gaps"
|
|
description: "Analyze Test Coverage Gaps - Claude Code skill from the Engineering - Core domain."
|
|
---
|
|
|
|
# Analyze Test Coverage Gaps
|
|
|
|
<div class="page-meta" markdown>
|
|
<span class="meta-badge">:material-code-braces: Engineering - Core</span>
|
|
<span class="meta-badge">:material-identifier: `coverage`</span>
|
|
<span class="meta-badge">:material-github: <a href="https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/coverage/SKILL.md">Source</a></span>
|
|
</div>
|
|
|
|
<div class="install-banner" markdown>
|
|
<span class="install-label">Install:</span> <code>claude /plugin install engineering-skills</code>
|
|
</div>
|
|
|
|
|
|
Map all testable surfaces in the application and identify what's tested vs. what's missing.
|
|
|
|
## Steps
|
|
|
|
### 1. Map Application Surface
|
|
|
|
Use the `Explore` subagent to catalog:
|
|
|
|
**Routes/Pages:**
|
|
- Scan route definitions (Next.js `app/`, React Router config, Vue Router, etc.)
|
|
- List all user-facing pages with their paths
|
|
|
|
**Components:**
|
|
- Identify interactive components (forms, modals, dropdowns, tables)
|
|
- Note components with complex state logic
|
|
|
|
**API Endpoints:**
|
|
- Scan API route files or backend controllers
|
|
- List all endpoints with their methods
|
|
|
|
**User Flows:**
|
|
- Identify critical paths: auth, checkout, onboarding, core features
|
|
- Map multi-step workflows
|
|
|
|
### 2. Map Existing Tests
|
|
|
|
Scan all `*.spec.ts` / `*.spec.js` files:
|
|
|
|
- Extract which pages/routes are covered (by `page.goto()` calls)
|
|
- Extract which components are tested (by locator usage)
|
|
- Extract which API endpoints are mocked or hit
|
|
- Count tests per area
|
|
|
|
### 3. Generate Coverage Matrix
|
|
|
|
```
|
|
## Coverage Matrix
|
|
|
|
| Area | Route | Tests | Status |
|
|
|---|---|---|---|
|
|
| Auth | /login | 5 | ✅ Covered |
|
|
| Auth | /register | 0 | ❌ Missing |
|
|
| Auth | /forgot-password | 0 | ❌ Missing |
|
|
| Dashboard | /dashboard | 3 | ⚠️ Partial (no error states) |
|
|
| Settings | /settings | 0 | ❌ Missing |
|
|
| Checkout | /checkout | 8 | ✅ Covered |
|
|
```
|
|
|
|
### 4. Prioritize Gaps
|
|
|
|
Rank uncovered areas by business impact:
|
|
|
|
1. **Critical** — auth, payment, core features → test first
|
|
2. **High** — user-facing CRUD, search, navigation
|
|
3. **Medium** — settings, preferences, edge cases
|
|
4. **Low** — static pages, about, terms
|
|
|
|
### 5. Suggest Test Plan
|
|
|
|
For each gap, recommend:
|
|
- Number of tests needed
|
|
- Which template from `templates/` to use
|
|
- Estimated effort (quick/medium/complex)
|
|
|
|
```
|
|
## Recommended Test Plan
|
|
|
|
### Priority 1: Critical
|
|
1. /register (4 tests) — use auth/registration template — quick
|
|
2. /forgot-password (3 tests) — use auth/password-reset template — quick
|
|
|
|
### Priority 2: High
|
|
3. /settings (4 tests) — use settings/ templates — medium
|
|
4. Dashboard error states (2 tests) — use dashboard/data-loading template — quick
|
|
```
|
|
|
|
### 6. Auto-Generate (Optional)
|
|
|
|
Ask user: "Generate tests for the top N gaps? [Yes/No/Pick specific]"
|
|
|
|
If yes, invoke `/pw:generate` for each gap with the recommended template.
|
|
|
|
## Output
|
|
|
|
- Coverage matrix (table format)
|
|
- Coverage percentage estimate
|
|
- Prioritized gap list with effort estimates
|
|
- Option to auto-generate missing tests
|