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

frontend/tests/unit/KontaktPage.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 
-describe("Kontakt Page", () => {
+describe("Kontakt Page (prototype port)", () => {
   const pagePath = resolve(__dirname, "../../pages/kontakt.vue");
   const content = readFileSync(pagePath, "utf-8");
 
@@ -10,103 +10,75 @@ describe("Kontakt Page", () => {
     expect(content).toContain("Kontakt");
   });
 
-  it("should have office address card with Leipheim address", () => {
-    expect(content).toContain('data-testid="office-card"');
+  it("should have office address card with Leipheim", () => {
     expect(content).toContain("Grockelhofen 10");
     expect(content).toContain("89340 Leipheim");
   });
 
-  it("should have warehouse address card with Ellzee", () => {
-    expect(content).toContain('data-testid="warehouse-card"');
-    expect(content).toContain("Ellzee");
+  it("should have warehouse address with Ellzee", () => {
+    expect(content).toContain("Zur Schönhalde 8");
+    expect(content).toContain("89352 Ellzee");
   });
 
-  it("should have opening hours card", () => {
-    expect(content).toContain('data-testid="hours-card"');
+  it("should have opening hours", () => {
     expect(content).toContain("Öffnungszeiten");
+    expect(content).toContain("10:00 – 18:00");
   });
 
   it("should have 2 contact persons", () => {
-    expect(content).toContain("Markus Hammerschmidt");
-    expect(content).toContain("Thomas Mössle");
+    expect(content).toContain("Leopold Hammerschmidt");
+    expect(content).toContain("Andreas Mössle");
   });
 
   it("should have form with name field (required)", () => {
-    expect(content).toContain('data-testid="form-name"');
-    expect(content).toContain("Name *");
+    expect(content).toContain('id="name"');
+    expect(content).toContain("Name");
   });
 
   it("should have form with email field (required)", () => {
-    expect(content).toContain('data-testid="form-email"');
-    expect(content).toContain("E-Mail *");
+    expect(content).toContain('id="email"');
+    expect(content).toContain("E-Mail");
   });
 
-  it("should have form with phone field (optional)", () => {
-    expect(content).toContain('data-testid="form-phone"');
+  it("should have form with phone field", () => {
+    expect(content).toContain('id="phone"');
     expect(content).toContain("Telefon");
   });
 
-  it("should have form with message field (required)", () => {
-    expect(content).toContain('data-testid="form-message"');
-    expect(content).toContain("Nachricht *");
+  it("should have form with subject select", () => {
+    expect(content).toContain('id="subject"');
+    expect(content).toContain("Anliegen");
   });
 
-  it("should have form with privacy consent checkbox (required)", () => {
-    expect(content).toContain('data-testid="form-privacy"');
+  it("should have form with message textarea (required)", () => {
+    expect(content).toContain('id="message"');
+    expect(content).toContain("Nachricht");
+  });
+
+  it("should have privacy consent checkbox", () => {
     expect(content).toContain('type="checkbox"');
     expect(content).toContain("Datenschutzerklärung");
   });
 
   it("should have submit button", () => {
-    expect(content).toContain('data-testid="form-submit"');
-    expect(content).toContain("Anfrage senden");
+    expect(content).toContain("Nachricht senden");
+    expect(content).toContain("hms-btn-primary");
   });
 
-  it("should have email validation with regex", () => {
-    expect(content).toContain("emailRegex");
-    expect(content).toContain("emailRegex.test");
-  });
-
-  it("should block submit when email is empty (validation error)", () => {
-    expect(content).toContain('data-testid="error-email"');
-    expect(content).toContain("Bitte geben Sie Ihre E-Mail-Adresse ein");
-  });
-
-  it("should block submit when privacy consent unchecked (validation error)", () => {
-    expect(content).toContain('data-testid="error-privacy"');
-    expect(content).toContain("Bitte stimmen Sie der Datenschutzerklärung zu");
-  });
-
-  it("should have validateField function", () => {
-    expect(content).toContain("validateField");
-    expect(content).toContain("validateAll");
-  });
-
-  it("should POST to /api/contact on submit", () => {
-    expect(content).toContain("$fetch");
-    expect(content).toContain("/api/contact");
-    expect(content).toContain("POST");
+  it("should have email validation", () => {
+    expect(content).toContain("validate");
   });
 
   it("should have success state", () => {
-    expect(content).toContain('data-testid="success-message"');
+    expect(content).toContain("Nachricht übermittelt");
     expect(content).toContain("Vielen Dank");
   });
 
-  it("should have error state", () => {
-    expect(content).toContain('data-testid="error-message"');
-    expect(content).toContain("Fehler");
+  it("should have hms-input class", () => {
+    expect(content).toContain("hms-input");
   });
 
   it("should use TypeScript with lang=ts", () => {
     expect(content).toContain('<script setup lang="ts">');
   });
-
-  it("should use Tailwind classes, no inline styles", () => {
-    expect(content).not.toContain('style="');
-  });
-
-  it("should use useHead for page title", () => {
-    expect(content).toContain("useHead");
-  });
 });