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

frontend/tests/unit/MietkatalogPage.test.ts

@@ -2,141 +2,123 @@ import { describe, it, expect } from "vitest";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 
-describe("Mietkatalog Page (list)", () => {
+describe("Mietkatalog Page (prototype port)", () => {
   const pagePath = resolve(__dirname, "../../pages/mietkatalog.vue");
   const content = readFileSync(pagePath, "utf-8");
 
-  it("should use useAsyncData for SSR data fetching", () => {
-    expect(content).toContain("useAsyncData");
+  it("should have page title Mietkatalog", () => {
+    expect(content).toContain("Mietkatalog");
   });
 
-  it("should use useEquipment composable", () => {
-    expect(content).toContain("useEquipment");
+  it("should have search input with hms-input", () => {
+    expect(content).toContain('type="search"');
+    expect(content).toContain("hms-input");
+    expect(content).toContain("searchQuery");
   });
 
-  it("should have search input with data-testid equipment-search", () => {
-    expect(content).toContain('data-testid="equipment-search"');
-    expect(content).toContain('type="text"');
+  it("should have sort dropdown", () => {
+    expect(content).toContain("sortBy");
+    expect(content).toContain("name");
+    expect(content).toContain("brand");
+    expect(content).toContain("code");
   });
 
-  it("should have sort dropdown with name_asc and name_desc options", () => {
-    expect(content).toContain('data-testid="sort-select"');
-    expect(content).toContain('value="name_asc"');
-    expect(content).toContain('value="name_desc"');
-  });
-
-  it("should have category filter chips", () => {
-    expect(content).toContain('data-testid="category-chips"');
-  });
-
-  it("should have reset filters button", () => {
-    expect(content).toContain('data-testid="reset-filters"');
-    expect(content).toContain('resetFilters');
+  it("should have category filter chips with hms-chip", () => {
+    expect(content).toContain("hms-chip");
+    expect(content).toContain("activeCategory");
+    expect(content).toContain("Tontechnik");
+    expect(content).toContain("Lichttechnik");
+    expect(content).toContain("Rigging");
   });
 
   it("should show result count", () => {
-    expect(content).toContain('data-testid="result-count"');
+    expect(content).toContain("filteredEquipment.length");
+    expect(content).toContain("Gerät");
+    expect(content).toContain("gefunden");
   });
 
-  it("should have pagination with prev/next buttons", () => {
-    expect(content).toContain('data-testid="pagination"');
-    expect(content).toContain('data-testid="prev-page"');
-    expect(content).toContain('data-testid="next-page"');
+  it("should use LoadingSkeleton component", () => {
+    expect(content).toContain("LoadingSkeleton");
   });
 
-  it("should show loading skeleton state", () => {
-    expect(content).toContain('data-testid="loading-state"');
-    expect(content).toContain("skeleton-shimmer");
-  });
-
-  it("should use EmptyState component for empty results", () => {
-    expect(content).toContain("EmptyState");
-    expect(content).toContain("Keine Artikel gefunden");
-  });
-
-  it("should use ErrorState component for errors", () => {
+  it("should use ErrorState component", () => {
     expect(content).toContain("ErrorState");
-    expect(content).toContain("retry");
+  });
+
+  it("should use EmptyState component", () => {
+    expect(content).toContain("EmptyState");
   });
 
   it("should render EquipmentCard for each item", () => {
     expect(content).toContain("EquipmentCard");
-    expect(content).toContain('v-for="item in data.items"');
+    expect(content).toContain("filteredEquipment");
   });
 
-  it("should have debounce on search input", () => {
-    expect(content).toContain("setTimeout");
-    expect(content).toContain("clearTimeout");
+  it("should have 18 equipment items", () => {
+    expect(content).toContain("L-Acoustics K2");
+    expect(content).toContain("Shure SM58");
+    expect(content).toContain("Sennheiser EW-DX 835");
   });
 
-  it("should reset to page 1 on search, sort, or category change", () => {
-    expect(content).toContain("currentPage.value = 1");
-  });
-
-  it("should use useHead for page title", () => {
-    expect(content).toContain('useHead');
-    expect(content).toContain("Mietkatalog");
-  });
-
-  it("should use Tailwind classes, no inline styles", () => {
-    expect(content).not.toContain('style="');
+  it("should have Warenkorb button", () => {
+    expect(content).toContain("Warenkorb ansehen");
   });
 
   it("should use TypeScript with lang=ts", () => {
     expect(content).toContain('<script setup lang="ts">');
   });
 
-  it("should use equipment grid layout", () => {
-    expect(content).toContain('data-testid="equipment-grid"');
-    expect(content).toContain("grid-cols");
+  it("should use hms-card for filter panel", () => {
+    expect(content).toContain("hms-card");
   });
 });
 
-describe("EquipmentCard Component", () => {
+describe("EquipmentCard Component (prototype port)", () => {
   const cardPath = resolve(__dirname, "../../components/EquipmentCard.vue");
   const content = readFileSync(cardPath, "utf-8");
 
+  it("should have hms-eq-card class", () => {
+    expect(content).toContain("hms-eq-card");
+  });
+
   it("should have image with fallback placeholder", () => {
-    expect(content).toContain("v-if=\"equipment.image_url\"");
-    expect(content).toContain("v-else");
-    expect(content).toContain("svg");
+    expect(content).toContain("item.image");
+    expect(content).toContain("📦");
   });
 
   it("should show category badge", () => {
-    expect(content).toContain("equipment.category");
+    expect(content).toContain("hms-badge");
+    expect(content).toContain("hms-badge-primary");
+    expect(content).toContain("item.category");
   });
 
   it("should display equipment name", () => {
-    expect(content).toContain("equipment.name");
+    expect(content).toContain("item.name");
   });
 
   it("should show truncated description", () => {
-    expect(content).toContain("equipment.description");
+    expect(content).toContain("item.description");
     expect(content).toContain("line-clamp");
   });
 
-  it("should display rental_price formatted", () => {
-    expect(content).toContain("equipment.rental_price");
-    expect(content).toContain("formatPrice");
+  it("should display item code", () => {
+    expect(content).toContain("item.code");
   });
 
-  it("should emit add-to-cart with id and name", () => {
+  it("should emit add-to-cart", () => {
     expect(content).toContain("add-to-cart");
-    expect(content).toContain("equipment.id");
   });
 
-  it("should have Mietanfrage button", () => {
-    expect(content).toContain("Mietanfrage");
-    expect(content).toContain("btn-primary");
+  it("should have Hinzufügen button", () => {
+    expect(content).toContain("Hinzufügen");
+    expect(content).toContain("hms-btn-ghost");
   });
 
-  it("should link to detail page", () => {
-    expect(content).toContain("NuxtLink");
-    expect(content).toContain("/mietkatalog/");
+  it("should emit click", () => {
+    expect(content).toContain("click");
   });
 
-  it("should use TypeScript with EquipmentItem type", () => {
+  it("should use TypeScript with lang=ts", () => {
     expect(content).toContain('<script setup lang="ts">');
-    expect(content).toContain("EquipmentItem");
   });
 });