# Checkbox Testing Guide


**Last Updated:** 2025-11-20

This guide provides testing steps and troubleshooting for checkbox visual state issues across all tools pages.

## Visual State Testing Steps

### 1. Basic Functionality Test

1. Navigate to any tools page with checkboxes (e.g., `/tools/stundenlohnrechner`)
2. Locate a checkbox (e.g., "Pausenregel anwenden (ArbZG)")
3. Click the checkbox
4. **Expected:** Checkbox should show checked state immediately (blue background, white checkmark)
5. Click again to uncheck
6. **Expected:** Checkbox should return to unchecked state (white background, no checkmark)

### 2. Alpine.js Model Sync Test

1. Open browser DevTools Console
2. Navigate to tools page with checkbox
3. Find checkbox with `x-model` binding (e.g., `x-model="applyBreakRules"`)
4. Click checkbox
5. In console, check Alpine.js model: `Alpine.$data(document.querySelector('[x-data]')).applyBreakRules`
6. **Expected:** Value should be `true` when checked, `false` when unchecked
7. Verify DOM `checked` attribute: `document.querySelector('input[x-model="applyBreakRules"]').checked`
8. **Expected:** Should match Alpine.js model value

### 3. CSS Visual State Test

1. Open browser DevTools Elements panel
2. Select checkbox element
3. Check computed styles:
   - `background-color` should be `rgb(77, 142, 243)` when checked (blue `#4D8EF3`)
   - `border-color` should be `rgb(77, 142, 243)` when checked
   - `::after` pseudo-element should have `content: ''` when checked
4. **Expected:** All styles should match checked state immediately after click

### 4. Cross-Page Consistency Test

Test checkboxes on multiple tools pages:
- `/tools/stundenlohnrechner` - "Pausenregel anwenden" checkbox
- `/tools/arbeitszeitrechner` - Multiple checkboxes (bulk mode, break paid, etc.)
- `/tools/midijob_rechner` - "Arbeitgeberkosten", "Rentenversicherungsbefreiung" checkboxes
- `/tools/tvoed_sue` - Function allowance checkboxes

**Expected:** All checkboxes should have consistent visual behavior

## Browser DevTools Inspection Steps

### Inspect Checkbox Element

1. Right-click checkbox → "Inspect Element"
2. Verify element structure:
   ```html
   <input type="checkbox" x-model="variableName" class="rounded">
   ```
3. Check computed styles in Styles panel
4. Verify `tools-pages.css` is loaded (check Sources/Network tab)

### Check CSS Selectors

1. In Elements panel, select checkbox
2. In Styles panel, search for `input[type="checkbox"]:checked`
3. **Expected:** Should see styles from `tools-pages.css`:
   - `background-color: #4D8EF3`
   - `border-color: #4D8EF3`
   - `::after` pseudo-element with checkmark

### Verify Alpine.js Binding

1. In Console, run:
   ```javascript
   Alpine.$data(document.querySelector('[x-data]'))
   ```
2. Check if checkbox model variable exists
3. Toggle checkbox and verify value updates
4. **Expected:** Model value should update immediately

## Common Issues and Solutions

### Issue: Checkbox doesn't show checked state visually

**Symptoms:**
- Checkbox `checked` property is `true` (functional)
- Background color remains white (visual state not updating)

**Causes:**
1. CSS file not loaded
2. CSS selector too specific (requires `.calculator-form` parent)
3. CSS specificity conflict
4. Browser cache issue

**Solutions:**
1. Check Network tab - verify `tools-pages.css` loads successfully
2. Verify general checkbox styles exist in CSS (not just `.calculator-form` specific)
3. Check CSS specificity - general styles should have `!important` or higher specificity
4. Hard refresh browser (Ctrl+Shift+R / Cmd+Shift+R)
5. Clear browser cache

### Issue: Checkbox works but Alpine.js model doesn't update

**Symptoms:**
- Visual state updates correctly
- Alpine.js model value doesn't change

**Causes:**
1. Alpine.js not initialized
2. `x-model` binding incorrect
3. Scope issue (checkbox outside Alpine.js component)

**Solutions:**
1. Check console for Alpine.js errors
2. Verify checkbox is inside element with `x-data` attribute
3. Check `x-model` binding matches variable name in Alpine.js component
4. Verify Alpine.js is loaded before page interaction

### Issue: Toggle switches affected by checkbox styles

**Symptoms:**
- Toggle switches show checkbox styling instead of slider

**Causes:**
- General checkbox styles applying to toggle switch inputs

**Solutions:**
- Verify `.toggle-switch input` has `opacity:0` and `width:0;height:0`
- Check that toggle switches use `.toggle-slider` for visual representation
- Ensure toggle switch styles have higher specificity than general checkbox styles

### Issue: Checkmark not visible

**Symptoms:**
- Checkbox background turns blue when checked
- No white checkmark visible

**Causes:**
1. `::after` pseudo-element not rendering
2. Checkmark positioning incorrect
3. Z-index or overflow issue

**Solutions:**
1. Verify checkbox has `position: relative`
2. Check `::after` pseudo-element styles:
   - `content: ''` (required)
   - `position: absolute`
   - Correct `transform` for checkmark rotation
3. Check parent container doesn't have `overflow: hidden`
4. Verify checkmark color is white (visible on blue background)

## Best Practices for Checkbox Implementation

### HTML Structure

```html
<!-- ✅ GOOD: Proper label wrapping -->
<label class="flex items-center gap-2 cursor-pointer">
    <input type="checkbox" x-model="variableName" class="rounded">
    <span class="text-sm text-gray-700">Label text</span>
</label>

<!-- ❌ BAD: Checkbox outside label -->
<input type="checkbox" x-model="variableName">
<span>Label text</span>
```

### Alpine.js Binding

```html
<!-- ✅ GOOD: Simple x-model binding -->
<input type="checkbox" x-model="applyBreakRules">

<!-- ❌ BAD: Redundant :checked binding -->
<input type="checkbox" x-model="applyBreakRules" :checked="applyBreakRules">
```

### CSS Classes

```html
<!-- ✅ GOOD: Minimal classes, CSS handles styling -->
<input type="checkbox" x-model="variableName" class="rounded">

<!-- ❌ BAD: Inline styles override CSS -->
<input type="checkbox" x-model="variableName" style="background-color: white;">
```

## Testing Checklist

- [ ] Checkbox shows checked state immediately on click
- [ ] Checkbox shows unchecked state when clicked again
- [ ] Alpine.js model updates correctly (`x-model` binding works)
- [ ] DOM `checked` attribute syncs with Alpine.js model
- [ ] CSS visual styles apply correctly (blue background, white checkmark)
- [ ] Checkbox works on all tools pages consistently
- [ ] Toggle switches are not affected (use slider, not checkbox styling)
- [ ] No console errors related to Alpine.js or CSS
- [ ] Checkbox works on mobile devices (touch interaction)
- [ ] Checkbox accessible (keyboard navigation, screen readers)

## Browser Compatibility

Tested and working on:
- Chrome/Edge (Chromium) - ✅
- Firefox - ✅
- Safari - ✅
- Mobile Safari (iOS) - ✅
- Chrome Mobile (Android) - ✅

## Related Documentation

- `.cursor/rules/tools-pages.mdc` - Tools page patterns and checkbox styling
- `v2/css/tools-pages.css` - Checkbox CSS implementation
- Alpine.js documentation: https://alpinejs.dev/directives/model