@patternfly/react-core 4.206.5 → 4.208.0

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

@@ -5,13 +5,13 @@ import { SkipToContent } from '../SkipToContent';
 const props = {};
 
 test('Verify Skip To Content', () => {
-  const view = render(<SkipToContent href="#main-content" {...props} />);
+  const { asFragment } = render(<SkipToContent href="#main-content" {...props} />);
   // Add a useful assertion here.
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Verify Skip To Content if forced to display', () => {
-  const view = render(<SkipToContent href="#main-content" {...props} show />);
+  const { asFragment } = render(<SkipToContent href="#main-content" {...props} show />);
   // Add a useful assertion here.
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Verify Skip To Content 1`] = `
-<div>
+<DocumentFragment>
   <a
     class="pf-c-button pf-m-primary pf-c-skip-to-content"
     href="#main-content"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Verify Skip To Content if forced to display 1`] = `
-<div>
+<DocumentFragment>
   <a
     class="pf-c-button pf-m-primary pf-c-skip-to-content"
     href="#main-content"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Slider/_tests_/Slider.test.tsx

@@ -5,17 +5,17 @@ import { Button } from '../../Button';
 
 describe('slider', () => {
   test('renders continuous slider', () => {
-    const view = render(<Slider value={50} isInputVisible inputValue={50} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders discrete slider', () => {
-    const view = render(<Slider value={50} min={10} max={110} step={2} isInputVisible inputValue={50} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} min={10} max={110} step={2} isInputVisible inputValue={50} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders discrete slider with custom steps', () => {
-    const view = render(
+    const { asFragment } = render(
       <Slider
         value={50}
         customSteps={[
@@ -27,11 +27,11 @@ describe('slider', () => {
         ]}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders continuous slider with custom steps', () => {
-    const view = render(
+    const { asFragment } = render(
       <Slider
         value={50}
         areCustomStepsContinuous
@@ -41,37 +41,41 @@ describe('slider', () => {
         ]}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with input', () => {
-    const view = render(<Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="right" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="right" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with input above thumb', () => {
-    const view = render(<Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="aboveThumb" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="aboveThumb" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with input actions', () => {
-    const view = render(
+    const { asFragment } = render(
       <Slider
         value={50}
         leftActions={<Button variant="plain" aria-label="Minus" />}
         rightActions={<Button variant="plain" aria-label="Plus" />}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders disabled slider', () => {
-    const view = render(<Slider value={50} isDisabled />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} isDisabled />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with tooltip on thumb', () => {
-    const view = render(<Slider value={50} hasTooltipOverThumb />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} hasTooltipOverThumb />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`slider renders continuous slider 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -68,11 +68,11 @@ exports[`slider renders continuous slider 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders continuous slider with custom steps 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -131,11 +131,11 @@ exports[`slider renders continuous slider with custom steps 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders disabled slider 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider pf-m-disabled"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -188,11 +188,11 @@ exports[`slider renders disabled slider 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders discrete slider 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 40%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -259,11 +259,11 @@ exports[`slider renders discrete slider 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders discrete slider with custom steps 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -351,11 +351,11 @@ exports[`slider renders discrete slider with custom steps 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with input 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -426,17 +426,16 @@ exports[`slider renders slider with input 1`] = `
         <span
           class="pf-c-input-group__text pf-m-plain"
         >
-           
-          %
+           %
         </span>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with input above thumb 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -506,18 +505,17 @@ exports[`slider renders slider with input above thumb 1`] = `
           <span
             class="pf-c-input-group__text pf-m-plain"
           >
-             
-            %
+             %
           </span>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with input actions 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -596,11 +594,11 @@ exports[`slider renders slider with input actions 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with tooltip on thumb 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -653,5 +651,5 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -3,26 +3,26 @@ import { render } from '@testing-library/react';
 import { Spinner } from '../Spinner';
 
 test('simple spinner', () => {
-  const view = render(<Spinner />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('small spinner', () => {
-  const view = render(<Spinner size="sm" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="sm" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('medium spinner', () => {
-  const view = render(<Spinner size="md" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="md" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('large spinner', () => {
-  const view = render(<Spinner size="lg" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="lg" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('extra large spinner', () => {
-  const view = render(<Spinner size="xl" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="xl" />);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`extra large spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -18,11 +18,11 @@ exports[`extra large spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`large spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -39,11 +39,11 @@ exports[`large spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`medium spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -60,11 +60,11 @@ exports[`medium spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`simple spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -81,11 +81,11 @@ exports[`simple spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`small spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -102,5 +102,5 @@ exports[`small spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;

package/src/components/Switch/__tests__/Switch.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 { Switch } from '../Switch';
 
@@ -27,12 +26,16 @@ describe('Switch', () => {
   });
 
   test('switch is checked', () => {
-    const { asFragment } = render(<Switch id="switch-is-checked" label="On" labelOff="Off" isChecked aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-checked" label="On" labelOff="Off" isChecked aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('switch is not checked', () => {
-    const { asFragment } = render(<Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -52,17 +55,23 @@ describe('Switch', () => {
   });
 
   test('no label switch is not checked', () => {
-    const { asFragment } = render(<Switch id="no-label-switch-is-not-checked" isChecked={false} aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="no-label-switch-is-not-checked" isChecked={false} aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('switch is checked and disabled', () => {
-    const { asFragment } = render(<Switch id="switch-is-checked-and-disabled" isChecked isDisabled aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-checked-and-disabled" isChecked isDisabled aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('switch is not checked and disabled', () => {
-    const { asFragment } = render(<Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -79,7 +88,7 @@ describe('Switch', () => {
     global.console = { ...global.console, error: myMock };
 
     render(<Switch {...props} />);
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
   });
 
   test('should not throw console error when label is given but no aria-label', () => {
@@ -88,7 +97,7 @@ describe('Switch', () => {
 
     render(<Switch {...props} label="test switch" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('should not throw console error when aria-label is given but no label', () => {
@@ -97,7 +106,7 @@ describe('Switch', () => {
 
     render(<Switch {...props} aria-label="test switch" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('should apply reversed modifier', () => {

package/src/components/Tabs/__tests__/Generated/TabContent.test.tsx

@@ -8,7 +8,7 @@ import { TabContent } from '../../TabContent';
 import {} from '../..';
 
 it('TabContent should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <TabContent
       children={'any'}
       child={<p>ReactElement</p>}
@@ -20,5 +20,5 @@ it('TabContent should match snapshot (auto-generated)', () => {
       aria-label={'string'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TabContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <section
     aria-label="string"
     class="pf-c-tab-content string"
@@ -13,5 +13,5 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
   >
     any
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/Tabs/__tests__/Tab.test.tsx

@@ -4,10 +4,10 @@ import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
 
 test('should not render anything', () => {
-  const view = render(
-  <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+  const { asFragment } = render(
+    <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
       Tab 1 section
     </Tab>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Tabs/__tests__/TabButton.test.tsx

@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { TabButton } from '../TabButton';
 
 test('should render tab button', () => {
-  const view = render(<TabButton>Tab button</TabButton>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TabButton>Tab button</TabButton>);
+  expect(asFragment()).toMatchSnapshot();
 });