Brain/command-center/ui/TESTING.md

# TekDek Command Center - Testing Guide

**For**: QA and Developers  
**Version**: 1.0.0  
**Scope**: Frontend UI Testing  

---

## Quick Test (5 Minutes)

```bash
# 1. Start backend API
cd ../
npm run dev

# 2. Open UI (new terminal)
cd ui/
python3 -m http.server 8000

# 3. Open browser
open http://localhost:8000

# 4. Run basic workflow
# - Create a project
# - Create a task
# - Drag task to different column
# - Edit task
# - Delete task
```

---

## Manual Testing Workflow

### 1. Projects List View

**Test**: Create and display projects

```
[ ] Load page → Projects list displays
[ ] Click filter → Filters work (Active, Paused, Archived)
[ ] No projects → Shows "Create Your First Project" button
[ ] Grid responsive → Desktop (3 cols) → Tablet (2 cols) → Mobile (1 col)
[ ] Click project → Navigates to detail view
[ ] Hover effects → Card raises on hover
```

### 2. Create Project

**Test**: New project form

```
[ ] Click "New Project" → Modal opens
[ ] Form validates → Name required
[ ] Fill form → All fields accept input
[ ] Color picker → Shows color preview
[ ] Icon selector → All icons display
[ ] Submit → Project created, list updates
[ ] Duplicate names → Allowed (API allows it)
[ ] Cancel → Modal closes without saving
[ ] Close (X) → Modal closes without saving
```

### 3. Project Detail View

**Test**: Kanban board and navigation

```
[ ] Back button → Returns to project list
[ ] Header info → Shows title, description, stats
[ ] Stats update → Task count, Done, Overdue correct
[ ] 4 columns → Backlog, In Progress, Blocked, Done
[ ] Task count → Shows number of tasks per column
[ ] Empty column → Displays gracefully
[ ] Filter by status → Kanban updates
```

### 4. Create Task

**Test**: New task form

```
[ ] Click "Add Task" → Modal opens
[ ] Title required → Form validates
[ ] Title accepts text → Input works
[ ] Description optional → Can be empty
[ ] Status dropdown → All 4 options available
[ ] Due date picker → Calendar shows
[ ] Fill form → All fields accept input
[ ] Submit → Task created in correct column
[ ] Default status → Backlog if not specified
[ ] Close → Modal closes without saving
```

### 5. Kanban Board - Drag and Drop

**Test**: Task reordering

```
[ ] Drag task → Visual feedback (opacity change)
[ ] Drop in same column → Position updates
[ ] Drop in different column → Status changes
[ ] Reorder tasks → Tasks renumber correctly
[ ] Drag from backlog to done → Status becomes "Done"
[ ] Overdue task → Shows in red (if before today)
[ ] Due soon (3 days) → Shows in yellow
[ ] Multiple tasks → Can drag any of them
[ ] Animation smooth → No jank or delays
```

### 6. Edit Task

**Test**: Task editing

```
[ ] Click task card → Edit modal opens
[ ] Form prefilled → Current values show
[ ] Edit title → Updates on submit
[ ] Edit description → Updates on submit
[ ] Change status → Task moves to new column
[ ] Change due date → Updates display
[ ] Delete button → Shows in form
[ ] Save changes → Task updates
[ ] Cancel → Modal closes without saving
```

### 7. Delete Task

**Test**: Task deletion

```
[ ] Click "Delete Task" → Confirmation shows
[ ] Confirm → Task removed from board
[ ] Cancel → Task remains
[ ] After delete → Board refreshes
[ ] Stats update → Task count decreases
```

### 8. Error Handling

**Test**: Network and validation errors

```
[ ] Stop backend → Connection status shows red
[ ] Create project (no backend) → Error message shows
[ ] Invalid data → API returns error, user sees message
[ ] Network timeout → User-friendly error shown
[ ] Toast disappears → After 4 seconds
[ ] Multiple errors → Each shown in own toast
```

### 9. Responsive Design

**Test**: Mobile and tablet

```
[ ] Desktop (1920px) → Full layout
[ ] Tablet (768px) → Sidebar becomes top nav
[ ] Mobile (375px) → Single column layout
[ ] Touch drag → Works on mobile (if supported)
[ ] Buttons → Large enough to tap (44px minimum)
[ ] Forms → Full width on mobile
[ ] Modals → Scale to screen size
[ ] Overflow → Scrolls properly on small screens
[ ] No horizontal scroll → Fits viewport
```

### 10. Performance

**Test**: Speed and responsiveness

```
[ ] Page load → Under 2 seconds
[ ] Project list load → Under 500ms from API
[ ] Create project → Under 1 second
[ ] Drag task → Immediate visual feedback
[ ] Modal open → Instant (no animation lag)
[ ] Filter → Instant (< 100ms)
[ ] No console errors → F12 → Console tab
[ ] No warnings → DevTools clean
```

### 11. Browser Compatibility

**Test**: Different browsers

```
Chrome:
[ ] All features work
[ ] No console errors
[ ] Drag/drop works

Firefox:
[ ] All features work
[ ] No console errors
[ ] Drag/drop works

Safari (macOS/iOS):
[ ] All features work
[ ] No console errors
[ ] Touch drag works

Edge:
[ ] All features work
[ ] No console errors
[ ] Drag/drop works
```

### 12. Accessibility

**Test**: Keyboard and screen readers

```
[ ] Tab navigation → Can tab through all buttons
[ ] Enter key → Activates focused button
[ ] Escape key → Closes modals
[ ] Focus visible → All buttons show focus state
[ ] Color contrast → Text readable (WCAG AA)
[ ] Form labels → All inputs have labels
[ ] Error messages → Clear and helpful
```

---

## Automated Testing Script

Save as `test.html` to run UI tests:

```html
<!DOCTYPE html>
<html>
<head>
    <title>TekDek UI Tests</title>
    <style>
        body { font-family: monospace; }
        .pass { color: green; }
        .fail { color: red; }
    </style>
</head>
<body>
    <h1>TekDek Command Center - UI Tests</h1>
    <div id="results"></div>

    <script>
        const tests = [
            {
                name: "API client exists",
                test: () => typeof api !== 'undefined'
            },
            {
                name: "UI controller exists",
                test: () => typeof ui !== 'undefined'
            },
            {
                name: "DOM elements cached",
                test: () => ui.projectsList !== null
            },
            {
                name: "Projects list view exists",
                test: () => document.getElementById('projects-list-view') !== null
            },
            {
                name: "Project detail view exists",
                test: () => document.getElementById('project-detail-view') !== null
            },
            {
                name: "New project modal exists",
                test: () => document.getElementById('modal-new-project') !== null
            },
            {
                name: "New task modal exists",
                test: () => document.getElementById('modal-new-task') !== null
            },
            {
                name: "Edit task modal exists",
                test: () => document.getElementById('modal-edit-task') !== null
            },
            {
                name: "Event listeners attached",
                test: () => ui.btnNewProject.onclick !== null
            },
            {
                name: "CSS variables defined",
                test: () => getComputedStyle(document.documentElement)
                    .getPropertyValue('--color-primary').trim() !== ''
            }
        ];

        let passed = 0, failed = 0;
        const results = document.getElementById('results');

        tests.forEach(test => {
            try {
                if (test.test()) {
                    results.innerHTML += `<p class="pass">✓ ${test.name}</p>`;
                    passed++;
                } else {
                    results.innerHTML += `<p class="fail">✗ ${test.name}</p>`;
                    failed++;
                }
            } catch (e) {
                results.innerHTML += `<p class="fail">✗ ${test.name}: ${e.message}</p>`;
                failed++;
            }
        });

        results.innerHTML += `<h2>${passed} passed, ${failed} failed</h2>`;
    </script>

    <!-- Include UI files after body -->
    <script src="api.js"></script>
    <script src="ui.js"></script>
    <script src="app.js"></script>
</body>
</html>
```

---

## API Integration Tests

### Test Data

Use seed data from backend:

```bash
# List seeded projects
curl http://localhost:3000/api/v1/projects

# Should return projects with tasks
```

### Test Endpoints

```javascript
// Test GET projects
async function testGetProjects() {
    const projects = await api.getProjects();
    console.assert(Array.isArray(projects), 'Projects should be array');
    console.assert(projects.length > 0, 'Should have projects');
}

// Test POST project
async function testCreateProject() {
    const project = await api.createProject({
        name: 'Test Project',
        description: 'Test',
        color_hex: '#3498db'
    });
    console.assert(project.id > 0, 'Should have ID');
}

// Test drag-drop (reorder)
async function testTaskReorder() {
    const projectId = 1;
    const tasks = await api.getTasks(projectId);
    if (tasks.length > 1) {
        const reordered = [tasks[1].id, tasks[0].id];
        const result = await api.reorderTasks(projectId, reordered);
        console.assert(result.updated_count === 2, 'Should reorder 2 tasks');
    }
}

// Run tests
await testGetProjects();
await testCreateProject();
await testTaskReorder();
console.log('All tests passed!');
```

---

## Performance Testing

### Lighthouse

```bash
# Install Lighthouse
npm install -g lighthouse

# Run audit
lighthouse http://localhost:8000 --view

# Check scores:
# Performance: 90+
# Accessibility: 90+
# Best Practices: 90+
# SEO: 90+
```

### Network Performance

In DevTools Network tab:

```
Expected times:
- Initial load: < 2s
- Project list: < 500ms
- Task list: < 200ms
- Create project: < 500ms
- Drag task: < 100ms (visual feedback immediate)
```

### Memory Usage

In DevTools Memory tab:

```
Expected:
- Initial: ~5-10 MB
- After loading projects: ~15-20 MB
- After operations: No growth (no memory leaks)
```

---

## Edge Cases

### Test Unusual Scenarios

```javascript
// Empty project (no tasks)
[ ] Load project with 0 tasks → Kanban shows 4 empty columns

// Many tasks (100+)
[ ] Load project with 100+ tasks → Board renders smoothly

// Long names
[ ] Project name 255 chars → Displays without breaking layout
[ ] Task description very long → Text wraps correctly

// Special characters
[ ] Project name with emoji → Renders correctly
[ ] Task with special chars (<>&") → Escaped properly

// Concurrent operations
[ ] Create task while another is loading → Queue handled correctly
[ ] Drag while API call pending → Optimistic update

// Network issues
[ ] Slow network (3G) → UI remains responsive
[ ] Intermittent failures → Retry logic works
[ ] Offline → Shows connection status
```

---

## User Acceptance Testing (UAT) Checklist

Get feedback from real users:

```
Project Management:
[ ] Easy to create projects
[ ] Project colors meaningful
[ ] Stats are helpful
[ ] Can find projects quickly

Task Management:
[ ] Easy to create tasks
[ ] Drag-drop intuitive
[ ] Status changes work
[ ] Due dates are clear

Overall:
[ ] Design is clean
[ ] No confusing elements
[ ] Responsive on mobile
[ ] Fast enough for daily use
```

---

## Issue Reporting Template

When you find a bug:

```markdown
## Title
[Clear description of issue]

## Steps to Reproduce
1. Step 1
2. Step 2
3. Step 3

## Expected
[What should happen]

## Actual
[What actually happens]

## Browser
[Chrome 120 / Firefox 121 / etc.]

## System
[macOS 14 / Windows 11 / etc.]

## Screenshots
[If applicable]

## Console Errors
[Any JavaScript errors]
```

---

## Regression Testing

Before each release:

```bash
# Run full manual workflow
[ ] Create project
[ ] Create task
[ ] Edit task
[ ] Drag task
[ ] Delete task
[ ] Check all statuses
[ ] Check mobile view
[ ] Check filters
[ ] Check modals
[ ] Check toast messages
```

---

## Load Testing

Test with many projects/tasks:

```javascript
// Create 50 projects
for (let i = 0; i < 50; i++) {
    await api.createProject({
        name: `Test Project ${i}`,
        color_hex: `#${Math.random().toString(16).slice(2, 8)}`
    });
}

// Time project list load
console.time('List 50 projects');
const projects = await api.getProjects();
console.timeEnd('List 50 projects');

// Should be < 1 second
```

---

## Sign-Off

Before going to production:

- [ ] All manual tests passed
- [ ] All edge cases tested
- [ ] No console errors
- [ ] Lighthouse score 90+
- [ ] Mobile tested (iOS and Android)
- [ ] Browser compatibility verified
- [ ] Performance acceptable
- [ ] UAT approved by users

---

**Ready for Production ✅**

Questions? See README.md or DEPLOYMENT.md