@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render accessible tabs 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="accessible Tabs example"
     class="pf-c-tabs"
@@ -154,11 +154,11 @@ exports[`should render accessible tabs 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render box tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-box"
     data-ouia-component-id="OUIA-Generated-Tabs-6"
@@ -276,7 +276,7 @@ exports[`should render box tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -348,11 +348,11 @@ exports[`should render box tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render box tabs of light variant 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-box pf-m-color-scheme--light-300"
     data-ouia-component-id="OUIA-Generated-Tabs-13"
@@ -501,11 +501,11 @@ exports[`should render box tabs of light variant 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render expandable vertical tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-vertical pf-m-expandable"
     data-ouia-component-id="OUIA-Generated-Tabs-4"
@@ -666,7 +666,7 @@ exports[`should render expandable vertical tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -738,11 +738,11 @@ exports[`should render expandable vertical tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render filled tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-fill"
     data-ouia-component-id="OUIA-Generated-Tabs-8"
@@ -891,11 +891,11 @@ exports[`should render filled tabs 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render secondary tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-9"
@@ -1192,11 +1192,11 @@ exports[`should render secondary tabs 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render simple tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-1"
@@ -1314,7 +1314,7 @@ exports[`should render simple tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -1386,11 +1386,11 @@ exports[`should render simple tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render tabs with eventKey Strings 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-11"
@@ -1540,11 +1540,11 @@ exports[`should render tabs with eventKey Strings 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render tabs with no bottom border 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-no-border-bottom"
     data-ouia-component-id="OUIA-Generated-Tabs-14"
@@ -1693,11 +1693,11 @@ exports[`should render tabs with no bottom border 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render tabs with separate content 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-12"
@@ -1856,11 +1856,11 @@ exports[`should render tabs with separate content 1`] = `
       </div>
     </section>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render uncontrolled tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-2"
@@ -1977,7 +1977,7 @@ exports[`should render uncontrolled tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -2049,11 +2049,11 @@ exports[`should render uncontrolled tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render vertical tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-vertical"
     data-ouia-component-id="OUIA-Generated-Tabs-3"
@@ -2171,7 +2171,7 @@ exports[`should render vertical tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -2243,5 +2243,5 @@ exports[`should render vertical tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/Text/__tests__/Generated/TextContent.test.tsx

@@ -8,6 +8,6 @@ import { TextContent } from '../../TextContent';
 import {} from '../..';
 
 it('TextContent should match snapshot (auto-generated)', () => {
-  const view = render(<TextContent children={<>ReactNode</>} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TextContent children={<>ReactNode</>} className={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Text/__tests__/Generated/TextList.test.tsx

@@ -8,6 +8,6 @@ import { TextList } from '../../TextList';
 import {} from '../..';
 
 it('TextList should match snapshot (auto-generated)', () => {
-  const view = render(<TextList children={<>ReactNode</>} className={"''"} component={'ul'} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TextList children={<>ReactNode</>} className={"''"} component={'ul'} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Text/__tests__/Generated/TextListItem.test.tsx

@@ -8,6 +8,6 @@ import { TextListItem } from '../../TextListItem';
 import {} from '../..';
 
 it('TextListItem should match snapshot (auto-generated)', () => {
-  const view = render(<TextListItem children={<>ReactNode</>} className={"''"} component={'li'} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TextListItem children={<>ReactNode</>} className={"''"} component={'li'} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-content ''"
   >
     ReactNode
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextList should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="''"
     data-pf-content="true"
   >
     ReactNode
   </ul>
-</div>
+</DocumentFragment>
 `;

package/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextListItem should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="''"
     data-pf-content="true"
   >
     ReactNode
   </li>
-</div>
+</DocumentFragment>
 `;

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

@@ -6,7 +6,7 @@ import { TextList, TextListVariants } from '../TextList';
 import { TextListItem, TextListItemVariants } from '../TextListItem';
 
 test('Text example should match snapshot', () => {
-  const view = render(
+  const { asFragment } = render(
     <TextContent>
       <Text component={TextVariants.h1}>Hello World</Text>
       <Text component={TextVariants.p}>
@@ -108,5 +108,5 @@ test('Text example should match snapshot', () => {
       </Text>
     </TextContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Text example should match snapshot 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-content"
   >
@@ -107,8 +107,7 @@ exports[`Text example should match snapshot 1`] = `
       data-ouia-safe="true"
       data-pf-content="true"
     >
-      Quisque ante lacus, malesuada ac auctor vitae, congue
-       
+      Quisque ante lacus, malesuada ac auctor vitae, congue 
       <a
         class=""
         data-ouia-component-id="OUIA-Generated-Text-7"
@@ -331,5 +330,5 @@ exports[`Text example should match snapshot 1`] = `
       Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
     </p>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { TextArea, TextAreaBase } from '../TextArea';
 import { ValidatedOptions } from '../../../helpers/constants';
@@ -14,7 +13,7 @@ const props = {
 
 describe('TextArea', () => {
   test('textarea input passes value and event to onChange handler', () => {
-    render(<TextAreaBase {...props} value='' aria-label="test textarea" />);
+    render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
 
     userEvent.type(screen.getByLabelText('test textarea'), 'a');
     expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
@@ -56,12 +55,16 @@ describe('TextArea', () => {
   });
 
   test('validated text area error', () => {
-    const { asFragment } = render(<TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />);
+    const { asFragment } = render(
+      <TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('vertically resizable text area', () => {
-    const { asFragment } = render(<TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />);
+    const { asFragment } = render(
+      <TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -84,7 +87,7 @@ describe('TextArea', () => {
 
     render(<TextArea {...props} />);
 
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
   });
 
   test('should not throw console error when id is given but no aria-label', () => {
@@ -93,7 +96,7 @@ describe('TextArea', () => {
 
     render(<TextArea {...props} id="5" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('should not throw console error when aria-label is given but no id', () => {
@@ -102,6 +105,6 @@ describe('TextArea', () => {
 
     render(<TextArea {...props} aria-label="test textarea" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 });

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { TextInput, TextInputBase } from '../TextInput';
 import { ValidatedOptions } from '../../../helpers/constants';
@@ -14,7 +13,7 @@ const props = {
 
 describe('TextInput', () => {
   test('input passes value and event to onChange handler', () => {
-    render(<TextInputBase {...props} value='' aria-label="test input" />);
+    render(<TextInputBase {...props} value="" aria-label="test input" />);
 
     userEvent.type(screen.getByLabelText('test input'), 'a');
     expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
@@ -36,7 +35,9 @@ describe('TextInput', () => {
   });
 
   test('invalid text input', () => {
-    const { asFragment } = render(<TextInput {...props} required validated={'error'} aria-label="invalid text input" />);
+    const { asFragment } = render(
+      <TextInput {...props} required validated={'error'} aria-label="invalid text input" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -51,7 +52,9 @@ describe('TextInput', () => {
   });
 
   test('validated text input error', () => {
-    const { asFragment } = render(<TextInput {...props} required validated={ValidatedOptions.error} aria-label="validated text input" />);
+    const { asFragment } = render(
+      <TextInput {...props} required validated={ValidatedOptions.error} aria-label="validated text input" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -61,7 +64,7 @@ describe('TextInput', () => {
 
     render(<TextInput {...props} />);
 
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
   });
 
   test('should not throw console error when id is given but no aria-label or aria-labelledby', () => {
@@ -70,7 +73,7 @@ describe('TextInput', () => {
 
     render(<TextInput {...props} id="5" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('should not throw console error when aria-label is given but no id or aria-labelledby', () => {
@@ -79,7 +82,7 @@ describe('TextInput', () => {
 
     render(<TextInput {...props} aria-label="test input" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('should not throw console error when aria-labelledby is given but no id or aria-label', () => {
@@ -88,6 +91,6 @@ describe('TextInput', () => {
 
     render(<TextInput {...props} aria-labelledby="test input" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 });

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -9,11 +9,11 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 describe('TextInputGroupMain', () => {
   it('renders without children', () => {
-    render(<TextInputGroupMain data-testid='TextInputGroupMain'/>);
-    
+    render(<TextInputGroupMain data-testid="TextInputGroupMain" />);
+
     expect(screen.getByTestId('TextInputGroupMain')).toBeVisible();
   });
-  
+
   it('renders children', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 

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

@@ -5,37 +5,37 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 describe('Tile', () => {
   test('basic', () => {
-    const view = render(<Tile title="test" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Tile title="test" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders selected', () => {
-    const view = render(<Tile title="test" isSelected />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Tile title="test" isSelected />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders disabled', () => {
-    const view = render(<Tile title="test" isDisabled />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Tile title="test" isDisabled />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with subtext', () => {
-    const view = render(<Tile title="test">test subtext</Tile>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Tile title="test">test subtext</Tile>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with icon', () => {
-    const view = render(<Tile title="test" icon={<PlusIcon />} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Tile title="test" icon={<PlusIcon />} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with stacked icon', () => {
-    const view = render(<Tile title="test" icon={<PlusIcon />} isStacked />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Tile title="test" icon={<PlusIcon />} isStacked />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with stacked large icon', () => {
-    const view = render(<Tile title="test" icon={<PlusIcon />} isStacked isDisplayLarge />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Tile title="test" icon={<PlusIcon />} isStacked isDisplayLarge />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tile basic 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tile"
     role="option"
@@ -17,11 +17,11 @@ exports[`Tile basic 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Tile renders disabled 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-disabled="true"
     class="pf-c-tile pf-m-disabled"
@@ -38,11 +38,11 @@ exports[`Tile renders disabled 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Tile renders selected 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-selected="true"
     class="pf-c-tile pf-m-selected"
@@ -59,11 +59,11 @@ exports[`Tile renders selected 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Tile renders with icon 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tile"
     role="option"
@@ -96,11 +96,11 @@ exports[`Tile renders with icon 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Tile renders with stacked icon 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tile"
     role="option"
@@ -133,11 +133,11 @@ exports[`Tile renders with stacked icon 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Tile renders with stacked large icon 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tile pf-m-display-lg"
     role="option"
@@ -170,11 +170,11 @@ exports[`Tile renders with stacked large icon 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Tile renders with subtext 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tile"
     role="option"
@@ -195,5 +195,5 @@ exports[`Tile renders with subtext 1`] = `
       test subtext
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -2,18 +2,23 @@ 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 { TimePicker } from '../TimePicker';
+import { TimePicker, TimePickerProps } from '../TimePicker';
 
 describe('TimePicker', () => {
   describe('test timepicker onChange method with valid values', () => {
-    const testOnChange = ({ inputProps, expects }) => {
+    const testOnChange = ({
+      inputProps,
+      expects
+    }: {
+      inputProps: TimePickerProps;
+      expects: { hour: number; minutes: number; seconds: number };
+    }) => {
       const onChange = jest.fn();
       render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
-      userEvent.type(screen.getByLabelText('time picker'), inputProps.value);
-      expect(onChange).toBeCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
+      userEvent.type(screen.getByLabelText('time picker'), String(inputProps.value));
+      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
     };
 
     test('should return the correct value using the AM/PM pattern - midnight', () => {

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

@@ -1,8 +1,5 @@
 import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { Title, TitleSizes } from '..';
 
 describe('Title', () => {