@patternfly/react-core 4.202.28 → 4.202.31

package/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`basic not selected 1`] = `
-<div>
+exports[`ToggleGroup basic not selected 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
@@ -19,18 +19,18 @@ exports[`basic not selected 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`basic selected 1`] = `
-<div>
+exports[`ToggleGroup basic selected 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
     <button
       aria-label="basic selected"
-      aria-pressed="false"
-      class="pf-c-toggle-group__button"
+      aria-pressed="true"
+      class="pf-c-toggle-group__button pf-m-selected"
       id="toggleGroupItem"
       type="button"
     >
@@ -41,18 +41,18 @@ exports[`basic selected 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`icon variant 1`] = `
-<div>
+exports[`ToggleGroup icon variant 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
     <button
       aria-label="icon variant"
-      aria-pressed="false"
-      class="pf-c-toggle-group__button"
+      aria-pressed="true"
+      class="pf-c-toggle-group__button pf-m-selected"
       id="toggleGroupItem"
       type="button"
     >
@@ -63,12 +63,13 @@ exports[`icon variant 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`isCompact 1`] = `
-<div>
+exports[`ToggleGroup isCompact 1`] = `
+<DocumentFragment>
   <div
+    aria-label="Label"
     class="pf-c-toggle-group pf-m-compact"
     role="group"
   >
@@ -103,11 +104,11 @@ exports[`isCompact 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`isDisabled 1`] = `
-<div>
+exports[`ToggleGroup isDisabled 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
@@ -126,5 +127,5 @@ exports[`isDisabled 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,201 +1,207 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow, mount } from 'enzyme';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
 
-test('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 view = render(
-    <Wizard title="Wizard title" description="Description here" steps={steps} startAtStep={1} onBack={onBack} />
-  );
-
-  expect(view.container).toMatchSnapshot();
-});
+describe('Wizard', () => {
+  test('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 };
+    };
 
-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 view = render(
-    <Wizard title="Wizard title" description="Description here" steps={steps} startAtStep={1} onBack={onBack} isNavExpandable />
-  );
-
-  expect(view.container).toMatchSnapshot();
-});
+    const { asFragment } = render(
+      <Wizard title="Wizard title" description="Description here" steps={steps} startAtStep={1} onBack={onBack} />
+    );
 
-test('bare wiz ', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      description="This wizard uses anchor tags for the nav item elements"
-      id="inPageWizWithAnchorsId"
-      steps={steps}
-    />
-  );
-  const view = mount(wiz);
-  const hasHeader = view.at(0).find('.pf-c-wizard__header').length;
-  const hasTitle = view.at(0).find('.pf-c-wizard__title').length;
-  expect(hasHeader).toBeFalsy();
-  expect(hasTitle).toBeFalsy();
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('wiz with title ', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = <Wizard title="Wizard" description="This wizard has a title" steps={steps} />;
-  const view = mount(wiz).at(0);
-  const hasHeader = view.find('.pf-c-wizard__header').length;
-  const hasTitle = view.find('h2.pf-c-wizard__title').length;
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(hasHeader).toBe(1);
-  expect(hasTitle).toBe(1);
-  expect(nav.find('[aria-labelledby="pf-wizard-title-3"]').length).toBe(1);
-  expect(main.find('[aria-labelledby="pf-wizard-title-3"]').length).toBe(1);
-});
+  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 };
+    };
 
-test('wiz with title and navAriaLabel combination', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = <Wizard title="Wizard" navAriaLabel="Some label" description="This wizard has a title" steps={steps} />;
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-labelledby="pf-wizard-title-4"]').length).toBe(1);
-  expect(nav.find('[aria-label="Some label"]').length).toBe(1);
-  expect(main.props()['aria-label']).toBe(null);
-});
+    const { asFragment } = render(
+      <Wizard
+        title="Wizard title"
+        description="Description here"
+        steps={steps}
+        startAtStep={1}
+        onBack={onBack}
+        isNavExpandable
+      />
+    );
 
-test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      title="Wizard"
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-labelledby="pf-wizard-title-5"]').length).toBe(1);
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(main.props()['aria-label']).toBe('main aria-label');
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(main.props()['aria-label']).toBe('main aria-label');
-  expect(main.props()['aria-labelledby']).toBe(null);
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(nav.props()['aria-labelledby']).toBe(null);
-});
+  test('bare wiz', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
 
-test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      navAriaLabelledBy="nav-aria-labelledby"
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(nav.props()['aria-labelledby']).toBe('nav-aria-labelledby');
-});
+    const { asFragment } = render(
+      <Wizard
+        description="This wizard uses anchor tags for the nav item elements"
+        id="inPageWizWithAnchorsId"
+        steps={steps}
+      />
+    );
 
-test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      mainAriaLabelledBy="main-aria-labelledby"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const main = view.find('div.pf-c-wizard__main');
-  expect(main.props()['aria-label']).toBe('main aria-label');
-  expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby');
-});
+    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} data-testid="wizard-test-id" />);
+    expect(screen.getByRole('heading', { name: 'Wizard' })).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-4');
+  });
+
+  test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+    render(
+      <Wizard
+        title="Wizard"
+        navAriaLabel="nav aria-label"
+        mainAriaLabel="main aria-label"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
+    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
+    expect(screen.getByLabelText('main aria-label')).toBeInTheDocument();
+  });
+
+  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"
+        mainAriaLabel="main aria-label"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
+    expect(screen.getByLabelText('main 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"
+        mainAriaLabel="main 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 navAriaLabel and navAriaLabelledby and without title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+    render(
+      <Wizard
+        navAriaLabel="nav aria-label"
+        mainAriaLabel="main aria-label"
+        mainAriaLabelledBy="main-aria-labelledby"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    const main = screen.getByLabelText('main aria-label');
+
+    expect(main).toBeInTheDocument();
+    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+  });
+
+  test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => {
+    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('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <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 view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(nav.find('[aria-labelledby="nav-aria-labelledby"]').length).toBe(1);
-  expect(main.props()['aria-label']).toBe('main aria-label');
-  expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby');
+    const main = screen.getByLabelText('main aria-label');
+    expect(main).toBeInTheDocument();
+    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+  });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Expandable Nav Wizard should match snapshot 1`] = `
-<div>
+exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-wizard"
   >
@@ -64,8 +64,7 @@ exports[`Expandable Nav Wizard should match snapshot 1`] = `
           >
             1
           </span>
-           
-          A
+           A
         </span>
       </span>
       <span
@@ -245,11 +244,11 @@ exports[`Expandable Nav Wizard should match snapshot 1`] = `
       </footer>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Wizard should match snapshot 1`] = `
-<div>
+exports[`Wizard Wizard should match snapshot 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-wizard"
   >
@@ -312,8 +311,7 @@ exports[`Wizard should match snapshot 1`] = `
           >
             1
           </span>
-           
-          A
+           A
         </span>
       </span>
       <span
@@ -467,5 +465,128 @@ exports[`Wizard should match snapshot 1`] = `
       </footer>
     </div>
   </div>
-</div>
+</DocumentFragment>
+`;
+
+exports[`Wizard bare wiz 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-wizard"
+    id="inPageWizWithAnchorsId"
+  >
+    <button
+      aria-expanded="false"
+      aria-label="Wizard Toggle"
+      class="pf-c-wizard__toggle"
+    >
+      <span
+        class="pf-c-wizard__toggle-list"
+      >
+        <span
+          class="pf-c-wizard__toggle-list-item"
+        >
+          <span
+            class="pf-c-wizard__toggle-num"
+          >
+            1
+          </span>
+           A
+        </span>
+      </span>
+      <span
+        class="pf-c-wizard__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      class="pf-c-wizard__outer-wrap"
+    >
+      <div
+        class="pf-c-wizard__inner-wrap"
+      >
+        <nav
+          class="pf-c-wizard__nav"
+        >
+          <ol
+            class="pf-c-wizard__nav-list"
+          >
+            <li
+              class="pf-c-wizard__nav-item"
+            >
+              <button
+                aria-current="step"
+                class="pf-c-wizard__nav-link pf-m-current"
+              >
+                A
+              </button>
+            </li>
+          </ol>
+        </nav>
+        <div
+          class="pf-c-wizard__main"
+        >
+          <div
+            class="pf-c-wizard__main-body"
+          >
+            <p>
+              Step 1
+            </p>
+          </div>
+        </div>
+      </div>
+      <footer
+        class="pf-c-wizard__footer"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
+        <button
+          aria-disabled="true"
+          class="pf-c-button pf-m-secondary pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-secondary-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          Back
+        </button>
+        <div
+          class="pf-c-wizard__footer-cancel"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-c-button pf-m-link"
+            data-ouia-component-id="OUIA-Generated-Button-link-3"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            Cancel
+          </button>
+        </div>
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
 `;