# Manual Testing Checklist for InfoCenter Pattern Detection

**Version**: 1.0
**Last Updated**: 2025-12-18
**Purpose**: Comprehensive manual testing guide for InfoCenter advanced page analysis visualization features

---

## Prerequisites

Before starting manual testing, ensure the following environment setup is complete:

### Environment Requirements
- Dashboard running locally: `npm run dev` (from `apps/dashboard/`)
- API server running with database populated
- Node.js environment active: `nvm use`
- Browser: Chrome/Edge (latest) or Firefox (latest) for DevTools access

### Required Test Data

You need at least **3 page analyses** in the database with the following characteristics:

1. **Analysis with CONFIRMED status and patterns**:
   - `reliabilityStatus`: `CONFIRMED`
   - `listingTemplates`: Array with at least 1 listing template (10+ slots, 3+ actions)
   - `searchMechanism`: Object with method `FORM_SUBMIT` or `URL_PATTERN`
   - `paginationMechanism`: Object with type `NUMBERED_PAGES`, `NEXT_PREV`, `LOAD_MORE`, or `INFINITE_SCROLL`

2. **Analysis with DRAFT status and no patterns**:
   - `reliabilityStatus`: `DRAFT`
   - `listingTemplates`: `undefined` or `[]`
   - `searchMechanism`: `undefined`
   - `paginationMechanism`: `undefined`

3. **Analysis with PENDING_CONFIRMATION status**:
   - `reliabilityStatus`: `PENDING_CONFIRMATION`
   - Any combination of pattern fields (optional)

### Test Data Setup Script

If you need to populate test data, use the Scout service to analyze target URLs:

```bash
# Start Scout service
cd apps/scout
npm run dev

# Submit analysis job via API
curl -X POST http://localhost:3000/api/scout/analyze \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com/products", "pageType": "PRODUCT_LISTING"}'
```

Alternatively, manually insert test data into the database using the migration scripts.

---

## Test Cases

### 1. Statistics Cards Display

**Objective**: Verify statistics cards show correct counts and calculations

**Steps**:
1. Navigate to Dashboard InfoCenter page (`/info-center`)
2. Observe the statistics cards at the top of the page
3. Verify the following cards are displayed:
   - **Total Pages** card
   - **Total Analyses** card
   - **Total Elements** card
   - **Reliability Status** card

**Test Cases**:
- [ ] **TC1.1**: Total Pages card displays correct count matching database
- [ ] **TC1.2**: Total Analyses card displays correct count matching database
- [ ] **TC1.3**: Total Elements card displays correct sum of all extracted elements
- [ ] **TC1.4**: Reliability Status card shows confirmation rate percentage (e.g., "65% Confirmed")
- [ ] **TC1.5**: Reliability Status card shows breakdown with counts:
  - Confirmed: X pages
  - Pending: Y pages
  - Draft: Z pages
  - Rejected: W pages
- [ ] **TC1.6**: All percentages are calculated correctly (count / total * 100)
- [ ] **TC1.7**: Cards display icons appropriate to their content

**Expected Results**: All counts are accurate, percentages calculated correctly (rounded to 0 decimal places), and cards render without layout issues.

**Known Issues**: None

---

### 2. Pattern Detection Summary Card

**Objective**: Verify pattern detection overview card appears and displays accurate statistics

**Steps**:
1. Ensure at least one analysis in the database has `listingTemplates`, `searchMechanism`, or `paginationMechanism` populated
2. Navigate to InfoCenter page
3. Locate the "Pattern Detection Summary" card (should appear near statistics cards)

**Test Cases**:
- [ ] **TC2.1**: Card only appears when `stats.withPatterns > 0`
- [ ] **TC2.2**: "Pages with Patterns" count is accurate (counts analyses with any pattern field populated)
- [ ] **TC2.3**: "Total Listing Templates" sum is correct (sum of all `listingTemplates.length` across analyses)
- [ ] **TC2.4**: "Pages with Search" count includes all analyses with `searchMechanism` defined
- [ ] **TC2.5**: "Pages with Pagination" count includes all analyses with `paginationMechanism` defined
- [ ] **TC2.6**: Card does NOT appear when no analyses have pattern data

**Expected Results**: Summary card provides accurate overview of pattern detection across all analyses. Card is hidden when no patterns exist.

**Known Issues**: None

---

### 3. Pagination in CrawledPagesSection

**Objective**: Verify pagination controls work correctly in the main pages table

**Steps**:
1. Navigate to InfoCenter page
2. Locate the "Crawled Pages" section table
3. Interact with pagination controls at the bottom of the table

**Test Cases**:
- [ ] **TC3.1**: Previous button is disabled on page 1
- [ ] **TC3.2**: Next button is disabled on last page
- [ ] **TC3.3**: Page numbers display correctly (max 5 visible with ellipsis for large datasets)
- [ ] **TC3.4**: Page size selector shows options: 10, 20, 50, 100
- [ ] **TC3.5**: Default page size is 20 items per page
- [ ] **TC3.6**: "Showing X-Y of Z results" text is accurate (e.g., "Showing 1-20 of 156 results")
- [ ] **TC3.7**: Clicking page number navigates to that page correctly
- [ ] **TC3.8**: Changing page size resets to page 1
- [ ] **TC3.9**: Pagination state syncs with URL query params (`?page=2&pageSize=50`)
- [ ] **TC3.10**: Browser back/forward buttons work with paginated state
- [ ] **TC3.11**: Loading skeleton appears during page transitions (if applicable)

**Expected Results**: Smooth pagination with accurate counts, working navigation, and URL state synchronization for deep linking.

**Known Issues**: None

---

### 4. Reliability Status Filter

**Objective**: Verify reliability status filter dropdown works and updates table correctly

**Steps**:
1. Navigate to InfoCenter page
2. Locate the reliability status filter dropdown (above CrawledPagesSection table)
3. Select different filter options

**Test Cases**:
- [ ] **TC4.1**: Dropdown shows all options:
  - All
  - Draft
  - Pending Confirmation
  - Confirmed
  - Rejected
- [ ] **TC4.2**: Selecting "Draft" shows only analyses with `reliabilityStatus: DRAFT`
- [ ] **TC4.3**: Selecting "Pending Confirmation" shows only `PENDING_CONFIRMATION` analyses
- [ ] **TC4.4**: Selecting "Confirmed" shows only `CONFIRMED` analyses
- [ ] **TC4.5**: Selecting "Rejected" shows only `REJECTED` analyses
- [ ] **TC4.6**: Selecting "All" shows all analyses regardless of status
- [ ] **TC4.7**: Changing filter resets pagination to page 1
- [ ] **TC4.8**: ReliabilityStatusBadge column displays correct colors:
  - DRAFT: gray background
  - PENDING_CONFIRMATION: yellow background
  - CONFIRMED: green background
  - REJECTED: red background
- [ ] **TC4.9**: ReliabilityStatusBadge shows correct icon for each status:
  - DRAFT: FileQuestion icon
  - PENDING_CONFIRMATION: Clock icon
  - CONFIRMED: CheckCircle2 icon
  - REJECTED: AlertCircle icon
- [ ] **TC4.10**: Tooltip appears on hover over ReliabilityStatusBadge with status description

**Expected Results**: Filter works correctly, pagination resets, badges display with accurate colors and icons matching WCAG AA contrast requirements.

**Known Issues**: None

---

### 5. Patterns Tab

**Objective**: Verify patterns tab displays correctly and filters analyses with pattern data

**Steps**:
1. Navigate to InfoCenter page
2. Locate the tab navigation (if tabs exist: "All Analyses" and "Patterns")
3. Click the "Patterns" tab

**Test Cases**:
- [ ] **TC5.1**: Patterns tab shows count of analyses with patterns (e.g., "Patterns (12)")
- [ ] **TC5.2**: Patterns tab is disabled when no patterns exist (grayed out)
- [ ] **TC5.3**: Switching to Patterns tab shows only analyses with `listingTemplates`, `searchMechanism`, or `paginationMechanism` populated
- [ ] **TC5.4**: Each analysis is displayed in a Card component
- [ ] **TC5.5**: Each card shows:
  - Page URL
  - ReliabilityStatusBadge
  - PatternDetectionSection component
- [ ] **TC5.6**: PatternDetectionSection shows inside each card (nested layout)
- [ ] **TC5.7**: Switching back to "All Analyses" tab shows all analyses

**Expected Results**: Patterns tab organizes pattern view effectively, showing only analyses with detected patterns. Tab is disabled when no patterns exist.

**Known Issues**: If PatternDetectionSection is not implemented as a separate tab but inline in the main view, this test case may not apply.

---

### 6. ListingTemplateCard Display

**Objective**: Verify listing template summary cards display correct information

**Steps**:
1. Navigate to InfoCenter page
2. Locate an analysis with `listingTemplates` populated
3. Observe the ListingTemplateCard component(s)

**Test Cases**:
- [ ] **TC6.1**: Card shows formatted listing type (e.g., "Product Listing" from `PRODUCT_LISTING`)
- [ ] **TC6.2**: Slot count badge displays correct number (e.g., "8 slots")
- [ ] **TC6.3**: Item selector shown in code formatting (monospace font, gray background)
- [ ] **TC6.4**: Layout metadata displays correctly:
  - Layout type: "grid" or "list"
  - Items per row: Number (e.g., "3 per row")
- [ ] **TC6.5**: First 5 slots shown as badges (e.g., "title", "price", "image", "rating", "description")
- [ ] **TC6.6**: "+N more" badge appears when slot count > 5 (e.g., "+3 more")
- [ ] **TC6.7**: Item actions shown as secondary badges (e.g., "View Details", "Add to Cart")
- [ ] **TC6.8**: Card is clickable with hover effect (cursor changes to pointer)
- [ ] **TC6.9**: Card layout does not break with long selector strings (truncation applied)

**Expected Results**: Card provides comprehensive template summary with correct data, proper formatting, and interactive hover state.

**Known Issues**: Very long selectors (>100 characters) may cause minor layout shifts on hover if truncation is not implemented.

---

### 7. ListingTemplateModal

**Objective**: Verify detailed modal view displays all template information with working pagination

**Steps**:
1. Navigate to InfoCenter page
2. Click on a ListingTemplateCard
3. Modal should open with detailed template information
4. Navigate through tabs and paginated tables

**Test Cases**:
- [ ] **TC7.1**: Modal opens when clicking ListingTemplateCard
- [ ] **TC7.2**: Modal title shows formatted listing type (e.g., "Product Listing Template")
- [ ] **TC7.3**: Item selector displayed in modal header with copy button
- [ ] **TC7.4**: Tabs are visible: "Overview", "Slots", "Actions", "Structure"
- [ ] **TC7.5**: Slots table shows all slots with correct data columns:
  - Role (e.g., "title", "price", "image")
  - Selector (CSS selector string)
  - Extract (extraction method: "text", "attr", "html")
  - Parse (parsing rules, if any)
  - Required (boolean: Yes/No)
- [ ] **TC7.6**: Slots table pagination works:
  - Default: 10 slots per page
  - Page size options: 5, 10, 25, 50
  - Previous/Next buttons functional
  - Page numbers display correctly
- [ ] **TC7.7**: Actions table shows all actions with correct columns:
  - Action Type (e.g., "click", "hover", "submit")
  - Selector (CSS selector for action target)
  - Trigger (event that triggers action)
- [ ] **TC7.8**: Actions table pagination works (same as slots table)
- [ ] **TC7.9**: Structure section shows:
  - Layout type (grid/list)
  - Items per row (number)
  - Direction (horizontal/vertical)
- [ ] **TC7.10**: Close button (X icon) closes modal
- [ ] **TC7.11**: Clicking outside modal (backdrop) closes modal
- [ ] **TC7.12**: Modal is scrollable when content overflows viewport height
- [ ] **TC7.13**: Copy button next to selectors copies selector text to clipboard
- [ ] **TC7.14**: Long selectors (>80 chars) are truncated with "..." and expand on click

**Expected Results**: Modal displays all template details with working pagination for slots and actions tables. Navigation between tabs is smooth, and modal is dismissible.

**Known Issues**: On very small screens (<640px), modal may require horizontal scrolling for tables with many columns.

---

### 8. SearchMechanismCard & PaginationMechanismCard

**Objective**: Verify pattern cards display type-specific information correctly

**Steps**:
1. Navigate to InfoCenter page
2. Locate an analysis with `searchMechanism` and/or `paginationMechanism` populated
3. Observe the SearchMechanismCard and PaginationMechanismCard components

**Test Cases - SearchMechanismCard**:
- [ ] **TC8.1**: SearchMechanismCard shows method badge:
  - "Form Submit" for `FORM_SUBMIT`
  - "URL Pattern" for `URL_PATTERN`
- [ ] **TC8.2**: FORM_SUBMIT method displays:
  - Form selector (CSS selector for `<form>`)
  - Input selector (CSS selector for search input)
  - Submit selector (CSS selector for submit button)
- [ ] **TC8.3**: URL_PATTERN method displays:
  - URL pattern (e.g., `/search?q={query}`)
  - Parameter name (e.g., "q")
- [ ] **TC8.4**: All selectors displayed in code formatting (monospace, gray background)
- [ ] **TC8.5**: Search icon (from lucide-react) is visible in card header

**Test Cases - PaginationMechanismCard**:
- [ ] **TC8.6**: PaginationMechanismCard shows type badge:
  - "Numbered Pages" for `NUMBERED_PAGES`
  - "Next/Prev" for `NEXT_PREV`
  - "Load More" for `LOAD_MORE`
  - "Infinite Scroll" for `INFINITE_SCROLL`
- [ ] **TC8.7**: NUMBERED_PAGES type displays:
  - Page links selector (CSS selector for page number links)
  - Active page selector (CSS selector for current page indicator)
- [ ] **TC8.8**: NEXT_PREV type displays:
  - Next button selector
  - Previous button selector
- [ ] **TC8.9**: LOAD_MORE type displays:
  - Load more button selector
- [ ] **TC8.10**: INFINITE_SCROLL type displays:
  - Scroll container selector
  - Loading indicator selector
- [ ] **TC8.11**: All selectors displayed in code formatting
- [ ] **TC8.12**: ChevronsRight icon (from lucide-react) is visible in card header

**Expected Results**: Cards display type-specific information correctly with appropriate icons, method/type badges, and formatted selectors.

**Known Issues**: None

---

### 9. Responsive Design

**Objective**: Verify mobile, tablet, and desktop layouts work correctly

**Steps**:
1. Open Dashboard in Chrome DevTools responsive mode
2. Test layouts at different breakpoints: 320px, 640px, 768px, 1024px, 1920px
3. Verify all components adapt correctly

**Test Cases**:
- [ ] **TC9.1**: Desktop (1024px+):
  - All features visible
  - Statistics cards in 2-4 column grid
  - ListingTemplateCard grid: 2 columns
  - Table columns fully visible
- [ ] **TC9.2**: Tablet (640px-1024px):
  - Cards stack to 1-2 columns
  - Table columns remain visible (horizontal scroll if needed)
  - Modal width adjusts (90% of viewport)
- [ ] **TC9.3**: Mobile (320px-640px):
  - Single column layout
  - Statistics cards stack vertically
  - Horizontal scroll for wide tables
  - Modal: 95% width, bottom sheet style
- [ ] **TC9.4**: ListingTemplateCard stacks header on mobile (<640px):
  - Listing type on one row
  - Slot count badge on next row
- [ ] **TC9.5**: CrawledPagesSection hides "Last Analyzed" column on mobile (<768px)
- [ ] **TC9.6**: CrawledPagesSection hides "Elements" column on small screens (<1024px)
- [ ] **TC9.7**: Pagination controls stack vertically on mobile (buttons on top, page size selector below)
- [ ] **TC9.8**: All interactive elements remain tappable (min 44x44px touch target)

**Expected Results**: All components adapt correctly to screen size without horizontal overflow (except intentional table scrolling). Touch targets meet accessibility standards.

**Known Issues**: None

---

### 10. Error Handling

**Objective**: Verify error boundaries work and prevent app crashes from malformed data

**Steps**:
1. Inject malformed JSONB data into database (manually edit a `listingTemplates` field to invalid JSON)
2. Navigate to InfoCenter page
3. Observe error boundary behavior

**Test Cases**:
- [ ] **TC10.1**: Malformed JSONB data in `listingTemplates` does not crash entire app
- [ ] **TC10.2**: PatternDetectionSection shows fallback UI on error:
  - Error icon (AlertCircle)
  - Error message: "Failed to load pattern detection data"
  - "Try Again" button
- [ ] **TC10.3**: ListingTemplateModal shows fallback on table error (if JSONB parsing fails for slots/actions)
- [ ] **TC10.4**: Error boundary displays "Try Again" button
- [ ] **TC10.5**: Clicking "Try Again" resets error state and re-renders component
- [ ] **TC10.6**: Error logged to browser console with details (for debugging)
- [ ] **TC10.7**: Other analyses without malformed data continue to display correctly

**Expected Results**: Graceful degradation for JSONB parsing errors. Error boundary catches exceptions and displays helpful fallback UI without crashing the entire InfoCenter page.

**Known Issues**: Error boundary does not currently send error reports to monitoring service (future enhancement).

---

### 11. Empty States

**Objective**: Verify empty state messages display when no data exists

**Steps**:
1. Clear database or filter to show empty results
2. Observe empty state UI

**Test Cases**:
- [ ] **TC11.1**: No analyses in database:
  - Shows FileQuestion icon
  - Message: "No page analyses found"
  - "Go to Crawler" button visible
  - Clicking button navigates to `/crawler` page
- [ ] **TC11.2**: No patterns detected:
  - Shows message: "No patterns detected. Run AI confirmation to detect patterns."
  - Patterns tab disabled or hidden
- [ ] **TC11.3**: Empty slots table in ListingTemplateModal:
  - Message: "No slots defined for this template"
- [ ] **TC11.4**: Empty actions table in ListingTemplateModal:
  - Message: "No actions defined for this template"
- [ ] **TC11.5**: Reliability filter returns no results:
  - Message: "No analyses found with status: [SELECTED_STATUS]"
  - Shows "Clear Filter" button

**Expected Results**: Helpful guidance when no data exists. Empty states provide actionable next steps (e.g., navigate to Crawler, run AI confirmation).

**Known Issues**: None

---

## Test Data Setup

To test all features comprehensively, create test data with the following characteristics:

### Required Test Analyses

1. **Analysis with Complex Listing Template** (PRODUCT_LISTING):
   - `reliabilityStatus`: `CONFIRMED`
   - `listingTemplates`: Array with 1 template containing:
     - 10+ slots (title, price, image, rating, description, brand, availability, shipping, reviews, sku)
     - 3+ actions (click on product, add to cart, view details)
     - Structure: grid layout, 3 items per row
   - `searchMechanism`: FORM_SUBMIT with form, input, submit selectors
   - `paginationMechanism`: NUMBERED_PAGES with page links and active page selectors

2. **Analysis with SEARCH mechanism**:
   - `reliabilityStatus`: `PENDING_CONFIRMATION`
   - `searchMechanism`: Object with method `URL_PATTERN` and URL pattern `/search?q={query}`

3. **Analysis with PAGINATION mechanism**:
   - `reliabilityStatus`: `DRAFT`
   - `paginationMechanism`: Object with type `NEXT_PREV` and next/prev selectors

4. **Analysis with DRAFT status (no patterns)**:
   - `reliabilityStatus`: `DRAFT`
   - All pattern fields: `undefined` or `null`

5. **Analysis with REJECTED status**:
   - `reliabilityStatus`: `REJECTED`
   - Any pattern fields (to test badge rendering)

### SQL Insert Script (Example)

```sql
-- Example: Insert analysis with complex listing template
INSERT INTO page_analyses (
  page_id,
  reliability_status,
  listing_templates,
  search_mechanism,
  pagination_mechanism
) VALUES (
  'uuid-page-1',
  'CONFIRMED',
  '[{
    "listingType": "PRODUCT_LISTING",
    "itemSelector": {"primary": ".product-card", "fallback": ".item"},
    "structure": {"layout": "grid", "itemsPerRow": 3, "direction": "horizontal"},
    "slots": [
      {"role": "title", "selector": ".product-title", "extract": "text", "required": true},
      {"role": "price", "selector": ".price", "extract": "text", "parse": "currency", "required": true},
      {"role": "image", "selector": ".product-img", "extract": "attr:src", "required": true},
      {"role": "rating", "selector": ".stars", "extract": "attr:data-rating", "required": false},
      {"role": "description", "selector": ".desc", "extract": "text", "required": false},
      {"role": "brand", "selector": ".brand", "extract": "text", "required": false},
      {"role": "availability", "selector": ".stock", "extract": "text", "required": false},
      {"role": "shipping", "selector": ".shipping", "extract": "text", "required": false},
      {"role": "reviews", "selector": ".reviews", "extract": "text", "required": false},
      {"role": "sku", "selector": ".sku", "extract": "attr:data-sku", "required": false}
    ],
    "itemActions": [
      {"actionType": "click", "selector": ".product-link", "trigger": "click"},
      {"actionType": "click", "selector": ".add-to-cart", "trigger": "click"},
      {"actionType": "click", "selector": ".view-details", "trigger": "click"}
    ]
  }]'::jsonb,
  '{"method": "FORM_SUBMIT", "formSelector": "#search-form", "inputSelector": "#search-input", "submitSelector": "button[type=submit]"}'::jsonb,
  '{"type": "NUMBERED_PAGES", "containerSelector": ".pagination", "pageLinksSelector": ".page-link", "activePageSelector": ".page-link.active"}'::jsonb
);
```

### Alternative: Use Scout Service

If Scout service is running, submit analysis requests to populate realistic test data:

```bash
# Analyze a product listing page
curl -X POST http://localhost:3000/api/scout/analyze \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://www.amazon.com/s?k=laptops",
    "pageType": "PRODUCT_LISTING"
  }'

# Wait for AI confirmation service to run (if enabled)
# Verify reliability status updated to CONFIRMED
```

---

## Quick Test Scenarios

These are rapid testing workflows to verify core functionality in 3-5 minutes each.

### Scenario 1: Filter and Paginate (3 minutes)

**Goal**: Verify filtering and pagination work together correctly

1. Navigate to InfoCenter page
2. Select "Confirmed" from reliability status filter
3. Verify table shows only confirmed analyses
4. Change page size to 10
5. Navigate to page 2
6. Verify URL shows `?page=2&pageSize=10&status=CONFIRMED`
7. Click browser back button
8. Verify page returns to page 1

**Expected**: Filter + pagination + URL state work seamlessly

---

### Scenario 2: View Listing Template Details (4 minutes)

**Goal**: Verify listing template modal displays full details

1. Navigate to InfoCenter page
2. Find an analysis with listing template
3. Click ListingTemplateCard
4. Verify modal opens with template details
5. Switch to "Slots" tab
6. Verify slots table shows all slots (paginated if >10)
7. Change page size to 5 in slots table
8. Navigate through pages
9. Switch to "Actions" tab
10. Verify actions table displays correctly
11. Close modal

**Expected**: Modal displays all template data with working tab navigation and pagination

---

### Scenario 3: Test Responsive Design (5 minutes)

**Goal**: Verify layout adapts to different screen sizes

1. Open Dashboard in Chrome DevTools
2. Enable responsive mode (Ctrl+Shift+M)
3. Set viewport to 320px (mobile)
4. Verify single column layout, cards stack vertically
5. Verify tables have horizontal scroll
6. Change viewport to 768px (tablet)
7. Verify 2-column card grid
8. Change viewport to 1920px (desktop)
9. Verify 4-column card grid, all table columns visible

**Expected**: Layout adapts smoothly without breaking at any breakpoint

---

### Scenario 4: Error Boundary Test (3 minutes)

**Goal**: Verify error boundary prevents app crash

1. Manually edit database to inject malformed JSONB:
   ```sql
   UPDATE page_analyses SET listing_templates = 'invalid json'::jsonb WHERE id = 'test-id';
   ```
2. Navigate to InfoCenter page
3. Find the affected analysis row
4. Verify PatternDetectionSection shows error fallback UI
5. Click "Try Again" button
6. Verify error persists (since data is still malformed)
7. Fix database: `UPDATE page_analyses SET listing_templates = NULL WHERE id = 'test-id';`
8. Refresh page
9. Verify error is gone

**Expected**: Error boundary catches exception, displays fallback, does not crash entire page

---

### Scenario 5: Empty State Flow (3 minutes)

**Goal**: Verify empty states guide user correctly

1. Clear all analyses from database or use empty test database
2. Navigate to InfoCenter page
3. Verify empty state shows:
   - FileQuestion icon
   - "No page analyses found" message
   - "Go to Crawler" button
4. Click "Go to Crawler" button
5. Verify navigation to `/crawler` page
6. Return to InfoCenter
7. Add 1 analysis with DRAFT status and no patterns
8. Verify "No patterns detected" message appears
9. Verify Patterns tab is disabled

**Expected**: Empty states provide helpful guidance and actionable next steps

---

## Known Issues / Limitations

### Current Limitations

1. **Pattern Detection Requires AI Confirmation**:
   - Listing templates, search mechanism, and pagination mechanism are only populated after AI confirmation service runs
   - Draft analyses will not have pattern data until confirmed
   - Workaround: Manually trigger AI confirmation via Scout service

2. **Cache Versioning**:
   - localStorage cache is versioned
   - First load after deployment clears localStorage to ensure schema compatibility
   - Users may see empty state briefly on first visit after update

3. **Performance with Large Datasets**:
   - Tables with 100+ slots/actions may have minor performance impact (pagination helps)
   - Very large listing templates (>50 slots) may cause modal to load slowly
   - Mitigation: Use tabbed layout and lazy rendering

4. **Mobile Table Scrolling**:
   - Tables with many columns require horizontal scrolling on mobile (<640px)
   - Some column headers may be truncated on very small screens
   - Mitigation: Hide less important columns on mobile (e.g., "Last Analyzed", "Elements")

5. **JSONB Parsing Errors**:
   - Malformed JSONB in database is caught by error boundary
   - Error boundary does not currently send error reports to monitoring service
   - Limitation: No automatic data cleanup for malformed JSONB (requires manual DB fix)

---

## Testing Tools

### Recommended Tools

1. **Chrome DevTools**:
   - Responsive mode: `Ctrl+Shift+M` (Windows/Linux) or `Cmd+Shift+M` (Mac)
   - Network tab: Verify API calls and pagination params
   - Console: Check for error logs and warnings
   - React DevTools: Inspect component props and state

2. **React DevTools**:
   - Install browser extension: [React DevTools](https://react.dev/learn/react-developer-tools)
   - Inspect component hierarchy
   - View component props and state (e.g., pagination state, filter state)
   - Profiler: Measure render performance for large datasets

3. **Network Tab**:
   - Verify API calls include correct pagination params: `?skip=0&limit=20`
   - Verify responses include `meta` field with `{ total, skip, limit, hasMore }`
   - Check for JSONB deserialization errors (400/500 responses)

4. **Accessibility Tools**:
   - Lighthouse: Run accessibility audit (target: WCAG AA)
   - axe DevTools: Automated accessibility testing
   - WAVE: Web accessibility evaluation tool

### Browser Compatibility

- **Chrome**: Fully supported (latest)
- **Edge**: Fully supported (latest)
- **Firefox**: Fully supported (latest)
- **Safari**: Mostly supported (test pagination and modals carefully)

---

## Troubleshooting

### Common Issues

#### Issue: Patterns not showing up
**Symptom**: PatternDetectionSection is empty even though database has pattern data
**Cause**: JSONB fields not deserialized correctly in API mapper
**Solution**: Check InfoCenterMapper, ensure JSONB fields are parsed from JSON string to object

#### Issue: Pagination not working
**Symptom**: Clicking page numbers does not update table
**Cause**: Pagination state not synced with API calls
**Solution**: Verify `onPageChange` handler updates state and triggers data refetch with correct `skip/limit` params

#### Issue: ReliabilityStatusBadge wrong color
**Symptom**: Badge shows wrong color for status
**Cause**: Color mapping incorrect in component
**Solution**: Verify color mapping in ReliabilityStatusBadge.tsx matches spec: DRAFT (gray), PENDING (yellow), CONFIRMED (green), REJECTED (red)

#### Issue: Modal not scrollable
**Symptom**: Modal content overflows viewport and is not scrollable
**Cause**: Modal container missing `overflow-y-auto` class
**Solution**: Add Tailwind class `overflow-y-auto max-h-screen` to modal content wrapper

#### Issue: Error boundary not catching errors
**Symptom**: App crashes instead of showing error fallback
**Cause**: Error boundary not wrapping component correctly
**Solution**: Ensure PatternDetectionSection is wrapped with `<PatternErrorBoundary>` in parent component

---

## Test Completion Checklist

Use this checklist to track testing progress:

- [ ] All 11 test cases executed (TC1-TC11)
- [ ] All test case sub-items verified (91 total checks)
- [ ] 5 quick test scenarios completed
- [ ] Test data setup verified (5 required analyses)
- [ ] Responsive design tested at 5 breakpoints (320px, 640px, 768px, 1024px, 1920px)
- [ ] Error boundary tested with malformed data
- [ ] Empty states verified (no analyses, no patterns, no slots, no actions)
- [ ] Browser compatibility tested (Chrome, Edge, Firefox)
- [ ] Accessibility audit passed (Lighthouse score >90)
- [ ] Documentation reviewed and understood

**Testing Duration**: Approximately 2-3 hours for full checklist

---

## Next Steps

After completing this testing checklist:

1. Document any bugs found in GitHub issues or project tracker
2. Update `.ai/PROGRESS.md` with testing results
3. Review Scout documentation (`apps/scout/docs/LISTING_TEMPLATES.md`) for deeper pattern understanding
4. If all tests pass, proceed to Phase 6 Task 6.2: Update Dashboard documentation

---

**Document Maintenance**:
- Update this checklist when new features are added to InfoCenter
- Version this document with each major release
- Keep test data setup scripts up-to-date with latest database schema

**Copyright**: © 2025 TWWIM UG. All rights reserved. (www.twwim.com)