319 lines
9.4 KiB
Markdown
319 lines
9.4 KiB
Markdown
|
# 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
|