test: Create unit tests for react components in packages/ui/components/form/step (#10442)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

packages/ui/components/form/step/Steps.tsx

@@ -17,7 +17,7 @@ const Steps = (props: ISteps) => {
   return (
     <div className="mt-6 space-y-2">
       <p className="text-subtle text-xs font-medium">{stepLabel(currentStep, maxSteps)}</p>
-      <div className="flex w-full space-x-2 rtl:space-x-reverse">
+      <div data-testid="step-indicator-container" className="flex w-full space-x-2 rtl:space-x-reverse">
         {new Array(maxSteps).fill(0).map((_s, index) => {
           return index <= currentStep - 1 ? (
             <div
@@ -27,9 +27,14 @@ const Steps = (props: ISteps) => {
                 "bg-inverted h-1 w-full rounded-[1px]",
                 index < currentStep - 1 ? "cursor-pointer" : ""
               )}
+              data-testid={`step-indicator-${index}`}
             />
           ) : (
-            <div key={`step-${index}`} className="bg-emphasis h-1 w-full rounded-[1px] opacity-25" />
+            <div
+              key={`step-${index}`}
+              className="bg-emphasis h-1 w-full rounded-[1px] opacity-25"
+              data-testid={`step-indicator-${index}`}
+            />
           );
         })}
       </div>

packages/ui/components/form/step/steps.test.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable playwright/no-conditional-in-test */
+
+/* eslint-disable playwright/missing-playwright-await */
+import { render, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { Steps } from "./Steps";
+
+const MAX_STEPS = 10;
+const CURRENT_STEP = 5;
+const mockNavigateToStep = vi.fn();
+
+const Props = {
+  maxSteps: MAX_STEPS,
+  currentStep: CURRENT_STEP,
+  navigateToStep: mockNavigateToStep,
+  stepLabel: (currentStep: number, totalSteps: number) => `Test Step ${currentStep} of ${totalSteps}`,
+};
+
+describe("Tests for Steps Component", () => {
+  test("Should render the correct number of steps", () => {
+    const { queryByTestId } = render(<Steps {...Props} />);
+
+    const stepIndicatorDivs = queryByTestId("step-indicator-container");
+    const childDivs = stepIndicatorDivs?.querySelectorAll("div");
+
+    const count = childDivs?.length;
+    expect(stepIndicatorDivs).toBeInTheDocument();
+
+    expect(count).toBe(MAX_STEPS);
+
+    for (let i = 0; i < MAX_STEPS; i++) {
+      const step = queryByTestId(`step-indicator-${i}`);
+      if (i < CURRENT_STEP - 1) {
+        expect(step).toHaveClass("cursor-pointer");
+      } else {
+        expect(step).not.toHaveClass("cursor-pointer");
+      }
+    }
+  });
+
+  test("Should render correctly the label of the steps", () => {
+    const { getByText } = render(<Steps {...Props} />);
+
+    expect(getByText(`Test Step ${CURRENT_STEP} of ${MAX_STEPS}`)).toBeInTheDocument();
+  });
+
+  test("Should navigate to the correct step when clicked", async () => {
+    const { getByTestId } = render(<Steps {...Props} />);
+
+    for (let i = 0; i < MAX_STEPS; i++) {
+      const stepIndicator = getByTestId(`step-indicator-${i}`);
+      if (i < CURRENT_STEP - 1) {
+        fireEvent.click(stepIndicator);
+        expect(mockNavigateToStep).toHaveBeenCalledWith(i);
+        mockNavigateToStep.mockClear();
+      } else {
+        expect(mockNavigateToStep).not.toHaveBeenCalled();
+      }
+    }
+  });
+});