@patternfly/react-core 4.206.5 → 4.206.6

package/src/components/Select/__tests__/SelectOption.test.tsx

@@ -21,20 +21,34 @@ class User implements SelectOptionObject {
 
 describe('SelectOption', () => {
   test('renders with value parameter successfully', () => {
-    render(
+    const { asFragment } = render(
       <SelectProvider
-        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        value={{
+          onSelect: () => {},
+          onFavorite: () => {},
+          onClose: () => {},
+          variant: 'single',
+          inputIdPrefix: '',
+          shouldResetOnSelect: true
+        }}
       >
         <SelectOption id="option-1" value="test" sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with description successfully', () => {
-    render(
+    const { asFragment } = render(
       <SelectProvider
-        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        value={{
+          onSelect: () => {},
+          onFavorite: () => {},
+          onClose: () => {},
+          variant: 'single',
+          inputIdPrefix: '',
+          shouldResetOnSelect: true
+        }}
       >
         <SelectOption
           id="option-1"
@@ -45,108 +59,164 @@ describe('SelectOption', () => {
         />
       </SelectProvider>
     );
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with item count successfully', () => {
-    render(
+    const { asFragment } = render(
       <SelectProvider
-        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        value={{
+          onSelect: () => {},
+          onFavorite: () => {},
+          onClose: () => {},
+          variant: 'single',
+          inputIdPrefix: '',
+          shouldResetOnSelect: true
+        }}
       >
         <SelectOption id="option-1" value="test" itemCount={3} sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with custom display successfully', () => {
-    render(
+    const { asFragment } = render(
       <SelectProvider
-        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        value={{
+          onSelect: () => {},
+          onFavorite: () => {},
+          onClose: () => {},
+          variant: 'single',
+          inputIdPrefix: '',
+          shouldResetOnSelect: true
+        }}
       >
         <SelectOption id="option-1" value="test" sendRef={jest.fn()}>
           <div>test display</div>
         </SelectOption>
       </SelectProvider>
     );
-    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with custom user object successfully', () => {
-    render(
+    const { asFragment } = render(
       <SelectProvider
-        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        value={{
+          onSelect: () => {},
+          onFavorite: () => {},
+          onClose: () => {},
+          variant: 'single',
+          inputIdPrefix: '',
+          shouldResetOnSelect: true
+        }}
       >
         <SelectOption id="option-1" value={new User('Mr.', 'Test', 'User')} sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with custom display and custom user object successfully', () => {
-    render(
+    const { asFragment } = render(
       <SelectProvider
-        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        value={{
+          onSelect: () => {},
+          onFavorite: () => {},
+          onClose: () => {},
+          variant: 'single',
+          inputIdPrefix: '',
+          shouldResetOnSelect: true
+        }}
       >
         <SelectOption id="option-1" value={new User('Mr.', 'Test', 'User')} sendRef={jest.fn()}>
           <div>test display</div>
         </SelectOption>
       </SelectProvider>
     );
-    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom component', () => {
-    render(
+    const { asFragment } = render(
       <SelectProvider
-        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        value={{
+          onSelect: () => {},
+          onFavorite: () => {},
+          onClose: () => {},
+          variant: 'single',
+          inputIdPrefix: '',
+          shouldResetOnSelect: true
+        }}
       >
         <SelectOption id="option-1" value={new User('Mr.', 'Test', 'User')} sendRef={jest.fn()} component="div">
           <div>test display</div>
         </SelectOption>
       </SelectProvider>
     );
-    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   describe('disabled', () => {
     test('renders disabled successfully', () => {
-      render(
+      const { asFragment } = render(
         <SelectProvider
-          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+          value={{
+            onSelect: () => {},
+            onFavorite: () => {},
+            onClose: () => {},
+            variant: 'single',
+            inputIdPrefix: '',
+            shouldResetOnSelect: true
+          }}
         >
           <SelectOption id="option-1" isDisabled value="test" sendRef={jest.fn()} data-testid="test-id" />
         </SelectProvider>
       );
 
-      expect(screen.getByText('test').className).toContain('pf-m-disabled');
-      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+      expect(screen.getByText('test')).toHaveClass('pf-m-disabled');
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 
   describe('is selected', () => {
     test('renders selected successfully', () => {
-      render(
+      const { asFragment } = render(
         <SelectProvider
-          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+          value={{
+            onSelect: () => {},
+            onFavorite: () => {},
+            onClose: () => {},
+            variant: 'single',
+            inputIdPrefix: '',
+            shouldResetOnSelect: true
+          }}
         >
           <SelectOption id="option-1" isSelected value="test" sendRef={jest.fn()} data-testid="test-id" />
         </SelectProvider>
       );
-      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 
   describe('checked', () => {
     test('renders with checked successfully', () => {
-      render(
+      const { asFragment } = render(
         <SelectProvider
-          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+          value={{
+            onSelect: () => {},
+            onFavorite: () => {},
+            onClose: () => {},
+            variant: 'single',
+            inputIdPrefix: '',
+            shouldResetOnSelect: true
+          }}
         >
           <SelectOption id="option-1" isChecked value="test" sendRef={jest.fn()} data-testid="test-id" />
         </SelectProvider>
       );
-      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 
@@ -157,13 +227,20 @@ describe('SelectOption', () => {
 
       render(
         <SelectProvider
-          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+          value={{
+            onSelect: () => {},
+            onFavorite: () => {},
+            onClose: () => {},
+            variant: 'single',
+            inputIdPrefix: '',
+            shouldResetOnSelect: true
+          }}
         >
           <SelectOption isFavorite value="test" sendRef={jest.fn()} />
         </SelectProvider>
       );
 
-      expect(myMock).toBeCalled();
+      expect(myMock).toHaveBeenCalled();
     });
   });
 });

package/src/components/Select/__tests__/__snapshots__/SelectGroup.test.tsx.snap

@@ -1,3 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectGroup renders with children successfully 1`] = `"<div data-testid=\\"test-id\\" class=\\"pf-c-select__menu-group\\"><div class=\\"pf-c-select__menu-group-title\\" id=\\"\\" aria-hidden=\\"true\\">test</div><ul role=\\"listbox\\"><div>child</div></ul></div>"`;
+exports[`SelectGroup renders with children successfully 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-select__menu-group"
+  >
+    <div
+      aria-hidden="true"
+      class="pf-c-select__menu-group-title"
+      id=""
+    >
+      test
+    </div>
+    <ul
+      role="listbox"
+    >
+      <div>
+        child
+      </div>
+    </ul>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Select/__tests__/__snapshots__/SelectOption.test.tsx.snap

@@ -1,21 +1,234 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectOption checked renders with checked successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;
+exports[`SelectOption checked renders with checked successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption disabled renders disabled successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-disabled\\" role=\\"option\\" type=\\"button\\">test</button>"`;
+exports[`SelectOption disabled renders disabled successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item pf-m-disabled"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption is selected renders selected successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-selected\\" role=\\"option\\" aria-selected=\\"true\\" type=\\"button\\">test<span class=\\"pf-c-select__menu-item-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\\"></path></svg></span></button>"`;
+exports[`SelectOption is selected renders selected successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      aria-selected="true"
+      class="pf-c-select__menu-item pf-m-selected"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+      <span
+        class="pf-c-select__menu-item-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders custom component 1`] = `"<div>test display</div>"`;
+exports[`SelectOption renders custom component 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <div
+      class="pf-c-select__menu-item"
+      role="option"
+      type="button"
+    >
+      <div>
+        test display
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with custom display and custom user object successfully 1`] = `"<div>test display</div>"`;
+exports[`SelectOption renders with custom display and custom user object successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      role="option"
+      type="button"
+    >
+      <div>
+        test display
+      </div>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with custom display successfully 1`] = `"<div>test display</div>"`;
+exports[`SelectOption renders with custom display successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      role="option"
+      type="button"
+    >
+      <div>
+        test display
+      </div>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with custom user object successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">Mr.: Test User</button>"`;
+exports[`SelectOption renders with custom user object successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      Mr.: Test User
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with description successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-description\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-main\\">test</span><span class=\\"pf-c-select__menu-item-description\\">This is a description</span></button>"`;
+exports[`SelectOption renders with description successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item pf-m-description"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      <span
+        class="pf-c-select__menu-item-main"
+      >
+        test
+      </span>
+      <span
+        class="pf-c-select__menu-item-description"
+      >
+        This is a description
+      </span>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with item count successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-row\\"><span class=\\"pf-c-select__menu-item-text\\">test</span><span class=\\"pf-c-select__menu-item-count\\">3</span></span></button>"`;
+exports[`SelectOption renders with item count successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      <span
+        class="pf-c-select__menu-item-row"
+      >
+        <span
+          class="pf-c-select__menu-item-text"
+        >
+          test
+        </span>
+        <span
+          class="pf-c-select__menu-item-count"
+        >
+          3
+        </span>
+      </span>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with value parameter successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;
+exports[`SelectOption renders with value parameter successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+    </button>
+  </li>
+</DocumentFragment>
+`;

package/src/components/SimpleList/__tests__/Generated/SimpleListGroup.test.tsx

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

package/src/components/SimpleList/__tests__/Generated/SimpleListItem.test.tsx

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

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListGroup.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <section
     class="pf-c-simple-list__section"
   >
@@ -17,5 +17,5 @@ exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
       ReactNode
     </ul>
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListItem.test.tsx.snap

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

package/src/components/SimpleList/__tests__/SimpleList.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 { SimpleList } from '../SimpleList';
 import { SimpleListGroup } from '../SimpleListGroup';
@@ -47,7 +46,7 @@ describe('SimpleList', () => {
     render(<SimpleList onSelect={onSelect}>{items}</SimpleList>);
 
     userEvent.click(screen.getByText('Item 1'));
-    expect(onSelect).toBeCalled();
+    expect(onSelect).toHaveBeenCalled();
   });
 
   test('renders anchor content', () => {
@@ -61,7 +60,7 @@ describe('SimpleList', () => {
     render(<SimpleList onSelect={onSelect}>{anchors}</SimpleList>);
 
     userEvent.click(screen.getByText('Item 1'));
-    expect(onSelect).toBeCalled();
+    expect(onSelect).toHaveBeenCalled();
   });
 });
 

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

@@ -4,38 +4,40 @@ import { Skeleton } from '../Skeleton';
 
 describe('skeleton', () => {
   test('default', () => {
-    const view = render(<Skeleton />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Skeleton />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   ['25%', '33%', '50%', '66%', '75%'].forEach((width: string) =>
     test(`skeleton with ${width} width`, () => {
-      const view = render(<Skeleton width={width} />);
-      expect(view.container).toMatchSnapshot();
+      const { asFragment } = render(<Skeleton width={width} />);
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   ['25%', '33%', '50%', '66%', '75%', '100%'].forEach((height: string) =>
     test(`skeleton with ${height} height`, () => {
-      const view = render(<Skeleton height={height} />);
-      expect(view.container).toMatchSnapshot();
+      const { asFragment } = render(<Skeleton height={height} />);
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].forEach((fontSize: string) =>
     test(`skeleton with ${fontSize} font size`, () => {
-      const view = render(<Skeleton fontSize={fontSize as 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'} />);
-      expect(view.container).toMatchSnapshot();
+      const { asFragment } = render(
+        <Skeleton fontSize={fontSize as 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'} />
+      );
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   test('circle skeleton', () => {
-    const view = render(<Skeleton shape="circle" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Skeleton shape="circle" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('square skeleton', () => {
-    const view = render(<Skeleton shape="square" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Skeleton shape="square" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });