botserver/web/desktop/TESTING.md

# Testing Checklist - General Bots Desktop Modules

## 🎯 Purpose
Test the rebuilt Drive, Tasks, and Mail modules to ensure they work properly with all themes and maintain full functionality.

---

## 📋 Pre-Testing Setup

### 1. Clear Browser Cache
- [ ] Hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
- [ ] Clear localStorage
- [ ] Clear session storage

### 2. Check Console
- [ ] Open browser DevTools (F12)
- [ ] Check Console tab for errors
- [ ] Check Network tab for failed requests

### 3. Verify Files
- [ ] `drive/drive.html` updated
- [ ] `drive/drive.css` updated
- [ ] `drive/drive.js` updated
- [ ] `tasks/tasks.html` updated
- [ ] `tasks/tasks.css` updated
- [ ] `tasks/tasks.js` needs update (partial)

---

## 🚗 Drive Module Testing

### Basic Functionality
- [ ] Drive section loads without errors
- [ ] No console errors when switching to Drive
- [ ] Alpine.js component initializes (`driveApp` function found)
- [ ] File tree displays correctly
- [ ] All sample files/folders visible

### Tree View
- [ ] Tree view is default view
- [ ] Folders show expand/collapse arrows
- [ ] Click arrow to expand/collapse folders
- [ ] Nested items show with proper indentation
- [ ] File icons display correctly (📁, 📄, 📊, etc.)
- [ ] File sizes show for files (not folders)
- [ ] Modified dates display
- [ ] Hover shows action buttons (Download, Share, Delete)

### Grid View
- [ ] Click grid icon to switch to grid view
- [ ] Files show as cards
- [ ] Icons display correctly
- [ ] File names visible
- [ ] Click file to select it
- [ ] Double-click folder opens it

### Navigation
- [ ] Breadcrumb shows current path
- [ ] Click breadcrumb to navigate up
- [ ] Quick access sidebar shows (All Files, Recent, etc.)
- [ ] Click quick access items changes view
- [ ] Active item highlighted

### Search & Sort
- [ ] Type in search bar filters files
- [ ] Search works for file names
- [ ] Sort dropdown changes (Name, Modified, Size, Type)
- [ ] Sorting actually reorders items
- [ ] Folders stay at top when sorting

### Actions
- [ ] Click file selects it
- [ ] Details panel shows on right
- [ ] Download button shows alert
- [ ] Share button shows alert
- [ ] Delete button asks confirmation
- [ ] Create folder button prompts for name
- [ ] Upload button available (not implemented yet)

### Details Panel
- [ ] Shows when file selected
- [ ] Displays file icon
- [ ] Shows file name
- [ ] Shows type, size, dates
- [ ] Close button works
- [ ] Action buttons work

### Storage Info
- [ ] Storage bar visible in sidebar
- [ ] Shows GB used / total
- [ ] Progress bar displays

---

## ✅ Tasks Module Testing

### Basic Functionality
- [ ] Tasks section loads without errors
- [ ] No console errors when switching to Tasks
- [ ] Alpine.js component initializes
- [ ] Sample tasks display
- [ ] Statistics header shows counts

### Task Input
- [ ] Input field accepts text
- [ ] Placeholder text visible
- [ ] Press Enter adds task
- [ ] Click "Add Task" button adds task
- [ ] Input clears after adding
- [ ] New task appears in list

### Task Display
- [ ] Tasks show as cards
- [ ] Checkbox visible and styled
- [ ] Task text readable
- [ ] Hover shows action buttons
- [ ] Completed tasks show as faded
- [ ] Completed tasks have strikethrough text

### Task Actions
- [ ] Click checkbox toggles completion
- [ ] Click star toggles priority
- [ ] Priority tasks have yellow/warning border
- [ ] Priority tasks have left accent bar
- [ ] Click edit button or double-click edits
- [ ] Edit input appears inline
- [ ] Press Enter saves edit
- [ ] Press Esc cancels edit
- [ ] Click delete asks confirmation
- [ ] Delete removes task

### Filters
- [ ] "All" tab shows all tasks
- [ ] "Active" tab shows incomplete tasks
- [ ] "Completed" tab shows done tasks
- [ ] "Priority" tab shows starred tasks
- [ ] Badge shows count for each filter
- [ ] Active filter highlighted

### Statistics
- [ ] Total count accurate
- [ ] Active count accurate
- [ ] Done count accurate
- [ ] Header stats update when tasks change

### Footer
- [ ] Shows task remaining count
- [ ] "Clear Completed" button visible when have completed tasks
- [ ] Click clears all completed tasks
- [ ] "Export" button present
- [ ] Export shows alert (not fully implemented)

### Empty States
- [ ] No tasks shows "No tasks yet"
- [ ] No active shows "No active tasks"
- [ ] No completed shows "No completed tasks"
- [ ] No priority shows "No priority tasks"
- [ ] Context-appropriate messages

---

## 📧 Mail Module Testing

### Basic Functionality
- [ ] Mail section loads
- [ ] No console errors
- [ ] Alpine.js component works
- [ ] Sample emails display

### Mail List
- [ ] Emails show in list
- [ ] Unread emails highlighted
- [ ] Click email selects it
- [ ] Selected email highlighted
- [ ] Email preview text shows

### Mail Content
- [ ] Selected email shows in right panel
- [ ] Subject displays
- [ ] From/To shows
- [ ] Date displays
- [ ] Email body renders
- [ ] HTML formatting preserved

### Folders
- [ ] Inbox, Sent, Drafts visible in sidebar
- [ ] Click folder filters emails
- [ ] Active folder highlighted
- [ ] Folder counts show

### Actions
- [ ] Compose button present
- [ ] Reply button works (if present)
- [ ] Delete button works (if present)
- [ ] Mark read/unread toggles

---

## 🎨 Theme Integration Testing

### Test With Each Theme

For EACH of the 19 themes, verify:

#### Default Theme
- [ ] All modules look correct
- [ ] Colors appropriate
- [ ] Text readable
- [ ] Buttons visible

#### Orange Theme
- [ ] Drive styled correctly
- [ ] Tasks styled correctly
- [ ] Mail styled correctly
- [ ] Accent color is orange

#### Cyberpunk Theme
- [ ] Dark background
- [ ] Neon accents work
- [ ] High contrast maintained
- [ ] Text readable

#### Retrowave Theme
- [ ] Purple/pink gradients
- [ ] 80s aesthetic
- [ ] Dark background
- [ ] Neon text

#### Vapor Dream Theme
- [ ] Pastel colors
- [ ] Dreamy aesthetic
- [ ] Soft gradients

#### Y2K Glow Theme
- [ ] Bright colors
- [ ] Glossy effects
- [ ] Early 2000s vibe

#### All Other Themes (3D Bevel, Arcade Flash, Disco Fever, etc.)
- [ ] Theme applies to all modules
- [ ] No hardcoded colors visible
- [ ] Hover states work
- [ ] Focus states visible
- [ ] Borders/shadows appropriate

### Theme Switching
- [ ] Switch themes without page reload
- [ ] All modules update instantly
- [ ] No visual glitches
- [ ] localStorage saves theme
- [ ] Reload keeps selected theme

---

## 📱 Responsive Testing

### Desktop (1920x1080)
- [ ] Drive 3-column layout works
- [ ] Tasks centered with max-width
- [ ] Mail 3-column layout works
- [ ] All elements visible
- [ ] Proper spacing

### Laptop (1366x768)
- [ ] Drive layout adapts
- [ ] Tasks readable
- [ ] Mail columns adjust
- [ ] No horizontal scroll

### Tablet Portrait (768x1024)
- [ ] Drive sidebar hidden or collapsible
- [ ] Tasks single column
- [ ] Mail adapts to smaller screen
- [ ] Touch targets large enough

### Mobile (375x667)
- [ ] Drive mobile-optimized
- [ ] Tasks stack vertically
- [ ] Mail shows one panel at a time
- [ ] Buttons full-width where appropriate
- [ ] Text remains readable
- [ ] No tiny touch targets

---

## ♿ Accessibility Testing

### Keyboard Navigation
- [ ] Tab key moves between elements
- [ ] Enter activates buttons
- [ ] Escape closes modals/dropdowns
- [ ] Arrow keys work where appropriate
- [ ] Focus visible on all elements
- [ ] No keyboard traps

### Screen Reader
- [ ] ARIA labels present
- [ ] Buttons have descriptive labels
- [ ] Form inputs labeled
- [ ] Dynamic content announced
- [ ] Roles properly set

### Visual
- [ ] Text contrast sufficient (4.5:1 minimum)
- [ ] Focus indicators visible
- [ ] No color-only information
- [ ] Text scalable
- [ ] Icons have alt text

---

## ⚡ Performance Testing

### Load Time
- [ ] Drive loads in < 500ms
- [ ] Tasks loads in < 500ms
- [ ] Mail loads in < 500ms
- [ ] No lag when switching sections
- [ ] Theme changes instant

### Interactions
- [ ] Smooth animations (60fps)
- [ ] No jank when scrolling
- [ ] Button clicks responsive
- [ ] Hover effects smooth
- [ ] No layout shifts

### Memory
- [ ] No memory leaks when switching sections
- [ ] Console shows no warnings
- [ ] Browser doesn't slow down
- [ ] Multiple theme switches don't degrade performance

---

## 🐛 Common Issues to Check

### Drive
- [ ] No "quickAccess is not defined" error
- [ ] No "filteredItems is not defined" error
- [ ] No "selectedItem is not defined" error
- [ ] Folder expansion works
- [ ] Tree indentation correct

### Tasks
- [ ] Checkboxes toggle properly
- [ ] Priority flag works
- [ ] Edit mode activates
- [ ] Filters switch correctly
- [ ] Counts update

### Mail
- [ ] Emails selectable
- [ ] Content displays
- [ ] Folders filter properly
- [ ] Compose accessible

### Theme Issues
- [ ] No hardcoded #hex colors visible
- [ ] All backgrounds use theme variables
- [ ] Text always readable
- [ ] Borders visible in all themes
- [ ] Shadows appropriate

---

## 📊 Browser Compatibility

Test in:
- [ ] Chrome/Edge (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Mobile Chrome
- [ ] Mobile Safari

---

## ✅ Final Verification

Before marking complete:
- [ ] All critical bugs fixed
- [ ] All themes tested
- [ ] Responsive design verified
- [ ] Accessibility checked
- [ ] Performance acceptable
- [ ] No console errors
- [ ] Documentation updated
- [ ] Code reviewed

---

## 📝 Bug Report Template

If you find issues, document them:

**Module:** Drive / Tasks / Mail
**Theme:** Theme name
**Browser:** Browser name + version
**Screen Size:** Resolution
**Issue:** Description
**Steps to Reproduce:**
1. Step one
2. Step two
3. Step three

**Expected:** What should happen
**Actual:** What actually happens
**Console Errors:** Any errors in console

---

## 🎉 Success Criteria

All modules should:
- ✅ Load without errors
- ✅ Work with all 19 themes
- ✅ Be fully responsive
- ✅ Support keyboard navigation
- ✅ Have smooth animations
- ✅ Maintain functionality from original
- ✅ Look modern and polished

---

**Testing Status:** In Progress
**Last Updated:** 2024
**Tester:** [Your Name]