@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Wizard/Wizard.test.tsx

@@ -1,52 +1,52 @@
-import React, { useState } from 'react';
-import { Wizard, Props } from './Wizard';
+import React, { useState } from "react";
+import { Wizard, Props } from "./Wizard";
 import {
   getAllByRole,
   getByText,
   render,
   getByTestId,
   queryByRole,
-  findByText,
-} from '@testing-library/react';
-import { WizardActions } from './WizardActions/WizardActions';
-import { WizardSteps } from './WizardSteps/WizardSteps';
-import userEvent from '@testing-library/user-event';
+  findByText
+} from "@testing-library/react";
+import { WizardActions } from "./WizardActions/WizardActions";
+import { WizardSteps } from "./WizardSteps/WizardSteps";
+import userEvent from "@testing-library/user-event";
 
-type initWizardPropsType = Omit<Omit<Props, 'onStepChange'>, 'children'>;
+type initWizardPropsType = Omit<Omit<Props, "onStepChange">, "children">;
 
 const initWizardParams: initWizardPropsType = {
   steps: [
     {
-      label: 'Step 1',
+      label: "Step 1"
     },
     {
-      label: 'Step 2',
+      label: "Step 2"
     },
     {
-      label: 'Step 3',
-      disabled: true,
+      label: "Step 3",
+      disabled: true
     },
     {
-      label: 'Step 4',
-    },
+      label: "Step 4"
+    }
   ],
   initialStepNo: 0,
-  stepScreenReaderLabel: 'Step',
-  mode: 'add',
+  stepScreenReaderLabel: "Step",
+  mode: "add"
 };
 
 const initWizardStepsProps = {
-  onStepClick: jest.fn(),
+  onStepClick: jest.fn()
 };
 
 const initWizardActionsProps = {
   onNext: jest.fn(),
   onCancel: jest.fn(),
   onSaveAndClose: jest.fn(),
-  cancelButtonLabel: 'Cancel',
-  previousButtonLabel: 'Previous',
-  nextButtonLabel: 'Next',
-  saveAndCloseButtonLabel: 'Save & close',
+  cancelButtonLabel: "Cancel",
+  previousButtonLabel: "Previous",
+  nextButtonLabel: "Next",
+  saveAndCloseButtonLabel: "Save & close"
 };
 
 const renderWizard = (wizardProps?: initWizardPropsType) => {
@@ -69,48 +69,48 @@ const renderWizard = (wizardProps?: initWizardPropsType) => {
   return render(<Content />);
 };
 
-const getWizardContent = (container: HTMLElement) => getByTestId(container, 'wizard-content');
+const getWizardContent = (container: HTMLElement) => getByTestId(container, "wizard-content");
 
 const getStepButtons = (container: HTMLElement) =>
-  getAllByRole(getByTestId(container, 'wizard-steps'), 'button');
+  getAllByRole(getByTestId(container, "wizard-steps"), "button");
 
 const getActionsButtons = (container: HTMLElement) => {
-  const actionsContainer = getByTestId(container, 'wizard-actions');
-  const cancel = queryByRole(actionsContainer, 'button', {
-    name: initWizardActionsProps.cancelButtonLabel,
+  const actionsContainer = getByTestId(container, "wizard-actions");
+  const cancel = queryByRole(actionsContainer, "button", {
+    name: initWizardActionsProps.cancelButtonLabel
   });
-  const next = queryByRole(actionsContainer, 'button', {
-    name: initWizardActionsProps.nextButtonLabel,
+  const next = queryByRole(actionsContainer, "button", {
+    name: initWizardActionsProps.nextButtonLabel
   });
-  const prev = queryByRole(actionsContainer, 'button', {
-    name: initWizardActionsProps.previousButtonLabel,
+  const prev = queryByRole(actionsContainer, "button", {
+    name: initWizardActionsProps.previousButtonLabel
   });
-  const save = queryByRole(actionsContainer, 'button', {
-    name: initWizardActionsProps.saveAndCloseButtonLabel,
+  const save = queryByRole(actionsContainer, "button", {
+    name: initWizardActionsProps.saveAndCloseButtonLabel
   });
   return { cancel, next, prev, save };
 };
 
-describe('Wizard', () => {
-  it('renders without crashing', () => {
+describe("Wizard", () => {
+  it("renders without crashing", () => {
     const { container } = renderWizard();
     const { cancel, prev, next, save } = getActionsButtons(container);
     const stepButtons = getStepButtons(container);
     const wizardContent = getWizardContent(container);
 
     expect(stepButtons).toHaveLength(4);
-    expect(getByText(stepButtons[0], '1')).toBeDefined();
-    expect(getByText(stepButtons[1], '2')).toBeDefined();
-    expect(getByText(stepButtons[2], '3')).toBeDefined();
-    expect(getByText(stepButtons[3], '4')).toBeDefined();
-    expect(wizardContent).toHaveTextContent('Step 1');
+    expect(getByText(stepButtons[0], "1")).toBeDefined();
+    expect(getByText(stepButtons[1], "2")).toBeDefined();
+    expect(getByText(stepButtons[2], "3")).toBeDefined();
+    expect(getByText(stepButtons[3], "4")).toBeDefined();
+    expect(wizardContent).toHaveTextContent("Step 1");
     expect(cancel).toBeDefined();
     expect(next).toBeDefined();
     expect(prev).toBeNull();
     expect(save).toBeNull();
   });
 
-  it('should be able to click over whole wizard via action buttons', async () => {
+  it("should be able to click over whole wizard via action buttons", async () => {
     const { container } = renderWizard();
     const { next } = getActionsButtons(container);
     const wizardContent = getWizardContent(container);
@@ -118,23 +118,23 @@ describe('Wizard', () => {
       initWizardActionsProps.onNext as jest.MockedFunction<typeof initWizardActionsProps.onNext>
     ).mockReturnValue(true);
 
-    await findByText(wizardContent, 'Step 1');
+    await findByText(wizardContent, "Step 1");
     next && userEvent.click(next);
-    await findByText(wizardContent, 'Step 2');
+    await findByText(wizardContent, "Step 2");
     next && userEvent.click(next);
-    await findByText(wizardContent, 'Step 4');
+    await findByText(wizardContent, "Step 4");
     const { save, prev, cancel } = getActionsButtons(container);
     save && userEvent.click(save);
     expect(initWizardActionsProps.onSaveAndClose).toBeCalledWith(3);
     prev && userEvent.click(prev);
-    await findByText(wizardContent, 'Step 2');
+    await findByText(wizardContent, "Step 2");
     prev && userEvent.click(prev);
-    await findByText(wizardContent, 'Step 1');
+    await findByText(wizardContent, "Step 1");
     cancel && userEvent.click(cancel);
     expect(initWizardActionsProps.onCancel).toBeCalledTimes(1);
   });
 
-  it('should not be able to click over whole wizard via steps buttons in add mode', async () => {
+  it("should not be able to click over whole wizard via steps buttons in add mode", async () => {
     const { container } = renderWizard();
     const { next } = getActionsButtons(container);
     const stepsButtons = getStepButtons(container);
@@ -152,23 +152,23 @@ describe('Wizard', () => {
     userEvent.click(stepsButtons[2]);
     userEvent.click(stepsButtons[3]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(0);
-    await findByText(wizardContent, 'Step 1');
+    await findByText(wizardContent, "Step 1");
 
     next && userEvent.click(next);
     next && userEvent.click(next);
-    await findByText(wizardContent, 'Step 4');
+    await findByText(wizardContent, "Step 4");
     userEvent.click(stepsButtons[2]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(0);
     userEvent.click(stepsButtons[1]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
-    await findByText(wizardContent, 'Step 2');
+    await findByText(wizardContent, "Step 2");
     userEvent.click(stepsButtons[0]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
-    await findByText(wizardContent, 'Step 1');
+    await findByText(wizardContent, "Step 1");
   });
 
-  it('should be able to click over whole wizard via steps buttons in edit mode', async () => {
-    const { container } = renderWizard({ ...initWizardParams, mode: 'edit' });
+  it("should be able to click over whole wizard via steps buttons in edit mode", async () => {
+    const { container } = renderWizard({ ...initWizardParams, mode: "edit" });
     const stepsButtons = getStepButtons(container);
     const wizardContent = getWizardContent(container);
     (
@@ -179,20 +179,20 @@ describe('Wizard', () => {
 
     userEvent.click(stepsButtons[1]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
-    await findByText(wizardContent, 'Step 2');
+    await findByText(wizardContent, "Step 2");
     userEvent.click(stepsButtons[2]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
     userEvent.click(stepsButtons[3]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
-    await findByText(wizardContent, 'Step 4');
+    await findByText(wizardContent, "Step 4");
 
     userEvent.click(stepsButtons[2]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
     userEvent.click(stepsButtons[1]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(3);
-    await findByText(wizardContent, 'Step 2');
+    await findByText(wizardContent, "Step 2");
     userEvent.click(stepsButtons[0]);
     expect(initWizardStepsProps.onStepClick).toBeCalledTimes(4);
-    await findByText(wizardContent, 'Step 1');
+    await findByText(wizardContent, "Step 1");
   });
 });

package/src/Wizard/Wizard.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment, useContext, useEffect } from 'react';
-import { Step } from './BaseWizardSteps/BaseWizardSteps';
-import { WizardStateContext, WizardStateProvider } from './WizardStateProvider';
-import { setWizardState } from './wizardStateReducer';
+import React, { Fragment, useContext, useEffect } from "react";
+import { Step } from "./BaseWizardSteps/BaseWizardSteps";
+import { WizardStateContext, WizardStateProvider } from "./WizardStateProvider";
+import { setWizardState } from "./wizardStateReducer";
 
-export type WizardMode = 'add' | 'edit';
+export type WizardMode = "add" | "edit";
 
 export interface Props {
   steps: Step[];
@@ -24,7 +24,7 @@ const useSetWizardState = (steps: Step[], mode: WizardMode, stepScreenReaderLabe
 
 const useStepChanging = (onStepChange: (stepNo: number) => void) => {
   const {
-    state: { currentStepNo },
+    state: { currentStepNo }
   } = useContext(WizardStateContext);
 
   useEffect(() => {

package/src/Wizard/WizardActions/WizardActions.test.tsx

@@ -1,40 +1,40 @@
-import React, { useReducer } from 'react';
-import { WizardActions, Props } from './WizardActions';
-import { queryByRole, render } from '@testing-library/react';
-import { WizardStateContext, Props as ProviderProps } from '../WizardStateProvider';
-import { WizardStateType, reducer, changeCurrentStepNo } from '../wizardStateReducer';
-import userEvent from '@testing-library/user-event';
+import React, { useReducer } from "react";
+import { WizardActions, Props } from "./WizardActions";
+import { queryByRole, render } from "@testing-library/react";
+import { WizardStateContext, Props as ProviderProps } from "../WizardStateProvider";
+import { WizardStateType, reducer, changeCurrentStepNo } from "../wizardStateReducer";
+import userEvent from "@testing-library/user-event";
 
 const initWizardState: WizardStateType = {
   steps: [
     {
-      label: 'Step 1',
+      label: "Step 1"
     },
     {
-      label: 'Step 2',
+      label: "Step 2"
     },
     {
-      label: 'Step 3',
-      disabled: true,
+      label: "Step 3",
+      disabled: true
     },
     {
-      label: 'Step 4',
-    },
+      label: "Step 4"
+    }
   ],
   currentStepNo: 0,
-  stepScreenReaderLabel: 'Step',
-  mode: 'add',
+  stepScreenReaderLabel: "Step",
+  mode: "add"
 };
 
 const initParams: Props = {
-  cancelButtonLabel: 'Cancel',
-  previousButtonLabel: 'Previous',
-  nextButtonLabel: 'Next',
-  saveAndCloseButtonLabel: 'Save & Close',
+  cancelButtonLabel: "Cancel",
+  previousButtonLabel: "Previous",
+  nextButtonLabel: "Next",
+  saveAndCloseButtonLabel: "Save & Close",
   onCancel: jest.fn(),
   onNext: jest.fn(),
   onPrevious: jest.fn(),
-  onSaveAndClose: jest.fn(),
+  onSaveAndClose: jest.fn()
 };
 
 const renderWizardActions = (initReducerState?: WizardStateType, props?: Props) => {
@@ -59,20 +59,20 @@ const renderWizardActions = (initReducerState?: WizardStateType, props?: Props)
 
   return {
     ...renderObj,
-    dispatch,
+    dispatch
   };
 };
 
 const getActionsButtons = (container: HTMLElement) => {
-  const cancel = queryByRole(container, 'button', { name: initParams.cancelButtonLabel });
-  const next = queryByRole(container, 'button', { name: initParams.nextButtonLabel });
-  const prev = queryByRole(container, 'button', { name: initParams.previousButtonLabel });
-  const save = queryByRole(container, 'button', { name: initParams.saveAndCloseButtonLabel });
+  const cancel = queryByRole(container, "button", { name: initParams.cancelButtonLabel });
+  const next = queryByRole(container, "button", { name: initParams.nextButtonLabel });
+  const prev = queryByRole(container, "button", { name: initParams.previousButtonLabel });
+  const save = queryByRole(container, "button", { name: initParams.saveAndCloseButtonLabel });
   return { cancel, next, prev, save };
 };
 
-describe('WizardActions', () => {
-  it('renders without crashing', () => {
+describe("WizardActions", () => {
+  it("renders without crashing", () => {
     const { container, dispatch } = renderWizardActions();
     const { cancel, prev, next, save } = getActionsButtons(container);
     (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(true);
@@ -89,7 +89,7 @@ describe('WizardActions', () => {
     expect(dispatch).toBeCalledWith(changeCurrentStepNo(1));
   });
 
-  it('should allow going prev and forward when there are prev step and next step (next step is disabled but next one can be used)', () => {
+  it("should allow going prev and forward when there are prev step and next step (next step is disabled but next one can be used)", () => {
     const { container, dispatch } = renderWizardActions({ ...initWizardState, currentStepNo: 1 });
     const { cancel, prev, next, save } = getActionsButtons(container);
     (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(true);
@@ -108,7 +108,7 @@ describe('WizardActions', () => {
     expect(save).toBeNull();
   });
 
-  it('should render save button but not next button when current step is the last step', () => {
+  it("should render save button but not next button when current step is the last step", () => {
     const { container } = renderWizardActions({ ...initWizardState, currentStepNo: 3 });
     const { cancel, prev, next, save } = getActionsButtons(container);
 
@@ -121,16 +121,16 @@ describe('WizardActions', () => {
     expect(initParams.onSaveAndClose).toHaveBeenCalledWith(3);
   });
 
-  it('should show save and close when next steps are disabled', () => {
+  it("should show save and close when next steps are disabled", () => {
     const steps = [
       initWizardState.steps[0],
       { ...initWizardState.steps[1], disabled: true },
-      { ...initWizardState.steps[2], disabled: true },
+      { ...initWizardState.steps[2], disabled: true }
     ];
     const { container } = renderWizardActions({
       ...initWizardState,
       steps: steps,
-      currentStepNo: 0,
+      currentStepNo: 0
     });
     const { cancel, prev, next, save } = getActionsButtons(container);
 
@@ -143,8 +143,8 @@ describe('WizardActions', () => {
     expect(initParams.onSaveAndClose).toHaveBeenCalledWith(0);
   });
 
-  it('should show save button on middle step when mode is `edit`', () => {
-    const { container } = renderWizardActions({ ...initWizardState, mode: 'edit' });
+  it("should show save button on middle step when mode is `edit`", () => {
+    const { container } = renderWizardActions({ ...initWizardState, mode: "edit" });
     const { cancel, prev, next, save } = getActionsButtons(container);
 
     expect(cancel).toBeDefined();
@@ -156,7 +156,7 @@ describe('WizardActions', () => {
     expect(initParams.onSaveAndClose).toHaveBeenCalledWith(0);
   });
 
-  it('should not allow going forward when dev returns false on onNext callback', () => {
+  it("should not allow going forward when dev returns false on onNext callback", () => {
     const { container, dispatch } = renderWizardActions();
     const { next } = getActionsButtons(container);
     (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(false);

package/src/Wizard/WizardActions/WizardActions.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment, useContext, useMemo } from 'react';
-import { Button } from '../../Button/Button';
-import { Step } from '../BaseWizardSteps/BaseWizardSteps';
-import { WizardMode } from '../Wizard';
-import { WizardStateContext } from '../WizardStateProvider';
-import { changeCurrentStepNo } from '../wizardStateReducer';
+import React, { Fragment, useContext, useMemo } from "react";
+import { Button } from "../../Button/Button";
+import { Step } from "../BaseWizardSteps/BaseWizardSteps";
+import { WizardMode } from "../Wizard";
+import { WizardStateContext } from "../WizardStateProvider";
+import { changeCurrentStepNo } from "../wizardStateReducer";
 
 export interface Props extends React.HTMLProps<HTMLDivElement> {
   cancelButtonLabel: string;
@@ -44,20 +44,20 @@ export const WizardActions = ({
   cancelButtonLabel,
   previousButtonLabel,
   nextButtonLabel,
-  saveAndCloseButtonLabel,
+  saveAndCloseButtonLabel
 }: Props) => {
   const {
     state: { mode, steps, currentStepNo },
-    dispatch,
+    dispatch
   } = useContext(WizardStateContext);
   const nextStepNo = useNextStepNo(mode, currentStepNo, steps);
   const hasNextStep = nextStepNo !== -1;
   const previousStepNo = usePreviousStepNo(mode, currentStepNo, steps);
   const hasPreviousStep = previousStepNo !== -1;
-  const isLastStepOrEditMode = !hasNextStep || mode === 'edit';
+  const isLastStepOrEditMode = !hasNextStep || mode === "edit";
 
-  const changeStepNo = (direction: 'forward' | 'backward') => {
-    if (direction === 'forward') {
+  const changeStepNo = (direction: "forward" | "backward") => {
+    if (direction === "forward") {
       hasNextStep && dispatch(changeCurrentStepNo(nextStepNo));
     } else {
       hasPreviousStep && dispatch(changeCurrentStepNo(previousStepNo));
@@ -65,12 +65,12 @@ export const WizardActions = ({
   };
 
   const onNextWrapper = () => {
-    onNext(currentStepNo) && changeStepNo('forward');
+    onNext(currentStepNo) && changeStepNo("forward");
   };
 
   const onPreviousWrapper = () => {
     onPrevious && onPrevious();
-    changeStepNo('backward');
+    changeStepNo("backward");
   };
 
   const onSaveAndCloseWrapper = () => {
@@ -88,7 +88,7 @@ export const WizardActions = ({
         </Button>
       )}
       {hasNextStep && (
-        <Button variant={mode === 'edit' ? 'outline' : 'fill'} onClick={onNextWrapper}>
+        <Button variant={mode === "edit" ? "outline" : "fill"} onClick={onNextWrapper}>
           {nextButtonLabel}
         </Button>
       )}

package/src/Wizard/WizardStateProvider.tsx

@@ -1,12 +1,12 @@
-import React, { createContext, Dispatch, useReducer } from 'react';
-import { WizardActions, WizardStateType, reducer } from './wizardStateReducer';
+import React, { createContext, Dispatch, useReducer } from "react";
+import { WizardActions, WizardStateType, reducer } from "./wizardStateReducer";
 
 const WizardStateContext = createContext<{
   state: WizardStateType;
   dispatch: Dispatch<WizardActions>;
 }>({
   state: {} as WizardStateType,
-  dispatch: () => null,
+  dispatch: () => null
 });
 
 export interface Props {

package/src/Wizard/WizardSteps/WizardSteps.test.tsx

@@ -1,33 +1,33 @@
-import React, { useReducer } from 'react';
-import { WizardSteps, Props } from './WizardSteps';
-import { getAllByRole, getByText, render } from '@testing-library/react';
-import { WizardStateContext, Props as ProviderProps } from '../WizardStateProvider';
-import { WizardStateType, reducer, changeCurrentStepNo } from '../wizardStateReducer';
-import userEvent from '@testing-library/user-event';
+import React, { useReducer } from "react";
+import { WizardSteps, Props } from "./WizardSteps";
+import { getAllByRole, getByText, render } from "@testing-library/react";
+import { WizardStateContext, Props as ProviderProps } from "../WizardStateProvider";
+import { WizardStateType, reducer, changeCurrentStepNo } from "../wizardStateReducer";
+import userEvent from "@testing-library/user-event";
 
 const initWizardState: WizardStateType = {
   steps: [
     {
-      label: 'Step 1',
+      label: "Step 1"
     },
     {
-      label: 'Step 2',
+      label: "Step 2"
     },
     {
-      label: 'Step 3',
-      disabled: true,
+      label: "Step 3",
+      disabled: true
     },
     {
-      label: 'Step 4',
-    },
+      label: "Step 4"
+    }
   ],
   currentStepNo: 1,
-  stepScreenReaderLabel: 'Step',
-  mode: 'add',
+  stepScreenReaderLabel: "Step",
+  mode: "add"
 };
 
 const initParams: Props = {
-  onStepClick: jest.fn(),
+  onStepClick: jest.fn()
 };
 
 const renderWizardSteps = (initReducerState?: WizardStateType) => {
@@ -51,14 +51,14 @@ const renderWizardSteps = (initReducerState?: WizardStateType) => {
 
   return {
     ...renderObj,
-    dispatch,
+    dispatch
   };
 };
 
-const getStepButtons = (container: HTMLElement) => getAllByRole(container, 'button');
+const getStepButtons = (container: HTMLElement) => getAllByRole(container, "button");
 
-describe('WizardSteps', () => {
-  it('renders without crashing', () => {
+describe("WizardSteps", () => {
+  it("renders without crashing", () => {
     const { container, dispatch } = renderWizardSteps();
     const buttons = getStepButtons(container);
     (
@@ -69,10 +69,10 @@ describe('WizardSteps', () => {
     userEvent.click(buttons[0]);
     expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 0);
     expect(dispatch).toBeCalledWith(changeCurrentStepNo(0));
-    expect(buttons[0].querySelector('.checkmark')).toBeDefined();
-    expect(getByText(buttons[1], '2')).toBeDefined();
-    expect(getByText(buttons[2], '3')).toBeDefined();
-    expect(getByText(buttons[3], '4')).toBeDefined();
+    expect(buttons[0].querySelector(".checkmark")).toBeDefined();
+    expect(getByText(buttons[1], "2")).toBeDefined();
+    expect(getByText(buttons[2], "3")).toBeDefined();
+    expect(getByText(buttons[3], "4")).toBeDefined();
 
     userEvent.click(buttons[1]);
     userEvent.click(buttons[2]);
@@ -80,8 +80,8 @@ describe('WizardSteps', () => {
     expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
   });
 
-  it('should allow to click on future and prev steps but not on current and disabled steps when mode is set to `edit`', () => {
-    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: 'edit' });
+  it("should allow to click on future and prev steps but not on current and disabled steps when mode is set to `edit`", () => {
+    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: "edit" });
     const buttons = getStepButtons(container);
     (
       initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
@@ -96,8 +96,8 @@ describe('WizardSteps', () => {
     expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
   });
 
-  it('should do not change step when `onStepClick` callback returns false', () => {
-    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: 'edit' });
+  it("should do not change step when `onStepClick` callback returns false", () => {
+    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: "edit" });
     const buttons = getStepButtons(container);
     (
       initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>

package/src/Wizard/WizardSteps/WizardSteps.tsx

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithRef, useContext } from 'react';
-import { WizardStateContext } from '../WizardStateProvider';
-import { BaseWizardSteps } from '../BaseWizardSteps/BaseWizardSteps';
-import { changeCurrentStepNo } from '../wizardStateReducer';
+import React, { ComponentPropsWithRef, useContext } from "react";
+import { WizardStateContext } from "../WizardStateProvider";
+import { BaseWizardSteps } from "../BaseWizardSteps/BaseWizardSteps";
+import { changeCurrentStepNo } from "../wizardStateReducer";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
 }
 
@@ -11,7 +11,7 @@ export const WizardSteps = React.forwardRef<HTMLDivElement, Props>(
   ({ onStepClick, ...rest }: Props, ref) => {
     const {
       state: { currentStepNo, mode, stepScreenReaderLabel, steps },
-      dispatch,
+      dispatch
     } = useContext(WizardStateContext);
 
     const onClick = (selectedStepNo: number) => {
@@ -26,7 +26,7 @@ export const WizardSteps = React.forwardRef<HTMLDivElement, Props>(
         steps={steps}
         currentStepNo={currentStepNo}
         stepScreenReaderLabel={stepScreenReaderLabel}
-        futureStepsClickable={mode === 'edit'}
+        futureStepsClickable={mode === "edit"}
       />
     );
   }