marketing-app/TESTING_GUIDE.md

UI/UX Improvements - Testing Guide

Quick Start

1. Start the app:

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