hms-licht-ton/frontend/test_report.md

Test Report – T07: Warenkorb & Mietanfrage Frontend

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

Build Verification

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

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

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)