From bee-dev-team
Gate 4 of the Vue.js frontend development cycle - ensures all components have snapshot tests covering all states, viewports, and edge cases using Vitest snapshots.
npx claudepluginhub luanrodrigues/ia-frmwrk --plugin bee-dev-teamThis skill uses the workspace's default tool permissions.
Ensure all Vue.js frontend components have **snapshot tests** covering all states, responsive viewports, and edge cases. Detect visual regressions before code review.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Ensure all Vue.js frontend components have snapshot tests covering all states, responsive viewports, and edge cases. Detect visual regressions before code review.
Core principle: If a user can see it, it must have a snapshot. All states, all viewports.
<block_condition>
This skill ORCHESTRATES. Vue.js Frontend QA Analyst Agent (visual mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend Vue.js Agent | Write snapshot tests, verify states, check duplication |
MANDATORY: Load testing-visual.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend-vuejs/testing-visual.md </fetch_required>
REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [.vue files from Gate 0]
OPTIONAL INPUT:
- ux_criteria_path: [path to ux-criteria.md]
- gate3_handoff: [full Gate 3 output]
if any REQUIRED input is missing:
→ STOP and report: "Missing required input: [field]"
Task tool:
subagent_type: "bee:qa-analyst-frontend-vuejs"
model: "opus"
prompt: |
**MODE:** VISUAL TESTING (Gate 4)
**Standards:** Load testing-visual.md (frontend-vuejs)
**Input:**
- Unit ID: {unit_id}
- Implementation Files: {implementation_files}
- UX Criteria: {ux_criteria_path or "N/A"}
- Framework: Vue 3 / Nuxt 3
- Testing Tool: Vitest + @vue/test-utils + @testing-library/vue
**Requirements:**
1. Create snapshot tests for all Vue SFC components using Vitest
2. Cover all states (Default, Empty, Loading, Error, Success, Disabled)
3. Add responsive snapshots (375px, 768px, 1280px) for layout components
4. Test edge cases (long text, 0 items, special characters)
5. Verify no sindarian-vue component duplication in components/ui/
6. Use mount() from @vue/test-utils with appropriate stubs for child components
**Vue-Specific Snapshot Requirements:**
- Test all prop combinations that produce visually distinct outputs
- Snapshot v-if / v-show conditional rendering branches explicitly
- Snapshot slot content variations (default slot, named slots)
- Snapshot scoped styles output (ensure CSS classes are applied)
- Verify Transition/TransitionGroup component enter/leave class states
- Pinia store-dependent components: test with different store states via createTestingPinia()
- Async components: await flushPromises() before taking snapshot
**Output Sections Required:**
- ## Visual Testing Summary
- ## Snapshot Coverage
- ## Component Duplication Check
- ## Handoff to Next Gate
Parse agent output:
if "Status: PASS" in output:
→ Gate 4 PASSED
→ Return success with metrics
if "Status: FAIL" in output:
→ If missing snapshots: re-dispatch agent to add missing
→ If duplication found: re-dispatch implementation agent to fix
→ Re-run visual tests (max 3 iterations)
→ If still failing: ESCALATE to user
## Visual Testing Summary
**Status:** {PASS|FAIL}
**Components with Snapshots:** {count}
**Total Snapshots:** {count}
**Snapshot Failures:** {count}
## Snapshot Coverage
| Component | States | Viewports | Edge Cases | Status |
|-----------|--------|-----------|------------|--------|
| {component} | {X/Y} | {X/Y or N/A} | {description} | {PASS|FAIL} |
## Component Duplication Check
| Component in components/ui/ | In sindarian-vue? | Status |
|-----------------------------|------------------|--------|
| {component} | {Yes|No} | {PASS|FAIL} |
## Handoff to Next Gate
- Ready for Gate 5 (E2E Testing): {YES|NO}
- Iterations: {count}
See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "Snapshots are brittle" | Brittle = catches unintended changes. That's the point. | Write snapshot tests |
| "We test visually in browser" | Manual testing misses regressions. Automated is repeatable. | Add snapshot tests |
| "Only default state matters" | Error and loading states are user-facing. | Test all states |
| "Mobile is just smaller" | Layout changes at breakpoints. Test all viewports. | Add responsive snapshots |
| "This shadcn-vue component is better" | sindarian-vue is PRIMARY. Don't duplicate. | Check sindarian-vue first |
| "v-if branches are covered by unit tests" | Unit tests verify logic. Snapshots verify rendered output. | Snapshot each v-if branch |
| "Slot content varies too much to snapshot" | Use representative slot content and snapshot it. | Snapshot default and key slot variations |
| "Pinia state is mocked, snapshot is wrong" | Use createTestingPinia() with initial state that represents real usage. | Snapshot with realistic store state |