@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.3

package/src/components/HelperText/__tests__/HelperTextItem.test.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { HelperTextItem } from '../HelperTextItem';
+
+import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<HelperTextItem>help test text</HelperTextItem>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <HelperTextItem />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders default classes', () => {
+  render(<HelperTextItem>help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1')).toHaveClass(styles.helperTextItemText);
+  expect(screen.getByText('help test text 1').parentElement).toHaveClass(styles.helperTextItem);
+});
+
+test('Renders custom className', () => {
+  render(<HelperTextItem className="custom">help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement).toHaveClass('custom');
+});
+
+Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant) => {
+  test(`Renders with class ${styles.modifiers[variant]} when variant = ${variant}`, () => {
+    render(
+      <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'error'}>
+        text
+      </HelperTextItem>
+    );
+    expect(screen.getByText('text').parentElement).toHaveClass(styles.modifiers[variant]);
+  });
+});
+
+test('Renders id when id is passed', () => {
+  render(<HelperTextItem id="text-item">help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement).toHaveAttribute('id', 'text-item');
+});
+
+test('Renders as div by default when component is not passed', () => {
+  render(<HelperTextItem>help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('DIV');
+});
+
+test('Renders with element passed to component prop', () => {
+  render(<HelperTextItem component="li">help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('LI');
+});
+
+test('Renders custom icon', () => {
+  render(<HelperTextItem icon={<div>test</div>}>help test text</HelperTextItem>);
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+});
+
+test('Renders default icon when hasIcon = true and icon is not passed', () => {
+  render(<HelperTextItem hasIcon>help test text</HelperTextItem>);
+  expect(screen.getByText('help test text').parentElement?.querySelector('span')).toHaveClass(
+    styles.helperTextItemIcon
+  );
+});
+
+test('Renders custom icon when icon is passed and hasIcon = true', () => {
+  render(
+    <HelperTextItem hasIcon icon={<div>test</div>}>
+      help test text
+    </HelperTextItem>
+  );
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+});
+
+test('Renders dynamic helper text', () => {
+  render(<HelperTextItem isDynamic>help test text</HelperTextItem>);
+  expect(screen.getByText('help test text').parentElement).toHaveClass(styles.modifiers.dynamic);
+  expect(screen.getByText('help test text').querySelector('span')).toHaveClass('pf-v5-screen-reader');
+});
+
+test('Renders custom screenreader text when isDynamic = true and screenReaderText is passed', () => {
+  render(
+    <HelperTextItem isDynamic screenReaderText="sr test">
+      help test text
+    </HelperTextItem>
+  );
+  expect(screen.getByText('help test text').querySelector('span')).toHaveTextContent('sr test');
+});

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

@@ -1,230 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HelperText default helper text variant applies successfully 1`] = `
+exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-helper-text__item"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      default help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText dynamic helper text renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item pf-m-dynamic"
-    >
-      <span
-        aria-hidden="true"
-        class="pf-v5-c-helper-text__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
-        >
-          <path
-            d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text
-        <span
-          class="pf-v5-screen-reader"
-        >
-          : default status;
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText helper text block renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 1
-      </span>
-    </div>
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 2
-      </span>
-    </div>
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText icon helper text renders properly 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        aria-hidden="true"
-        class="pf-v5-c-helper-text__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 512 512"
-          width="1em"
-        >
-          <path
-            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText indeterminate helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item pf-m-indeterminate"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      indeterminate help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText invalid helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      invalid help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText simple helper text renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText success helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item pf-m-success"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      success help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText variant comonent helper text renders properly 1`] = `
-<DocumentFragment>
-  <ul
     class="pf-v5-c-helper-text"
-    role="list"
-  >
-    <li
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 1
-      </span>
-    </li>
-    <li
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 2
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`HelperText warning helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item pf-m-warning"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      warning help test text
-    </span>
-  </div>
+  />
 </DocumentFragment>
 `;

package/src/components/HelperText/__tests__/__snapshots__/HelperTextItem.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-helper-text__item"
+  >
+    <span
+      class="pf-v5-c-helper-text__item-text"
+    >
+      help test text
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Icon } from '../Icon';
-import { CheckIcon } from '@patternfly/react-icons';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
 test('renders basic icon successfully', () => {
@@ -14,7 +14,7 @@ test('renders basic icon successfully', () => {
 });
 
 test('checks basic icon structure', () => {
-  const { asFragment } = render(
+  render(
     <Icon title="icon">
       <CheckIcon />
     </Icon>

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

@@ -23,7 +23,7 @@ describe('InputGroup', () => {
       </InputGroup>
     );
 
-    const formControl = screen.getByLabelText("User password");
-    expect(formControl).not.toHaveAttribute("aria-describedby");
+    const formControl = screen.getByLabelText('User password');
+    expect(formControl).not.toHaveAttribute('aria-describedby');
   });
 });

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

@@ -62,7 +62,7 @@ describe('Masthead', () => {
     'insetXl',
     'inset2xl',
     'inset3xl'
-  ]).forEach(inset => {
+  ]).forEach((inset) => {
     test(`verify ${inset} inset breakpoints`, () => {
       const { asFragment } = render(
         <Masthead inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Masthead>

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
 
 import { Menu } from '../Menu';
 import { MenuItem } from '../MenuItem';
@@ -54,7 +53,7 @@ describe('Menu', () => {
 
   describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
-      const { asFragment } = render(
+      render(
         <Menu>
           <MenuContent>
             <MenuList>
@@ -67,7 +66,7 @@ describe('Menu', () => {
       );
       const checkbox1 = screen.getAllByRole('checkbox')[0];
       expect(checkbox1).not.toBeChecked();
-      expect(screen.getByText("Checkbox 1")).toBeInTheDocument();
+      expect(screen.getByText('Checkbox 1')).toBeInTheDocument();
     });
   });
 });

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

@@ -5,7 +5,7 @@ import { Badge } from '../../Badge';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -61,21 +61,23 @@ describe('menu toggle', () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();
 
-    render(<MenuToggle
-      onClick={mockClick}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-disabled-example"
-            key="split-checkbox-with-text-disabled"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
-      aria-label="Menu toggle with checkbox split button and text"
-    />);
+    render(
+      <MenuToggle
+        onClick={mockClick}
+        splitButtonOptions={{
+          items: [
+            <MenuToggleCheckbox
+              id="split-button-checkbox-with-text-disabled-example"
+              key="split-checkbox-with-text-disabled"
+              aria-label="Select all"
+            >
+              10 selected
+            </MenuToggleCheckbox>
+          ]
+        }}
+        aria-label="Menu toggle with checkbox split button and text"
+      />
+    );
 
     await user.click(screen.getByRole(`button`) as Element);
     expect(mockClick).toHaveBeenCalled();

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -48,7 +48,7 @@ describe('MultipleFileUploadStatusItem', () => {
         fileName="testCustomFileName.txt"
         fileSize={42}
         progressId="test-progress-id"
-        progressAriaLiveMessage={loadPercentage => `test message ${loadPercentage}`}
+        progressAriaLiveMessage={(loadPercentage) => `test message ${loadPercentage}`}
       />
     );
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitle.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleIcon.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleText.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleText } from '../MultipleFileUploadTitleText';
 
 describe('MultipleFileUploadTitleText', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleTextSeparator.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleTextSeparator } from '../MultipleFileUploadTitleTextSeparator';
 
 describe('MultipleFileUploadTitleTextSeparator', () => {

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

@@ -30,7 +30,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav className="test-nav-class">
         <NavList className="test-nav-list-class">
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
@@ -47,7 +47,7 @@ describe('Nav', () => {
       <React.StrictMode>
         <Nav className="test-nav-class">
           <NavList className="test-nav-list-class">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to} className="test-nav-item-class">
                 {item.label}
               </NavItem>
@@ -64,7 +64,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav className="test=nav-class" theme="dark">
         <NavList className="test-nav-list-class">
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
@@ -81,7 +81,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav>
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -99,7 +99,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -119,7 +119,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" onExpand={onExpand}>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -141,7 +141,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -160,7 +160,7 @@ describe('Nav', () => {
       <Nav aria-label="Test">
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -177,7 +177,7 @@ describe('Nav', () => {
       <Nav>
         <NavGroup id="grp-1" title="Section 1">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section1_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -186,7 +186,7 @@ describe('Nav', () => {
         </NavGroup>
         <NavGroup id="grp-2" title="Section 2">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section2_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -202,7 +202,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -217,7 +217,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal-subnav">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -232,7 +232,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="tertiary">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -269,7 +269,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    await user.hover(screen.getByText('My custom node'))
+    await user.hover(screen.getByText('My custom node'));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Nav/examples/NavFlyout.tsx

@@ -22,7 +22,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-${depth}`}>
             Next menu
           </MenuItem>
-          {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
+          {Array.from({ length: numFlyouts - depth }).map((_value, index) => (
             <MenuItem
               onClick={onMenuItemClick}
               key={`${depth}-${index}`}

package/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -11,7 +11,7 @@ export const NavHorizontalSubNav: React.FunctionComponent = () => {
   return (
     <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function (_item, index: number) {
+        {Array.from({ length: 10 }).map((_value, index) => {
           const num = index + 1;
           return (
             <NavItem

package/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -11,7 +11,7 @@ export const NavLegacyTertiary: React.FunctionComponent = () => {
   return (
     <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function (_item, index: number) {
+        {Array.from({ length: 10 }).map(function (_value, index) {
           const num = index + 1;
           return (
             <NavItem

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

@@ -2,7 +2,7 @@ import { NotificationBadge } from '../NotificationBadge';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-Object.values([true, false]).forEach(attentionVariant => {
+Object.values([true, false]).forEach((attentionVariant) => {
   test(`${attentionVariant} NotificationBadge needs attention`, () => {
     const { asFragment } = render(
       <NotificationBadge variant="attention">