-
{currentStep.title}
-
{currentStep.description}
+
+ {currentStep.title}
+
+
+ {currentStep.description}
+
{!props.disableNavigation && (
-
+
)}
diff --git a/packages/ui/components/form/wizard/wizardForm.test.tsx b/packages/ui/components/form/wizard/wizardForm.test.tsx
new file mode 100644
index 0000000000..8cf7004d17
--- /dev/null
+++ b/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:
Step 1
,
+ isEnabled: false,
+ },
+ {
+ title: "Step 2",
+ description: "Description 2",
+ content: (setIsLoading: (value: boolean) => void) => (
+
+ ),
+ isEnabled: true,
+ },
+ { title: "Step 3", description: "Description 3", content:
Step 3
},
+];
+
+const props = {
+ href: "/test/mock",
+ steps: steps,
+ nextLabel: "Next step",
+ prevLabel: "Previous step",
+ finishLabel: "Finish",
+};
+
+let currentStepNavigation: number;
+
+const renderComponent = (extraProps?: { disableNavigation: boolean }) =>
+ render(
);
+
+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(
);
+
+ 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();
+ });
+});