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

feat(T02): Static pages – home, referenzen, kontakt, legal (impressum/datenschutz/agb)

Browse Source
This commit is contained in:
Implementation Engineer
2026-07-10 01:02:27 +02:00
parent e9da21b57e
commit db5080df48
15 changed files with 1618 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/test_report.md
+80 -81
View File
@@ -1,101 +1,100 @@
# T06: Mietkatalog Frontend – Test Report
**Date:** 2026-07-10
**Task:** T06 – Equipment List, Detail, Search/Filter, SSR
# Test Report – T02: Static Pages
## Build Verification
### npm run build
```
✔ Client built in 3314ms
✔ Server built in 1350ms
[nitro] ✔ Generated public .output/public
[nitro] ✔ Nuxt Nitro server built
└ ✨ Build complete!
Total size: 2.09 MB (514 kB gzip)
```
**Result:** ✅ PASS – Build exits with 0, no errors.
**Command:** `npm run build`
**Result:** ✅ Build complete!
**Output:** Nitro build succeeded, all pages compiled successfully.
- index-BUIU2FQG.mjs (12.1 kB)
- referenzen-yQ6M2U3V.mjs (8.22 kB)
- kontakt-DZRjLPTh.mjs (9.47 kB)
- impressum-CwZu6BA4.mjs (3.82 kB)
- datenschutz (included in build)
- agb-vermietung (included in build)
- Lightbox component compiled
## Unit Tests (vitest)
## Unit Tests
### Command: `npx vitest run --reporter verbose`
**Command:** `npx vitest run --reporter verbose`
**Result:** ✅ 148 tests passed (8 test files)
```
Test Files 5 passed (5)
Tests 101 passed (101)
Duration 2.08s
```
### New Test Files:
- `tests/unit/HomePage.test.ts` — 11 tests ✅
- Hero headline 'Veranstaltungstechnik'
- CTA links to /mietkatalog and /kontakt
- All 8 services present (Vermietung, Verkauf, Personal, Transport, Lagerung, Werkstatt, Installation, Booking)
- Speaker grid with 6 equipment types
- About section with stats (20+, 1000+, 500+)
- Mietkatalog CTA section
- TypeScript + Tailwind + useHead checks
**Test Files:**
- `tests/unit/MietkatalogPage.test.ts` – 24 tests ✅
- `tests/unit/EquipmentDetailPage.test.ts` – 18 tests ✅
- `tests/unit/useEquipment.test.ts` – 15 tests ✅
- `tests/unit/DesignTokens.test.ts` – 26 tests ✅ (pre-existing)
- `tests/unit/Layout.test.ts` – 18 tests ✅ (pre-existing)
- `tests/unit/ReferenzenPage.test.ts` — 14 tests ✅
- 9 gallery images (picsum.photos count = 9)
- 4 filter chips (Alle, Open-Air, Indoor, Rigging)
- Lightbox component integration
- Filter logic with computed filteredImages
- openLightbox function
- Lightbox component: close/prev/next buttons with data-testid
**Result:** ✅ PASS – All 101 tests pass.
- `tests/unit/KontaktPage.test.ts` — 19 tests ✅
- Office address card (Grockelhofen 10, 89340 Leipheim)
- Warehouse address card (Ellzee)
- Opening hours card
- 2 contact persons (Markus Hammerschmidt, Thomas Mössle)
- Form fields: name*, email*, phone, message*, privacy checkbox*
- Email validation with regex
- Submit blocked when email empty
- Submit blocked when privacy unchecked
- POST to /api/contact
- Success and error states
## SSR Smoke Tests (curl)
## Smoke Test (curl)
### Test 1: GET /mietkatalog
```
curl -s http://localhost:3000/mietkatalog | grep 'Mietkatalog'
```
**Output:** Server-rendered HTML contains:
- `<title>Mietkatalog – HMS Licht & Ton</title>`
- `<h1 class="text-3xl font-bold text-text mb-6">Mietkatalog</h1>`
- Search input with `data-testid="equipment-search"`
- Sort dropdown with `name_asc` / `name_desc` options
- Reset button with `data-testid="reset-filters"`
- ErrorState component (API not running – expected error handling)
- Full layout with header, footer, navigation
**Server:** `npm run dev` on localhost:3000
**Result:** ✅ PASS – SSR HTML is non-empty, server-rendered.
### Test 2: GET /mietkatalog/1
```
curl -s http://localhost:3000/mietkatalog/1 | grep 'Spezifikationen|Equipment|Mietkatalog'
```
**Output:** Server-rendered HTML with breadcrumb, ErrorState (API down).
**Result:** ✅ PASS – SSR route resolves, error handled gracefully.
### Test 3: GET /mietkatalog/999999
```
curl -s http://localhost:3000/mietkatalog/999999 | grep 'nicht gefunden'
```
**Output:** ErrorState with "nicht gefunden" shown (API not reachable, error propagated).
**Result:** ✅ PASS – Error state for non-existent/unreachable API.
| Page | URL | grep pattern | Result |
|------|-----|-------------|--------|
| Home | / | `Veranstaltungstechnik` | ✅ Found |
| Referenzen | /referenzen | `Referenzen` | ✅ Found |
| Kontakt | /kontakt | `Planen Sie` | ✅ Found |
| Impressum | /impressum | `Hammerschmidt` | ✅ Found |
| Datenschutz | /datenschutz | `Datenschutz` | ✅ Found |
| AGB Vermietung | /agb-vermietung | `AGB` | ✅ Found |
## E2E Tests (Playwright)
### Command: `npx playwright test --grep 'Mietkatalog|Equipment|Filter'`
**Files created:**
- `tests/e2e/home.spec.ts` — 8 tests
- `tests/e2e/referenzen.spec.ts` — 8 tests
- `tests/e2e/kontakt.spec.ts` — 8 tests
- `tests/e2e/legal-pages.spec.ts` — 15 tests
**Note:** E2E tests require both Nuxt dev server (port 3000) AND backend API (port 8000) running. Backend was not running during this test session. E2E test files are created and ready to execute when both services are available.
**Status:** Written, not yet executed (requires running dev server with Playwright runner).
## Files Created/Modified
## Files Changed
### Created:
1. `composables/useApi.ts` – Base API client with $fetch wrapper
2. `composables/useEquipment.ts` – Equipment API wrapper (list, detail, categories)
3. `components/EquipmentCard.vue` – Equipment card with image/placeholder, category badge, price, Mietanfrage button
4. `pages/mietkatalog.vue` – SSR list page (replaced stub)
5. `pages/mietkatalog/[id].vue` – SSR detail page with specs, breadcrumb, related items
6. `tests/unit/MietkatalogPage.test.ts` – 24 unit tests
7. `tests/unit/EquipmentDetailPage.test.ts` – 18 unit tests
8. `tests/unit/useEquipment.test.ts` – 15 unit tests
9. `tests/e2e/mietkatalog.spec.ts` – 10 E2E tests
10. `tests/e2e/equipment-detail.spec.ts` – 7 E2E tests
### Pages (modified/created):
- `pages/index.vue` — Extended: hero with bg image, 6 equipment types, about/stats section, 8 services, CTA
- `pages/referenzen.vue` — Full gallery with 9 images, 4 filter chips, lightbox integration
- `pages/kontakt.vue` — Full contact page with addresses, persons, form with validation
- `pages/impressum.vue` — Full §5 TMG impressum content
- `pages/datenschutz.vue` — Full DSGVO datenschutzerklärung
- `pages/agb-vermietung.vue` — Full AGB with 8 sections
### Modified:
1. `nuxt.config.ts` – Added runtimeConfig with apiBase
### Components (created):
- `components/Lightbox.vue` — Lightbox with prev/next/close, keyboard navigation, teleport
## Smoke Test Summary
### Tests (created):
- `tests/unit/HomePage.test.ts` — 11 tests
- `tests/unit/ReferenzenPage.test.ts` — 14 tests (including Lightbox component tests)
- `tests/unit/KontaktPage.test.ts` — 19 tests
- `tests/e2e/home.spec.ts` — 8 tests
- `tests/e2e/referenzen.spec.ts` — 8 tests
- `tests/e2e/kontakt.spec.ts` — 8 tests
- `tests/e2e/legal-pages.spec.ts` — 15 tests
- ✅ Build passes (exit 0)
- ✅ 101/101 unit tests pass
- ✅ SSR HTML rendered for /mietkatalog (non-empty, server-side)
- ✅ ErrorState shown when API unavailable (graceful error handling)
- ✅ Search, sort, category chips, reset button all present in SSR HTML
- ⚠️ E2E tests require backend API running for full verification
## Summary
- Build: ✅ PASS
- Unit Tests: ✅ 148/148 PASS
- Smoke Test: ✅ All 6 pages render correct content
- E2E Tests: Written (awaiting Playwright execution with running server)