# Phase 1 Refactoring - Testing Checklist

## Build & Compilation Tests

### TypeScript Compilation
- [ ] Run `npm run build` - should complete without errors
- [ ] No TypeScript errors in IDE
- [ ] No unused imports warnings
- [ ] All paths resolve correctly (`@/` aliases work)

### Development Server
- [ ] Run `npm run dev` - server starts successfully
- [ ] No console errors on page load
- [ ] Hot reload works after file changes

---

## DailyTradingPlan Component Tests

### Basic Functionality
- [ ] Component renders without errors
- [ ] Plan date displays current date
- [ ] Default plan values load correctly
- [ ] Component layout looks correct (no broken styles)

### Edit Mode
- [ ] Click "Edit" button - enters edit mode
- [ ] Input fields become editable
- [ ] Can modify bias (Bullish/Neutral/Bearish)
- [ ] Can change daily target value
- [ ] Can change max loss value
- [ ] Can change max trades value
- [ ] Can modify entry zone min/max
- [ ] Can modify target price
- [ ] Can modify stop loss
- [ ] Can edit trading notes
- [ ] Click "Save" - exits edit mode
- [ ] Changes persist after save

### Key Levels Management
- [ ] Support levels display correctly
- [ ] Resistance levels display correctly
- [ ] Click "Add" on Support - new level added
- [ ] Click "Add" on Resistance - new level added
- [ ] Can edit individual support levels
- [ ] Can edit individual resistance levels
- [ ] Click "X" removes support level
- [ ] Click "X" removes resistance level
- [ ] Key levels save correctly

### AI Plan Generation
- [ ] Click "AI Plan" button
- [ ] Button shows "Generating..." during load
- [ ] Success modal appears after generation
- [ ] Modal shows generated bias and target
- [ ] Plan updates with AI-generated values
- [ ] Support/resistance levels update
- [ ] Trading notes populate (if provided)
- [ ] Context metrics saved (if available)
- [ ] Can close success modal
- [ ] Error shows if OpenRouter API key missing
- [ ] Error displays clearly in UI (not just console)

### Reset Functionality
- [ ] Click "Reset" button
- [ ] Confirmation modal appears
- [ ] Modal title says "Reset Plan"
- [ ] Modal explains action clearly
- [ ] Click "Cancel" - closes modal, no changes
- [ ] Click "Reset" again, then "Confirm" - plan resets
- [ ] Plan returns to default values
- [ ] Date updates to today
- [ ] Edit mode turns off after reset

### LocalStorage Persistence
- [ ] Make changes to plan
- [ ] Refresh page
- [ ] Changes persist after reload
- [ ] Plan date remains same
- [ ] All fields retain values
- [ ] Clear browser localStorage
- [ ] Refresh page
- [ ] Default plan loads
- [ ] Old date triggers new plan creation
- [ ] Change system date to tomorrow
- [ ] Reload page
- [ ] New plan created for new date

---

## Modal Components Tests

### ConfirmModal
- [ ] Modal opens on trigger
- [ ] Title displays correctly
- [ ] Message displays correctly
- [ ] "Cancel" button present
- [ ] "Confirm" button present
- [ ] Danger variant shows red button
- [ ] Warning variant shows amber button
- [ ] Info variant shows blue button
- [ ] Click "Cancel" - closes without action
- [ ] Click "Confirm" - executes callback and closes
- [ ] Press Escape key - closes modal
- [ ] Click outside modal - closes modal
- [ ] Focus trapped inside modal
- [ ] Tab navigation works
- [ ] Screen reader announces modal (test with screen reader)

### AlertModal
- [ ] Modal opens on trigger
- [ ] Title displays correctly
- [ ] Message displays correctly (supports multi-line)
- [ ] "OK" button present
- [ ] Success variant shows green button
- [ ] Error variant shows red button
- [ ] Info variant shows blue button
- [ ] Warning variant shows amber button
- [ ] Click "OK" - closes modal
- [ ] Press Escape - closes modal
- [ ] Click outside - closes modal
- [ ] Focus management works

### Modal Accessibility
- [ ] Keyboard navigation works (Tab, Shift+Tab)
- [ ] Escape key closes modal
- [ ] Focus returns to trigger element on close
- [ ] Body scroll disabled when modal open
- [ ] Body scroll restored when modal closes
- [ ] ARIA attributes present (`aria-modal`, `role="dialog"`)
- [ ] Modal has accessible title (`aria-labelledby`)

---

## Hooks Tests

### useLocalStorage Hook
Create a test component to verify:
```typescript
function TestComponent() {
  const [value, setValue, removeValue] = useLocalStorage<number>('test-key', 0);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={removeValue}>Remove</button>
    </div>
  );
}
```

- [ ] Initial value loads correctly (0)
- [ ] Click "Increment" - value increases
- [ ] Refresh page - value persists
- [ ] Click "Remove" - value resets to default
- [ ] Check localStorage in DevTools - key exists
- [ ] After remove - key deleted from localStorage
- [ ] Invalid JSON in localStorage handled gracefully
- [ ] quota exceeded error handled gracefully
- [ ] Works with complex objects (not just primitives)
- [ ] Function setValue works with callback `setValue(prev => prev + 1)`

### useApi Hook
Create a test component:
```typescript
function TestComponent() {
  const { data, loading, error, execute } = useApi(
    async () => {
      const res = await fetch('/api/test');
      return res.json();
    }
  );

  return (
    <div>
      <button onClick={execute}>Load</button>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data && <pre>{JSON.stringify(data)}</pre>}
    </div>
  );
}
```

- [ ] Initial state: loading=false, error=null, data=null
- [ ] Click "Load" - loading becomes true
- [ ] After success - loading=false, data populated
- [ ] After error - loading=false, error populated
- [ ] Unmount component during load - no console warnings
- [ ] Request cancelled on unmount
- [ ] Multiple rapid clicks handled correctly
- [ ] onSuccess callback fires
- [ ] onError callback fires
- [ ] Reset function works

---

## Formatting Utilities Tests

Test in browser console:
```javascript
import { formatCurrency, formatPercent, formatNumber, formatPriceChange } from '@/utils/indicators';

// Currency
console.assert(formatCurrency(1234.56) === '$1,234.56');
console.assert(formatCurrency(null) === '—');
console.assert(formatCurrency(undefined) === '—');
console.assert(formatCurrency(NaN) === '—');

// Percent
console.assert(formatPercent(5.25) === '+5.25%');
console.assert(formatPercent(-2.5) === '-2.50%');
console.assert(formatPercent(0) === '0.00%');
console.assert(formatPercent(null) === '—');

// Number
console.assert(formatNumber(1234.567) === '1,234.57');
console.assert(formatNumber(1234.567, { maximumFractionDigits: 0 }) === '1,235');

// Price change
const change1 = formatPriceChange(5.25);
console.assert(change1.text === '+5.25');
console.assert(change1.color === 'text-green-400');

const change2 = formatPriceChange(-2.5);
console.assert(change2.text === '-2.50');
console.assert(change2.color === 'text-red-400');
```

Checklist:
- [ ] All formatCurrency assertions pass
- [ ] All formatPercent assertions pass
- [ ] All formatNumber assertions pass
- [ ] All formatPriceChange assertions pass
- [ ] Functions handle edge cases (null, undefined, NaN)
- [ ] No TypeScript errors when using functions
- [ ] Custom placeholders work
- [ ] Custom options work

---

## App.tsx Integration Tests

### Component Import
- [ ] App imports DailyTradingPlan from new location
- [ ] No import errors in App.tsx
- [ ] App compiles successfully
- [ ] App runs without errors

### Prep Tab
- [ ] Click "Prep" tab
- [ ] DailyTradingPlan component visible
- [ ] DailyMarketSummary component visible
- [ ] DailyChecklistPanel component visible
- [ ] HabitTracker component visible
- [ ] AlertsPanel component visible
- [ ] NewsFeed component visible
- [ ] All components render without errors
- [ ] No layout issues

### State Synchronization
- [ ] Generate AI plan in DailyTradingPlan
- [ ] onPlanUpdate callback fires (if implemented)
- [ ] Parent component receives updated plan
- [ ] Other components can access plan data (if needed)

---

## Browser Compatibility Tests

Test in multiple browsers:

### Chrome/Edge
- [ ] All functionality works
- [ ] Modals display correctly
- [ ] No console errors
- [ ] localStorage works

### Firefox
- [ ] All functionality works
- [ ] Modals display correctly
- [ ] No console errors
- [ ] localStorage works

### Safari
- [ ] All functionality works
- [ ] Modals display correctly
- [ ] No console errors
- [ ] localStorage works

---

## Performance Tests

### Bundle Size
- [ ] Run `npm run build`
- [ ] Check bundle size in dist folder
- [ ] No significant increase from refactoring
- [ ] Code splitting working correctly

### Runtime Performance
- [ ] Open Chrome DevTools Performance tab
- [ ] Record page load
- [ ] No long tasks (>50ms)
- [ ] No layout thrashing
- [ ] Component renders efficiently

### Memory Leaks
- [ ] Open Chrome DevTools Memory tab
- [ ] Take heap snapshot
- [ ] Open/close DailyTradingPlan multiple times
- [ ] Take another heap snapshot
- [ ] Compare - no significant increase
- [ ] Listeners properly cleaned up

---

## Accessibility Tests

### Keyboard Navigation
- [ ] Tab through all interactive elements
- [ ] Focus visible on all elements
- [ ] Can open modal with keyboard
- [ ] Can navigate modal with keyboard
- [ ] Can close modal with keyboard (Escape)
- [ ] Focus trap works in modals
- [ ] Skip to content link works (if implemented)

### Screen Reader
Test with NVDA (Windows) or VoiceOver (Mac):
- [ ] Component announces correctly
- [ ] Buttons have clear labels
- [ ] Form fields have labels
- [ ] Error messages announced
- [ ] Modal role announced
- [ ] Modal title announced
- [ ] Status messages announced (loading, success)

### Color Contrast
Use browser DevTools accessibility checker:
- [ ] All text meets WCAG AA contrast ratio (4.5:1)
- [ ] Buttons meet contrast requirements
- [ ] Error messages readable
- [ ] Success messages readable

---

## Edge Cases & Error Handling

### Network Errors
- [ ] Disconnect network
- [ ] Try AI plan generation
- [ ] Error displayed to user (not just console)
- [ ] Can retry after network restored
- [ ] Other features still work

### API Errors
- [ ] API returns 500 error
- [ ] Error caught and displayed
- [ ] User-friendly error message shown
- [ ] Can recover from error

### Invalid Data
- [ ] Enter negative numbers in plan fields
- [ ] Enter non-numeric values
- [ ] Enter extremely large numbers
- [ ] Application handles gracefully
- [ ] Validation prevents invalid state

### LocalStorage Quota
- [ ] Fill localStorage to quota
- [ ] Try to save plan
- [ ] Error handled gracefully
- [ ] User notified of issue
- [ ] Application doesn't crash

---

## Regression Tests

Ensure existing functionality still works:

- [ ] LiveMarketPanel displays correctly
- [ ] MultiChartSSEPanel works
- [ ] Trade controls function
- [ ] Portfolio tracker updates
- [ ] All tabs navigate correctly
- [ ] Settings panel accessible
- [ ] AI Coach works
- [ ] ML Patterns display
- [ ] No features broken by refactoring

---

## Documentation Tests

- [ ] WEEK1_2_REFACTORING_SUMMARY.md is complete and accurate
- [ ] REFACTORING_QUICK_START.md provides clear examples
- [ ] Code comments are clear and helpful
- [ ] TypeScript interfaces documented
- [ ] Complex functions have JSDoc comments

---

## Cleanup Verification

- [ ] Old DailyTradingPlan.tsx file can be removed
- [ ] No unused imports in codebase
- [ ] No commented-out code left behind
- [ ] No debug console.logs in production code
- [ ] No TODO comments left unresolved

---

## Sign-off

Once all tests pass:

- [ ] Phase 1 refactoring complete
- [ ] No regressions introduced
- [ ] All new features working
- [ ] Documentation updated
- [ ] Ready for Phase 2

**Tested by:** _______________
**Date:** _______________
**Notes:** _______________________________________________