@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Dropdown } from '../Dropdown';
 import { DropdownPosition, DropdownDirection } from '../dropdownConstants';
@@ -8,7 +9,6 @@ import { InternalDropdownItem } from '../InternalDropdownItem';
 import { DropdownSeparator } from '../DropdownSeparator';
 import { DropdownToggle } from '../DropdownToggle';
 import { KebabToggle } from '../KebabToggle';
-import userEvent from '@testing-library/user-event';
 
 const dropdownItems = [
   <InternalDropdownItem key="link">Link</InternalDropdownItem>,
@@ -30,25 +30,25 @@ const dropdownItems = [
 
 describe('Dropdown', () => {
   test('regular', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown dropdownItems={dropdownItems} toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>} />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('right aligned', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         position={DropdownPosition.right}
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('alignment breakpoints', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         alignments={{
@@ -63,22 +63,22 @@ describe('Dropdown', () => {
         isOpen
       />
     );
-    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dropup', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dropup + right aligned', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
@@ -86,11 +86,11 @@ describe('Dropdown', () => {
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('expanded', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         isOpen
@@ -98,11 +98,11 @@ describe('Dropdown', () => {
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('primary', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         toggle={
@@ -112,55 +112,55 @@ describe('Dropdown', () => {
         }
       />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('basic', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
         <div>BASIC</div>
       </Dropdown>
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 describe('KebabToggle', () => {
   test('regular', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         aria-label="Dropdown button"
         dropdownItems={dropdownItems}
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('right aligned', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         position={DropdownPosition.right}
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dropup', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dropup + right aligned', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
@@ -168,11 +168,11 @@ describe('KebabToggle', () => {
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('expanded', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown
         aria-label="Dropdown button"
         dropdownItems={dropdownItems}
@@ -180,21 +180,23 @@ describe('KebabToggle', () => {
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('plain', () => {
-    render(<Dropdown dropdownItems={dropdownItems} isPlain toggle={<KebabToggle id="Dropdown Toggle" />} />);
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(
+      <Dropdown dropdownItems={dropdownItems} isPlain toggle={<KebabToggle id="Dropdown Toggle" />} />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('basic', () => {
-    render(
+    const { asFragment } = render(
       <Dropdown isOpen toggle={<KebabToggle id="Dropdown Toggle" />}>
         <div>BASIC</div>
       </Dropdown>
     );
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
@@ -229,7 +231,7 @@ describe('API', () => {
         <div>Children items</div>
       </Dropdown>
     );
-    expect(myMock).toBeCalledWith(
+    expect(myMock).toHaveBeenCalledWith(
       'Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered'
     );
   });
@@ -244,7 +246,7 @@ describe('API', () => {
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('children only, no console ', () => {
@@ -255,6 +257,6 @@ describe('API', () => {
         <div>Children items</div>
       </Dropdown>
     );
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 });

package/src/components/Dropdown/__tests__/DropdownGroup.test.tsx

@@ -4,7 +4,7 @@ import { DropdownGroup } from '../DropdownGroup';
 
 describe('dropdown groups', () => {
   test('basic render', () => {
-    const view = render(<DropdownGroup label="Group 1">Something</DropdownGroup>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DropdownGroup label="Group 1">Something</DropdownGroup>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Dropdown/__tests__/DropdownToggle.test.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { DropdownToggle } from '../DropdownToggle';
 import { DropdownContext } from '../dropdownConstants';
 
-describe('DropdownToggleCheckbox', () => {
+describe('DropdownToggle', () => {
   describe('API', () => {
     test('click on closed', () => {
       const mockToggle = jest.fn();
@@ -46,12 +45,12 @@ describe('DropdownToggleCheckbox', () => {
         }
       });
       const mockToggle = jest.fn();
-      const view = render(
+      const { unmount } = render(
         <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
       );
-      view.unmount();
+      unmount();
       mousedown({ target: document } as any);
       expect(mockToggle.mock.calls).toHaveLength(0);
       expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function));
@@ -68,12 +67,12 @@ describe('DropdownToggleCheckbox', () => {
         }
       });
       const mockToggle = jest.fn();
-      const view = render(
+      const { unmount } = render(
         <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
       );
-      view.unmount();
+      unmount();
       touchstart({ target: document } as any);
       expect(mockToggle.mock.calls).toHaveLength(0);
       expect(document.removeEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
@@ -82,34 +81,34 @@ describe('DropdownToggleCheckbox', () => {
 
   describe('state', () => {
     test('hover', () => {
-      const view = render(
+      const { asFragment } = render(
         <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('active', () => {
-      const view = render(
+      const { asFragment } = render(
         <DropdownToggle id="Dropdown Toggle" isActive parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('focus', () => {
-      const view = render(
+      const { asFragment } = render(
         <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('button variant - primary', () => {
-      render(
+      const { asFragment } = render(
         <DropdownToggle id="Dropdown Toggle" toggleVariant="primary" parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
@@ -117,12 +116,12 @@ describe('DropdownToggleCheckbox', () => {
 
       const button = screen.getByRole('button');
 
-      expect(button.className).toContain('primary');
-      expect(button.outerHTML).toMatchSnapshot();
+      expect(button).toHaveClass('pf-m-primary');
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('button variant - secondary', () => {
-      render(
+      const { asFragment } = render(
         <DropdownToggle id="Dropdown Toggle" toggleVariant="secondary" parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
@@ -130,12 +129,12 @@ describe('DropdownToggleCheckbox', () => {
 
       const button = screen.getByRole('button');
 
-      expect(button.className).toContain('secondary');
-      expect(button.outerHTML).toMatchSnapshot();
+      expect(button).toHaveClass('pf-m-secondary');
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('button variant - plain with text', () => {
-      render(
+      const { asFragment } = render(
         <DropdownToggle id="Dropdown Toggle" isText isPlain parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
@@ -143,20 +142,19 @@ describe('DropdownToggleCheckbox', () => {
 
       const button = screen.getByRole('button');
 
-      expect(button.className).toContain('text');
-      expect(button.className).toContain('plain');
-      expect(button.outerHTML).toMatchSnapshot();
+      expect(button).toHaveClass('pf-m-text');
+      expect(button).toHaveClass('pf-m-plain');
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('action split button - renders primary variant', () => {
-      render(
+      const { asFragment } = render(
         <DropdownToggle
           id="Dropdown Toggle"
           toggleVariant="primary"
           splitButtonItems={[<div key="1">test</div>]}
           splitButtonVariant="action"
           parentRef={document.createElement('div')}
-          data-testid="test-id"
         >
           Dropdown
         </DropdownToggle>
@@ -165,17 +163,16 @@ describe('DropdownToggleCheckbox', () => {
       const dropdownToggle = screen.getByRole('button').parentElement;
 
       expect(dropdownToggle).toHaveClass('pf-m-primary');
-      expect(dropdownToggle.outerHTML).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('split button - does not render primary variant', () => {
-      render(
+      const { asFragment } = render(
         <DropdownToggle
           id="Dropdown Toggle"
           toggleVariant="primary"
           splitButtonItems={[<div key="0">test</div>]}
           parentRef={document.createElement('div')}
-          data-testid="test-id"
         >
           Dropdown
         </DropdownToggle>
@@ -184,11 +181,11 @@ describe('DropdownToggleCheckbox', () => {
       const dropdownToggle = screen.getByRole('button').parentElement;
 
       expect(dropdownToggle).not.toHaveClass('pf-m-primary');
-      expect(dropdownToggle.outerHTML).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('class changes', () => {
-      const view = render(
+      const { asFragment } = render(
         <DropdownContext.Provider
           value={{
             toggleTextClass: 'some-test-class',
@@ -200,7 +197,7 @@ describe('DropdownToggleCheckbox', () => {
           </DropdownToggle>
         </DropdownContext.Provider>
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 });

package/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx

@@ -1,21 +1,23 @@
 import * as React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { DropdownToggleAction } from '../DropdownToggleAction';
 
 test('renders with text', () => {
-  const view = render(<DropdownToggleAction id="action" aria-label="action" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<DropdownToggleAction id="action" aria-label="action" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('isDisabled', () => {
-  const view = render(<DropdownToggleAction id="action" aria-label="action" isDisabled />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<DropdownToggleAction id="action" aria-label="action" isDisabled />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('passing class', () => {
-  const view = render(<DropdownToggleAction id="action" aria-label="action" className="abc" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<DropdownToggleAction id="action" aria-label="action" className="abc" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('checkbox passes value and event to onClick handler', () => {
@@ -24,5 +26,5 @@ test('checkbox passes value and event to onClick handler', () => {
   render(<DropdownToggleAction id="action" aria-label="acton" onClick={onClickMock} />);
 
   userEvent.click(screen.getByRole('button'));
-  expect(onClickMock).toBeCalled();
+  expect(onClickMock).toHaveBeenCalled();
 });

package/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx

@@ -12,42 +12,46 @@ const props = {
 
 describe('DropdownToggleCheckbox', () => {
   test('controlled', () => {
-    render(<DropdownToggleCheckbox isChecked id="check" aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<DropdownToggleCheckbox isChecked id="check" aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('uncontrolled', () => {
-    render(<DropdownToggleCheckbox id="check" aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<DropdownToggleCheckbox id="check" aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with text', () => {
-    render(
+    const { asFragment } = render(
       <DropdownToggleCheckbox id="check" isDisabled aria-label="check">
         Some text
       </DropdownToggleCheckbox>
     );
-    expect(screen.getByRole('checkbox').parentElement.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isDisabled', () => {
-    render(<DropdownToggleCheckbox id="check" isDisabled aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<DropdownToggleCheckbox id="check" isDisabled aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('3rd state', () => {
-    render(<DropdownToggleCheckbox id="check" isChecked={null} aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<DropdownToggleCheckbox id="check" isChecked={null} aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passing class', () => {
-    render(<DropdownToggleCheckbox label="label" className="class-123" id="check" isChecked aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(
+      <DropdownToggleCheckbox label="label" className="class-123" id="check" isChecked aria-label="check" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passing HTML attribute', () => {
-    render(<DropdownToggleCheckbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(
+      <DropdownToggleCheckbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('checkbox passes value and event to onChange handler', () => {

package/src/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx

@@ -7,7 +7,7 @@ import { DropdownArrowContext } from '../../dropdownConstants';
 
 describe('DropdownItem', () => {
   it('should match snapshot', () => {
-    const view = render(
+    const { asFragment } = render(
       <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
         <DropdownItem
           children={<>ReactNode</>}
@@ -26,6 +26,6 @@ describe('DropdownItem', () => {
         />
       </DropdownArrowContext.Provider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx

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

package/src/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx

@@ -7,11 +7,11 @@ import { DropdownArrowContext } from '../../dropdownConstants';
 
 describe('DropdownSeparator', () => {
   it('should match snapshot', () => {
-    const view = render(
+    const { asFragment } = render(
       <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
         <DropdownSeparator className={"''"} onClick={() => console.log('clicked')} />
       </DropdownArrowContext.Provider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx

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

package/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownItem should match snapshot 1`] = `
-<div>
+<DocumentFragment>
   <div>
     ReactNode
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownMenu should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-m-align-right ''"
     role="menu"
@@ -12,5 +12,5 @@ exports[`DropdownMenu should match snapshot (auto-generated) 1`] = `
       ReactNode
     </div>
   </ul>
-</div>
+</DocumentFragment>
 `;

package/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownSeparator should match snapshot 1`] = `
-<div>
+<DocumentFragment>
   <li
     role="separator"
   >
@@ -10,5 +10,5 @@ exports[`DropdownSeparator should match snapshot 1`] = `
       role="separator"
     />
   </li>
-</div>
+</DocumentFragment>
 `;

package/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KebabToggle should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     aria-label="'Actions'"
@@ -23,5 +23,5 @@ exports[`KebabToggle should match snapshot (auto-generated) 1`] = `
       />
     </svg>
   </button>
-</div>
+</DocumentFragment>
 `;