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)

# 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:

<!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:

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

# Should return projects with tasks

Test Endpoints

// 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

# 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

// 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:

## 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:

# 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:

// 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