AnalyticalTable: use portals

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx

@@ -1,5 +1,5 @@
 import { createPassThroughPropsTest } from '@shared/tests/utils';
-import { act, render } from '@testing-library/react';
+import { act, render, screen, fireEvent, cleanStaticAreaAfterEachTest, waitFor } from '@shared/tests';
 import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
 import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior';
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
@@ -142,24 +142,25 @@ const dataTree = [
 ];
 
 describe('AnalyticalTable', () => {
-  test('test Asc desc', () => {
-    const wrapper = mount(<AnalyticalTable data={data} title={'Test'} columns={columns} />);
+  cleanStaticAreaAfterEachTest();
 
-    expect(wrapper.render()).toMatchSnapshot();
+  beforeEach(() => {
+    window = Object.assign(window, { innerWidth: 1440 });
+  });
 
-    // test asc function inside the popover element
-    let component = wrapper.find('ui5-li').at(1).instance();
-    // @ts-ignore
-    component.click();
+  test('test Asc desc', async () => {
+    const { asFragment } = render(<AnalyticalTable data={data} title={'Test'} columns={columns} />);
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
+
+    fireEvent.click(screen.getAllByText('Sort Ascending')[0], { bubbles: false });
+
+    expect(asFragment()).toMatchSnapshot();
 
     // test desc function inside the popover element
-    component = wrapper.find('ui5-li').at(0).instance();
-    // @ts-ignore
-    component.click();
+    fireEvent.click(screen.getAllByText('Sort Descending')[0], { bubbles: false });
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Tree Table', () => {

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -19,6 +19,7 @@ import { Popover } from '@ui5/webcomponents-react/lib/Popover';
 import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign';
 import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
 import React, { CSSProperties, forwardRef, RefObject, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef';
 import { stopPropagation } from '../../../internal/stopPropagation';
 import { ColumnType } from '../types/ColumnType';
@@ -109,7 +110,7 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties,
   const isSortedAscending = column.isSorted && column.isSortedDesc === false;
   const isSortedDescending = column.isSorted && column.isSortedDesc === true;
 
-  return (
+  return createPortal(
     <Popover
       noArrow
       horizontalAlign={PopoverHorizontalAlign.Left}
@@ -158,7 +159,8 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties,
           </StandardListItem>
         )}
       </List>
-    </Popover>
+    </Popover>,
+    document.body
   );
 });
 ColumnHeaderModal.displayName = 'ColumnHeaderModal';