387 lines
9.8 KiB
Markdown
387 lines
9.8 KiB
Markdown
# UI/UX Improvements - Testing Guide
|
|
|
|
## Quick Start
|
|
|
|
1. **Start the app**:
|
|
```bash
|
|
cd /home/fahed/clawd/marketing-app
|
|
./start.sh
|
|
```
|
|
|
|
2. **Access the app**:
|
|
- Open browser: `http://localhost:5173`
|
|
- Login with your credentials
|
|
|
|
---
|
|
|
|
## Test Scenarios
|
|
|
|
### 1. Toast Notifications 🍞
|
|
|
|
#### Post Operations
|
|
1. Go to **Post Production** page
|
|
2. Click **"New Post"**
|
|
3. Fill in title, select brand, platform
|
|
4. Click **"Create Post"**
|
|
- ✅ Should see: Green success toast "Post created successfully!"
|
|
5. Click a post to edit
|
|
6. Change the title
|
|
7. Click **"Save Changes"**
|
|
- ✅ Should see: Green success toast "Post updated successfully!"
|
|
8. Drag a post to **"Published"** column (without publication links)
|
|
- ✅ Should see: Red error toast
|
|
9. Click a post, click **"Delete"**, confirm
|
|
- ✅ Should see: Green success toast "Post deleted successfully!"
|
|
|
|
#### Task Operations
|
|
1. Go to **Tasks** page
|
|
2. Click **"New Task"**
|
|
3. Fill in title
|
|
4. Click **"Create Task"**
|
|
- ✅ Should see: Green success toast "Task created successfully!"
|
|
5. Drag a task from "To Do" to "In Progress"
|
|
- ✅ Should see: Green success toast "Task status updated!"
|
|
|
|
#### Multiple Toasts
|
|
1. Quickly create 3 tasks in a row
|
|
- ✅ Should see: 3 toasts stacked on top of each other
|
|
- ✅ Each should auto-dismiss after 4 seconds
|
|
|
|
---
|
|
|
|
### 2. Loading States ⏳
|
|
|
|
#### Dashboard
|
|
1. **Refresh the page** while on Dashboard
|
|
- ✅ Should see: Skeleton loaders for:
|
|
- Welcome message
|
|
- 4 stat cards
|
|
- Recent posts list
|
|
- Upcoming deadlines list
|
|
- ✅ After loading: Smooth fade to actual content
|
|
|
|
#### Posts (Kanban View)
|
|
1. Go to **Post Production**
|
|
2. **Refresh the page**
|
|
- ✅ Should see: 5-column skeleton board with card placeholders
|
|
- ✅ After loading: Posts appear in correct columns
|
|
|
|
#### Posts (List View)
|
|
1. Click the **List view** icon
|
|
2. **Refresh the page**
|
|
- ✅ Should see: Table skeleton with 6 columns
|
|
- ✅ After loading: Table rows appear
|
|
|
|
#### Tasks
|
|
1. Go to **Tasks** page
|
|
2. **Refresh the page**
|
|
- ✅ Should see: Skeleton kanban board
|
|
- ✅ After loading: Tasks appear in columns
|
|
|
|
---
|
|
|
|
### 3. Empty States 🗂️
|
|
|
|
#### No Posts
|
|
1. Go to **Post Production**
|
|
2. Delete all posts (or use filters to hide all)
|
|
3. With **no posts at all**:
|
|
- ✅ Should see: Empty state with:
|
|
- FileText icon
|
|
- "No posts" title
|
|
- Helpful description
|
|
- **"Create Post"** button
|
|
4. Click the button
|
|
- ✅ Should open: Create post modal
|
|
|
|
#### Posts Filtered (No Results)
|
|
1. Select a brand filter that has no posts
|
|
- ✅ Should see: Empty state with:
|
|
- "No posts found" title
|
|
- "Try different filter" description
|
|
- **"Clear Filters"** button
|
|
2. Click the button
|
|
- ✅ Should clear: All filters
|
|
|
|
#### No Tasks
|
|
1. Go to **Tasks** page
|
|
2. Delete all tasks
|
|
- ✅ Should see: Empty state with:
|
|
- CheckSquare icon
|
|
- "No tasks yet" title
|
|
- **"Create Task"** button
|
|
|
|
#### Tasks Filtered (No Results)
|
|
1. Select **"Assigned to Me"** filter (if you have no tasks assigned)
|
|
- ✅ Should see: Empty state with:
|
|
- "No tasks match this filter" title
|
|
- **"Clear Filters"** button
|
|
|
|
---
|
|
|
|
### 4. Micro-interactions ✨
|
|
|
|
#### Button Hover Effects
|
|
1. Hover over **any button**
|
|
- ✅ Should see: Button lifts slightly (`-1px`)
|
|
- ✅ Should see: Subtle shadow appears
|
|
2. Click and hold a button
|
|
- ✅ Should see: Button presses down (scale `0.98`)
|
|
|
|
#### Card Hover Effects
|
|
1. Hover over a **PostCard** (in Kanban view)
|
|
- ✅ Should see:
|
|
- Card lifts up (`-3px`)
|
|
- Shadow becomes more prominent
|
|
- Smooth transition
|
|
2. Hover over a **TaskCard**
|
|
- ✅ Should see: Same elevation effect
|
|
- ✅ Should see: Quick action button appears
|
|
|
|
#### Stat Card Animation
|
|
1. Go to **Dashboard**
|
|
2. **Refresh the page**
|
|
- ✅ Should see: 4 stat cards animate in with stagger effect
|
|
- ✅ Each card appears 50ms after the previous one
|
|
|
|
#### Focus States
|
|
1. Press **Tab** repeatedly to navigate
|
|
- ✅ Should see: Blue outline (focus ring) on each element
|
|
- ✅ Ring should be 2px wide with 2px offset
|
|
2. Navigate to any input field
|
|
3. Press **Tab**
|
|
- ✅ Should see: Focus ring around input
|
|
|
|
---
|
|
|
|
### 5. Form UX 📝
|
|
|
|
#### Loading Button State
|
|
1. Go to **Post Production**
|
|
2. Click **"New Post"**
|
|
3. Fill in title
|
|
4. Click **"Create Post"**
|
|
- ✅ During save: Button shows spinner (text disappears)
|
|
- ✅ Button is disabled (no double-click possible)
|
|
- ✅ After save: Button returns to normal, modal closes
|
|
|
|
#### Same for Tasks
|
|
1. Create a task
|
|
- ✅ Save button shows loading spinner
|
|
- ✅ Cannot submit twice
|
|
|
|
#### Input Focus States
|
|
1. Click any input field
|
|
- ✅ Should see: Blue border and ring effect
|
|
2. Hover over an input (without clicking)
|
|
- ✅ Should see: Border color changes slightly
|
|
|
|
---
|
|
|
|
### 6. Card Improvements 🎴
|
|
|
|
#### PostCard Visual Hierarchy
|
|
1. Look at posts in **Kanban view**
|
|
- ✅ Title is prominent (larger, bold)
|
|
- ✅ Metadata is subtle (smaller, gray)
|
|
- ✅ Platforms shown with icons
|
|
- ✅ Brand badge clearly visible
|
|
2. Hover over a card
|
|
- ✅ Quick action buttons appear
|
|
- ✅ Card elevates smoothly
|
|
|
|
#### TaskCard Visual Hierarchy
|
|
1. Look at tasks
|
|
- ✅ Priority dot is visible (left side, colored)
|
|
- ✅ Title is clear
|
|
- ✅ "From:" label for tasks assigned by others
|
|
- ✅ "Assigned to:" label for tasks you delegated
|
|
- ✅ Due date with clock icon
|
|
2. Look for **overdue tasks**
|
|
- ✅ Due date should be red
|
|
|
|
---
|
|
|
|
### 7. Accessibility ♿
|
|
|
|
#### Keyboard Navigation
|
|
1. Press **Tab** to navigate through the page
|
|
- ✅ Tab order is logical
|
|
- ✅ All interactive elements can be reached
|
|
- ✅ Focus is visible at all times
|
|
2. Open a modal
|
|
3. Press **Escape**
|
|
- ✅ Modal closes
|
|
4. Open a dropdown/select
|
|
5. Use **Arrow keys** to navigate options
|
|
- ✅ Should work
|
|
|
|
#### Screen Reader (Optional)
|
|
1. Enable screen reader (VoiceOver on Mac, NVDA on Windows)
|
|
2. Navigate the page
|
|
- ✅ All text is read correctly
|
|
- ✅ Buttons are labeled
|
|
- ✅ Form labels are associated with inputs
|
|
|
|
#### Color Contrast
|
|
1. Look at all text elements
|
|
- ✅ Text is readable (WCAG AA compliant)
|
|
- ✅ Status badges have good contrast
|
|
- ✅ Buttons have clear text
|
|
|
|
---
|
|
|
|
### 8. RTL & i18n 🌍
|
|
|
|
#### Switch to Arabic
|
|
1. Go to **Settings**
|
|
2. Select **Arabic** language
|
|
3. Check:
|
|
- ✅ All text switches to Arabic
|
|
- ✅ Layout flips (RTL)
|
|
- ✅ Toasts appear on correct side
|
|
- ✅ All new features have Arabic translations
|
|
|
|
#### Toast Messages in Arabic
|
|
1. Create a post
|
|
- ✅ Toast shows: "تم إنشاء المنشور بنجاح!"
|
|
2. Update a task
|
|
- ✅ Toast shows: "تم تحديث المهمة بنجاح!"
|
|
|
|
---
|
|
|
|
## Visual Checklist
|
|
|
|
### ✅ Toast System
|
|
- [ ] Success toasts are green
|
|
- [ ] Error toasts are red
|
|
- [ ] Warning toasts are amber
|
|
- [ ] Info toasts are blue
|
|
- [ ] Toasts have icons
|
|
- [ ] Toasts auto-dismiss
|
|
- [ ] Multiple toasts stack
|
|
- [ ] Manual close works
|
|
|
|
### ✅ Loading States
|
|
- [ ] Dashboard skeleton matches layout
|
|
- [ ] Posts skeleton (Kanban) shows 5 columns
|
|
- [ ] Posts skeleton (List) shows table
|
|
- [ ] Tasks skeleton shows 3 columns
|
|
- [ ] Smooth transition to content
|
|
|
|
### ✅ Empty States
|
|
- [ ] Posts empty state has icon
|
|
- [ ] Posts empty state has CTA
|
|
- [ ] Tasks empty state has icon
|
|
- [ ] Tasks empty state has CTA
|
|
- [ ] Filtered empty states offer clear filters
|
|
- [ ] Messages are helpful and friendly
|
|
|
|
### ✅ Micro-interactions
|
|
- [ ] Buttons lift on hover
|
|
- [ ] Buttons press on click
|
|
- [ ] Cards elevate on hover
|
|
- [ ] Stat cards stagger animate
|
|
- [ ] Focus rings are visible
|
|
- [ ] Smooth transitions everywhere
|
|
|
|
### ✅ Forms
|
|
- [ ] Save buttons show loading
|
|
- [ ] Buttons disable during save
|
|
- [ ] No double-submission
|
|
- [ ] Focus states work
|
|
- [ ] Required fields marked
|
|
|
|
### ✅ Cards
|
|
- [ ] PostCard has hover effect
|
|
- [ ] TaskCard has hover effect
|
|
- [ ] Visual hierarchy is clear
|
|
- [ ] Quick actions appear on hover
|
|
|
|
### ✅ Accessibility
|
|
- [ ] Tab navigation works
|
|
- [ ] Focus is always visible
|
|
- [ ] Escape closes modals
|
|
- [ ] Color contrast is good
|
|
- [ ] Labels are descriptive
|
|
|
|
### ✅ i18n
|
|
- [ ] Arabic translation complete
|
|
- [ ] RTL layout works
|
|
- [ ] Toasts in correct language
|
|
|
|
---
|
|
|
|
## Performance Check
|
|
|
|
### Page Load Times
|
|
- Dashboard: Should load < 1 second
|
|
- Posts: Should load < 1 second
|
|
- Tasks: Should load < 1 second
|
|
|
|
### Animation Smoothness
|
|
- All animations should be smooth (60fps)
|
|
- No jank or stuttering
|
|
- Hover effects are instant
|
|
|
|
### Network (DevTools)
|
|
1. Open DevTools → Network tab
|
|
2. Refresh the page
|
|
3. Check:
|
|
- Total bundle size reasonable
|
|
- No errors
|
|
- API calls complete quickly
|
|
|
|
---
|
|
|
|
## Common Issues & Solutions
|
|
|
|
### Issue: Toasts don't appear
|
|
- **Check**: Is ToastProvider wrapping the app in App.jsx?
|
|
- **Check**: Is `useToast()` called inside a component within ToastProvider?
|
|
|
|
### Issue: Skeletons don't show
|
|
- **Check**: Is the loading state properly set before data fetch?
|
|
- **Check**: Are skeleton components imported correctly?
|
|
|
|
### Issue: Animations are choppy
|
|
- **Check**: Browser hardware acceleration enabled?
|
|
- **Check**: Too many elements animating at once?
|
|
|
|
### Issue: Focus ring not visible
|
|
- **Check**: Browser default focus outline not overridden?
|
|
- **Check**: CSS for focus-visible applied?
|
|
|
|
### Issue: RTL layout broken
|
|
- **Check**: All directional CSS uses logical properties?
|
|
- **Check**: Icons/images flipped correctly?
|
|
|
|
---
|
|
|
|
## Reporting Issues
|
|
|
|
If you find any issues:
|
|
|
|
1. **Note the exact steps** to reproduce
|
|
2. **Take a screenshot** if visual
|
|
3. **Check browser console** for errors
|
|
4. **Note browser** and version
|
|
|
|
---
|
|
|
|
## Success Criteria
|
|
|
|
The app passes if:
|
|
- ✅ All toast scenarios work
|
|
- ✅ All loading states appear correctly
|
|
- ✅ All empty states are helpful
|
|
- ✅ Animations are smooth
|
|
- ✅ Forms provide feedback
|
|
- ✅ Cards look polished
|
|
- ✅ Accessibility features work
|
|
- ✅ i18n is complete
|
|
|
|
---
|
|
|
|
**Happy Testing! 🎉**
|