@tinkcarlos/skillora 0.2.0

package/.claude/skills/fullstack-developer/references/ui-testing-checklist.md

@@ -0,0 +1,292 @@
+# UI Element Testing Checklist
+
+> Test EVERY interactive element. No exceptions.
+
+## Element-by-Element Testing
+
+### Buttons
+
+| Test | Check |
+|------|-------|
+| Click | Action triggers correctly |
+| Double-click | No duplicate submission |
+| Disabled state | Cannot click when disabled |
+| Loading state | Shows spinner, prevents re-click |
+| Hover | Visual feedback |
+| Focus | Keyboard focusable, visible outline |
+| Aria | Has aria-label or accessible text |
+
+### Input Fields
+
+| Test | Check |
+|------|-------|
+| Type | Characters appear correctly |
+| Clear | Can clear content |
+| Placeholder | Shows when empty |
+| Validation | Error shows on invalid input |
+| Required | Cannot submit when empty |
+| Max length | Respects character limit |
+| Paste | Handles pasted content |
+| Autofill | Works with browser autofill |
+| Keyboard | Tab navigation works |
+
+### Forms
+
+| Test | Check |
+|------|-------|
+| Submit | Data sent correctly |
+| Validation | All fields validated |
+| Error display | Errors shown clearly |
+| Success | Success feedback shown |
+| Reset | Form can be reset |
+| Dirty state | Warn before losing changes |
+| Enter key | Submits form |
+| Loading | Disabled during submit |
+
+### Modals/Dialogs
+
+| Test | Check |
+|------|-------|
+| Open | Opens correctly |
+| Close button | Closes modal |
+| Backdrop click | Closes (if expected) |
+| Escape key | Closes modal |
+| Focus trap | Focus stays in modal |
+| Scroll lock | Background doesn't scroll |
+| Animation | Smooth open/close |
+| Nested | Works if modals nest |
+
+### Dropdowns/Selects
+
+| Test | Check |
+|------|-------|
+| Open | Dropdown opens |
+| Close | Closes on blur/select |
+| Selection | Value updates |
+| Keyboard | Arrow keys navigate |
+| Search | Filter works (if applicable) |
+| Clear | Can clear selection |
+| Multi-select | Multiple items (if applicable) |
+| Placeholder | Shows default text |
+| **🔴 Bottom edge** | Dropdown flips up when near viewport bottom |
+| **🔴 Right edge** | Content doesn't overflow viewport right |
+
+### Context Menus (Right-Click Menus)
+
+| Test | Check |
+|------|-------|
+| Open | Menu appears on right-click |
+| Close | Closes on click outside/Escape |
+| Actions | Menu items trigger correctly |
+| Nested | Submenus work (if applicable) |
+| **🔴 Bottom edge** | Menu flips UP when clicked near viewport bottom |
+| **🔴 Right edge** | Menu flips LEFT when clicked near viewport right |
+| **🔴 Corner** | Both flips work when clicked in bottom-right corner |
+| Scroll | Menu stays in view when page scrolls |
+
+### Tooltips/Popovers
+
+| Test | Check |
+|------|-------|
+| Trigger | Shows on hover/focus/click |
+| Hide | Hides on mouse leave/blur/click outside |
+| Content | Displays correct content |
+| Delay | Appropriate show/hide delay |
+| **🔴 Edge detection** | Flips direction when near any viewport edge |
+| **🔴 All four edges** | Test near top, bottom, left, right edges |
+| Arrow | Arrow points to trigger element |
+| Portal | Renders in portal (not clipped by parent overflow) |
+
+### Tables
+
+| Test | Check |
+|------|-------|
+| Render | Data displays correctly |
+| Sort | Columns sort |
+| Filter | Filter works |
+| Pagination | Pages work |
+| Empty state | Shows when no data |
+| Loading | Shows loading indicator |
+| Selection | Row selection works |
+| Actions | Row actions work |
+
+### Navigation
+
+| Test | Check |
+|------|-------|
+| Links | Navigate correctly |
+| Active state | Current page highlighted |
+| External links | Open in new tab |
+| Back button | History works |
+| Deep links | Direct URL access works |
+| Breadcrumbs | Show correct path |
+
+### Toast/Notifications
+
+| Test | Check |
+|------|-------|
+| Display | Shows correctly |
+| Auto-dismiss | Closes after timeout |
+| Manual close | Can be dismissed |
+| Stack | Multiple notifications stack |
+| Type | Success/error/warning styles |
+
+### File Upload
+
+| Test | Check |
+|------|-------|
+| Click upload | File dialog opens |
+| Drag drop | Drop zone works |
+| File types | Validates allowed types |
+| File size | Validates size limit |
+| Progress | Shows upload progress |
+| Cancel | Can cancel upload |
+| Preview | Shows file preview |
+| Multiple | Multiple files (if applicable) |
+
+---
+
+## State Testing Matrix
+
+For EVERY component, test all states:
+
+| State | What to Check |
+|-------|---------------|
+| Default | Normal appearance and behavior |
+| Hover | Visual feedback on mouse over |
+| Focus | Visible focus indicator |
+| Active | Click/press state |
+| Disabled | Grayed out, not interactive |
+| Loading | Spinner, disabled interaction |
+| Error | Red border, error message |
+| Success | Green feedback |
+| Empty | Empty state UI |
+| Partial | Partial data state |
+
+---
+
+## Accessibility Testing
+
+| Check | How |
+|-------|-----|
+| Keyboard nav | Tab through all elements |
+| Focus visible | Focus ring visible |
+| Screen reader | Aria labels present |
+| Color contrast | 4.5:1 minimum |
+| Touch targets | 44x44px minimum |
+| Error announcement | Errors announced |
+
+---
+
+## Responsive Testing
+
+| Breakpoint | What to Check |
+|------------|---------------|
+| Mobile (320px) | Layout doesn't break |
+| Mobile (375px) | Standard mobile |
+| Tablet (768px) | Tablet layout |
+| Desktop (1024px) | Desktop layout |
+| Large (1440px) | Wide screen |
+
+---
+
+## 🔴 Viewport Boundary Testing (MANDATORY for Popups)
+
+Test ALL popup/floating elements at every viewport edge.
+
+### Test Matrix for Positioned Elements
+
+| Element | Test Position | Expected Behavior |
+|---------|---------------|-------------------|
+| Context Menu | Bottom of list | Menu opens UPWARD |
+| Context Menu | Right edge | Menu opens LEFTWARD |
+| Context Menu | Bottom-right corner | Menu opens UP-LEFT |
+| Dropdown | Near viewport bottom | Dropdown flips to "dropup" |
+| Tooltip | Top of viewport | Tooltip shows BELOW trigger |
+| Tooltip | Right edge | Tooltip shows to LEFT |
+| Popover | Any edge | Auto-flips to visible position |
+| Autocomplete | Near bottom | Suggestions open upward |
+
+### How to Test
+
+1. **Resize browser** to make viewport smaller
+2. **Scroll content** so target element is near edge
+3. **Trigger popup** (right-click, hover, click)
+4. **Verify**: Popup is fully visible, no clipping
+
+### Quick Test Script for Edge Detection
+
+```typescript
+describe('Popup Edge Detection', () => {
+  beforeEach(() => {
+    // Set viewport to small size
+    cy.viewport(400, 300);
+  });
+
+  it('context menu flips up when near bottom', () => {
+    // Scroll to bottom item
+    cy.get('[data-testid="last-item"]').scrollIntoView();
+    
+    // Right-click
+    cy.get('[data-testid="last-item"]').rightclick();
+    
+    // Menu should be fully visible (not below viewport)
+    cy.get('[data-testid="context-menu"]')
+      .should('be.visible')
+      .then($menu => {
+        const rect = $menu[0].getBoundingClientRect();
+        expect(rect.bottom).to.be.lessThan(window.innerHeight);
+      });
+  });
+
+  it('dropdown flips up when near bottom', () => {
+    cy.get('[data-testid="bottom-select"]').click();
+    cy.get('[data-testid="dropdown-options"]')
+      .should('be.visible')
+      .then($dropdown => {
+        const rect = $dropdown[0].getBoundingClientRect();
+        expect(rect.bottom).to.be.lessThan(window.innerHeight);
+      });
+  });
+});
+```
+
+### Common Failure Patterns
+
+| Symptom | Root Cause | Fix |
+|---------|------------|-----|
+| Menu clipped at bottom | No boundary check | Add `useLayoutEffect` with viewport detection |
+| Menu behind other elements | z-index issue | Use portal or increase z-index |
+| Menu disappears on scroll | Using `absolute` vs `fixed` | Use `fixed` positioning |
+| Flicker on position adjust | Using `useEffect` not `useLayoutEffect` | Switch to `useLayoutEffect` |
+
+---
+
+## Quick Test Script
+
+```typescript
+// For each component, run through:
+
+describe('ComponentName', () => {
+  // 1. Rendering
+  it('renders correctly', () => {});
+  
+  // 2. Interaction
+  it('handles click', () => {});
+  it('handles keyboard', () => {});
+  
+  // 3. States
+  it('shows loading state', () => {});
+  it('shows error state', () => {});
+  it('shows empty state', () => {});
+  
+  // 4. Validation
+  it('validates input', () => {});
+  it('shows validation errors', () => {});
+  
+  // 5. Accessibility
+  it('is keyboard accessible', () => {});
+  it('has proper aria labels', () => {});
+});
+```
+