mb-grid-solutions.com/tests_bak/contact.test.tsx

import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import Contact from "../app/kontakt/page";

// Mock fetch
const fetchMock = vi.fn();
global.fetch = fetchMock;

// Mock alert
const alertMock = vi.fn();
global.alert = alertMock;

describe("Contact Page", () => {
  beforeEach(() => {
    fetchMock.mockClear();
    alertMock.mockClear();
  });

  it("renders the contact form correctly", () => {
    render(<Contact />);

    expect(screen.getByLabelText(/Name \*/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Firma/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/E-Mail \*/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Nachricht \*/i)).toBeInTheDocument();
    expect(
      screen.getByRole("button", { name: /Nachricht senden/i }),
    ).toBeInTheDocument();
  });

  it("submits the form successfully", async () => {
    fetchMock.mockResolvedValueOnce({
      ok: true,
      json: async () => ({ success: true }),
    });

    render(<Contact />);

    fireEvent.change(screen.getByLabelText(/Name \*/i), {
      target: { value: "John Doe" },
    });
    fireEvent.change(screen.getByLabelText(/Firma/i), {
      target: { value: "Acme Corp" },
    });
    fireEvent.change(screen.getByLabelText(/E-Mail \*/i), {
      target: { value: "john@example.com" },
    });
    fireEvent.change(screen.getByLabelText(/Nachricht \*/i), {
      target: { value: "This is a test message that is long enough." },
    });

    fireEvent.click(screen.getByRole("button", { name: /Nachricht senden/i }));

    await waitFor(() => {
      expect(fetchMock).toHaveBeenCalledTimes(1);
      expect(fetchMock).toHaveBeenCalledWith(
        "/api/contact",
        expect.objectContaining({
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            name: "John Doe",
            company: "Acme Corp",
            email: "john@example.com",
            message: "This is a test message that is long enough.",
            website: "",
          }),
        }),
      );
    });

    expect(screen.getByText(/Nachricht gesendet/i)).toBeInTheDocument();
    expect(
      screen.getByText(/Vielen Dank für Ihre Anfrage/i),
    ).toBeInTheDocument();
  });

  it("handles submission errors", async () => {
    fetchMock.mockResolvedValueOnce({
      ok: false,
      json: async () => ({ error: "Server error" }),
    });

    render(<Contact />);

    fireEvent.change(screen.getByLabelText(/Name \*/i), {
      target: { value: "John Doe" },
    });
    fireEvent.change(screen.getByLabelText(/E-Mail \*/i), {
      target: { value: "john@example.com" },
    });
    fireEvent.change(screen.getByLabelText(/Nachricht \*/i), {
      target: { value: "This is a test message that is long enough." },
    });

    fireEvent.click(screen.getByRole("button", { name: /Nachricht senden/i }));

    await waitFor(() => {
      expect(alertMock).toHaveBeenCalledWith("Fehler: Server error");
    });
  });

  it("handles network errors", async () => {
    fetchMock.mockRejectedValueOnce(new Error("Network error"));

    render(<Contact />);

    fireEvent.change(screen.getByLabelText(/Name \*/i), {
      target: { value: "John Doe" },
    });
    fireEvent.change(screen.getByLabelText(/E-Mail \*/i), {
      target: { value: "john@example.com" },
    });
    fireEvent.change(screen.getByLabelText(/Nachricht \*/i), {
      target: { value: "This is a test message that is long enough." },
    });

    fireEvent.click(screen.getByRole("button", { name: /Nachricht senden/i }));

    await waitFor(() => {
      expect(alertMock).toHaveBeenCalledWith(
        "Es gab einen Fehler beim Senden Ihrer Nachricht.",
      );
    });
  });
});