Leopoldadmin/hms-licht-ton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 1:1 prototype port – exact hms-* CSS, real logo, all components from app.js

Browse Source
This commit is contained in:
Implementation Engineer
2026-07-10 22:28:26 +02:00
parent 786cb0c040
commit 90a7d7f2e0
38 changed files with 2733 additions and 3250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/test_report.md
+81 -70
View File
@@ -1,91 +1,102 @@
# Test Report – T07: Warenkorb & Mietanfrage Frontend
# Test Report – 1:1 Prototype Port
**Date:** 2026-07-10
**Task:** T07 – Warenkorb & Mietanfrage Frontend
**Date:** 2026-07-10
**Task:** 1:1 Prototyp-Portierung zu Nuxt 3
**Commit:** fix: 1:1 prototype port – exact hms-* CSS, real logo, all components from app.js
## Build Verification
```bash
cd /a0/usr/workdir/hms-licht-ton-t04/frontend && npm run build
```
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)
**Result:** ✅ Build complete
**Output size:** 2.47 MB (607 kB gzip)
**Server:** .output/server/index.mjs generated successfully
## Unit Tests
```bash
cd /a0/usr/workdir/hms-licht-ton-t04/frontend && npx vitest run --reporter verbose
```
npx vitest run --reporter verbose
```
**Result:** ✅ All 214 tests passed (11 test files)
**Result:** ✅ 10 test files, 168 tests passed, 0 failed
### 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
### Test Files:
1. `tests/unit/CartStore.test.ts` – Cart store interface and actions ✅
2. `tests/unit/DesignTokens.test.ts` – CSS tokens, hms-* classes, Tailwind/Nuxt config ✅
3. `tests/unit/HomePage.test.ts` – Hero, services, speaker grid, CTA ✅
4. `tests/unit/ReferenzenPage.test.ts` – Gallery, filter chips, loading states ✅
5. `tests/unit/KontaktPage.test.ts` – Contact form, validation, addresses ✅
6. `tests/unit/MietkatalogPage.test.ts` – Search, filter, equipment cards ✅
7. `tests/unit/EquipmentDetailPage.test.ts` – Detail view, specs, related items ✅
8. `tests/unit/WarenkorbPage.test.ts` – Cart items, request form, validation ✅
9. `tests/unit/Layout.test.ts` – Header, footer, error page, logo, robots.txt ✅
10. `tests/unit/useEquipment.test.ts` – API composable, equipment composable ✅
### 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 ✅
## Smoke Test (Dev Server)
## 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
```
npx nuxt dev (port 3004)
curl -s http://localhost:3004/
```
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.
**Result:** ✅ All checks passed
## Files Created/Modified
| Check | Expected | Actual |
|-------|----------|--------|
| `Veranstaltungstechnik` text | ≥1 | 2 ✅ |
| `hms-hero` class | ≥1 | 1 ✅ |
| `hms-card` class | ≥1 | 1 ✅ |
| `hms-btn-primary` class | ≥1 | 1 ✅ |
| `hms-header` class | ≥1 | 1 ✅ |
| `hms-speaker-grid` class | ≥1 | 1 ✅ |
| `hms-logo-svg` class | ≥1 | 1 ✅ |
| `EC6925` (accent color) | ≥1 | 1 ✅ |
### 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
## Files Changed
### 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
### CSS
- `assets/css/main.css` – Replaced with prototype-style.css content + Tailwind directives
## Acceptance Criteria Verification
### Components (9 ported from app.js)
- `components/HmsLogo.vue` – SVG logo with #EC6925 border
- `components/SpeakerIcon.vue` – 6 speaker type SVG icons
- `components/AppHeader.vue` – hms-header, nav, mobile menu
- `components/AppFooter.vue` – hms-footer, 4-column grid
- `components/ServiceCard.vue` – hms-card with icon circle
- `components/EquipmentCard.vue` – hms-eq-card with badge
- `components/LoadingSkeleton.vue` – hms-skeleton shimmer
- `components/EmptyState.vue` – Empty state with action
- `components/ErrorState.vue` – Error state with retry
- ✅ 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)
### Pages (8 ported from app.js)
- `pages/index.vue` – HomePage with hero, speakers, services, CTA
- `pages/referenzen.vue` – ReferenzenPage with gallery and filters
- `pages/kontakt.vue` – KontaktPage with form and contact info
- `pages/mietkatalog.vue` – MietkatalogPage with 18 equipment items
- `pages/mietkatalog/[id].vue` – EquipmentDetailPage with specs and related
- `pages/warenkorb.vue` – WarenkorbPage with cart and request form
- `pages/admin.vue` – AdminPage with login form
- `error.vue` – NotFoundPage (404)
### Layout
- `layouts/default.vue` – Updated to match prototype App structure
### Tests (10 files updated)
- All unit tests rewritten to match prototype structure
- Removed MietanfragePage.test.ts (page not in prototype)
- Tests check for hms-* classes, prototype templates, exact content
### Removed
- `components/CartDrawer.vue` – Not in prototype
- `components/Lightbox.vue` – Not in prototype
- `pages/mietanfrage.vue` – Not in prototype (functionality in warenkorb)
### Kept (unchanged)
- `composables/useApi.ts`, `composables/useEquipment.ts`, `composables/useCart.ts`
- `stores/cart.ts`
- `plugins/pinia-persist.client.ts`
- `components/LegalContentPage.vue` (used by legal pages)
- `pages/impressum.vue`, `pages/datenschutz.vue`, `pages/agb-vermietung.vue`
- `nuxt.config.ts`, `tailwind.config.ts`