Test Runner

Runs Playwright Component Tests across all frameworks.

When to Use

• After implementing or modifying components
• Before committing changes
• When verifying cross-framework compatibility
• When user asks to run tests
• When checking test coverage

Quick Commands

Instructions

1. Determine Test Scope

Based on user request or changed files:

2. Run Tests

All Frameworks

bun run test:ct

Single Framework

bun run test:ct:react
bun run test:ct:vue
bun run test:ct:svelte

Specific Browser

bun run test:ct:react --project=chromium
bun run test:ct:react --project=firefox
bun run test:ct:react --project=webkit

Specific Test File

bun run test:ct:react tests/ct/react/specs/Editor.spec.tsx

Debug Mode (Headed)

bun run test:ct:react --headed

3. Analyze Results

Success Output

Running X tests using Y workers

  ✓ ComponentName › test description (XXms)
  ...

  X passed (Y.Zs)

Failure Output

  ✗ ComponentName › test description (XXms)
    Error: expect(locator).toBeVisible()
    Locator: ...
    Expected: visible
    Received: hidden

4. Report Format

## Test Results

### Summary
- **React**: ✅ X passed / ❌ Y failed
- **Vue**: ✅ X passed / ❌ Y failed
- **Svelte**: ✅ X passed / ❌ Y failed

### Failures (if any)
| Framework | Test | Error |
|-----------|------|-------|
| React | ComponentName › test | Error message |

### Next Steps
- [ ] Fix failing tests
- [ ] Run tests again

Coverage Check

When user asks about test coverage, check if all components and hooks/composables/runes are covered by tests.

1. List Implementations

Run these commands to list all implementations:

# React
ls packages/react/src/components/*.tsx | xargs -I {} basename {} .tsx
ls packages/react/src/hooks/*.ts | xargs -I {} basename {} .ts

# Vue
ls packages/vue/src/components/*.vue | xargs -I {} basename {} .vue
ls packages/vue/src/composables/*.ts | xargs -I {} basename {} .ts

# Svelte
ls packages/svelte/src/components/*.svelte | xargs -I {} basename {} .svelte
ls packages/svelte/src/runes/*.ts | xargs -I {} basename {} .ts

2. List Test Specs

ls tests/ct/react/specs/*.tsx tests/ct/vue/specs/*.ts tests/ct/svelte/specs/*.ts | xargs -I {} basename {}

3. Check Coverage

For each implementation, determine coverage status:

4. Coverage Mapping

Components

Hooks / Composables / Runes

5. Coverage Report Format

## Test Coverage Report

### Components

| Component | React | Vue | Svelte | Status |
|-----------|:-----:|:---:|:------:|--------|
| EditorRoot | ✅ | ✅ | ✅ | Direct |
| BubbleMenu | ✅ | ✅ | ✅ | Direct |
| SlashMenu | ✅ | ✅ | ✅ | Direct |

### Hooks / Composables / Runes

| Function | React | Vue | Svelte | Status |
|----------|:-----:|:---:|:------:|--------|
| useVizelEditor | ✅ | ✅ | ✅ | Indirect |
| useEditorState | ❌ | ❌ | ❌ | Missing |

### Summary
- Components: X/Y covered (Z%)
- Hooks/Composables/Runes: X/Y covered (Z%)

### Recommendations
- [ ] Add tests for missing items
- [ ] Consider if style-only components need tests

Troubleshooting

Browser Not Installed

bunx playwright install chromium
# or install all browsers
bunx playwright install

Test Timeout

Increase timeout in test:

test("slow test", async ({ mount, page }) => {
  test.setTimeout(30000); // 30 seconds
  // ...
});

Element Not Found

Check if element is rendered to document.body (portal):

// Inside component
const element = component.locator(".selector");

// Portal/popup (rendered to body)
const popup = page.locator(".selector");

Common Patterns

Run Tests for Changed Files

# Get changed files
git diff --name-only HEAD~1

# Run relevant tests based on changes
bun run test:ct:react  # if React files changed

Run Before Commit

# Quick check with single browser
bun run test:ct --project=chromium

Full CI-like Test

# All frameworks, all browsers
bun run test:ct