# Minijob Export Test Instructions

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

## Quick Test in Browser Console

Run this in the browser console to test if the export functions are accessible:

```javascript
// 1. Check Alpine.js
console.log("Alpine:", typeof Alpine);
console.log("Alpine version:", Alpine?.version);

// 2. Find main element
const mainElement = document.querySelector('main[x-data*="minijobCalculator"]');
console.log("Main element:", mainElement);
console.log("Alpine instance:", mainElement?.__x);

// 3. Get component data
if (mainElement?.__x?.$data) {
  const data = mainElement.__x.$data;
  console.log("Component data:", data);
  console.log("exportPDF:", typeof data.exportPDF);
  console.log("exportCSV:", typeof data.exportCSV);
  console.log("showResults:", data.showResults);
  console.log("mode:", data.mode);

  // 4. Enter a value to show results
  const input = document.querySelector("#basic-brutto");
  if (input) {
    input.value = "556";
    input.dispatchEvent(new Event("input", { bubbles: true }));

    // Wait for calculation
    setTimeout(() => {
      console.log("showResults after calculation:", data.showResults);

      // 5. Find buttons
      const pdfButton = document.querySelector('button[title*="PDF"]');
      const csvButton = document.querySelector('button[title*="CSV"]');
      console.log("PDF button:", pdfButton);
      console.log("PDF visible:", pdfButton?.offsetParent !== null);
      console.log("PDF @click:", pdfButton?.getAttribute("@click"));

      // 6. Test direct function call
      console.log("Calling exportPDF directly...");
      data
        .exportPDF()
        .then(() => {
          console.log("exportPDF completed");
        })
        .catch((err) => {
          console.error("exportPDF error:", err);
        });
    }, 1000);
  }
}
```

## Expected Console Output

If everything is working, you should see:

1. `Alpine: object`
2. `Alpine version: 3.x.x`
3. `Main element: <main>...`
4. `exportPDF: function`
5. `exportCSV: function`
6. `[Minijob Export] exportPDF called, mode: basic`
7. Modal should appear (if email not collected)

## If Nothing Happens

If clicking buttons does nothing and you see no console logs:

1. **Check if Alpine.js is loaded:**

   ```javascript
   typeof Alpine;
   ```

   Should return `"object"`, not `"undefined"`

2. **Check if component is registered:**

   ```javascript
   typeof Alpine?.data("minijobCalculator");
   ```

   Should return `"function"`

3. **Check if buttons exist:**

   ```javascript
   document.querySelector('button[title*="PDF"]');
   ```

   Should return the button element

4. **Check if buttons are visible:**

   ```javascript
   const btn = document.querySelector('button[title*="PDF"]');
   btn?.offsetParent !== null;
   ```

   Should return `true` if visible

5. **Manually trigger click:**
   ```javascript
   const btn = document.querySelector('button[title*="PDF"]');
   btn?.click();
   ```
   This should trigger the function if Alpine is working

## Common Issues

### Issue 1: Alpine.js Not Loaded

**Symptom:** `typeof Alpine` returns `"undefined"`
**Solution:** Check if Alpine.js script is loaded in the page

### Issue 2: Component Not Registered

**Symptom:** `Alpine.data('minijobCalculator')` returns `undefined`
**Solution:** Check browser console for JavaScript errors preventing component registration

### Issue 3: Buttons Not Visible

**Symptom:** `showResults` is `false`
**Solution:** Enter a value and calculate first

### Issue 4: Click Handlers Not Bound

**Symptom:** Clicking buttons does nothing, no console logs
**Solution:** Check if there are JavaScript errors preventing Alpine from binding handlers