@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 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';
@@ -22,20 +21,20 @@ const props = {
 describe('Modal', () => {
   test('Modal creates a container element once for div', () => {
     render(<Modal {...props} />);
-    expect(document.createElement).toBeCalledWith('div');
+    expect(document.createElement).toHaveBeenCalledWith('div');
   });
 
   test('modal closes with escape', () => {
     render(<Modal {...props} isOpen appendTo={document.body} />);
 
     userEvent.type(screen.getByText(props.title), '{esc}');
-    expect(props.onClose).toBeCalled();
+    expect(props.onClose).toHaveBeenCalled();
   });
 
   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();
+    expect(props.onClose).not.toHaveBeenCalled();
   });
 
   test('modal has body backdropOpen class when open', () => {
@@ -69,7 +68,7 @@ describe('Modal', () => {
 
     render(<Modal {...props} />);
 
-    expect(consoleErrorMock).toBeCalled();
+    expect(consoleErrorMock).toHaveBeenCalled();
   });
 
   test('modal generates console warning when conflicting accessible name strategies are provided', () => {
@@ -84,6 +83,6 @@ describe('Modal', () => {
 
     render(<Modal {...props} />);
 
-    expect(consoleErrorMock).toBeCalled();
+    expect(consoleErrorMock).toHaveBeenCalled();
   });
 });

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

@@ -4,55 +4,55 @@ import { render } from '@testing-library/react';
 import { ModalBox } from '../ModalBox';
 
 test('ModalBox Test', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBox aria-describedby="Test Modal Box" id="boxId">
       This is a ModalBox
     </ModalBox>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBox Test large', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="large">
       This is a ModalBox
     </ModalBox>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBox Test medium', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="medium">
       This is a ModalBox
     </ModalBox>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBox Test small', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="small">
       This is a ModalBox
     </ModalBox>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBox Test top aligned', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBox aria-describedby="Test Modal Box" id="boxId" position="top">
       This is a ModalBox
     </ModalBox>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBox Test top aligned distance', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBox aria-describedby="Test Modal Box" id="boxId" position="top" positionOffset="50px">
       This is a ModalBox
     </ModalBox>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -4,10 +4,10 @@ import { render } from '@testing-library/react';
 import { ModalBoxBody } from '../ModalBoxBody';
 
 test('ModalBoxBody Test', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBoxBody id="id" className="test-box-class">
       This is a ModalBox header
     </ModalBoxBody>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -3,10 +3,6 @@ import { render } from '@testing-library/react';
 import { ModalBoxDescription } from '../ModalBoxDescription';
 
 test('ModalBoxDescription Test', () => {
-  const view = render(
-    <ModalBoxDescription>
-      This is a ModalBox Description
-    </ModalBoxDescription>
-    );
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ModalBoxDescription>This is a ModalBox Description</ModalBoxDescription>);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 import { ModalBoxFooter } from '../ModalBoxFooter';
 
 test('ModalBoxFooter Test', () => {
-  const view = render(<ModalBoxFooter className="test-box-footer-class">This is a ModalBox Footer</ModalBoxFooter>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(
+    <ModalBoxFooter className="test-box-footer-class">This is a ModalBox Footer</ModalBoxFooter>
+  );
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -4,11 +4,11 @@ import { render } from '@testing-library/react';
 import { ModalBoxHeader } from '../ModalBoxHeader';
 
 test('ModalBoxHeader Test', () => {
-  const view = render(<ModalBoxHeader>This is a ModalBox header</ModalBoxHeader>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ModalBoxHeader>This is a ModalBox header</ModalBoxHeader>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxHeader help renders', () => {
-  const view = render(<ModalBoxHeader help={<div>test</div>}>This is a ModalBox header</ModalBoxHeader>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ModalBoxHeader help={<div>test</div>}>This is a ModalBox header</ModalBoxHeader>);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -5,55 +5,55 @@ import { ModalBoxTitle } from '../ModalBoxTitle';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 test('ModalBoxTitle alert variant', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="warning">
       content
     </ModalBoxTitle>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle info variant', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBoxTitle title="Test Modal Box info" id="boxId" titleIconVariant="info">
       content
     </ModalBoxTitle>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle danger variant', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBoxTitle title="Test Modal Box danger" id="boxId" titleIconVariant="danger">
       content
     </ModalBoxTitle>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle default variant', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="default">
       content
     </ModalBoxTitle>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle success variant', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBoxTitle title="Test Modal Box success" id="boxId" titleIconVariant="success">
       content
     </ModalBoxTitle>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle custom icon variant', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant={BullhornIcon}>
       content
     </ModalBoxTitle>
   );
-  expect(view.container).toMatchSnapshot();
-});
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -4,57 +4,62 @@ import { render } from '@testing-library/react';
 import { ModalContent } from '../ModalContent';
 
 const modalContentProps = {
-  boxId: "boxId",
-  labelId: "labelId",
-  descriptorId: "descriptorId"
-}
+  boxId: 'boxId',
+  labelId: 'labelId',
+  descriptorId: 'descriptorId'
+};
 test('Modal Content Test only body', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Modal Content Test isOpen', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Modal Content Test description', () => {
-  const view = render(
-    <ModalContent title="Test Modal Content title" isOpen description="This is a test description." {...modalContentProps}>
+  const { asFragment } = render(
+    <ModalContent
+      title="Test Modal Content title"
+      isOpen
+      description="This is a test description."
+      {...modalContentProps}
+    >
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Modal Content Test with footer', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalContent title="Test Modal Content title" isOpen actions={['Testing']} {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Modal Content test without footer', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Modal Content Test with onclose', () => {
-  const view = render(
+  const { asFragment } = render(
     <ModalContent
       title="Test Modal Content title"
       actions={['Testing footer']}
@@ -66,13 +71,13 @@ test('Modal Content Test with onclose', () => {
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Modal Test with custom header', () => {
   const header = <span id="test-custom-header">TEST</span>;
 
-  const view = render(
+  const { asFragment } = render(
     <ModalContent
       header={header}
       title="test-custom-header-modal"
@@ -85,16 +90,23 @@ test('Modal Test with custom header', () => {
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Modal Test with custom footer', () => {
   const footer = <span id="test-custom-footer">TEST</span>;
 
-  const view = render(
-    <ModalContent footer={footer} title="Test Modal Custom Footer" variant="large" onClose={() => undefined} isOpen {...modalContentProps}>
+  const { asFragment } = render(
+    <ModalContent
+      footer={footer}
+      title="Test Modal Custom Footer"
+      variant="large"
+      onClose={() => undefined}
+      isOpen
+      {...modalContentProps}
+    >
       This is a ModalBox header
     </ModalContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Modal/__tests__/__snapshots__/ModalBox.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalBox Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
@@ -11,11 +11,11 @@ exports[`ModalBox Test 1`] = `
   >
     This is a ModalBox
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBox Test large 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
@@ -25,11 +25,11 @@ exports[`ModalBox Test large 1`] = `
   >
     This is a ModalBox
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBox Test medium 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
@@ -39,11 +39,11 @@ exports[`ModalBox Test medium 1`] = `
   >
     This is a ModalBox
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBox Test small 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
@@ -53,11 +53,11 @@ exports[`ModalBox Test small 1`] = `
   >
     This is a ModalBox
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBox Test top aligned 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
@@ -67,11 +67,11 @@ exports[`ModalBox Test top aligned 1`] = `
   >
     This is a ModalBox
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBox Test top aligned distance 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
@@ -82,5 +82,5 @@ exports[`ModalBox Test top aligned distance 1`] = `
   >
     This is a ModalBox
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Modal/__tests__/__snapshots__/ModalBoxBody.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalBoxBody Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-modal-box__body test-box-class"
     id="id"
   >
     This is a ModalBox header
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Modal/__tests__/__snapshots__/ModalBoxDescription.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalBoxDescription Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-modal-box__description"
     id=""
   >
     This is a ModalBox Description
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Modal/__tests__/__snapshots__/ModalBoxFooter.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalBoxFooter Test 1`] = `
-<div>
+<DocumentFragment>
   <footer
     class="pf-c-modal-box__footer test-box-footer-class"
   >
     This is a ModalBox Footer
   </footer>
-</div>
+</DocumentFragment>
 `;

package/src/components/Modal/__tests__/__snapshots__/ModalBoxHeader.test.tsx.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalBoxHeader Test 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-modal-box__header"
   >
     This is a ModalBox header
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBoxHeader help renders 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-modal-box__header pf-m-help"
   >
@@ -28,5 +28,5 @@ exports[`ModalBoxHeader help renders 1`] = `
       </div>
     </div>
   </header>
-</div>
+</DocumentFragment>
 `;

package/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalBoxTitle alert variant 1`] = `
-<div>
+<DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
     id="boxId"
@@ -34,11 +34,11 @@ exports[`ModalBoxTitle alert variant 1`] = `
       Test Modal Box warning
     </span>
   </h1>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBoxTitle custom icon variant 1`] = `
-<div>
+<DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
     id="boxId"
@@ -60,18 +60,17 @@ exports[`ModalBoxTitle custom icon variant 1`] = `
         />
       </svg>
     </span>
-    
     <span
       class="pf-c-modal-box__title-text"
     >
       Test Modal Box custom
     </span>
   </h1>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBoxTitle danger variant 1`] = `
-<div>
+<DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
     id="boxId"
@@ -104,11 +103,11 @@ exports[`ModalBoxTitle danger variant 1`] = `
       Test Modal Box danger
     </span>
   </h1>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBoxTitle default variant 1`] = `
-<div>
+<DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
     id="boxId"
@@ -141,11 +140,11 @@ exports[`ModalBoxTitle default variant 1`] = `
       Test Modal Box warning
     </span>
   </h1>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBoxTitle info variant 1`] = `
-<div>
+<DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
     id="boxId"
@@ -178,11 +177,11 @@ exports[`ModalBoxTitle info variant 1`] = `
       Test Modal Box info
     </span>
   </h1>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ModalBoxTitle success variant 1`] = `
-<div>
+<DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
     id="boxId"
@@ -215,5 +214,5 @@ exports[`ModalBoxTitle success variant 1`] = `
       Test Modal Box success
     </span>
   </h1>
-</div>
+</DocumentFragment>
 `;