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

frontend/tests/unit/EquipmentDetailPage.test.ts

@@ -2,98 +2,82 @@ import { describe, it, expect } from "vitest";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 
-describe("Equipment Detail Page", () => {
+describe("Equipment Detail Page (prototype port)", () => {
   const pagePath = resolve(__dirname, "../../pages/mietkatalog/[id].vue");
   const content = readFileSync(pagePath, "utf-8");
 
-  it("should use useAsyncData for SSR data fetching", () => {
-    expect(content).toContain("useAsyncData");
-  });
-
-  it("should use useEquipment composable", () => {
-    expect(content).toContain("useEquipment");
-  });
-
-  it("should fetch detail by route param id", () => {
-    expect(content).toContain("route.params.id");
-    expect(content).toContain("equipmentApi.detail");
-  });
-
-  it("should have breadcrumb navigation Home > Mietkatalog > Item", () => {
-    expect(content).toContain("Breadcrumb");
-    expect(content).toContain('to="/"');
-    expect(content).toContain('to="/mietkatalog"');
-    expect(content).toContain("Home");
-    expect(content).toContain("Mietkatalog");
+  it("should have breadcrumb navigation back to mietkatalog", () => {
+    expect(content).toContain("Zurück zum Katalog");
+    expect(content).toContain("/mietkatalog");
   });
 
   it("should display equipment name", () => {
-    expect(content).toContain('data-testid="equipment-name"');
-    expect(content).toContain("data.name");
+    expect(content).toContain("item.name");
   });
 
-  it("should display equipment description", () => {
-    expect(content).toContain('data-testid="equipment-description"');
+  it("should display item code", () => {
+    expect(content).toContain("item.code");
+    expect(content).toContain("Artikelnummer");
+  });
+
+  it("should display brand", () => {
+    expect(content).toContain("item.brand");
+    expect(content).toContain("Marke");
+  });
+
+  it("should display description", () => {
+    expect(content).toContain("item.description");
   });
 
   it("should display specs table", () => {
-    expect(content).toContain('data-testid="equipment-specs"');
-    expect(content).toContain("Spezifikationen");
-    expect(content).toContain("specifications");
+    expect(content).toContain("item.specs");
+    expect(content).toContain("Technische Daten");
   });
 
   it("should display image with placeholder fallback", () => {
-    expect(content).toContain("data.images");
-    expect(content).toContain("v-if");
-    expect(content).toContain("svg");
+    expect(content).toContain("item.image");
+    expect(content).toContain("📦");
+    expect(content).toContain("Kein Bild verfügbar");
   });
 
-  it("should have Mietanfrage add-to-cart button", () => {
-    expect(content).toContain('data-testid="add-to-cart-detail"');
+  it("should have Mietanfrage section", () => {
     expect(content).toContain("Mietanfrage");
-    expect(content).toContain("onAddToCart");
+    expect(content).toContain("Mietbeginn");
+    expect(content).toContain("Mietende");
+  });
+
+  it("should have quantity selector", () => {
+    expect(content).toContain("quantity");
+    expect(content).toContain("Anzahl");
+  });
+
+  it("should have add to cart button", () => {
+    expect(content).toContain("Zur Mietanfrage hinzufügen");
+    expect(content).toContain("hms-btn-primary");
   });
 
   it("should show ErrorState for non-existent ID", () => {
     expect(content).toContain("ErrorState");
-    expect(content).toContain("error");
     expect(content).toContain("nicht gefunden");
   });
 
-  it("should have link back to /mietkatalog on error", () => {
-    expect(content).toContain("/mietkatalog");
-  });
-
-  it("should fetch related items by same category", () => {
-    expect(content).toContain("related");
-    expect(content).toContain("category");
+  it("should have related items section", () => {
+    expect(content).toContain("relatedItems");
+    expect(content).toContain("Ähnliche Geräte");
     expect(content).toContain("EquipmentCard");
   });
 
-  it("should display rental price", () => {
-    expect(content).toContain('data-testid="equipment-price"');
-    expect(content).toContain("rental_price");
-  });
-
-  it("should use useHead for dynamic page title", () => {
-    expect(content).toContain("useHead");
+  it("should use loading skeleton", () => {
+    expect(content).toContain("hms-skeleton");
+    expect(content).toContain("loading");
   });
 
   it("should use TypeScript with lang=ts", () => {
-    expect(content).toContain('script setup lang="ts"');
+    expect(content).toContain('<script setup lang="ts">');
   });
 
-  it("should use Tailwind classes, no inline styles", () => {
-    expect(content).not.toContain('style="');
-  });
-
-  it("should display availability status", () => {
-    expect(content).toContain("available");
-    expect(content).toContain("Verfügbar");
-  });
-
-  it("should show brand if available", () => {
-    expect(content).toContain("data.brand");
-    expect(content).toContain("Marke");
+  it("should have 18 equipment items in data", () => {
+    expect(content).toContain("L-Acoustics K2");
+    expect(content).toContain("Sennheiser EW-DX 835");
   });
 });