hms-licht-ton/frontend/tests/unit/KontaktPage.test.ts

import { describe, it, expect } from "vitest";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";

describe("Kontakt Page", () => {
  const pagePath = resolve(__dirname, "../../pages/kontakt.vue");
  const content = readFileSync(pagePath, "utf-8");

  it("should have page title Kontakt", () => {
    expect(content).toContain("Kontakt");
  });

  it("should have office address card with Leipheim address", () => {
    expect(content).toContain('data-testid="office-card"');
    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 opening hours card", () => {
    expect(content).toContain('data-testid="hours-card"');
    expect(content).toContain("Öffnungszeiten");
  });

  it("should have 2 contact persons", () => {
    expect(content).toContain("Markus Hammerschmidt");
    expect(content).toContain("Thomas Mössle");
  });

  it("should have form with name field (required)", () => {
    expect(content).toContain('data-testid="form-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 *");
  });

  it("should have form with phone field (optional)", () => {
    expect(content).toContain('data-testid="form-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 privacy consent checkbox (required)", () => {
    expect(content).toContain('data-testid="form-privacy"');
    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");
  });

  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 success state", () => {
    expect(content).toContain('data-testid="success-message"');
    expect(content).toContain("Vielen Dank");
  });

  it("should have error state", () => {
    expect(content).toContain('data-testid="error-message"');
    expect(content).toContain("Fehler");
  });

  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");
  });
});