[Infra] Include testing frameworks for front end

.github/workflows/frontend-ci.yml

@@ -0,0 +1,101 @@
+# Frontend CI Workflow
+#
+# Tests and builds the React.js frontend application:
+# - React app in src/web/ using Vitest
+# - TypeScript compilation and linting
+
+name: Frontend CI
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - dev
+    paths:
+      - "src/web/**"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - "pnpm-workspace.yaml"
+      - "tsconfig*.json"
+      - ".github/workflows/frontend-ci.yml"
+  pull_request:
+    branches:
+      - dev
+    paths:
+      - "src/web/**"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - "pnpm-workspace.yaml"
+      - "tsconfig*.json"
+      - ".github/workflows/frontend-ci.yml"
+
+env:
+  # Change this to invalidate existing cache.
+  CACHE_PREFIX: v0
+  NODE_VERSION: "20.x"
+  PNPM_VERSION: "9.5.0"
+
+permissions:
+  contents: read
+
+jobs:
+  frontend-tests:
+    name: Frontend Tests & Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          submodules: "recursive"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        run: npm install -g pnpm@${{ env.PNPM_VERSION }}
+
+      - name: Set build variables
+        shell: bash
+        run: |
+          echo "NODE_VERSION_FULL=$(node --version)" >> $GITHUB_ENV
+          # Use week number in cache key so we can refresh the cache weekly.
+          echo "WEEK_NUMBER=$(date +%V)" >> $GITHUB_ENV
+
+      - name: Cache pnpm dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.pnpm-store
+            node_modules
+            src/*/node_modules
+          key: ${{ env.CACHE_PREFIX }}-${{ env.WEEK_NUMBER }}-${{ runner.os }}-${{ env.NODE_VERSION_FULL }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ env.CACHE_PREFIX }}-${{ env.WEEK_NUMBER }}-${{ runner.os }}-${{ env.NODE_VERSION_FULL }}
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build TypeSpec packages
+        run: pnpm build:typespec
+
+      - name: Test React Frontend
+        run: |
+          cd src/web
+          pnpm test
+        env:
+          CI: true
+
+      - name: Build React Frontend
+        run: |
+          cd src/web
+          pnpm build
+        env:
+          CI: false

src/web/README.md

@@ -1,6 +1,207 @@
-# Getting Started with Create React App
+# AAZ Dev Tools - Web Frontend
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+A React-based web application for managing Azure CLI command development workflows, built with TypeScript, Vite, and Material-UI.
+
+## Overview
+
+This frontend application provides a user interface for:
+
+- Managing workspaces for Azure CLI command development
+- Configuring client endpoints and authentication
+- Editing command trees and configurations
+- Working with TypeSpec-based command definitions
+
+## Project Structure
+
+```
+src/
+├── components/           # Reusable UI components
+├── views/               # Page-level components and views
+│   └── workspace/       # Workspace management views
+├── services/            # API service layer
+│   └── workspaceApi.ts  # Workspace API functions
+├── typespec/           # TypeSpec integration utilities
+├── __tests__/          # Test files
+│   ├── api/            # API layer tests
+│   ├── components/     # Component unit tests
+│   ├── integration/    # Integration tests
+│   └── mocks/          # MSW mock handlers
+├── App.tsx             # Main application component
+├── theme.tsx           # Material-UI theme configuration
+└── index.tsx          # Application entry point
+```
+
+## Technology Stack
+
+- **React 18** with TypeScript
+- **Vite** for build tooling and dev server
+- **Material-UI (MUI)** for component library
+- **Vitest** for testing framework
+- **MSW (Mock Service Worker)** for API mocking
+- **React Testing Library** for component testing
+- **Axios** for HTTP requests
+
+## Development
+
+### Prerequisites
+
+- Node.js 18.x or 20.x
+- pnpm 9.5.0+
+
+### Getting Started
+
+1. **Install dependencies:**
+
+   ```bash
+   pnpm install
+   ```
+
+2. **Build TypeSpec and Web components:**
+
+   ```bash
+   pnpm run build:typespec
+   pnpm run build:web
+   ```
+
+3. **Start development server:**
+
+   ```bash
+   pnpm dev
+   ```
+
+   Opens [http://localhost:3000](http://localhost:3000) with hot reload.
+
+4. **Build for production:**
+
+   ```bash
+   pnpm build
+   ```
+
+   Builds to `dist/` folder with TypeScript compilation and optimized bundles.
+
+5. **Preview production build:**
+   ```bash
+   pnpm preview
+   ```
+
+### Code Quality
+
+- **Linting:**
+  ```bash
+  pnpm lint
+  ```
+  Runs ESLint with TypeScript rules and React-specific checks.
+
+## Testing
+
+This project uses **Vitest** as the testing framework with comprehensive test coverage.
+
+### Running Tests
+
+#### Basic Test Execution
+
+```bash
+# Run all tests once
+pnpm test
+
+# Run tests in watch mode (re-runs on file changes)
+pnpm test:watch
+```
+
+#### Interactive Test UI
+
+```bash
+# Launch Vitest UI in browser - great for debugging and exploring tests
+pnpm test:ui
+```
+
+Opens an interactive web interface showing:
+
+- Test file explorer
+- Real-time test results
+- Coverage reports
+- Test debugging tools
+
+#### Coverage Reports
+
+```bash
+# Run tests with coverage analysis
+pnpm test:coverage
+```
+
+Generates coverage reports in `coverage/` directory.
+
+### Test Structure
+
+- **Unit Tests** (`__tests__/components/`): Test individual React components
+- **API Tests** (`__tests__/api/`): Test service layer and API integration
+- **Integration Tests** (`__tests__/integration/`): Test component interaction flows
+- **Mocks** (`__tests__/mocks/`): MSW handlers for API mocking
+
+### Test Configuration
+
+- **Environment**: `happy-dom` for fast DOM simulation
+- **Setup**: `src/test-setup.ts` configures testing environment
+- **Mocking**: MSW intercepts HTTP requests for consistent testing
+- **Assertions**: Extended matchers from `@testing-library/jest-dom`
+
+## Configuration
+
+### Backend Integration
+
+The app connects to a Python backend service. Configure the base URL in:
+
+- Development: `vite.config.js` proxy settings
+- Tests: `src/test-setup.ts` axios defaults
+
+### Environment Variables
+
+Create `.env.local` for local development overrides:
+
+```bash
+VITE_API_BASE_URL=http://localhost:5000
+```
+
+## Build & Deployment
+
+1. **Production build:**
+
+   ```bash
+   pnpm build
+   ```
+
+2. **Build outputs:**
+
+   - `dist/` - Optimized static files ready for deployment
+   - TypeScript compilation ensures type safety
+   - Vite optimizes bundles for performance
+
+3. **Deployment:**
+   - Serve `dist/` folder as static files
+   - Configure proxy for API requests to backend service
+
+## Development Workflow
+
+1. **Feature development**: Use `pnpm dev` with hot reload
+2. **Test as you go**: Use `pnpm test:watch` for immediate feedback
+3. **Debug tests**: Use `pnpm test:ui` for visual test debugging
+4. **Code quality**: Run `pnpm lint` before commits
+5. **Build verification**: Run `pnpm build` to ensure production readiness
+
+## API Integration
+
+The frontend communicates with the AAZ Dev Tools Python backend through:
+
+- REST API endpoints for workspace management
+- Client configuration management
+- Command tree operations
+- TypeSpec integration workflows
+
+See `src/services/workspaceApi.ts` for available API functions.
+
+---
+
+For questions about the broader AAZ Dev Tools project, see the main repository README.
 
 ## Available Scripts
 

src/web/package.json

@@ -11,7 +11,7 @@
     "@mui/lab": "5.0.0-alpha.100",
     "@mui/material": "^5.15.15",
     "@typespec/compiler": "workspace:~",
-    "axios": "^0.21.1",
+    "axios": "^1.12.2",
     "es-module-shims": "~1.9.0",
     "pluralize": "^8.0.0",
     "react": "^18.2.0",
@@ -21,6 +21,9 @@
     "web-vitals": "^1.1.2"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^27.0.3",
     "@types/node": "^20.12.5",
     "@types/pluralize": "^0.0.29",
@@ -29,18 +32,26 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^3.2.4",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "happy-dom": "^17.4.4",
+    "msw": "^2.11.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vite-plugin-top-level-await": "^1.4.1"
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build --emptyOutDir",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
+    "test:ui": "vitest --ui"
   },
   "eslintConfig": {
     "extends": [