Merge pull request #106 from martinbroos/main

make sure stepCount doesn't count false / null or undefined child items

Author: devrnt

src/wizard.tsx

@@ -11,7 +11,7 @@ const Wizard: React.FC<WizardProps> = React.memo(
     const hasNextStep = React.useRef(true);
     const hasPreviousStep = React.useRef(false);
     const nextStepHandler = React.useRef<Handler>(() => {});
-    const stepCount = React.Children.count(children);
+    const stepCount = React.Children.toArray(children).length;
 
     hasNextStep.current = activeStep < stepCount - 1;
     hasPreviousStep.current = activeStep > 0;

test/useWizard.test.tsx

@@ -12,6 +12,7 @@ const renderUseWizardHook = (initialStartIndex = 0) => {
     wrapper: ({ children, startIndex }) => (
       <Wizard startIndex={startIndex}>
         <p>step 1 {children}</p>
+        {false && <p>Optional step</p>}
         <p>step 2 {children}</p>
       </Wizard>
     ),
@@ -37,6 +38,20 @@ describe('useWizard', () => {
     expect(result.current.stepCount).toBe(2);
   });
 
+  test('should set step count to one when using falsy step', () => {
+    const { result } = renderHook(() => useWizard(), {
+      wrapper: ({ children }) => (
+        <Wizard>
+          <p>step 1 {children}</p>
+          <p>step 2 {children}</p>
+          {false && <p>step 3 {children}</p>}
+        </Wizard>
+      ),
+    });
+
+    expect(result.current.stepCount).toBe(2);
+  });
+
   test('should set active step to one', () => {
     const { result } = renderUseWizardHook(1);