Merge pull request #179 from devrnt/135-gottostep-fails-with-dynamically-rendered-step

135 gottostep fails with dynamically rendered step

Author: devrnt

src/wizard.tsx

@@ -29,22 +29,25 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
       }
     });
 
-    const goToStep = React.useRef((stepIndex: number) => {
-      if (stepIndex >= 0 && stepIndex < stepCount) {
-        nextStepHandler.current = null;
-        setActiveStep(stepIndex);
-      } else {
-        if (__DEV__) {
-          logger.log(
-            'warn',
-            [
-              `Invalid step index [${stepIndex}] passed to 'goToStep'. `,
-              `Ensure the given stepIndex is not out of boundaries.`,
-            ].join(''),
-          );
+    const goToStep = React.useCallback(
+      (stepIndex: number) => {
+        if (stepIndex >= 0 && stepIndex < stepCount) {
+          nextStepHandler.current = null;
+          setActiveStep(stepIndex);
+        } else {
+          if (__DEV__) {
+            logger.log(
+              'warn',
+              [
+                `Invalid step index [${stepIndex}] passed to 'goToStep'. `,
+                `Ensure the given stepIndex is not out of boundaries.`,
+              ].join(''),
+            );
+          }
         }
-      }
-    });
+      },
+      [stepCount],
+    );
 
     // Callback to attach the step handler
     const handleStep = React.useRef((handler: Handler) => {
@@ -78,9 +81,9 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         stepCount,
         isFirstStep: !hasPreviousStep.current,
         isLastStep: !hasNextStep.current,
-        goToStep: goToStep.current,
+        goToStep,
       }),
-      [activeStep, stepCount, isLoading],
+      [isLoading, activeStep, stepCount, goToStep],
     );
 
     const activeStepContent = React.useMemo(() => {

test/useWizard.test.tsx

@@ -224,4 +224,56 @@ describe('useWizard', () => {
       }
     });
   });
+
+  test('should update step count when dynamic step is added', () => {
+    const steps = ['one', 'two', 'three'];
+
+    const { result, rerender } = renderHook(() => useWizard(), {
+      initialProps: {
+        startIndex: 0,
+      },
+      wrapper: ({ children, startIndex }) => (
+        <Wizard startIndex={startIndex}>
+          {steps.map((step) => (
+            <p key={step}>{children}</p>
+          ))}
+        </Wizard>
+      ),
+    });
+
+    expect(result.current.stepCount).toBe(3);
+
+    steps.push('four');
+    rerender();
+
+    expect(result.current.stepCount).toBe(4);
+  });
+
+  test('should go to step index of dynamic step', () => {
+    const steps = ['one', 'two', 'three'];
+
+    const { result, rerender } = renderHook(() => useWizard(), {
+      initialProps: {
+        startIndex: 0,
+      },
+      wrapper: ({ children, startIndex }) => (
+        <Wizard startIndex={startIndex}>
+          {steps.map((step) => (
+            <p key={step}>{children}</p>
+          ))}
+        </Wizard>
+      ),
+    });
+
+    steps.push('four');
+    rerender();
+
+    act(() => {
+      result.current.goToStep(3);
+    });
+
+    expect(result.current.activeStep).toBe(3);
+    expect(result.current.isFirstStep).toBe(false);
+    expect(result.current.isLastStep).toBe(true);
+  });
 });