hms-licht-ton/frontend/test_report.md

# Test Report – T07: Warenkorb & Mietanfrage Frontend

**Date:** 2026-07-10
**Task:** T07 – Warenkorb & Mietanfrage Frontend

## Build Verification

```bash
cd /a0/usr/workdir/hms-licht-ton-t04/frontend && npm run build
```

**Result:** ✅ Build successful
- All new files compiled without errors
- Output includes: `warenkorb-BiU5TV87.mjs`, `mietanfrage-caxImRAG.mjs`, `useCart-DgrwTafY.mjs`
- Total size: 2.53 MB (616 kB gzip)

## Unit Tests

```bash
cd /a0/usr/workdir/hms-licht-ton-t04/frontend && npx vitest run --reporter verbose
```

**Result:** ✅ All 214 tests passed (11 test files)

### New Test Files:
- `tests/unit/CartStore.test.ts` – 17 tests (all passed)
  - Verifies defineStore, CartItem interface, getters (totalCount, isEmpty, hasItems, apiItems), actions (addItem, addItemByFields, removeItem, updateQuantity, incrementQuantity, decrementQuantity, clearCart), RentalRequestPayload & RentalRequestResponse interfaces
- `tests/unit/WarenkorbPage.test.ts` – 16 tests (all passed)
  - Verifies page title, useCart composable, breadcrumb, empty state, cart items, quantity steppers, remove button, clear cart, checkout link, formatPrice, useHead, TypeScript
- `tests/unit/MietanfragePage.test.ts` – 26 tests (all passed)
  - Verifies page title, useCart, useApi, breadcrumb, empty cart state, cart overview, all form fields (event_name, date_start, date_end, location, person_count, contact_name, contact_company, contact_email, contact_phone, contact_street, contact_postalcode, contact_city, message), email validation, validateField/validateAll, error displays, submit button, submitting state, success state with reference_number, error state, POST to /api/rental-requests, clearCart on success, TypeScript

### Existing Tests (still passing):
- `tests/unit/KontaktPage.test.ts` – 18 tests ✅
- `tests/unit/EquipmentDetailPage.test.ts` – 19 tests ✅
- `tests/unit/MietkatalogPage.test.ts` – 30 tests ✅
- `tests/unit/HomePage.test.ts` – 11 tests ✅
- `tests/unit/ReferenzenPage.test.ts` – all tests ✅
- `tests/unit/useEquipment.test.ts` – 14 tests ✅
- `tests/unit/DesignTokens.test.ts` – 18 tests ✅
- `tests/unit/Layout.test.ts` – all tests ✅

## E2E Test Files Created

- `tests/e2e/cart.spec.ts` – 10 tests (Playwright)
  - Warenkorb page renders, empty state, header cart icon, cart drawer open/close, checkout links, mobile cart button
- `tests/e2e/mietanfrage.spec.ts` – 4 tests (Playwright)
  - Mietanfrage page renders, empty cart state, mietkatalog link, breadcrumb

## Smoke Test

```bash
curl -s -o /dev/null -w '%{http_code}' http://localhost:3000/warenkorb
# Result: 200

curl -s -o /dev/null -w '%{http_code}' http://localhost:3000/mietanfrage
# Result: 200
```

Both pages return HTTP 200. Pages are configured as `ssr: false` (client-side rendered) so the initial HTML shell contains the `__nuxt` div which is hydrated client-side.

## Files Created/Modified

### New Files:
1. `stores/cart.ts` – Pinia cart store with types, getters, actions
2. `plugins/pinia-persist.client.ts` – localStorage persistence plugin
3. `composables/useCart.ts` – Cart composable wrapper
4. `components/CartDrawer.vue` – Mobile bottom-sheet / desktop side panel
5. `pages/warenkorb.vue` – Cart page with steppers, remove, empty state
6. `pages/mietanfrage.vue` – Rental request form with validation and submit states
7. `tests/unit/CartStore.test.ts` – 17 unit tests
8. `tests/unit/WarenkorbPage.test.ts` – 16 unit tests
9. `tests/unit/MietanfragePage.test.ts` – 26 unit tests
10. `tests/e2e/cart.spec.ts` – 10 E2E tests
11. `tests/e2e/mietanfrage.spec.ts` – 4 E2E tests

### Modified Files:
1. `nuxt.config.ts` – Added `@pinia/nuxt` module
2. `components/AppHeader.vue` – Added cart icon with counter badge (desktop + mobile), CartDrawer integration
3. `pages/mietkatalog/[id].vue` – Replaced console.log with useCart addItemByFields
4. `pages/mietkatalog.vue` – Replaced console.log with useCart addItemByFields

## Acceptance Criteria Verification

- ✅ Add to cart → header counter updates (via Pinia reactive store)
- ✅ Cart persists in localStorage (via pinia-persist.client.ts plugin)
- ✅ Warenkorb: steppers, remove, empty state with /mietkatalog link
- ✅ Header cart icon: counter (0 empty, N items)
- ✅ CartDrawer: mobile bottom-sheet, desktop side panel
- ✅ Mietanfrage: cart overview, form with validation, submit states, reference_number on success, empty cart redirect
- ✅ Cart clears after successful submit (clearCart() called in handleSubmit success path)