@patternfly/react-core 4.206.3 → 4.206.6

package/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { ClipboardCopyButton } from '../ClipboardCopyButton';
-import { Button } from '../../Button';
 
 const props = {
   id: 'my-id',
@@ -17,8 +18,8 @@ const props = {
 };
 
 test('copy button render', () => {
-  const view = render(<ClipboardCopyButton {...props}>Copy Me</ClipboardCopyButton>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ClipboardCopyButton {...props}>Copy Me</ClipboardCopyButton>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('copy button onClick', () => {
@@ -30,5 +31,5 @@ test('copy button onClick', () => {
   );
 
   userEvent.click(screen.getByRole('button'));
-  expect(onclick).toBeCalled();
+  expect(onclick).toHaveBeenCalled();
 });

package/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx

@@ -8,16 +8,16 @@ const props = {
 };
 
 test('expanded content render', () => {
-  const view = render(<ClipboardCopyExpanded {...props}>This is my text</ClipboardCopyExpanded>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ClipboardCopyExpanded {...props}>This is my text</ClipboardCopyExpanded>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('expanded code content render', () => {
-  const view = render(
+  const { asFragment } = render(
     <ClipboardCopyExpanded isCode {...props}>{`{
     "name": "@patternfly/react-core",
     "version": "1.33.2"
   }`}</ClipboardCopyExpanded>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { ClipboardCopyToggle, ClipboardCopyToggleProps } from '../ClipboardCopyToggle';
 
 const props: ClipboardCopyToggleProps = {
@@ -15,9 +17,9 @@ const props: ClipboardCopyToggleProps = {
 describe('ClipboardCopyToggle', () => {
   test('toggle button render', () => {
     const desc = 'toggle content';
-    const view = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
+    const { asFragment } = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('toggle button onClick', () => {
@@ -25,20 +27,20 @@ describe('ClipboardCopyToggle', () => {
     render(<ClipboardCopyToggle {...props} onClick={onclick} />);
 
     userEvent.click(screen.getByRole('button'));
-    expect(onclick).toBeCalled();
+    expect(onclick).toHaveBeenCalled();
   });
 
   test('has aria-expanded set to true when isExpanded is true', () => {
     render(<ClipboardCopyToggle {...props} isExpanded />);
 
     const toggleButton = screen.getByRole('button');
-    expect(toggleButton.getAttribute('aria-expanded')).toEqual('true');
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
   });
 
   test('has aria-expanded set to false when isExpanded is false', () => {
     render(<ClipboardCopyToggle {...props} />);
 
     const toggleButton = screen.getByRole('button');
-    expect(toggleButton.getAttribute('aria-expanded')).toEqual('false');
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
   });
 });

package/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx

@@ -8,7 +8,7 @@ import { ClipboardCopy } from '../../ClipboardCopy';
 import {} from '../..';
 
 it('ClipboardCopy should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <ClipboardCopy
       className={'string'}
       hoverTip={"'Copy to clipboard'"}
@@ -37,5 +37,5 @@ it('ClipboardCopy should match snapshot (auto-generated)', () => {
       children={<div>ReactNode</div>}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-clipboard-copy string"
   >
@@ -46,5 +46,5 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`copy button render 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="click this button to copy text"
@@ -27,5 +27,5 @@ exports[`copy button render 1`] = `
       />
     </svg>
   </button>
-</div>
+</DocumentFragment>
 `;

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`expanded code content render 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-clipboard-copy__expandable-content class-1"
     contenteditable="true"
@@ -14,11 +14,11 @@ exports[`expanded code content render 1`] = `
   }
     </pre>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`expanded content render 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-clipboard-copy__expandable-content class-1"
     contenteditable="true"
@@ -26,5 +26,5 @@ exports[`expanded content render 1`] = `
   >
     This is my text
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClipboardCopyToggle toggle button render 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-controls="my-id my-content-id"
     aria-disabled="false"
@@ -29,5 +29,5 @@ exports[`ClipboardCopyToggle toggle button render 1`] = `
       />
     </svg>
   </button>
-</div>
+</DocumentFragment>
 `;

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

@@ -5,26 +5,26 @@ import { CodeBlockAction } from '../CodeBlockAction';
 import { CodeBlockCode } from '../CodeBlockCode';
 
 test('CodeBlock renders successfully', () => {
-  const view = render(<CodeBlock>test text</CodeBlock>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<CodeBlock>test text</CodeBlock>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('CodeBlockAction renders successfully', () => {
-  const view = render(<CodeBlockAction>action</CodeBlockAction>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<CodeBlockAction>action</CodeBlockAction>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('CodeBlockCode renders successfully', () => {
-  const view = render(<CodeBlockCode>action</CodeBlockCode>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<CodeBlockCode>action</CodeBlockCode>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('CodeBlock with components renders successfully', () => {
-  const view = render(
+  const { asFragment } = render(
     <CodeBlock actions={<CodeBlockAction>button</CodeBlockAction>}>
       <CodeBlockCode>inside pre/code tags</CodeBlockCode>
       test outer text
     </CodeBlock>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeBlock renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-code-block"
   >
@@ -18,11 +18,11 @@ exports[`CodeBlock renders successfully 1`] = `
       test text
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`CodeBlock with components renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-code-block"
   >
@@ -54,21 +54,21 @@ exports[`CodeBlock with components renders successfully 1`] = `
       test outer text
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`CodeBlockAction renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-code-block__actions-item"
   >
     action
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`CodeBlockCode renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <pre
     class="pf-c-code-block__pre"
   >
@@ -78,5 +78,5 @@ exports[`CodeBlockCode renders successfully 1`] = `
       action
     </code>
   </pre>
-</div>
+</DocumentFragment>
 `;

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

@@ -16,17 +16,13 @@ const items = [
 
 describe('ContextSelector', () => {
   test('Renders ContextSelector', () => {
-    render(<ContextSelector data-testid="context-test-id">{items}</ContextSelector>);
-    expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<ContextSelector>{items}</ContextSelector>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Renders ContextSelector open', () => {
-    render(
-      <ContextSelector isOpen data-testid="context-test-id">
-        {items}
-      </ContextSelector>
-    );
-    expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<ContextSelector isOpen>{items}</ContextSelector>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify onToggle is called ', () => {

package/src/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx

@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { ContextSelectorFooter } from '../ContextSelectorFooter';
 
 test('Renders ContextSelectorFooter', () => {
-  const view = render(<ContextSelectorFooter>testing text</ContextSelectorFooter>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ContextSelectorFooter>testing text</ContextSelectorFooter>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx

@@ -1,24 +1,26 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { ContextSelectorItem } from '../ContextSelectorItem';
 
 test('Renders ContextSelectorItem', () => {
-  const view = render(
+  const { asFragment } = render(
     <ContextSelectorItem sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ContextSelectorItem disabled and hovered', () => {
-  const view = render(
+  const { asFragment } = render(
     <ContextSelectorItem isDisabled sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Verify onClick is called ', () => {

package/src/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx

@@ -12,11 +12,11 @@ const items = [
 ];
 
 test('Renders ContextSelectorMenuList open', () => {
-  const view = render(<ContextSelectorMenuList isOpen={false}>{items}</ContextSelectorMenuList>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ContextSelectorMenuList isOpen={false}>{items}</ContextSelectorMenuList>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ContextSelectorMenuList closed', () => {
-  const view = render(<ContextSelectorMenuList isOpen={false}>{items}</ContextSelectorMenuList>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ContextSelectorMenuList isOpen={false}>{items}</ContextSelectorMenuList>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx

@@ -7,8 +7,8 @@ import { ContextSelectorToggle } from '../ContextSelectorToggle';
 
 describe('ContextSelectorToggle', () => {
   test('Renders ContextSelectorToggle', () => {
-    render(<ContextSelectorToggle id="toggle-id" />);
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<ContextSelectorToggle id="toggle-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify onToggle is called ', () => {
@@ -17,42 +17,34 @@ describe('ContextSelectorToggle', () => {
     render(<ContextSelectorToggle onToggle={mockfnOnToggle} id="toggle-id" />);
 
     userEvent.click(screen.getByRole('button'));
-    expect(mockfnOnToggle.mock.calls).toHaveLength(1);
+    expect(mockfnOnToggle).toHaveBeenCalledTimes(1);
   });
 
   test('Verify ESC press', () => {
-    render(<ContextSelectorToggle isOpen id="toggle-id" />);
+    const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
-    const toggleButton = screen.getByRole('button');
-
-    userEvent.type(toggleButton, '{esc}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    userEvent.type(screen.getByRole('button'), '{esc}');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify ESC press with not isOpen', () => {
-    render(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
-
-    const toggleButton = screen.getByRole('button');
+    const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
 
     userEvent.type(screen.getByRole('button'), '{esc}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify keydown tab ', () => {
-    render(<ContextSelectorToggle isOpen id="toggle-id" />);
-
-    const toggleButton = screen.getByRole('button');
+    const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
     userEvent.type(screen.getByRole('button'), '{tab}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify keydown enter ', () => {
-    render(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
-
-    const toggleButton = screen.getByRole('button');
+    const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
 
     userEvent.type(screen.getByRole('button'), '{enter}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,181 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ContextSelector Renders ContextSelector 1`] = `"<div class=\\"pf-c-context-selector\\" data-ouia-component-type=\\"PF4/ContextSelector\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-ContextSelector-1\\" data-testid=\\"context-test-id\\"><button aria-labelledby=\\"pf-context-selector-label-id-0 pf-context-selector-toggle-id-0\\" id=\\"pf-context-selector-toggle-id-0\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button></div>"`;
+exports[`ContextSelector Renders ContextSelector 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-context-selector"
+    data-ouia-component-id="OUIA-Generated-ContextSelector-1"
+    data-ouia-component-type="PF4/ContextSelector"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
+      class="pf-c-context-selector__toggle"
+      id="pf-context-selector-toggle-id-0"
+      type="button"
+    >
+      <span
+        class="pf-c-context-selector__toggle-text"
+      />
+      <span
+        class="pf-c-context-selector__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`ContextSelector Renders ContextSelector open 1`] = `"<div class=\\"pf-c-context-selector pf-m-expanded\\" data-ouia-component-type=\\"PF4/ContextSelector\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-ContextSelector-2\\" data-testid=\\"context-test-id\\"><button aria-labelledby=\\"pf-context-selector-label-id-0 pf-context-selector-toggle-id-0\\" id=\\"pf-context-selector-toggle-id-0\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"true\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button><div class=\\"pf-c-context-selector__menu\\"><div><div class=\\"pf-c-context-selector__menu-search\\"><div class=\\"pf-c-input-group\\"><input placeholder=\\"Search\\" aria-labelledby=\\"pf-context-selector-search-button-id-0\\" aria-describedby=\\"pf-context-selector-search-button-id-0\\" class=\\"pf-c-form-control\\" type=\\"search\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/TextInput\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-TextInputBase-1\\" value=\\"\\"><button id=\\"pf-context-selector-search-button-id-0\\" aria-disabled=\\"false\\" aria-label=\\"Search menu items\\" class=\\"pf-c-button pf-m-control\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-control-1\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"></path></svg></button></div></div><ul class=\\"pf-c-context-selector__menu-list\\" role=\\"menu\\"><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">My Project</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">OpenShift Cluster</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">Production Ansible</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">AWS</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">Azure</button></li></ul></div></div></div>"`;
+exports[`ContextSelector Renders ContextSelector open 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-context-selector pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-ContextSelector-2"
+    data-ouia-component-type="PF4/ContextSelector"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
+      class="pf-c-context-selector__toggle"
+      id="pf-context-selector-toggle-id-0"
+      type="button"
+    >
+      <span
+        class="pf-c-context-selector__toggle-text"
+      />
+      <span
+        class="pf-c-context-selector__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      class="pf-c-context-selector__menu"
+    >
+      <div>
+        <div
+          class="pf-c-context-selector__menu-search"
+        >
+          <div
+            class="pf-c-input-group"
+          >
+            <input
+              aria-describedby="pf-context-selector-search-button-id-0"
+              aria-invalid="false"
+              aria-labelledby="pf-context-selector-search-button-id-0"
+              class="pf-c-form-control"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              placeholder="Search"
+              type="search"
+              value=""
+            />
+            <button
+              aria-disabled="false"
+              aria-label="Search menu items"
+              class="pf-c-button pf-m-control"
+              data-ouia-component-id="OUIA-Generated-Button-control-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              id="pf-context-selector-search-button-id-0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <ul
+          class="pf-c-context-selector__menu-list"
+          role="menu"
+        >
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+            >
+              My Project
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+            >
+              OpenShift Cluster
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+            >
+              Production Ansible
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+            >
+              AWS
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+            >
+              Azure
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders ContextSelectorFooter 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-context-selector__menu-footer"
   >
     testing text
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders ContextSelectorItem 1`] = `
-<div>
+<DocumentFragment>
   <li
     role="none"
   >
@@ -11,11 +11,11 @@ exports[`Renders ContextSelectorItem 1`] = `
       My Project
     </button>
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Renders ContextSelectorItem disabled and hovered 1`] = `
-<div>
+<DocumentFragment>
   <li
     role="none"
   >
@@ -26,5 +26,5 @@ exports[`Renders ContextSelectorItem disabled and hovered 1`] = `
       My Project
     </button>
   </li>
-</div>
+</DocumentFragment>
 `;