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

Command	Description
npm run test:ct	Run all framework tests in parallel
npm run test:ct:seq	Run all framework tests sequentially
npm run test:ct:react	Run React tests only
npm run test:ct:vue	Run Vue tests only
npm run test:ct:svelte	Run Svelte tests only

Instructions

1. Determine Test Scope

Based on user request or changed files:

Changed Path	Tests to Run
packages/core/**	All frameworks
packages/react/**	React only
packages/vue/**	Vue only
packages/svelte/**	Svelte only
tests/ct/scenarios/**	All frameworks
tests/ct/react/**	React only
tests/ct/vue/**	Vue only
tests/ct/svelte/**	Svelte only

2. Run Tests

All Frameworks (Parallel)

npm run test:ct

Note: Parallel execution may cause timeout errors when running with all browsers due to resource contention. Use --project=chromium for faster, more reliable parallel runs.

All Frameworks (Sequential)

npm run test:ct:seq

Single Framework

npm run test:ct:react
npm run test:ct:vue
npm run test:ct:svelte

Specific Browser

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

Specific Test File

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

Debug Mode (Headed)

npm 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:

Status	Meaning
✅ Direct	Has dedicated test spec
✅ Indirect	Tested through parent component
⚠️ Style-only	Pure styling, may not need test
❌ Missing	Needs test

4. 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 |
| useVizelEditorState | ❌ | ❌ | ❌ | 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

npx playwright install chromium
# or install all browsers
npx playwright install

Test Timeout

Increase timeout in test:

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

Parallel Execution Timeout

When running all frameworks in parallel with all browsers, you may see timeout errors due to resource contention:

browserContext.newPage: Test timeout of 10000ms exceeded

Solutions:

1. Use single browser: npm run test:ct --project=chromium
2. Use sequential execution: npm run test:ct:seq
3. Reduce parallel workers in config (currently 50% CPU)

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
npm run test:ct:react  # if React files changed

Run Before Commit

# Quick parallel check with single browser (recommended)
npm run test:ct --project=chromium

# Or sequential check with single browser
npm run test:ct:seq --project=chromium

Full CI-like Test

# All frameworks in parallel, all browsers
npm run test:ct

# All frameworks sequentially, all browsers (more stable)
npm run test:ct:seq