Implementation Engineer
92 lines
4.5 KiB
Markdown
92 lines
4.5 KiB
Markdown
# 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)
|