refactor: removed redundant test (#10785)

Co-authored-by: gitstart-calcom <[email protected]>
Co-authored-by: Shivam Kalra <[email protected]>

Author: 3 people

packages/ui/components/form/wizard/WizardForm.tsx

@@ -43,13 +43,23 @@ function WizardForm<T extends DefaultStep>(props: {
   }, [currentStep]);
 
   return (
-    <div className="mx-auto mt-4 print:w-full">
+    <div className="mx-auto mt-4 print:w-full" data-testid="wizard-form">
       <div className={classNames("overflow-hidden  md:mb-2 md:w-[700px]", props.containerClassname)}>
         <div className="px-6 py-5 sm:px-14">
-          <h1 className="font-cal text-emphasis text-2xl">{currentStep.title}</h1>
-          <p className="text-subtle text-sm">{currentStep.description}</p>
+          <h1 className="font-cal text-emphasis text-2xl" data-testid="step-title">
+            {currentStep.title}
+          </h1>
+          <p className="text-subtle text-sm" data-testid="step-description">
+            {currentStep.description}
+          </p>
           {!props.disableNavigation && (
-            <Steps maxSteps={steps.length} currentStep={step} navigateToStep={noop} stepLabel={stepLabel} />
+            <Steps
+              maxSteps={steps.length}
+              currentStep={step}
+              navigateToStep={noop}
+              stepLabel={stepLabel}
+              data-testid="wizard-step-component"
+            />
           )}
         </div>
       </div>

packages/ui/components/form/wizard/wizardForm.test.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
+
+import WizardForm from "./WizardForm";
+
+vi.mock("next/navigation", () => ({
+  useRouter() {
+    return { replace: vi.fn() };
+  },
+  useSearchParams() {
+    return { get: vi.fn().mockReturnValue(currentStepNavigation) };
+  },
+}));
+
+const steps = [
+  {
+    title: "Step 1",
+    description: "Description 1",
+    content: <p data-testid="content-1">Step 1</p>,
+    isEnabled: false,
+  },
+  {
+    title: "Step 2",
+    description: "Description 2",
+    content: (setIsLoading: (value: boolean) => void) => (
+      <button data-testid="content-2" onClick={() => setIsLoading(true)}>
+        Test
+      </button>
+    ),
+    isEnabled: true,
+  },
+  { title: "Step 3", description: "Description 3", content: <p data-testid="content-3">Step 3</p> },
+];
+
+const props = {
+  href: "/test/mock",
+  steps: steps,
+  nextLabel: "Next step",
+  prevLabel: "Previous step",
+  finishLabel: "Finish",
+};
+
+let currentStepNavigation: number;
+
+const renderComponent = (extraProps?: { disableNavigation: boolean }) =>
+  render(<WizardForm {...props} {...extraProps} />);
+
+describe("Tests for WizardForm component", () => {
+  test("Should handle all the steps correctly", async () => {
+    currentStepNavigation = 1;
+    const { queryByTestId, queryByText, rerender } = renderComponent();
+    const { prevLabel, nextLabel, finishLabel } = props;
+    const stepInfo = {
+      title: queryByTestId("step-title"),
+      description: queryByTestId("step-description"),
+    };
+
+    await waitFor(() => {
+      steps.forEach((step, index) => {
+        rerender(<WizardForm {...props} />);
+
+        const { title, description } = step;
+        const buttons = {
+          prev: queryByText(prevLabel),
+          next: queryByText(nextLabel),
+          finish: queryByText(finishLabel),
+        };
+
+        expect(stepInfo.title).toHaveTextContent(title);
+        expect(stepInfo.description).toHaveTextContent(description);
+
+        if (index === 0) {
+          // case of first step
+          expect(buttons.prev && buttons.finish).not.toBeInTheDocument();
+          expect(buttons.next).toBeInTheDocument();
+        } else if (index === steps.length - 1) {
+          // case of last step
+          expect(buttons.prev && buttons.finish).toBeInTheDocument();
+          expect(buttons.next).not.toBeInTheDocument();
+        } else {
+          // case of in-between steps
+          expect(buttons.prev && buttons.next).toBeInTheDocument();
+          expect(buttons.finish).not.toBeInTheDocument();
+        }
+
+        currentStepNavigation++;
+      });
+    });
+  });
+
+  describe("Should handle the visibility of the content", async () => {
+    test("Should render JSX content correctly", async () => {
+      currentStepNavigation = 1;
+      const { getByTestId, getByText } = renderComponent();
+      const currentStep = steps[0];
+
+      expect(getByTestId("content-1")).toBeInTheDocument();
+      expect(getByText(currentStep.title && currentStep.description)).toBeInTheDocument();
+    });
+
+    test("Should render function content correctly", async () => {
+      currentStepNavigation = 2;
+      const { getByTestId, getByText } = renderComponent();
+      const currentStep = steps[1];
+
+      expect(getByTestId("content-2")).toBeInTheDocument();
+      expect(getByText(currentStep.title && currentStep.description)).toBeInTheDocument();
+    });
+  });
+
+  test("Should disable 'Next step' button if current step navigation is not enabled", async () => {
+    currentStepNavigation = 1;
+    const { nextLabel } = props;
+    const { getByText } = renderComponent();
+
+    expect(getByText(nextLabel)).toBeDisabled();
+  });
+
+  test("Should handle when navigation is disabled", async () => {
+    const { queryByText, queryByTestId } = renderComponent({ disableNavigation: true });
+    const { prevLabel, nextLabel, finishLabel } = props;
+    const stepComponent = queryByTestId("wizard-step-component");
+    const stepInfo = {
+      title: queryByTestId("step-title"),
+      description: queryByTestId("step-description"),
+    };
+    const buttons = {
+      prev: queryByText(prevLabel),
+      next: queryByText(nextLabel),
+      finish: queryByText(finishLabel),
+    };
+
+    expect(stepInfo.title && stepInfo.description).toBeInTheDocument();
+    expect(stepComponent).not.toBeInTheDocument();
+    expect(buttons.prev && buttons.next && buttons.finish).not.toBeInTheDocument();
+  });
+});