@patternfly/react-core 4.202.17 → 4.202.18

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { shallow, mount } from 'enzyme';
-import { KEY_CODES } from '../../../helpers/constants';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
 import { css } from '../../../../../react-styles/dist/js';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
@@ -16,76 +19,71 @@ const props = {
   children: 'modal content'
 };
 
-test('Modal creates a container element once for div', () => {
-  const view = shallow(<Modal {...props} />);
-  view.update();
-  expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
-});
+describe('Modal', () => {
+  test('Modal creates a container element once for div', () => {
+    render(<Modal {...props} />);
+    expect(document.createElement).toBeCalledWith('div');
+  });
 
-test('modal closes with escape', () => {
-  shallow(<Modal {...props} isOpen appendTo={document.body} />);
-  const mock: any = (document.body.addEventListener as any).mock;
-  const [event, handler] = mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).toBeCalled();
-});
+  test('modal closes with escape', () => {
+    render(<Modal {...props} isOpen appendTo={document.body} />);
 
-test('modal does not call onClose for esc key if it is not open', () => {
-  shallow(<Modal {...props} />);
-  const mock: any = (document.body.addEventListener as any).mock;
-  const [event, handler] = mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).not.toBeCalled();
-});
+    userEvent.type(screen.getByText(props.title), '{esc}');
+    expect(props.onClose).toBeCalled();
+  });
 
-test('Each modal is given a new id', () => {
-  const first = shallow(<Modal {...props} />);
-  const second = shallow(<Modal {...props} />);
-  expect((first.instance() as any).descriptorId).not.toBe((second.instance() as any).descriptorId);
-});
+  test('modal does not call onClose for esc key if it is not open', () => {
+    render(<Modal {...props} />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(props.onClose).not.toBeCalled();
+  });
 
-test('modal removes body backdropOpen class when removed', () => {
-  const view = shallow(<Modal {...props} isOpen />);
-  view.update();
-  expect(document.body.className).toContain(css(styles.backdropOpen));
-  view.setProps({ isOpen: false });
-  view.update();
-  expect(document.body.className).not.toContain(css(styles.backdropOpen));
-});
+  test('modal has body backdropOpen class when open', () => {
+    render(<Modal {...props} isOpen />);
+    expect(document.body).toHaveClass(css(styles.backdropOpen));
+  });
 
-test('modal shows/hides the close button based on showClose (default true)', () => {
-  const view = mount(<Modal {...props} isOpen />);
-  view.update();
-  expect(view.exists('.pf-c-modal-box .pf-c-button')).toBeTruthy();
-  view.setProps({ showClose: false });
-  view.update();
-  expect(view.exists('.pf-c-modal-box .pf-c-button')).toBeFalsy();
-});
+  test('modal has no body backdropOpen class when not open', () => {
+    render(<Modal {...props} />);
+    expect(document.body).not.toHaveClass(css(styles.backdropOpen));
+  });
 
-test('modal generates console error when no accessible name is provided', () => {
-  const props = {
-    onClose: jest.fn(),
-    isOpen: true,
-    children: 'modal content'
-  };
-  const consoleErrorMock = jest.fn();
-  global.console = { error: consoleErrorMock } as any;
-  shallow(<Modal {...props} />);
-  expect(consoleErrorMock).toBeCalled();
-});
+  test('modal shows the close button when showClose is true (true by default)', () => {
+    render(<Modal {...props} isOpen />);
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+  });
+
+  test('modal does not show the close button when showClose is false', () => {
+    render(<Modal {...props} isOpen showClose={false} tabIndex={0} />);
+    expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
+  });
+
+  test('modal generates console error when no accessible name is provided', () => {
+    const props = {
+      onClose: jest.fn(),
+      isOpen: true,
+      children: 'modal content'
+    };
+    const consoleErrorMock = jest.fn();
+    global.console = { error: consoleErrorMock } as any;
+
+    render(<Modal {...props} />);
+
+    expect(consoleErrorMock).toBeCalled();
+  });
+
+  test('modal generates console warning when conflicting accessible name strategies are provided', () => {
+    const props = {
+      hasNoBodyWrapper: true,
+      onClose: jest.fn(),
+      isOpen: true,
+      children: 'modal content'
+    };
+    const consoleErrorMock = jest.fn();
+    global.console = { error: consoleErrorMock } as any;
+
+    render(<Modal {...props} />);
 
-test('modal generates console warning when conflicting accessible name strategies are provided', () => {
-  const props = {
-    hasNoBodyWrapper: true,
-    onClose: jest.fn(),
-    isOpen: true,
-    children: 'modal content'
-  };
-  const consoleErrorMock = jest.fn();
-  global.console = { error: consoleErrorMock } as any;
-  shallow(<Modal {...props} />);
-  expect(consoleErrorMock).toBeCalled();
+    expect(consoleErrorMock).toBeCalled();
+  });
 });

package/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { ModalBoxCloseButton } from '../ModalBoxCloseButton';
 
-test('ModalBoxCloseButton Test', () => {
-  const mockfn = jest.fn();
-  const view = shallow(<ModalBoxCloseButton className="test-box-close-button-class" onClose={mockfn} />);
-  expect(view).toMatchSnapshot();
-  view
-    .find('.test-box-close-button-class')
-    .at(0)
-    .simulate('click');
-  expect(mockfn.mock.calls).toHaveLength(1);
+describe('ModalBoxCloseButton', () => {
+  test('onClose called when clicked', () => {
+    const onClose = jest.fn();
+
+    render(<ModalBoxCloseButton className="test-box-close-button-class" onClose={onClose} />);
+
+    userEvent.click(screen.getByRole('button'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Nav } from '../Nav';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Nav, NavContext } from '../Nav';
 import { NavList } from '../NavList';
 import { NavGroup } from '../NavGroup';
 import { NavItem } from '../NavItem';
@@ -15,250 +18,218 @@ const props = {
   ]
 };
 
-// eslint-disable-next-line no-undef
-beforeEach(() => {
-  window.location.hash = '#link1';
-});
-
-const context = {
-  onSelect: () => undefined as any,
-  onToggle: () => undefined as any
-};
-
-test('Default Nav List', () => {
-  const view = mount(
-    <Nav className="test=nav-class">
-      <NavList className="test-nav-list-class">
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to} className="test-nav-item-class">
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Dark Nav List', () => {
-  const view = mount(
-    <Nav className="test=nav-class" theme="dark">
-      <NavList className="test-nav-list-class">
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to} className="test-nav-item-class">
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Default Nav List - Trigger item active update', () => {
-  window.location.hash = '#link2';
-  const view = mount(
-    <Nav>
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  view
-    .find({ href: '#link2' })
-    .first()
-    .simulate('click');
-  expect(view).toMatchSnapshot();
-});
+const renderNav = (ui: React.ReactElement<any, string | React.JSXElementConstructor<any>>) =>
+  render(<NavContext.Provider value={{ onSelect: jest.fn(), onToggle: jest.fn() }}>{ui}</NavContext.Provider>);
 
-test('Simple Nav List', () => {
-  const view = mount(
-    <Nav>
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
+describe('Nav', () => {
+  beforeEach(() => {
+    window.location.hash = '#link1';
+  });
 
-test('Expandable Nav List', () => {
-  const view = mount(
-    <Nav>
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1">
+  test('Default Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav className="test-nav-class">
+        <NavList className="test-nav-list-class">
           {props.items.map(item => (
-            <NavItem to={item.to} key={item.to}>
+            <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Expandable Nav verify onExpand', () => {
-  const onExpandSpy = jest.fn();
-  const view = mount(
-    <Nav>
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1" onExpand={onExpandSpy}>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Dark Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav className="test=nav-class" theme="dark">
+        <NavList className="test-nav-list-class">
           {props.items.map(item => (
-            <NavItem to={item.to} key={item.to}>
+            <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  const btn = view.find('button');
-  btn.simulate('click');
-  expect(onExpandSpy).toBeCalled();
-});
-
-test('Expandable Nav List - Trigger toggle', () => {
-  window.location.hash = '#link2';
-  const view = mount(
-    <Nav>
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Default Nav List - Trigger item active update', () => {
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavList>
           {props.items.map(item => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  view
-    .find('li.expandable-group')
-    .first()
-    .simulate('click');
-  expect(view).toMatchSnapshot();
-});
+        </NavList>
+      </Nav>
+    );
+
+    userEvent.click(screen.getByText('Link 2'));
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Expandable Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1">
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Expandable Nav List with aria label', () => {
-  const view = mount(
-    <Nav aria-label="Test">
-      <NavList>
-        <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
+  test('Expandable Nav verify onExpand', () => {
+    const onExpand = jest.fn();
+
+    renderNav(
+      <Nav>
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1" onExpand={onExpand}>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+
+    userEvent.click(screen.getByRole('button'));
+    expect(onExpand).toBeCalled();
+  });
+
+  test('Expandable Nav List - Trigger toggle', () => {
+    window.location.hash = '#link2';
+
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+
+    userEvent.click(screen.getByText('Section 1'));
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Expandable Nav List with aria label', () => {
+    const { asFragment } = renderNav(
+      <Nav aria-label="Test">
+        <NavList>
+          <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
+            {props.items.map(item => (
+              <NavItem to={item.to} key={item.to}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Nav Grouped List', () => {
+    const { asFragment } = renderNav(
+      <Nav>
+        <NavGroup id="grp-1" title="Section 1">
+          <NavList>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={`section1_${item.to}`}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavList>
+        </NavGroup>
+        <NavGroup id="grp-2" title="Section 2">
+          <NavList>
+            {props.items.map(item => (
+              <NavItem to={item.to} key={`section2_${item.to}`}>
+                {item.label}
+              </NavItem>
+            ))}
+          </NavList>
+        </NavGroup>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Horizontal Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="horizontal">
+        <NavList>
           {props.items.map(item => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
-        </NavExpandable>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Nav Grouped List', () => {
-  const view = mount(
-    <Nav>
-      <NavGroup id="grp-1" title="Section 1">
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Horizontal SubNav List', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="horizontal-subnav">
         <NavList>
           {props.items.map(item => (
-            <NavItem to={item.to} key={`section1_${item.to}`}>
+            <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
         </NavList>
-      </NavGroup>
-      <NavGroup id="grp-2" title="Section 2">
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Tertiary Nav List', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="tertiary">
         <NavList>
           {props.items.map(item => (
-            <NavItem to={item.to} key={`section2_${item.to}`}>
+            <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
           ))}
         </NavList>
-      </NavGroup>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Horizontal Nav List', () => {
-  const view = mount(
-    <Nav variant="horizontal">
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Horizontal SubNav List', () => {
-  const view = mount(
-    <Nav variant="horizontal-subnav">
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
-          </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Tertiary Nav List', () => {
-  const view = mount(
-    <Nav variant="tertiary">
-      <NavList>
-        {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
-            {item.label}
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Nav List with custom item nodes', () => {
+    const { asFragment } = renderNav(
+      <Nav variant="tertiary">
+        <NavList>
+          <NavItem to="/components/nav#link1" className="test-nav-item-class">
+            <div className="my-custom-node">My custom node</div>
           </NavItem>
-        ))}
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
-});
-
-test('Nav List with custom item nodes', () => {
-  const view = mount(
-    <Nav variant="tertiary">
-      <NavList>
-        <NavItem to="/components/nav#link1" className="test-nav-item-class">
-          <div className="my-custom-node">My custom node</div>
-        </NavItem>
-      </NavList>
-    </Nav>,
-    { context }
-  );
-  expect(view).toMatchSnapshot();
+        </NavList>
+      </Nav>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });