frontend-testlisted
Install: claude install-skill alekspetrov/navigator
# Frontend Component Test Generator
Generate component tests for **existing components** — typically components written without tests, or where additional coverage is needed beyond what `frontend-component` already produced.
> **When to use this vs. `frontend-component`**: `frontend-component` generates tests as part of creating a new component. Use `frontend-test` when the component already exists and you need to add or expand its tests.
## When to Invoke
Auto-invoke when user says:
- "Test this component"
- "Write component test"
- "Add component test"
- "Test component [name]"
- "Component tests for [name]"
## Execution Steps
### Step 0: Check Existing Patterns (Phase 0)
```bash
PLUGIN_DIR="${CLAUDE_PLUGIN_ROOT:-$HOME/.claude/plugins/cache/navigator-marketplace/navigator}"
[ -d "$PLUGIN_DIR" ] || PLUGIN_DIR="$HOME/.claude/plugins/marketplaces/navigator-marketplace"
python3 "$PLUGIN_DIR/skills/nav-graph/functions/graph_manager.py" \
--action query --concept frontend \
--graph-path .agent/knowledge/graph.json 2>/dev/null | head -40
python3 "$PLUGIN_DIR/skills/nav-graph/functions/graph_manager.py" \
--action query --concept testing \
--graph-path .agent/knowledge/graph.json 2>/dev/null | head -40
```
Look for patterns about test utilities used (RTL vs Enzyme), snapshot policy, accessibility-test conventions.
### Step 1: Locate Component Under Test
Ask if not specified:
```
Which component should I test?
- File path (e.g., src/components/UserProfile.tsx)