# Admin Sync UI - User Interaction Test Plan

## Test Date
Generated: 2025-11-01

## Purpose
Verify all user interactions in the Admin Sync UI work correctly across different scenarios.

---

## 1. Entity Selection Tests

### 1.1 Individual Entity Selection
- [ ] Click individual entity checkboxes
- [ ] Verify checkbox state changes (checked/unchecked)
- [ ] Verify selected count updates correctly
- [ ] Verify "Sync Selected" button enables/disables based on selection

### 1.2 Select All / Deselect All
- [ ] Click "Select All" button
- [ ] Verify all 13 entities become checked
- [ ] Verify button text changes to "Deselect All"
- [ ] Verify count shows "13 of 13 entities selected"
- [ ] Click "Deselect All" button
- [ ] Verify all entities become unchecked
- [ ] Verify count shows "0 of 13 entities selected"

### 1.3 Disabled State During Sync
- [ ] Start a sync operation
- [ ] Verify all entity checkboxes are disabled
- [ ] Verify "Select All/Deselect All" button is disabled
- [ ] Wait for sync to complete
- [ ] Verify checkboxes re-enable

---

## 2. Sync Button Tests

### 2.1 Full Sync Button
- [ ] Click "Full Sync" button
- [ ] Verify confirmation dialog appears
- [ ] Verify dialog shows warning message about soft-deletes
- [ ] Click "Cancel" - verify dialog closes, no sync starts
- [ ] Click "Full Sync" again
- [ ] Click "Start Full Sync" in dialog
- [ ] Verify dialog closes
- [ ] Verify button shows loading spinner
- [ ] Verify button is disabled during sync
- [ ] Verify success toast appears
- [ ] Verify button returns to normal state after completion

### 2.2 Incremental Sync Button
- [ ] Click "Incremental Sync" button
- [ ] Verify NO confirmation dialog (should start immediately)
- [ ] Verify button shows loading spinner
- [ ] Verify button is disabled during sync
- [ ] Verify success toast appears
- [ ] Verify button returns to normal state

### 2.3 Sync Selected Button
- [ ] With 0 entities selected:
  - [ ] Verify button is disabled
  - [ ] Click button (should do nothing)
  - [ ] Verify error toast: "Please select at least one entity to sync"
- [ ] Select 3 entities
  - [ ] Verify button shows "Sync Selected (3)"
  - [ ] Verify button is enabled
  - [ ] Click button
  - [ ] Verify sync starts
  - [ ] Verify loading spinner appears
- [ ] During sync:
  - [ ] Verify all sync buttons are disabled

### 2.4 Button States During Sync
- [ ] Start any sync operation
- [ ] Verify all three sync buttons show loading spinner
- [ ] Verify all three buttons are disabled
- [ ] Verify buttons cannot be clicked
- [ ] Wait for sync completion
- [ ] Verify all buttons return to normal state

---

## 3. Dashboard Auto-Refresh Tests

### 3.1 Auto-Refresh During Sync
- [ ] Note current sync status data
- [ ] Start a sync operation
- [ ] Wait 5 seconds
- [ ] Verify dashboard data refreshes automatically
- [ ] Verify sync history table refreshes
- [ ] Verify no page flicker or jarring updates

### 3.2 Auto-Refresh Stops After Sync
- [ ] Wait for sync to complete
- [ ] Verify auto-refresh stops
- [ ] Wait 10 seconds
- [ ] Verify no unnecessary refreshes occur

---

## 4. Sync History Table Tests

### 4.1 History Display
- [ ] Verify table shows recent sync operations
- [ ] Verify columns display correctly:
  - Entity name (human-readable)
  - Sync type (full-sync, incremental, entity-specific)
  - Status badge (completed/failed/in_progress)
  - Start timestamp
  - Duration
  - Records added (green)
  - Records updated (blue)
  - Records deleted (red)
  - Triggered by

### 4.2 Pagination
- [ ] If more than 10 records exist:
  - [ ] Verify "Previous" button is disabled on page 1
  - [ ] Click "Next" button
  - [ ] Verify page advances
  - [ ] Verify new records load
  - [ ] Verify "Previous" button is now enabled
  - [ ] Click "Previous" button
  - [ ] Verify page goes back
  - [ ] Verify "Previous" button is disabled again

### 4.3 Download Functionality
- [ ] Click "JSON" download button
- [ ] Verify JSON file downloads with timestamp in filename
- [ ] Open JSON file and verify:
  - Valid JSON format
  - Contains all visible history records
  - All fields are present
- [ ] Click "CSV" download button
- [ ] Verify CSV file downloads with timestamp in filename
- [ ] Open CSV file and verify:
  - Headers are present
  - Data rows match table display
  - Special characters are properly escaped
  - Commas in error messages don't break columns

### 4.4 Download Button States
- [ ] When no history exists:
  - [ ] Verify download buttons are hidden
- [ ] When loading:
  - [ ] Verify download buttons are disabled
- [ ] After data loads:
  - [ ] Verify download buttons are enabled

---

## 5. Sync Dashboard Tests

### 5.1 Entity Status Cards
- [ ] Verify each synced entity has a status card
- [ ] Verify cards show:
  - Entity name
  - Status badge (completed/failed)
  - Time since last sync (e.g., "2 hours ago")
  - Records added (green, with + prefix)
  - Records updated (blue, with ~ prefix)
  - Records deleted (red, with - prefix)

### 5.2 Empty State
- [ ] With no sync history:
  - [ ] Verify message: "No sync history available"

### 5.3 Status Badge Colors
- [ ] Verify "completed" status shows success color (green/default)
- [ ] Verify "failed" status shows error color (red/destructive)
- [ ] Verify "in_progress" status shows secondary color

---

## 6. Toast Notifications Tests

### 6.1 Success Notifications
- [ ] Complete a successful sync
- [ ] Verify success toast appears
- [ ] Verify toast message is clear and informative
- [ ] Verify toast auto-dismisses after a few seconds
- [ ] Verify toast can be manually dismissed

### 6.2 Error Notifications
- [ ] Trigger a sync error (if possible, or simulate)
- [ ] Verify error toast appears
- [ ] Verify error message is displayed
- [ ] Verify toast is styled as error (red/destructive)
- [ ] Verify toast can be dismissed

### 6.3 Validation Notifications
- [ ] Click "Sync Selected" with no entities selected
- [ ] Verify error toast: "Please select at least one entity to sync"

---

## 7. Responsive Behavior Tests

### 7.1 Mobile View (< 640px)
- [ ] Resize browser to mobile width
- [ ] Verify sync buttons stack vertically
- [ ] Verify entity checkboxes show in single column
- [ ] Verify sync history table scrolls horizontally
- [ ] Verify pagination buttons show icons only
- [ ] Verify download buttons remain accessible
- [ ] Verify all interactions still work

### 7.2 Tablet View (640px - 1024px)
- [ ] Resize browser to tablet width
- [ ] Verify sync buttons show in 2 columns
- [ ] Verify entity checkboxes show in 2-3 columns
- [ ] Verify dashboard cards show in 2 columns
- [ ] Verify all interactions work smoothly

### 7.3 Desktop View (> 1024px)
- [ ] Resize browser to desktop width
- [ ] Verify sync buttons show in 3 columns
- [ ] Verify entity checkboxes show in 4 columns
- [ ] Verify dashboard cards show in 3-4 columns
- [ ] Verify optimal spacing and layout

---

## 8. Edge Cases and Error Handling

### 8.1 Network Errors
- [ ] Simulate network failure during sync
- [ ] Verify error is caught and displayed
- [ ] Verify UI returns to normal state
- [ ] Verify buttons re-enable

### 8.2 API Errors
- [ ] Trigger API error (401, 500, etc.)
- [ ] Verify error toast displays
- [ ] Verify error message is user-friendly
- [ ] Verify sync state resets properly

### 8.3 Rapid Clicking
- [ ] Rapidly click sync buttons
- [ ] Verify only one sync starts
- [ ] Verify no duplicate requests
- [ ] Verify UI state remains consistent

### 8.4 Browser Back/Forward
- [ ] Start a sync
- [ ] Click browser back button
- [ ] Return to page
- [ ] Verify sync state is handled correctly

---

## 9. Accessibility Tests

### 9.1 Keyboard Navigation
- [ ] Tab through all interactive elements
- [ ] Verify focus indicators are visible
- [ ] Verify all buttons are keyboard accessible
- [ ] Press Enter/Space on focused buttons
- [ ] Verify actions trigger correctly

### 9.2 Screen Reader Support
- [ ] Verify buttons have descriptive labels
- [ ] Verify checkboxes have associated labels
- [ ] Verify status badges have meaningful text
- [ ] Verify loading states are announced

---

## 10. Performance Tests

### 10.1 Large Dataset Handling
- [ ] Load page with 100+ sync history records
- [ ] Verify pagination works smoothly
- [ ] Verify no lag when scrolling
- [ ] Verify download functions work with large datasets

### 10.2 Concurrent Operations
- [ ] Open multiple browser tabs
- [ ] Start sync in one tab
- [ ] Verify other tabs can still view data
- [ ] Verify no conflicts or race conditions

---

## Test Results Summary

**Total Tests**: ~100+ individual test cases
**Status**: Ready for manual testing

### Critical Path Tests (Must Pass)
1. Entity selection and deselection
2. Full sync with confirmation dialog
3. Incremental sync without confirmation
4. Sync Selected with validation
5. Dashboard auto-refresh during sync
6. History table pagination
7. Download JSON/CSV functionality
8. Toast notifications for success/error
9. Responsive layout on mobile/tablet/desktop
10. Button disabled states during sync

### Notes for Testing
- Test with actual PostgreSQL database and Autotask API connection
- Use browser DevTools to simulate mobile/tablet viewports
- Test in multiple browsers (Chrome, Firefox, Safari)
- Monitor console for errors during testing
- Check network tab for API calls

### Recommended Testing Order
1. Start with entity selection tests (foundation)
2. Test each sync button type
3. Verify dashboard updates
4. Test history table features
5. Test responsive behavior
6. Test edge cases and errors
7. Verify accessibility
8. Performance testing last
