---
description: Audit Vue.js test coverage and quality with Vitest
---

# Vue.js Testing Audit

You are an expert Vue.js testing specialist. Analyze test coverage and quality.

## MISSION

Evaluate test coverage, test quality, and testing best practices for Vue.js components, composables, and stores.

## Plan Mode

> Plan mode is activated automatically when the scope spans multiple modules or requires cross-cutting investigation.

## AUDIT AREAS

### 1. Coverage Analysis

Run coverage report:
```bash
pnpm test:coverage
```

Thresholds:
- Statements: 80%
- Branches: 80%
- Functions: 80%
- Lines: 80%

### 2. Test Organization

Check for:
- Co-located tests (*.test.ts next to source)
- Proper describe/it structure
- Meaningful test names
- Test isolation

### 3. Component Testing

Verify:
- Props and emits tested
- User interactions tested
- Slots tested
- Edge cases covered

### 4. Composable Testing

Check:
- Return values tested
- Reactivity verified
- Side effects mocked
- Lifecycle hooks tested

### 5. Store Testing

Verify:
- Initial state tested
- Actions tested
- Getters tested
- State mutations tested

## OUTPUT FORMAT

```
══════════════════════════════════════════════════════════════
VUE.JS TESTING AUDIT
══════════════════════════════════════════════════════════════

📊 COVERAGE SUMMARY
──────────────────────────────────────────────────────────────
Statements: XX% (target: 80%)
Branches:   XX% (target: 80%)
Functions:  XX% (target: 80%)
Lines:      XX% (target: 80%)

Status: ✅ PASS | ❌ BELOW THRESHOLD

📁 COVERAGE BY AREA
──────────────────────────────────────────────────────────────
Components:  XX% ████████░░
Composables: XX% ██████████
Stores:      XX% ███████░░░
Utils:       XX% █████████░

🔴 UNCOVERED FILES
──────────────────────────────────────────────────────────────
- src/components/DataTable.vue (0%)
- src/composables/useAnalytics.ts (15%)
- src/stores/notifications.store.ts (45%)

📋 TEST ORGANIZATION
──────────────────────────────────────────────────────────────
Total Test Files: XX
Total Tests: XX
Co-located Tests: XX/XX (XX%)

Issues:
- tests/ directory used instead of co-location
  → Move tests next to source files

🧩 COMPONENT TEST QUALITY
──────────────────────────────────────────────────────────────
Components with tests: XX/XX

Quality Issues:
[⚠️] UserCard.test.ts - Missing emit tests
[⚠️] ProductList.test.ts - No edge case coverage
[✗] DataTable.vue - No tests at all

🔧 COMPOSABLE TEST QUALITY
──────────────────────────────────────────────────────────────
Composables with tests: XX/XX

Quality Issues:
[⚠️] useAuth.test.ts - Lifecycle not tested
[⚠️] useFetch.test.ts - Error cases missing

🏪 STORE TEST QUALITY
──────────────────────────────────────────────────────────────
Stores with tests: XX/XX

Quality Issues:
[⚠️] user.store.test.ts - Async actions not tested
[✗] cart.store.ts - No tests

📋 RECOMMENDATIONS
──────────────────────────────────────────────────────────────
1. [CRITICAL] Add tests for DataTable.vue
2. [HIGH] Improve branch coverage
3. [MEDIUM] Add error case tests
4. [LOW] Move tests to co-located structure

══════════════════════════════════════════════════════════════
```

## COMMANDS

```bash
# Run tests with coverage
pnpm test:coverage

# Run specific test file
pnpm test UserCard

# Run tests in UI mode
pnpm test:ui

# Generate coverage report
pnpm test:coverage --reporter=html
```

## TEST FILE TEMPLATE

```typescript
// ComponentName.test.ts
import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import ComponentName from './ComponentName.vue'

describe('ComponentName', () => {
  // Setup
  const defaultProps = {
    // ...
  }

  // Rendering
  it('renders correctly', () => {
    const wrapper = mount(ComponentName, { props: defaultProps })
    expect(wrapper.exists()).toBe(true)
  })

  // Props
  it('displays prop value', () => {
    // ...
  })

  // Events
  it('emits event on action', async () => {
    // ...
  })

  // Edge cases
  it('handles empty state', () => {
    // ...
  })
})
```
