🎨 Frontend Development — Frontend Testing Toolkit Demo

• Rendering with various props
• User interactions (click, type, keyboard)
• Async behavior (debounce, data loading)
• Accessibility (ARIA attributes, focus management)
• Edge cases (empty states, error states, long text)
• Custom render function with providers (router, query client, theme)

# Install dependencies
npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event
npm install -D @playwright/test
npm install -D @storybook/react-vite storybook

# Run unit tests
npx vitest

# Run E2E tests
npx playwright test

# Start Storybook
npx storybook dev -p 6006

frontend-testing-toolkit/
├── README.md
├── LICENSE
├── src/
│   ├── components/
│   │   ├── SearchInput.tsx         # Debounced search with clear button
│   │   ├── DataTable.tsx           # Sortable, paginated table
│   │   └── Modal.tsx               # Accessible dialog with focus trap
│   ├── hooks/
│   │   └── useDebounce.ts          # Debounce hook used by SearchInput
│   └── utils/
│       └── formatters.ts           # Display formatting helpers
├── tests/
│   ├── unit/
│   │   ├── SearchInput.test.tsx    # SearchInput unit tests
│   │   ├── DataTable.test.tsx      # DataTable unit tests
│   │   ├── Modal.test.tsx          # Modal unit tests
│   │   └── useDebounce.test.ts     # Hook unit tests
│   ├── integration/
│   │   └── search-flow.test.tsx    # Multi-component search flow
│   ├── e2e/
│   │   ├── playwright.config.ts    # Playwright configuration
│   │   └── search.spec.ts          # E2E search workflow
│   └── utils/
│       ├── render-helpers.tsx       # Custom render with providers
│       ├── mocks.ts                 # Mock data factories
│       └── fixtures.ts             # Stable test fixtures
├── stories/
│   ├── SearchInput.stories.tsx     # SearchInput Storybook stories
│   ├── DataTable.stories.tsx       # DataTable Storybook stories
│   └── Modal.stories.tsx           # Modal Storybook stories
├── configs/
│   ├── vitest.config.ts            # Vitest configuration
│   ├── storybook/
│   │   ├── main.ts                 # Storybook main config
│   │   └── preview.ts              # Storybook preview config
│   └── ci-testing.yml              # GitHub Actions CI config
└── guides/
    └── testing-strategy.md          # When and how to test