Testing & Quality Assurance

Mind Measure uses a comprehensive testing and quality assurance system to prevent regressions and ensure code quality.

Overview

After a critical incident on December 8, 2025, we implemented a multi-layered prevention system that includes:

Automated Layout Verification - Runs on every deployment
Visual Regression Testing - Catches UI changes automatically
Pre-Commit Hooks - Blocks problematic code before it's committed
Architecture Decision Records - Documents major technical decisions
Safe Rollback Procedures - Prevents dangerous rollbacks

Quick Reference

Running Tests

# Check critical layout elements
npm run check-layout
 
# Visual regression tests
npm run test:visual
 
# E2E smoke tests
npm run test:e2e
 
# All tests
npm run test:all
 
# Interactive test UI
npm run test:ui

Pre-Deployment Checklist

Before deploying to production:

✅ Run npm run check-layout - Verifies critical UI elements
✅ Run npm run test:visual - Checks for visual regressions
✅ Run npm run test:e2e - Validates critical flows
✅ Check for linter errors
✅ Review git diff for unintended changes

Testing Infrastructure

Layout Verification

File: scripts/check-layout.js

Automatically verifies:

SDK versions are compatible (no mixing of old and new)
Critical UI text is correct ("Five questions", not "Six")
Required components are imported correctly
Essential props are present

Runs automatically:

Before every deployment (predeploy script)
On every commit (if Husky is installed)

Visual Regression Tests

Tool: Playwright

What it tests:

Baseline welcome screen layout
"What to expect" screen content and spacing
Conversation UI appearance
Button positioning and separation
Responsive layouts on mobile

Configuration: playwright.config.ts Tests: tests/visual/baseline-flow.spec.ts

E2E Smoke Tests

What it validates:

App loads without errors
No critical console errors
Components render correctly
No missing assets
Responsive layout works
Developer mode triggers correctly

Tests: tests/e2e/smoke-tests.spec.ts

Installation Guide

Step 1: Install Playwright

# Clean npm cache if needed
npm cache clean --force
 
# Install Playwright
npm install -D @playwright/test --legacy-peer-deps
 
# Install browser
npx playwright install chromium

Step 2: Install Husky (Optional)

# Install Husky
npm install -D husky
 
# Initialize
npx husky install
 
# Set up auto-install
npm pkg set scripts.prepare="husky install"

Step 3: Generate Baseline Screenshots

# Start dev server
npm run dev
 
# Generate reference screenshots
npx playwright test --update-snapshots

Step 4: Verify Installation

# Test layout checks
npm run check-layout
 
# Test visual regression
npm run test:visual
 
# Test pre-commit hook
echo "test" > test.txt
git add test.txt
git commit -m "test"

Common Scenarios

Updating Visual Baselines

When you intentionally change the UI:

# Update all snapshots
npm run test:visual -- --update-snapshots
 
# Update specific test
npx playwright test tests/visual/baseline-flow.spec.ts --update-snapshots

Bypassing Pre-Commit Hooks

Use sparingly! Only when you know what you're doing:

git commit --no-verify -m "emergency fix"

Debugging Test Failures

# Run tests in UI mode (interactive)
npm run test:ui
 
# Run tests with debug output
DEBUG=pw:api npm run test:visual
 
# View test report
npx playwright show-report

CI/CD Integration

Vercel Configuration

Build Command:

npm run check-layout && npm run build

Install Command:

npm ci && npx playwright install chromium --with-deps

GitHub Actions

Example workflow:

name: Tests
 
on: [push, pull_request]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run layout checks
        run: npm run check-layout
      
      - name: Install Playwright
        run: npx playwright install chromium --with-deps
      
      - name: Run tests
        run: npm run test:all
      
      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: test-results
          path: playwright-report/

Troubleshooting

Playwright Won't Install

Error: ENOTEMPTY: directory not empty

Solutions:

# Option 1: Use legacy peer deps
npm install -D @playwright/test --legacy-peer-deps
 
# Option 2: Clean install
rm -rf node_modules package-lock.json
npm install
 
# Option 3: Use yarn
yarn add -D @playwright/test

Pre-Commit Hook Not Running