`COLLECTION-UI-TESTING.md`

183 lines
# Collection Page UI Testing Guide

## Local Testing (Browser DevTools)

### Setup
1. Open any Designer Wallcoverings collection page on the dev/live store
2. Open Chrome DevTools (F12)
3. Go to Console tab

### Test 1: Horizontal Filters Display
```javascript
// Check if filter container is using flexbox
const filters = document.querySelector('.boost-sd__filter-tree-wrapper');
console.log('Filter display:', window.getComputedStyle(filters).display);
console.log('Filter flex-direction:', window.getComputedStyle(filters).flexDirection);
console.assert(
  window.getComputedStyle(filters).display === 'flex',
  'Filters should be flex'
);
```

**Expected**: Console shows `display: flex` and `flex-direction: row`

### Test 2: Grid Column Range
```javascript
// Check grid slider range
const slider = document.getElementById('dw-grid-range');
console.log('Slider min:', slider.min);  // Should be 3
console.log('Slider max:', slider.max);  // Should be 12
console.assert(slider.max === '12', 'Max should be 12 columns');
```

**Expected**: Slider max shows `12` (not 8)

### Test 3: Grid Columns Apply Correctly
```javascript
// Test applying different column values
const slider = document.getElementById('dw-grid-range');
const grid = document.querySelector('.boost-sd__product-list');

for (let cols of [3, 6, 9, 12]) {
  slider.value = cols;
  slider.dispatchEvent(new Event('input'));
  const gridCols = window.getComputedStyle(grid).gridTemplateColumns;
  console.log(`${cols} columns:`, gridCols.split(' ').length, 'tracks');
}
```

**Expected**: Each value sets the correct number of grid columns

### Test 4: localStorage Persistence
```javascript
// Simulate user preference
const slider = document.getElementById('dw-grid-range');
slider.value = 8;
slider.dispatchEvent(new Event('change'));

// Check localStorage
console.log('Saved columns:', localStorage.getItem('dw-grid-cols'));

// Simulate page reload
location.reload();
// (page reloads, should restore to 8 columns)
```

**Expected**: After reload, grid shows 8 columns (localStorage persisted)

### Test 5: Full-Width Grid
```javascript
// Check grid takes full width (no sidebar padding)
const grid = document.querySelector('.boost-sd__product-list');
const padding = window.getComputedStyle(grid).paddingRight;
console.log('Grid padding-right:', padding);
console.assert(padding === '0px', 'Grid should have 0 right padding');
```

**Expected**: `paddingRight: 0px`

### Test 6: Mobile Responsive (640px)
```javascript
// Simulate mobile viewport
window.resizeTo(375, 812);  // iPhone size
// Or manually resize browser to <640px width

// Check filter container adapts
const filters = document.querySelector('.boost-sd__filter-tree-wrapper');
const style = window.getComputedStyle(filters);
console.log('Mobile filter max-height:', style.maxHeight);
console.log('Mobile filter overflow:', style.overflowY);
```

**Expected**: On mobile, filters have `max-height: 120px` and `overflow-y: auto`

## Manual Browser Testing

### Desktop (1920px+)
- [ ] Load `/collections/all` or any collection page
- [ ] Verify filter tabs appear horizontally above grid (Color, Style, Brand, Durability, Price)
- [ ] Click filter options—products should filter without page reload
- [ ] Adjust grid density slider: 3 → 4 → 6 → 8 → 10 → 12 columns
- [ ] Verify grid extends full viewport width
- [ ] Refresh page: grid should restore to your last-selected column count
- [ ] Verify sort dropdown works (usually top-left of toolbar)
- [ ] Verify "Show" per-page selector works (inside grid slider pill)

### Tablet (768px)
- [ ] Filter tabs should still appear horizontally but may wrap to 2-3 lines
- [ ] Grid should adapt column count (may reduce on smaller screen)
- [ ] Density slider should remain responsive

### Mobile (375px)
- [ ] Filter tabs in scrollable container (not taking full viewport height)
- [ ] Grid density slider should be touch-friendly
- [ ] Grid should show 2-3 columns maximum (responsive breakpoint)
- [ ] No horizontal scroll overflow

## Expected Behavior Changes

### Before (Vertical Sidebar)
```
┌─────────────────────────────────┐
│ Filter Toggle | Grid Slider     │
├────┬──────────────────────────┤
│ Co │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
│ lo │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
│    │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
│ St │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
│ yl │                         │
│ e  │                         │
└────┴──────────────────────────┘
```

### After (Horizontal Filters)
```
┌───────────────────────────────────┐
│ Color Style Brand | Grid Slider   │
├────────────────────────────────────┤
│ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓  │
│ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓  │
│ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓  │
└────────────────────────────────────┘
```

## Troubleshooting

### Problem: Filters still appear vertically
**Solution**: 
- Check Boost AI app version (may have changed HTML structure)
- Open DevTools → Inspect `.boost-sd__filter-tree-wrapper`
- Compare actual classes to CSS selectors in collection.liquid
- Update selectors if Boost changed class names

### Problem: Grid doesn't extend full width
**Solution**:
- Check if `.boost-sd__product-list` has competing padding/margin
- Add more `!important` flags to overrides
- Verify `.boost-sd__filter-products-wrap` is also full width

### Problem: Grid column control doesn't work
**Solution**:
- Check if slider is actually present: `document.getElementById('dw-grid-range')`
- Verify JavaScript is running: check Console for errors
- Check if Boost grid uses a different class (not `.boost-sd__product-list`)
- May need to target specific Boost grid class variants

### Problem: Mobile layout breaks
**Solution**:
- Adjust 640px breakpoint if needed for your target devices
- Reduce filter container height if tabs are too tall
- Test on actual mobile device (not just browser resize)

## Commit & Deployment Checklist

- [ ] All manual tests pass on dev theme
- [ ] No console errors in DevTools
- [ ] Filters visibly horizontal (not hidden/broken)
- [ ] Grid density 3-12 works end-to-end
- [ ] localStorage persists user preference
- [ ] Mobile view responsive and usable
- [ ] Prepare deployment memo for Steve
- [ ] Await approval for live push