@patternfly/react-core 5.0.0-alpha.70 → 5.0.0-alpha.71

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -1,317 +1,449 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
-import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
-import { DrawerPanelContent, DrawerColorVariant, DrawerHead } from '../../Drawer';
 import userEvent from '@testing-library/user-event';
 
-describe('Wizard', () => {
-  test('Wizard should match snapshot', () => {
-    const steps: WizardStep[] = [
-      { name: 'A', id: 'step-A', component: <p>Step 1</p> },
-      {
-        name: 'B',
-        id: 'step-B',
-        steps: [
-          {
-            name: 'B-1',
-            id: 'step-B-1',
-            component: <p>Step 2</p>,
-            enableNext: true
-          },
-          {
-            name: 'B-2',
-            id: 'step-B-2',
-            component: <p>Step 3</p>,
-            enableNext: false
-          }
-        ]
-      },
-      { name: 'C', id: 'step-C', component: <p>Step 4</p> },
-      { name: 'D', id: 'step-D', component: <p>Step 5</p> }
-    ];
-    const onBack: WizardStepFunctionType = step => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const name = { step };
-    };
-
-    const { asFragment } = render(
-      <Wizard title="Wizard title" description="Description here" steps={steps} startAtStep={1} onBack={onBack} />
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
+import { Wizard, WizardFooterProps, WizardStep, WizardNavProps } from '../';
 
-  test('Expandable Nav Wizard should match snapshot', () => {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p> },
-      {
-        name: 'B',
-        steps: [
-          {
-            name: 'B-1',
-            component: <p>Step 2</p>,
-            enableNext: true
-          },
-          {
-            name: 'B-2',
-            component: <p>Step 3</p>,
-            enableNext: false
-          }
-        ]
-      },
-      { name: 'C', component: <p>Step 4</p> },
-      { name: 'D', component: <p>Step 5</p> }
-    ];
-    const onBack: WizardStepFunctionType = step => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const name = { step };
-    };
-
-    const { asFragment } = render(
-      <Wizard
-        title="Wizard title"
-        description="Description here"
-        steps={steps}
-        startAtStep={1}
-        onBack={onBack}
-        isNavExpandable
-      />
-    );
+test('renders step when child is of type WizardStep', () => {
+  render(
+    <Wizard>
+      <WizardStep id="test-step" name="Test step">
+        Step content
+      </WizardStep>
+    </Wizard>
+  );
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+  expect(screen.getByText('Step content')).toBeVisible();
+});
 
-  test('bare wiz', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+test('renders a header when specified', () => {
+  render(
+    <Wizard header="Some header">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-    const { asFragment } = render(
-      <Wizard
-        description="This wizard uses anchor tags for the nav item elements"
-        id="inPageWizWithAnchorsId"
-        steps={steps}
-      />
-    );
+  expect(screen.getByText('Some header')).toBeVisible();
+});
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('renders default footer without specifying the footer prop', () => {
+  render(
+    <Wizard>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-  test('wiz with title', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  expect(screen.getByRole('button', { name: 'Next' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Back' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+});
 
-    render(<Wizard title="Wizard" description="This wizard has a title" steps={steps} />);
-    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
-  });
+test('renders default footer with custom props', () => {
+  const footer: Partial<WizardFooterProps> = {
+    nextButtonText: <>Proceed with caution</>,
+    backButtonText: 'Turn back!',
+    cancelButtonText: 'Leave now!'
+  };
 
-  test('wiz with drawer', () => {
-    const wizDrawerPanelContent = (
-      <DrawerPanelContent colorVariant={DrawerColorVariant.light200}>
-        <DrawerHead>
-          <span>This wizard has a drawer with drawer panel content</span>
-        </DrawerHead>
-      </DrawerPanelContent>
-    );
+  render(
+    <Wizard footer={footer}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p>, drawerPanelContent: wizDrawerPanelContent }];
+  expect(screen.getByRole('button', { name: 'Proceed with caution' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Turn back!' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
+});
 
-    render(<Wizard title="Wizard with drawer" hasDrawer isDrawerExpanded steps={steps} />);
-    expect(screen.getByRole('heading', { name: 'Wizard with drawer' })).toBeInTheDocument();
-    expect(screen.getByText('This wizard has a drawer with drawer panel content')).toBeInTheDocument();
-  });
+test('renders custom footer', () => {
+  render(
+    <Wizard footer={<>Some footer</>}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-  test('wiz with title and navAriaLabel combination', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  expect(screen.getByText('Some footer')).toBeVisible();
+});
 
-    render(<Wizard title="Wizard" navAriaLabel="Some label" description="This wizard has a title" steps={steps} />);
+test('renders default nav without specifying the nav prop', () => {
+  render(
+    <Wizard>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-    const nav = screen.getByLabelText('Some label');
+  expect(screen.getByRole('navigation')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
+});
 
-    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
-    expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-5');
-  });
+test('renders default nav with custom props', () => {
+  const nav: Partial<WizardNavProps> = {
+    'aria-label': 'Some nav label',
+    'aria-labelledby': 'wizard-id'
+  };
 
-  test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  render(
+    <Wizard id="wizard-id" nav={nav} isVisitRequired>
+      <WizardStep id="step-1" name="Test step 1" steps={[<WizardStep id="nested-step" name="Nested step" />]} />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
 
-    render(<Wizard navAriaLabel="nav aria-label" description="This wizard has a title" steps={steps} />);
+  const navElement = screen.getByLabelText('Some nav label');
 
-    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
-  });
+  expect(navElement).toBeVisible();
+  expect(navElement).toHaveAttribute('aria-labelledby', 'wizard-id');
+  expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
+});
 
-  test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+test('renders custom nav', () => {
+  const customNav = () => <nav>Some custom nav</nav>;
 
-    render(
-      <Wizard
-        navAriaLabelledBy="nav-aria-labelledby"
-        navAriaLabel="nav aria-label"
-        description="This wizard has a title"
-        steps={steps}
-      />
-    );
+  render(
+    <Wizard nav={customNav}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-    const nav = screen.getByLabelText('nav aria-label');
+  expect(screen.getByRole('navigation')).toBeVisible();
+});
 
-    expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
-  });
+test('starts with the first step as the current one by default', () => {
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  expect(screen.getByText('Step 1 content')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Test step 1' })).toHaveClass('pf-m-current');
+});
 
-  test('wiz with title, navAriaLabelledBy, and navAriaLabel', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-    render(
-      <Wizard
-        title="Wiz title"
-        navAriaLabel="nav aria-label"
-        navAriaLabelledBy="nav-aria-labelledby"
-        mainAriaLabel="main aria-label"
-        mainAriaLabelledBy="main-aria-labelledby"
-        description="This wizard has a title"
-        steps={steps}
-      />
-    );
+test(`can start at a step that isn't the first by specifying 'startIndex'`, () => {
+  render(
+    <Wizard startIndex={2}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2">
+        Step 2 content
+      </WizardStep>
+    </Wizard>
+  );
+
+  expect(screen.getByText('Step 2 content')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveClass('pf-m-current');
+});
 
-    const nav = screen.getByLabelText('nav aria-label');
-    expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
-  });
+test(`can use custom classNames and spread other props into the wizard's div`, () => {
+  render(
+    <Wizard className="some-class" data-testid="wizard-id">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-  test('Does not render with mainAriaLabel or mainAriaLabelledby by default', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-    render(
-      <Wizard
-        data-testid="wizard-test-id"
-        title="Wiz title"
-        mainAriaLabel="main aria-label"
-        mainAriaLabelledBy="main-aria-labelledby"
-        description="This wizard has a title"
-        steps={steps}
-      />
-    );
+  expect(screen.getByTestId('wizard-id')).toHaveClass('some-class');
+});
 
-    const main = screen.getByTestId('wizard-test-id');
-    expect(main).not.toHaveAttribute('aria-labelledby');
-    expect(main).not.toHaveAttribute('aria-label');
-  });
+test(`can customize the wizard's height and width`, () => {
+  render(
+    <Wizard height={500} width={500} data-testid="wizard-id">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-  test('wiz with onCurrentStepChanged setter', async () => {
-    const stepA = { name: 'A', component: <p>Step 1</p> };
-    const stepB = { name: 'B', component: <p>Step 2</p> };
-    const stepC = { name: 'C', component: <p>Step 3</p> };
-
-    const steps: WizardStep[] = [stepA, stepB, stepC];
-    const setter = jest.fn();
-    const user = userEvent.setup();
-
-    render(<Wizard title="Wiz title" onCurrentStepChanged={setter} steps={steps} />);
-    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
-    await user.click(screen.getByText(/next/i));
-    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
-    await user.click(screen.getByText(/next/i));
-    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepC));
-    await user.click(screen.getByText('A'));
-    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
-    await user.click(screen.getByText(/next/i));
-    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
-    await user.click(screen.getByText(/back/i));
-    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
-  });
+  const wizard = screen.getByTestId('wizard-id');
+
+  expect(wizard).toHaveStyle('height: 500px');
+  expect(wizard).toHaveStyle('width: 500px');
 });
 
-test('wiz with disabled steps', () => {
-  const steps: WizardStep[] = [
-    { name: 'A', component: <p>Step 1</p> },
-    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-    { name: 'C', component: <p>Step 3</p> },
-    { name: 'E', component: <p>Step 4</p>, isDisabled: true },
-    { name: 'G', component: <p>Step 5</p> }
-  ];
+test('calls onNavByIndex on nav item click', async () => {
+  const user = userEvent.setup();
+  const onNavByIndex = jest.fn();
 
-  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+  render(
+    <Wizard onStepChange={onNavByIndex}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
 
-  expect(screen.getByRole('button', { name: 'B' })).toBeDisabled();
-  expect(screen.getByRole('button', { name: 'E' })).toBeDisabled();
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  expect(onNavByIndex).toHaveBeenCalled();
 });
 
-test('wiz skip the step disabled when press the next/back button', async () => {
-  const steps: WizardStep[] = [
-    { name: 'A', component: <p>Step 1</p> },
-    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-    { name: 'C', component: <p>Step 3</p> }
-  ];
+test('calls onNext and not onSave on next button click when not on the last step', async () => {
   const user = userEvent.setup();
+  const onNext = jest.fn();
+  const onSave = jest.fn();
 
-  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+  render(
+    <Wizard onStepChange={onNext} onSave={onSave}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
 
   await user.click(screen.getByRole('button', { name: 'Next' }));
-  expect(screen.getByRole('button', { name: 'C' })).toHaveClass('pf-m-current');
 
+  expect(onNext).toHaveBeenCalled();
+  expect(onSave).not.toHaveBeenCalled();
+});
+
+test('calls onBack on back button click', async () => {
+  const user = userEvent.setup();
+  const onBack = jest.fn();
+
+  render(
+    <Wizard onStepChange={onBack}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
   await user.click(screen.getByRole('button', { name: 'Back' }));
-  expect(screen.getByRole('button', { name: 'A' })).toHaveClass('pf-m-current');
+
+  expect(onBack).toHaveBeenCalled();
 });
 
-test('wiz skip the step when click on the nav item disabled', async () => {
-  const steps: WizardStep[] = [
-    { name: 'A', component: <p>Step 1</p> },
-    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-    { name: 'C', component: <p>Step 3</p> }
-  ];
+test('calls onSave and not onClose on next button click when on the last step', async () => {
   const user = userEvent.setup();
+  const onSave = jest.fn();
+  const onClose = jest.fn();
 
-  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+  render(
+    <Wizard onSave={onSave} onClose={onClose}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
 
-  const navItemButton = screen.getByRole('button', { name: 'B' });
-  const navItemButtonSelected = screen.getByRole('button', { name: 'A' });
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+
+  expect(onSave).toHaveBeenCalled();
+  expect(onClose).not.toHaveBeenCalled();
+});
+
+test('calls onClose when onSave is not specified on next button click when on the last step', async () => {
+  const user = userEvent.setup();
+  const onClose = jest.fn();
 
-  await user.click(navItemButton);
+  render(
+    <Wizard onClose={onClose}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" />
+    </Wizard>
+  );
 
-  expect(navItemButton).not.toHaveClass('pf-m-current');
-  expect(navItemButtonSelected).toHaveClass('pf-m-current');
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+
+  expect(onClose).toHaveBeenCalled();
 });
 
-test('wiz with disable sub step', () => {
-  const steps: WizardStep[] = [
-    {
-      name: 'A',
-      steps: [
-        { name: 'A-1', component: <p>Substep A content</p> },
-        { name: 'A-2', component: <p>Substep B content</p>, isDisabled: true }
-      ]
-    }
-  ];
+test('calls onClose on cancel link click', async () => {
+  const user = userEvent.setup();
+  const onClose = jest.fn();
 
-  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+  render(
+    <Wizard onClose={onClose}>
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
 
-  expect(screen.getByRole('button', { name: 'A-2' })).toBeDisabled();
+  await user.click(screen.getByRole('button', { name: 'Cancel' }));
+  expect(onClose).toHaveBeenCalled();
 });
 
-test('startAtStep can be used to externally control the current step of the wizard', async () => {
-  const WizardTest = () => {
-    const [step, setStep] = React.useState(1);
-
-    const incrementStep = () => {
-      setStep(prevStep => prevStep + 1);
-    };
-
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p> },
-      { name: 'B', component: <p>Step 2</p> },
-      { name: 'C', component: <p>Step 3</p> }
-    ];
-
-    return (
-      <>
-        <Wizard steps={steps} startAtStep={step} />
-        <button onClick={() => incrementStep()}>Increment step</button>
-      </>
-    );
-  };
+test('does not render inactive step content', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="step-2" name="Test step 2">
+        Step 2 content
+      </WizardStep>
+    </Wizard>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+
+  expect(screen.queryByText('Step 1 content')).toBeNull();
+  expect(screen.getByText('Step 2 content')).toBeVisible();
+});
+
+test('parent steps have collapsed sub-steps when isExpandable is true unless the step is active', async () => {
   const user = userEvent.setup();
 
-  render(<WizardTest />);
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep
+        id="step-2"
+        name="Test step 2"
+        isExpandable
+        steps={[<WizardStep id="sub-step-1" name="Test sub step 1" />]}
+      />
+    </Wizard>
+  );
+
+  expect(screen.getByLabelText('Expand step icon')).toBeVisible();
 
-  expect(screen.queryByText('Step 2')).not.toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+
+  expect(screen.getByLabelText('Collapse step icon')).toBeVisible();
+});
+
+test('parent step can be expandable by setting isExpandable to true', () => {
+  render(
+    <Wizard>
+      <WizardStep
+        id="step-1"
+        name="Test step 1"
+        isExpandable
+        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
+      />
+    </Wizard>
+  );
+
+  expect(screen.queryByLabelText('step icon', { exact: false })).toBeVisible();
+});
 
-  await user.click(screen.getByRole('button', { name: 'Increment step' }));
+test('incrementally shows/hides steps based on the activeStep when isProgressive is enabled', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Wizard isProgressive>
+      <WizardStep id="step-1" name="Test step 1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="step-2" name="Test step 2">
+        Step 2 content
+      </WizardStep>
+      <WizardStep id="step-3" name="Test step 3">
+        Step 3 content
+      </WizardStep>
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', {
+    name: 'Next'
+  });
+  const backButton = screen.getByRole('button', {
+    name: 'Back'
+  });
+
+  // Initially only the first nav item will be visible
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeNull();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
+
+  // Progressing to the next step will show steps 1 & 2
+  await user.click(nextButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
+
+  // Progressing to the next step will show all steps
+  await user.click(nextButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 2, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeVisible();
+
+  // Going back a step will hide step 3
+  await user.click(backButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
+
+  // Going back a step will hide step 2 & 3
+  await user.click(backButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeNull();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
+});
+
+test('parent step can be non-collapsible by setting isCollapsible to false', () => {
+  render(
+    <Wizard>
+      <WizardStep
+        id="step-1"
+        name="Test step 1"
+        isCollapsible={false}
+        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
+      />
+    </Wizard>
+  );
 
-  expect(screen.getByText('Step 2')).toBeVisible();
+  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
 });