PixelPilot uiux-testing.instructions.md

UI/UX Testing 2026

Testing Trophy, component testing with Storybook, accessibility testing (axe-core), visual regression, and interaction testing for UI/UX systems.

---

THE TESTING TROPHY (Kent C. Dodds)

         /\
        /E2E\         ← Few, high-value, slow (Playwright)
       /──────\
      /Integr. \      ← Most tests live here (React Testing Library)
     /──────────\
    /   Unit     \    ← Small, fast, pure functions/hooks only
   /──────────────\
  / Static (types) \  ← TypeScript + ESLint — free tests
 /──────────────────\

Ratio target: Static > Unit > Integration > E2E Most value: Integration tests — test behavior, not implementation.

---

STEP 1 — STATIC ANALYSIS (Free Tests)

// package.json — run before any other test
"scripts": {
  "lint":    "eslint src --ext .js,.jsx,.ts,.tsx",
  "type-check": "tsc --noEmit",
  "check":   "npm run lint && npm run type-check"
}

// .eslintrc — recommended rules for UI
{
  "extends": [
    "eslint:recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",  // catches a11y issues at lint time
    "plugin:@typescript-eslint/recommended"
  ]
}

jsx-a11y catches: missing alt text, bad button usage, unlabeled inputs, missing ARIA. Zero runtime cost. Fix at write time.

---

STEP 2 — UNIT TESTS (Vitest / Jest)

Only for pure functions — formatters, validators, utils. Not for components.

// lib/format.test.js
import { describe, it, expect } from 'vitest';
import { formatPrice, formatDate, truncate } from './format';

describe('formatPrice', () => {
  it('formats USD correctly',      () => expect(formatPrice(9.99, 'USD')).toBe('$9.99'));
  it('handles zero',               () => expect(formatPrice(0, 'USD')).toBe('$0.00'));
  it('handles large numbers',      () => expect(formatPrice(1234.5)).toBe('$1,234.50'));
});

describe('truncate', () => {
  it('truncates long strings',     () => expect(truncate('Hello World', 5)).toBe('Hello…'));
  it('leaves short strings alone', () => expect(truncate('Hi', 10)).toBe('Hi'));
});