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

package/src/{components → deprecated/components}/Wizard/WizardFooterInternal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonVariant } from '../../../components/Button';
 import { WizardStep } from './Wizard';
 
 export interface WizardFooterInternalProps {

package/src/{next → deprecated}/components/Wizard/WizardHeader.tsx

@@ -7,7 +7,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
   /** Callback function called when the X (Close) button is clicked */
-  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onClose?: () => void;
   /** Title of the wizard */
   title: string;
   /** Description of the wizard */
@@ -15,7 +15,7 @@ export interface WizardHeaderProps {
   /** Component type of the description */
   descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
-  isCloseHidden?: boolean;
+  hideClose?: boolean;
   /** Aria-label applied to the X (Close) button */
   closeButtonAriaLabel?: string;
   /** id for the title */
@@ -28,23 +28,21 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   onClose = () => undefined,
   title,
   description,
-  isCloseHidden,
+  hideClose,
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
-    {!isCloseHidden && (
+    {!hideClose && (
       <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
         <TimesIcon aria-hidden="true" />
       </Button>
     )}
-
     <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
       {title || <>&nbsp;</>}
     </Title>
-
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}
@@ -52,5 +50,4 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
     )}
   </div>
 );
-
 WizardHeader.displayName = 'WizardHeader';

package/src/deprecated/components/Wizard/WizardNav.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
+
+export interface WizardNavProps extends OUIAProps {
+  /** children should be WizardNavItem components */
+  children?: any;
+  /** Aria-label applied to the nav element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute on the nav element */
+  'aria-labelledby'?: string;
+  /** Whether the nav is expanded */
+  isOpen?: boolean;
+  /** True to return the inner list without the wrapping nav element */
+  returnList?: boolean;
+}
+
+export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
+  children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  isOpen = false,
+  returnList = false,
+  ouiaId,
+  ouiaSafe = true
+}: WizardNavProps) => {
+  const ouiaProps = useOUIAProps(WizardNav.displayName, ouiaId, ouiaSafe);
+
+  const innerList = (
+    <ol className={css(styles.wizardNavList)} role="list">
+      {children}
+    </ol>
+  );
+
+  if (returnList) {
+    return innerList;
+  }
+
+  return (
+    <nav
+      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      {...ouiaProps}
+    >
+      <ol className={css(styles.wizardNavList)} role="list">
+        {children}
+      </ol>
+    </nav>
+  );
+};
+WizardNav.displayName = 'WizardNav';

package/src/deprecated/components/Wizard/WizardNavItem.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
+
+export interface WizardNavItemProps extends OUIAProps {
+  /** Can nest a WizardNav component for substeps */
+  children?: React.ReactNode;
+  /** The content to display in the nav item */
+  content?: React.ReactNode;
+  /** Whether the nav item is the currently active item */
+  isCurrent?: boolean;
+  /** Whether the nav item is disabled */
+  isDisabled?: boolean;
+  /** The step passed into the onNavItemClick callback */
+  step: number;
+  /** Callback for when the nav item is clicked */
+  onNavItemClick?: (step: number) => any;
+  /** Component used to render WizardNavItem */
+  navItemComponent?: 'button' | 'a';
+  /** An optional url to use for when using an anchor component */
+  href?: string;
+  /** Flag indicating that this NavItem has child steps and is expandable */
+  isExpandable?: boolean;
+  /** The id for the nav item */
+  id?: string | number;
+}
+
+export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+  children = null,
+  content = '',
+  isCurrent = false,
+  isDisabled = false,
+  step,
+  onNavItemClick = () => undefined,
+  navItemComponent = 'button',
+  href = null,
+  isExpandable = false,
+  id,
+  ouiaId,
+  ouiaSafe = true,
+  ...rest
+}: WizardNavItemProps) => {
+  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
+  const NavItemComponent = navItemComponent;
+
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsExpanded(isCurrent);
+  }, [isCurrent]);
+
+  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.error('WizardNavItem: When using an anchor, please provide an href');
+  }
+
+  const btnProps = {
+    disabled: isDisabled,
+    type: 'button' as const
+  };
+
+  const linkProps = {
+    tabIndex: isDisabled ? -1 : undefined,
+    href
+  };
+
+  return (
+    <li
+      className={css(
+        styles.wizardNavItem,
+        isExpandable && styles.modifiers.expandable,
+        isExpandable && isExpanded && styles.modifiers.expanded
+      )}
+    >
+      <NavItemComponent
+        {...rest}
+        {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(id && { id: id.toString() })}
+        onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
+        className={css(
+          styles.wizardNavLink,
+          isCurrent && styles.modifiers.current,
+          isDisabled && styles.modifiers.disabled
+        )}
+        aria-disabled={isDisabled ? true : null}
+        aria-current={isCurrent && !children ? 'step' : false}
+        {...(isExpandable && { 'aria-expanded': isExpanded })}
+        {...ouiaProps}
+      >
+        {isExpandable ? (
+          <>
+            <span className={css(styles.wizardNavLinkText)}>{content}</span>
+            <span className={css(styles.wizardNavLinkToggle)}>
+              <span className={css(styles.wizardNavLinkToggleIcon)}>
+                <AngleRightIcon />
+              </span>
+            </span>
+          </>
+        ) : (
+          content
+        )}
+      </NavItemComponent>
+      {children}
+    </li>
+  );
+};
+WizardNavItem.displayName = 'WizardNavItem';

package/src/deprecated/components/Wizard/WizardToggle.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+import { WizardStep } from './Wizard';
+import { WizardBody } from './WizardBody';
+
+export interface WizardToggleProps {
+  /** Function that returns the WizardNav component */
+  nav: (isWizardNavOpen: boolean) => React.ReactElement;
+  /** The wizard steps */
+  steps: WizardStep[];
+  /** The currently active WizardStep */
+  activeStep: WizardStep;
+  /** The WizardFooter */
+  children?: React.ReactNode;
+  /** Set to true to remove body padding */
+  hasNoBodyPadding: boolean;
+  /** If the nav is open */
+  isNavOpen: boolean;
+  /** Callback function for when the nav is toggled */
+  onNavToggle: (isOpen: boolean) => void;
+  /** The button's aria-label */
+  'aria-label'?: string;
+  /** Adds an accessible name to the wizard body by passing the the id of one or more elements.
+   * The aria-labelledby will only be applied when the body content overflows and renders a scrollbar.
+   */
+  mainAriaLabelledBy?: string;
+  /** Adds an accessible name to the wizard body when the body content overflows and renders
+   * a scrollbar.
+   */
+  mainAriaLabel?: string;
+  /** If the wizard is in-page */
+  isInPage?: boolean;
+  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  hasDrawer?: boolean;
+  /** Flag indicating the wizard drawer is expanded */
+  isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
+}
+
+export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
+  isNavOpen,
+  onNavToggle,
+  nav,
+  steps,
+  activeStep,
+  children,
+  hasNoBodyPadding = false,
+  'aria-label': ariaLabel = 'Wizard Toggle',
+  mainAriaLabelledBy = null,
+  mainAriaLabel = null,
+  isInPage = true,
+  hasDrawer,
+  isDrawerExpanded,
+  onExpandDrawer
+}: WizardToggleProps) => {
+  let activeStepIndex;
+  let activeStepName;
+  let activeStepSubName;
+  for (let i = 0; i < steps.length; i++) {
+    if ((activeStep.id && steps[i].id === activeStep.id) || steps[i].name === activeStep.name) {
+      activeStepIndex = i + 1;
+      activeStepName = steps[i].name;
+      break;
+    } else if (steps[i].steps) {
+      for (const step of steps[i].steps) {
+        if ((activeStep.id && step.id === activeStep.id) || step.name === activeStep.name) {
+          activeStepIndex = i + 1;
+          activeStepName = steps[i].name;
+          activeStepSubName = step.name;
+          break;
+        }
+      }
+    }
+  }
+
+  return (
+    <React.Fragment>
+      <button
+        onClick={() => onNavToggle(!isNavOpen)}
+        className={css(styles.wizardToggle, isNavOpen && 'pf-m-expanded')}
+        aria-label={ariaLabel}
+        aria-expanded={isNavOpen}
+      >
+        <span className={css(styles.wizardToggleList)}>
+          <span className={css(styles.wizardToggleListItem)}>
+            <span className={css(styles.wizardToggleNum)}>{activeStepIndex}</span> {activeStepName}
+            {activeStepSubName && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+          </span>
+          {activeStepSubName && <span className={css(styles.wizardToggleListItem)}>{activeStepSubName}</span>}
+        </span>
+        <span className={css(styles.wizardToggleIcon)}>
+          <CaretDownIcon aria-hidden="true" />
+        </span>
+      </button>
+      <div className={css(styles.wizardOuterWrap)}>
+        <div className={css(styles.wizardInnerWrap)}>
+          {nav(isNavOpen)}
+          <WizardBody
+            mainComponent={isInPage ? 'div' : 'main'}
+            aria-label={mainAriaLabel}
+            aria-labelledby={mainAriaLabelledBy}
+            hasNoBodyPadding={hasNoBodyPadding}
+            activeStep={activeStep}
+            isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
+            hasDrawer={hasDrawer}
+          >
+            {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}
+            {activeStep.component}
+          </WizardBody>
+        </div>
+        {children}
+      </div>
+    </React.Fragment>
+  );
+};
+WizardToggle.displayName = 'WizardToggle';

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

@@ -0,0 +1,317 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
+import { DrawerPanelContent, DrawerColorVariant, DrawerHead } from '../../../../../src/components/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();
+  });
+
+  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
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('bare wiz', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    const { asFragment } = render(
+      <Wizard
+        description="This wizard uses anchor tags for the nav item elements"
+        id="inPageWizWithAnchorsId"
+        steps={steps}
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('wiz with title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(<Wizard title="Wizard" description="This wizard has a title" steps={steps} />);
+    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
+  });
+
+  test('wiz with drawer', () => {
+    const wizDrawerPanelContent = (
+      <DrawerPanelContent colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span>This wizard has a drawer with drawer panel content</span>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p>, drawerPanelContent: wizDrawerPanelContent }];
+
+    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('wiz with title and navAriaLabel combination', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(<Wizard title="Wizard" navAriaLabel="Some label" description="This wizard has a title" steps={steps} />);
+
+    const nav = screen.getByLabelText('Some label');
+
+    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-5');
+  });
+
+  test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(<Wizard navAriaLabel="nav aria-label" description="This wizard has a title" steps={steps} />);
+
+    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
+  });
+
+  test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(
+      <Wizard
+        navAriaLabelledBy="nav-aria-labelledby"
+        navAriaLabel="nav aria-label"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    const nav = screen.getByLabelText('nav aria-label');
+
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
+  });
+
+  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}
+      />
+    );
+
+    const nav = screen.getByLabelText('nav aria-label');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
+  });
+
+  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}
+      />
+    );
+
+    const main = screen.getByTestId('wizard-test-id');
+    expect(main).not.toHaveAttribute('aria-labelledby');
+    expect(main).not.toHaveAttribute('aria-label');
+  });
+
+  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));
+  });
+});
+
+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> }
+  ];
+
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+
+  expect(screen.getByRole('button', { name: 'B' })).toBeDisabled();
+  expect(screen.getByRole('button', { name: 'E' })).toBeDisabled();
+});
+
+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> }
+  ];
+  const user = userEvent.setup();
+
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(screen.getByRole('button', { name: 'C' })).toHaveClass('pf-m-current');
+
+  await user.click(screen.getByRole('button', { name: 'Back' }));
+  expect(screen.getByRole('button', { name: 'A' })).toHaveClass('pf-m-current');
+});
+
+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> }
+  ];
+  const user = userEvent.setup();
+
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+
+  const navItemButton = screen.getByRole('button', { name: 'B' });
+  const navItemButtonSelected = screen.getByRole('button', { name: 'A' });
+
+  await user.click(navItemButton);
+
+  expect(navItemButton).not.toHaveClass('pf-m-current');
+  expect(navItemButtonSelected).toHaveClass('pf-m-current');
+});
+
+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 }
+      ]
+    }
+  ];
+
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+
+  expect(screen.getByRole('button', { name: 'A-2' })).toBeDisabled();
+});
+
+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>
+      </>
+    );
+  };
+  const user = userEvent.setup();
+
+  render(<WizardTest />);
+
+  expect(screen.queryByText('Step 2')).not.toBeInTheDocument();
+
+  await user.click(screen.getByRole('button', { name: 'Increment step' }));
+
+  expect(screen.getByText('Step 2')).toBeVisible();
+});