# Minijob Calculator Export Testing Guide

**Last Updated:** 2025-12-30

## Overview

This guide provides comprehensive testing procedures for the Minijob calculator export functionality. Use this guide to verify that all export features work correctly across all modes and scenarios.

## Test Scripts

### Python Test Script

**Location**: `tests/minijob_export_test.py`

**Usage**:

```bash
python3 tests/minijob_export_test.py
```

**What it tests**:

- Page loads successfully
- Alpine.js script is present
- Calculator script is present
- Main element with x-data exists
- Results section with x-show exists
- Export buttons are present with @click handlers
- Email modal scripts are loaded

**Expected Output**:

```
✓ All critical elements found
```

### Browser Console Test Script

**Location**: `tests/minijob_export_browser_test.js`

**Usage**:

1. Open http://localhost:8003/tools/minijob-rechner
2. Open DevTools Console (F12)
3. Copy and paste the entire script
4. Press Enter
5. Follow the test instructions

**What it tests**:

- Alpine.js initialization
- Component registration
- Component data accessibility
- Export function existence
- Results section visibility
- Export button presence and visibility
- Handler binding status
- Manual function call capability

**Expected Output**:

- Test results table showing status of each check
- Helper function `testMinijobExport()` available for direct testing

## Manual Testing Procedures

### Pre-Testing Setup

1. **Clear Browser Cache**

   - Chrome: Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)
   - Select "Cached images and files"
   - Click "Clear data"

2. **Clear localStorage**

   ```javascript
   localStorage.removeItem("ordio_email_Minijob-Rechner");
   localStorage.removeItem("ordio_email_collected_Minijob-Rechner");
   ```

3. **Open DevTools**
   - Press F12 or Right-click → Inspect
   - Go to Console tab
   - Clear console (Ctrl+L or Cmd+K)

### Test Scenario 1: Basic Mode - New User

**Steps**:

1. Navigate to `/tools/minijob-rechner`
2. Verify page loads without errors
3. Check console for `[Minijob] Component initialized`
4. Check console for `[Minijob] Component mounted`
5. Enter `556` in Basic mode Brutto-Gehalt field
6. Click "Berechnen" or wait for auto-calculation
7. Verify results appear
8. Check console for `[Minijob] showResults changed: false -> true`
9. Check console for `[Minijob] Ensuring export handlers are bound`
10. Click PDF export button
11. Verify email modal appears
12. Enter email address
13. Submit email form
14. Verify PDF downloads
15. Click CSV export button
16. Verify CSV downloads immediately (no modal)

**Expected Results**:

- ✅ All console logs appear
- ✅ Email modal appears for first export
- ✅ PDF downloads after email submission
- ✅ CSV downloads immediately (email already collected)

### Test Scenario 2: Advanced Mode - Email Collected

**Steps**:

1. Complete Test Scenario 1 (email already collected)
2. Switch to Advanced mode tab
3. Enter `556` in Brutto-Gehalt field
4. Verify results appear
5. Click PDF export button
6. Verify PDF downloads immediately (no modal)
7. Click CSV export button
8. Verify CSV downloads immediately

**Expected Results**:

- ✅ No email modal appears
- ✅ Exports download immediately
- ✅ Correct mode data exported

### Test Scenario 3: Employer Mode

**Steps**:

1. Switch to Employer mode tab
2. Enter `556` in Brutto-Gehalt field
3. Select "Gewerblich" or "Privathaushalt"
4. Verify results appear
5. Click PDF export button
6. Verify PDF downloads
7. Click CSV export button
8. Verify CSV downloads
9. Verify exported data matches Employer mode calculations

**Expected Results**:

- ✅ Exports work correctly
- ✅ Exported data matches Employer mode results
- ✅ Correct Abgaben calculations exported

### Test Scenario 4: Vacation Mode

**Steps**:

1. Switch to Vacation mode tab
2. Enter `556` in Brutto-Gehalt field
3. Set Arbeitstage pro Woche (e.g., 5)
4. Set Arbeitsbeginn date
5. Verify results appear
6. Click PDF export button
7. Verify PDF downloads
8. Click CSV export button
9. Verify CSV downloads
10. Verify exported data matches Vacation mode calculations

**Expected Results**:

- ✅ Exports work correctly
- ✅ Exported data matches Vacation mode results
- ✅ Correct Urlaubsanspruch calculations exported

### Test Scenario 5: Error Handling

**Steps**:

1. Navigate to `/tools/minijob-rechner`
2. Don't enter any calculation values
3. Try to click export buttons (should be hidden)
4. Enter a calculation value
5. Click export button
6. Verify email modal appears
7. Close modal without submitting
8. Click export button again
9. Verify modal appears again
10. Submit invalid email (e.g., "invalid")
11. Verify error message appears
12. Submit valid email
13. Verify export downloads

**Expected Results**:

- ✅ Buttons hidden when no results
- ✅ Modal appears when clicking export
- ✅ Error message for invalid email
- ✅ Export works after valid email submission

## Browser Compatibility Testing

### Chrome

1. Open Chrome
2. Clear cache and localStorage
3. Run all test scenarios
4. Verify no console errors
5. Verify all exports work

### Firefox

1. Open Firefox
2. Clear cache and localStorage
3. Run all test scenarios
4. Verify no console errors
5. Verify all exports work

### Safari

1. Open Safari
2. Clear cache and localStorage
3. Run all test scenarios
4. Verify no console errors
5. Verify all exports work

### Mobile Viewport

1. Open DevTools
2. Toggle device toolbar (Ctrl+Shift+M)
3. Select mobile device (e.g., iPhone 12)
4. Run test scenarios
5. Verify UI is responsive
6. Verify exports work on mobile

## Debugging Common Issues

### Issue: Buttons Don't Respond

**Check**:

1. Console for `[Minijob] Component initialized`
2. Console for `[Minijob] Component mounted`
3. Console for `[Minijob] showResults changed`
4. Console for `[Minijob] Ensuring export handlers are bound`
5. Button visibility: `document.querySelector('button[title*="PDF"]').offsetParent !== null`
6. Handler binding: `!!(button.__x || button._x_click)`

**Fix**:

- Verify `showResults` is `true`
- Check for JavaScript errors
- Verify component is initialized
- Check if fallback handlers were added

### Issue: Email Modal Doesn't Appear

**Check**:

1. localStorage for email: `localStorage.getItem('ordio_email_collected_Minijob-Rechner')`
2. `showEmailModal` state: `mainEl.__x.$data.showEmailModal`
3. Email modal module: `typeof window.OrdioEmailModal`

**Fix**:

- Clear localStorage if email already collected
- Verify email modal module is loaded
- Check for JavaScript errors preventing modal display

### Issue: Export Doesn't Download

**Check**:

1. Export module: `typeof window.MinijobExport`
2. Console for export function calls
3. Console for errors
4. Network tab for failed requests

**Fix**:

- Verify export module is loaded
- Check for JavaScript errors
- Verify calculation data exists
- Check browser download settings

## Automated Testing

### Using Browser Test Script

The browser test script (`tests/minijob_export_browser_test.js`) provides automated checks:

```javascript
// Run in browser console
// Copy entire script from tests/minijob_export_browser_test.js
// Results will show test status table
```

### Using Python Test Script

```bash
# Run Python test
python3 tests/minijob_export_test.py

# Expected: All checks pass
```

## Test Results Documentation

After testing, document:

1. **Browser**: Chrome/Firefox/Safari version
2. **Test Date**: YYYY-MM-DD
3. **Test Scenarios**: Which scenarios passed/failed
4. **Issues Found**: Any bugs or problems
5. **Console Errors**: Any JavaScript errors
6. **Export Files**: Verify exported files contain correct data

## Quick Reference

### Console Commands

```javascript
// Check component state
const mainEl = document.querySelector('main[x-data*="minijobCalculator"]');
console.log("showResults:", mainEl?.__x?.$data?.showResults);
console.log("mode:", mainEl?.__x?.$data?.mode);

// Test export directly
mainEl.__x.$data.exportPDF().catch((err) => console.error(err));

// Check handlers
const btn = document.querySelector('button[title*="PDF"]');
console.log("Has handler:", !!(btn?.__x || btn?._x_click));

// Clear email
localStorage.removeItem("ordio_email_collected_Minijob-Rechner");
```

### Expected Console Messages

When working correctly, you should see:

1. `[Minijob] Component registered with Alpine.js`
2. `[Minijob] Component initialized`
3. `[Minijob] Component mounted`
4. `[Minijob] showResults changed: false -> true` (when calculation completes)
5. `[Minijob] Ensuring export handlers are bound`
6. `[Minijob Export] ===== exportPDF CALLED =====` (when clicking PDF button)
7. `[Minijob Export] ===== exportCSV CALLED =====` (when clicking CSV button)

## Troubleshooting

See `docs/development/MINIJOB_EXPORT_DEBUGGING.md` for detailed troubleshooting steps.

## Related Documentation

- `docs/development/MINIJOB_EXPORT_DEBUGGING.md` - Debugging guide
- `.cursor/rules/tools-pages-patterns-export.mdc` - Export patterns and best practices
- `v2/js/minijob/calculator.js` - Calculator component implementation
- `v2/pages/tools_minijob_rechner.php` - Page template