implement stepper tests

__tests__/components/stepper/stepper.test.tsx

@@ -1,6 +1,91 @@
-// TODO: Implement your tests here
-describe("Stepper", () => {
-	it("TODO", () => {
-		expect(true).toBe(false);
-	});
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Stepper from "../../../components/stepper/stepper";
+import { steps } from "../../../components/stepper/steps";
+
+describe("Stepper Component", () => {
+  const mockOnStepClick = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders all steps correctly", () => {
+    render(<Stepper currentStep={1} onStepClick={mockOnStepClick} />);
+
+    steps.forEach((step) => {
+      expect(screen.getByText(step.label)).toBeInTheDocument();
+      expect(screen.getByText(step.id.toString())).toBeInTheDocument();
+    });
+  });
+
+  it("renders connector lines between steps", () => {
+    const { container } = render(
+      <Stepper currentStep={1} onStepClick={mockOnStepClick} />
+    );
+
+    const connectors = container.querySelectorAll(".h-1, .lg\\:h-1\\.5");
+    expect(connectors).toHaveLength(steps.length - 1);
+  });
+
+  it("styles completed connector lines with blue color", () => {
+    const { container } = render(
+      <Stepper currentStep={3} onStepClick={mockOnStepClick} />
+    );
+
+    const connectors = container.querySelectorAll(".h-1, .lg\\:h-1\\.5");
+    expect(connectors[0]).toHaveClass("bg-blue-500");
+    expect(connectors[1]).toHaveClass("bg-blue-500");
+  });
+
+  it("styles upcoming connector lines with gray color", () => {
+    const { container } = render(
+      <Stepper currentStep={2} onStepClick={mockOnStepClick} />
+    );
+
+    const connectors = container.querySelectorAll(".h-1, .lg\\:h-1\\.5");
+    expect(connectors[1]).toHaveClass("bg-gray-200");
+  });
+
+  it("applies correct text colors to labels", () => {
+    render(<Stepper currentStep={2} onStepClick={mockOnStepClick} />);
+
+    const step1Label = screen.getByText("Service");
+    const step2Label = screen.getByText("Termin");
+    const step3Label = screen.getByText("Fahrzeug");
+
+    expect(step1Label).toHaveClass("text-gray-700");
+    expect(step2Label).toHaveClass("text-gray-700");
+    expect(step3Label).toHaveClass("text-gray-500");
+  });
+
+  it("renders correct number of steps", () => {
+    const { container } = render(
+      <Stepper currentStep={1} onStepClick={mockOnStepClick} />
+    );
+    const stepButtons = container.querySelectorAll(
+      'button[aria-label^="Step"]'
+    );
+    expect(stepButtons).toHaveLength(steps.length);
+  });
+
+  it("updates when currentStep prop changes", () => {
+    const { rerender } = render(
+      <Stepper currentStep={1} onStepClick={mockOnStepClick} />
+    );
+
+    let step1Button = screen.getByLabelText("Step 1: Service");
+    expect(step1Button).toHaveClass("bg-blue-500");
+
+    rerender(<Stepper currentStep={3} onStepClick={mockOnStepClick} />);
+
+    step1Button = screen.getByLabelText("Step 1: Service");
+    const step2Button = screen.getByLabelText("Step 2: Termin");
+    const step3Button = screen.getByLabelText("Step 3: Fahrzeug");
+
+    expect(step1Button).toHaveClass("bg-blue-500");
+    expect(step2Button).toHaveClass("bg-blue-500");
+    expect(step3Button).toHaveClass("bg-blue-500");
+  });
 });