@patternfly/react-core 4.202.16 → 4.202.19

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

@@ -1,120 +1,120 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { List, ListVariant, ListComponent, OrderType } from '../List';
-import { ListItem } from '../ListItem';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
 import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+import { List, ListVariant, ListComponent, OrderType } from '../List';
+import { ListItem } from '../ListItem';
 
 const ListItems = () => (
-  <React.Fragment>
-    <List>
-      <ListItem>First</ListItem>
-      <ListItem>Second</ListItem>
-      <ListItem>Third</ListItem>
-    </List>
-  </React.Fragment>
+  <List>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
 );
 
-describe('list', () => {
+describe('List', () => {
   test('simple list', () => {
-    const view = render(
+    const { asFragment } = render(
       <List>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('inline list', () => {
-    const view = render(
+    const { asFragment } = render(
       <List variant={ListVariant.inline}>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('ordered list', () => {
-    const view = mount(
+    const { asFragment } = render(
       <List component={ListComponent.ol}>
         <ListItem>Apple</ListItem>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol').length).toBe(1);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('ordered list starts with 2nd item', () => {
-    const view = mount(
+    render(
       <List component={ListComponent.ol} start={2}>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol').prop('start')).toBe(2);
+    expect(screen.getByRole('list')).toHaveAttribute('start', '2');
   });
 
   test('ordered list items will be numbered with uppercase letters', () => {
-    const view = mount(
+    render(
       <List component={ListComponent.ol} type={OrderType.uppercaseLetter}>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol').prop('type')).toBe('A');
+    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
   });
 
   test('inlined ordered list', () => {
-    const view = mount(
+    render(
       <List variant={ListVariant.inline} component={ListComponent.ol}>
         <ListItem>Apple</ListItem>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol.pf-m-inline').length).toBe(1);
+    expect(screen.getByRole('list')).toHaveClass('pf-m-inline');
   });
 
   test('bordered list', () => {
-    const view = render(
+    render(
       <List isBordered>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-bordered');
   });
 
   test('plain list', () => {
-    const view = render(
+    render(
       <List isPlain>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-plain');
   });
 
   test('icon list', () => {
-    const view = render(
+    const { asFragment } = render(
       <List isPlain>
         <ListItem icon={<BookOpen />}>Apple</ListItem>
         <ListItem icon={<Key />}>Banana</ListItem>
         <ListItem icon={<Desktop />}>Orange</ListItem>
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('icon large list', () => {
-    const view = render(
-      <List iconSize='large'>
+    const { asFragment } = render(
+      <List iconSize="large">
         <ListItem icon={<BookOpen />}>Apple</ListItem>
         <ListItem icon={<Key />}>Banana</ListItem>
         <ListItem icon={<Desktop />}>Orange</ListItem>
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,35 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`list bordered list 1`] = `
-<div>
-  <ul
-    class="pf-c-list pf-m-bordered"
-  >
-    <ul
-      class="pf-c-list"
-    >
-      <li
-        class=""
-      >
-        First
-      </li>
-      <li
-        class=""
-      >
-        Second
-      </li>
-      <li
-        class=""
-      >
-        Third
-      </li>
-    </ul>
-  </ul>
-</div>
-`;
-
-exports[`list icon large list 1`] = `
-<div>
+exports[`List icon large list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list pf-m-icon-lg"
   >
@@ -100,11 +72,11 @@ exports[`list icon large list 1`] = `
       Orange
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
-exports[`list icon list 1`] = `
-<div>
+exports[`List icon list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list pf-m-plain"
   >
@@ -175,11 +147,11 @@ exports[`list icon list 1`] = `
       Orange
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
-exports[`list inline list 1`] = `
-<div>
+exports[`List inline list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list pf-m-inline"
   >
@@ -203,39 +175,36 @@ exports[`list inline list 1`] = `
       </li>
     </ul>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
-exports[`list plain list 1`] = `
-<div>
-  <ul
-    class="pf-c-list pf-m-plain"
+exports[`List ordered list 1`] = `
+<DocumentFragment>
+  <ol
+    class="pf-c-list"
+    type="1"
   >
-    <ul
-      class="pf-c-list"
+    <li
+      class=""
     >
-      <li
-        class=""
-      >
-        First
-      </li>
-      <li
-        class=""
-      >
-        Second
-      </li>
-      <li
-        class=""
-      >
-        Third
-      </li>
-    </ul>
-  </ul>
-</div>
+      Apple
+    </li>
+    <li
+      class=""
+    >
+      Banana
+    </li>
+    <li
+      class=""
+    >
+      Orange
+    </li>
+  </ol>
+</DocumentFragment>
 `;
 
-exports[`list simple list 1`] = `
-<div>
+exports[`List simple list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list"
   >
@@ -259,5 +228,5 @@ exports[`list simple list 1`] = `
       </li>
     </ul>
   </ul>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,46 +1,50 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import "@testing-library/jest-dom";
+
 import { Menu } from '../Menu';
 
-test('should render Menu successfully', () => {
-    const view = render(
-        <Menu activeItemId={0} onSelect={jest.fn()}>
-            content
-        </Menu>
+describe('Menu', () => {
+  test('should render Menu successfully', () => {
+    const { asFragment } = render(
+      <Menu activeItemId={0} onSelect={jest.fn()}>
+        content
+      </Menu>
     );
-    expect(view.container).toMatchSnapshot();
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-describe('with isPlain', () => {
+  describe('with isPlain', () => {
     test('should render Menu with plain styles applied', () => {
-        const view = mount(
-            <Menu activeItemId={0} onSelect={jest.fn()} isPlain>
-                content
-            </Menu>
-        );
-        expect(view.find('div.pf-m-plain')).toMatchSnapshot();
+      render(
+        <Menu activeItemId={0} onSelect={jest.fn()} isPlain>
+          content
+        </Menu>
+      );
+      expect(screen.getByText('content')).toHaveClass('pf-m-plain');
     });
-});
+  });
 
-describe('with isScrollable', () => {
+  describe('with isScrollable', () => {
     test('should render Menu with scrollable styles applied', () => {
-        const view = mount(
-            <Menu activeItemId={0} onSelect={jest.fn()} isScrollable>
-                content
-            </Menu>
-        );
-        expect(view.find('div.pf-m-scrollable')).toMatchSnapshot();
+      render(
+        <Menu activeItemId={0} onSelect={jest.fn()} isScrollable>
+          content
+        </Menu>
+      );
+      expect(screen.getByText('content')).toHaveClass('pf-m-scrollable');
     });
-});
+  });
 
-describe('with isNavFlyout', () => {
+  describe('with isNavFlyout', () => {
     test('should render Menu with nav flyout styles applied', () => {
-        const view = mount(
-            <Menu activeItemId={0} onSelect={jest.fn()} isNavFlyout>
-                content
-            </Menu>
-        );
-        expect(view.find('div.pf-m-nav')).toMatchSnapshot();
+      render(
+        <Menu activeItemId={0} onSelect={jest.fn()} isNavFlyout>
+          content
+        </Menu>
+      );
+      expect(screen.getByText('content')).toHaveClass('pf-m-nav');
     });
-});
+  });
+});

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render Menu successfully 1`] = `
-<div>
+exports[`Menu should render Menu successfully 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-menu"
     data-ouia-component-id="OUIA-Generated-Menu-1"
@@ -10,38 +10,5 @@ exports[`should render Menu successfully 1`] = `
   >
     content
   </div>
-</div>
-`;
-
-exports[`with isNavFlyout should render Menu with nav flyout styles applied 1`] = `
-<div
-  className="pf-c-menu pf-m-nav"
-  data-ouia-component-id="OUIA-Generated-Menu-4"
-  data-ouia-component-type="PF4/Menu"
-  data-ouia-safe={true}
->
-  content
-</div>
-`;
-
-exports[`with isPlain should render Menu with plain styles applied 1`] = `
-<div
-  className="pf-c-menu pf-m-plain"
-  data-ouia-component-id="OUIA-Generated-Menu-2"
-  data-ouia-component-type="PF4/Menu"
-  data-ouia-safe={true}
->
-  content
-</div>
-`;
-
-exports[`with isScrollable should render Menu with scrollable styles applied 1`] = `
-<div
-  className="pf-c-menu pf-m-scrollable"
-  data-ouia-component-id="OUIA-Generated-Menu-3"
-  data-ouia-component-type="PF4/Menu"
-  data-ouia-safe={true}
->
-  content
-</div>
+</DocumentFragment>
 `;

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);
+  });
 });