update on timeline on portfolio view + some corrections
This commit is contained in:
fahed
386
TESTING_GUIDE.md
Normal file
386
TESTING_GUIDE.md
Normal file
@@ -0,0 +1,386 @@
|
||||
# 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! 🎉**
|
||||
Reference in New Issue
Block a user