# AI Stack Deployer - Test Plan

## Test Environment
- Local development: `localhost:5173` (Vite) + `localhost:3000` (API)
- Production: `https://portal.ai.flexinit.nl`

## Phase 1: Build & TypeScript Validation

### 1.1 TypeScript Type Checking
- [ ] Run `bun run typecheck`
- [ ] Verify no type errors in client
- [ ] Verify no type errors in server

### 1.2 Production Build
- [ ] Run `bun run build`
- [ ] Verify client build succeeds
- [ ] Verify API build succeeds
- [ ] Check bundle sizes are reasonable
- [ ] Verify dist/client/ contains all assets

### 1.3 Docker Build
- [ ] Run `docker build -t ai-stack-deployer:test .`
- [ ] Verify build completes without errors
- [ ] Check that dist/client/ is copied to image

## Phase 2: Visual & UI Testing

### 2.1 Deploy Page (/) - New Design
- [ ] WebGL canvas background renders
- [ ] Glassmorphism card styling visible
- [ ] Language selector (NL/AR/EN) renders
- [ ] Page animations (fade-in, slide-up) work
- [ ] No visual glitches or layout breaks

### 2.2 Auth Page (/auth) - Existing Design
- [ ] Page lazy loads (shows Loading...)
- [ ] WebGL dot matrix animation renders
- [ ] Email step renders correctly
- [ ] Code entry step renders correctly
- [ ] Success step renders correctly

### 2.3 Responsive Design
- [ ] Test mobile viewport (375px)
- [ ] Test tablet viewport (768px)
- [ ] Test desktop viewport (1920px)

## Phase 3: Functionality Testing

### 3.1 Deploy Form
- [ ] Input field accepts text
- [ ] Real-time validation triggers on input
- [ ] Invalid names show error message
- [ ] Valid names show "✓ Name is available!"
- [ ] Deploy button disabled when invalid
- [ ] Deploy button enabled when valid
- [ ] URL preview updates dynamically

### 3.2 Language Switching (i18n)
- [ ] Click NL - UI switches to Dutch
- [ ] Click AR - UI switches to Arabic (RTL)
- [ ] Click EN - UI switches to English
- [ ] All translations render correctly
- [ ] RTL layout works for Arabic

### 3.3 API Integration
- [ ] GET /health returns healthy status
- [ ] GET /api/check/:name validates names
- [ ] POST /api/deploy starts deployment
- [ ] SSE /api/status/:id streams progress
- [ ] CORS headers present

### 3.4 Deployment Flow (if API available)
- [ ] Submit valid stack name
- [ ] Progress page renders
- [ ] SSE progress updates received
- [ ] Progress bar animates
- [ ] Logs display in real-time
- [ ] Success page renders on completion
- [ ] "Deploy Another" button resets form

### 3.5 Error Handling
- [ ] Submit taken name - shows error
- [ ] Submit invalid name - shows error
- [ ] Network error - shows error message
- [ ] Error page has "Try Again" button

## Phase 4: Browser Compatibility

### 4.1 Console Errors
- [ ] No JavaScript errors in console
- [ ] No React warnings
- [ ] No 404 for assets

### 4.2 Network Requests
- [ ] All assets load successfully (JS, CSS, fonts)
- [ ] API requests return valid responses
- [ ] SSE connection established properly

## Phase 5: Production Deployment

### 5.1 Docker Container
- [ ] Container starts successfully
- [ ] Health check passes
- [ ] Port 3000 accessible
- [ ] React app served from /
- [ ] API endpoints respond

### 5.2 Production Environment
- [ ] Navigate to https://portal.ai.flexinit.nl
- [ ] Verify React app loads (not legacy)
- [ ] Test full deployment flow
- [ ] Verify HTTPS certificate valid

## Pass/Fail Criteria

**PASS**: All items checked, no critical issues
**FAIL**: Any critical issue (build fails, page doesn't load, API broken)

## Test Execution Log

Date: 2026-01-13
Tester: Claude (Sisyphus)
Environment: Local development

---