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

frontend/tests/unit/Layout.test.ts

@@ -2,13 +2,12 @@ import { describe, it, expect } from "vitest";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 
-describe("AppHeader Component", () => {
+describe("AppHeader Component (prototype port)", () => {
   const componentPath = resolve(__dirname, "../../components/AppHeader.vue");
   const content = readFileSync(componentPath, "utf-8");
 
-  it("should contain sticky positioning", () => {
-    expect(content).toContain("sticky");
-    expect(content).toContain("top-0");
+  it("should have hms-header class", () => {
+    expect(content).toContain("hms-header");
   });
 
   it("should have nav items: Home, Referenzen, Mietkatalog, Kontakt", () => {
@@ -18,16 +17,13 @@ describe("AppHeader Component", () => {
     expect(content).toContain("Kontakt");
   });
 
-  it("should include phone link tel:+491726264796", () => {
-    expect(content).toContain("tel:+491726264796");
+  it("should have Warenkorb button with hms-btn-primary", () => {
+    expect(content).toContain("Warenkorb");
+    expect(content).toContain("hms-btn-primary");
   });
 
-  it("should include Facebook social icon link", () => {
-    expect(content).toContain("facebook.com");
-  });
-
-  it("should include Instagram social icon link", () => {
-    expect(content).toContain("instagram.com");
+  it("should have hms-nav-btn class for nav items", () => {
+    expect(content).toContain("hms-nav-btn");
   });
 
   it("should have mobile burger menu with aria-expanded", () => {
@@ -35,21 +31,33 @@ describe("AppHeader Component", () => {
     expect(content).toContain("mobileMenuOpen");
   });
 
-  it("should have min touch target height for nav items", () => {
-    expect(content).toContain("min-h-44px");
+  it("should use HmsLogo component", () => {
+    expect(content).toContain("HmsLogo");
+  });
+
+  it("should have NuxtLink for navigation", () => {
+    expect(content).toContain("NuxtLink");
+  });
+
+  it("should have aria-current for active route", () => {
+    expect(content).toContain("aria-current");
   });
 });
 
-describe("AppFooter Component", () => {
+describe("AppFooter Component (prototype port)", () => {
   const componentPath = resolve(__dirname, "../../components/AppFooter.vue");
   const content = readFileSync(componentPath, "utf-8");
 
+  it("should have hms-footer class", () => {
+    expect(content).toContain("hms-footer");
+  });
+
   it("should contain address with Leipheim", () => {
     expect(content).toContain("89340");
     expect(content).toContain("Leipheim");
   });
 
-  it("should contain phone number +49 8221 204433", () => {
+  it("should contain phone number", () => {
     expect(content).toContain("tel:+498221204433");
     expect(content).toContain("204433");
   });
@@ -73,20 +81,29 @@ describe("AppFooter Component", () => {
     expect(content).toContain("/agb-vermietung");
   });
 
-  it("should NOT contain 'Neu in der Vermietung'", () => {
-    expect(content).not.toContain("Neu in der Vermietung");
-  });
-
-  it("should NOT contain 'AGB Shop'", () => {
-    expect(content).not.toContain("AGB Shop");
+  it("should contain Admin-Login link", () => {
+    expect(content).toContain("Admin-Login");
+    expect(content).toContain("/admin");
   });
 
   it("should have 4-column grid layout", () => {
     expect(content).toContain("lg:grid-cols-4");
   });
+
+  it("should include Facebook social icon link", () => {
+    expect(content).toContain("facebook.com");
+  });
+
+  it("should include Instagram social icon link", () => {
+    expect(content).toContain("instagram.com");
+  });
+
+  it("should use HmsLogo component", () => {
+    expect(content).toContain("HmsLogo");
+  });
 });
 
-describe("Error Page (404)", () => {
+describe("Error Page (404, prototype port)", () => {
   const errorPath = resolve(__dirname, "../../error.vue");
   const content = readFileSync(errorPath, "utf-8");
 
@@ -94,17 +111,27 @@ describe("Error Page (404)", () => {
     expect(content).toContain("Seite nicht gefunden");
   });
 
-  it("should contain link to home /", () => {
+  it("should contain 404 text", () => {
+    expect(content).toContain("404");
+  });
+
+  it("should contain link to home", () => {
     expect(content).toContain('to="/"');
+    expect(content).toContain("Zur Startseite");
   });
 
   it("should include noindex meta tag", () => {
     expect(content).toContain("noindex");
     expect(content).toContain("nofollow");
   });
+
+  it("should have hms-btn hms-btn-primary", () => {
+    expect(content).toContain("hms-btn");
+    expect(content).toContain("hms-btn-primary");
+  });
 });
 
-describe("HmsLogo Component", () => {
+describe("HmsLogo Component (prototype port)", () => {
   const logoPath = resolve(__dirname, "../../components/HmsLogo.vue");
   const content = readFileSync(logoPath, "utf-8");
 
@@ -116,9 +143,13 @@ describe("HmsLogo Component", () => {
     expect(content).toContain("#EC6925");
   });
 
-  it("should contain border/stroke with accent color", () => {
-    expect(content).toContain("accentColor");
-    expect(content).toContain("stroke");
+  it("should have hms-logo-svg class", () => {
+    expect(content).toContain("hms-logo-svg");
+  });
+
+  it("should accept size prop with default 40", () => {
+    expect(content).toContain("size");
+    expect(content).toContain("40");
   });
 });