[test] Fix flaky tests (@lauri865) (#16264)

Signed-off-by: Lauri <lauri.lehtmaa@gmail.com> Co-authored-by: Lauri <lauri.lehtmaa@gmail.com> Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
mui · Jan 20, 2025 · 4f4dcc1 · 4f4dcc1
1 parent d824aee
commit 4f4dcc1
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 79 deletions.
diff --git a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
@@ -12,14 +12,7 @@ import {
   GridColDef,
 } from '@mui/x-data-grid-pro';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
-import {
-  createRenderer,
-  fireEvent,
-  screen,
-  createEvent,
-  act,
-  waitFor,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, createEvent, act } from '@mui/internal-test-utils';
 import {
   $,
   $$,
@@ -476,9 +469,7 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
-      await waitFor(() => {
-        expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
-      });
+      expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
     });
 
     it('should pin the column to the right when clicking the "Pin to right" pinning button', async () => {
@@ -487,9 +478,7 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
-      await waitFor(() => {
-        expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
-      });
+      expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
     });
 
     it('should allow to invert the side when clicking on "Pin to right" pinning button on a left pinned column', async () => {
@@ -498,9 +487,7 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
-      await waitFor(() => {
-        expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
-      });
+      expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
       expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
     });
 
@@ -510,9 +497,7 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
-      await waitFor(() => {
-        expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).to.equal(null);
-      });
+      expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).to.equal(null);
       expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
     });
 
@@ -522,9 +507,7 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Unpin' }));
-      await waitFor(() => {
-        expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
-      });
+      expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
     });
 
     describe('with fake timers', () => {

diff --git a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts
@@ -46,7 +46,6 @@ export const useGridColumnMenu = (apiRef: React.RefObject<GridPrivateApiCommunit
           };
         });
         apiRef.current.hidePreferences();
-        apiRef.current.forceUpdate();
       }
     },
     [apiRef, logger],
@@ -93,7 +92,6 @@ export const useGridColumnMenu = (apiRef: React.RefObject<GridPrivateApiCommunit
           columnMenu: newState,
         };
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
 

diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -35,6 +35,7 @@ import {
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../constants/dataGridPropsDefaultValues';
+import { isJSDOM } from '../../../utils/isJSDOM';
 
 type RootProps = Pick<
   DataGridProcessedProps,
@@ -350,10 +351,6 @@ export function useGridDimensions(
   const handleResize = React.useCallback<GridEventListener<'resize'>>(
     (size) => {
       rootDimensionsRef.current = size;
-
-      // jsdom has no layout capabilities
-      const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
-
       if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
         logger.error(
           [

diff --git a/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts
@@ -24,42 +24,27 @@ export const useGridPreferencesPanel = (
 ): void => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
 
-  const hideTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-  const immediateTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-
   /**
    * API METHODS
    */
   const hidePreferences = React.useCallback(() => {
-    logger.debug('Hiding Preferences Panel');
-    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
-    if (preferencePanelState.openedPanelValue) {
+    apiRef.current.setState((state) => {
+      if (!state.preferencePanel.open) {
+        return state;
+      }
+
+      logger.debug('Hiding Preferences Panel');
+      const preferencePanelState = gridPreferencePanelStateSelector(state);
       apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue,
       });
-    }
-    apiRef.current.setState((state) => ({ ...state, preferencePanel: { open: false } }));
-    apiRef.current.forceUpdate();
+      return { ...state, preferencePanel: { open: false } };
+    });
   }, [apiRef, logger]);
 
-  // This is to prevent the preferences from closing when you open a select box or another panel,
-  // The issue is in MUI core V4 => Fixed in V5
-  const doNotHidePanel = React.useCallback(() => {
-    immediateTimeout.current = setTimeout(() => clearTimeout(hideTimeout.current), 0);
-  }, []);
-
-  // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
-  // we can cancel the action if the trigger element still need the panel...
-  const hidePreferencesDelayed = React.useCallback<
-    GridPreferencesPanelApi['hidePreferences']
-  >(() => {
-    hideTimeout.current = setTimeout(hidePreferences, 100);
-  }, [hidePreferences]);
-
   const showPreferences = React.useCallback<GridPreferencesPanelApi['showPreferences']>(
     (newValue, panelId, labelId) => {
       logger.debug('Opening Preferences Panel');
-      doNotHidePanel();
       apiRef.current.setState((state) => ({
         ...state,
         preferencePanel: {
@@ -73,16 +58,15 @@ export const useGridPreferencesPanel = (
       apiRef.current.publishEvent('preferencePanelOpen', {
         openedPanelValue: newValue,
       });
-      apiRef.current.forceUpdate();
     },
-    [logger, doNotHidePanel, apiRef],
+    [logger, apiRef],
   );
 
   useGridApiMethod(
     apiRef,
     {
       showPreferences,
-      hidePreferences: hidePreferencesDelayed,
+      hidePreferences,
     },
     'public',
   );
@@ -131,14 +115,4 @@ export const useGridPreferencesPanel = (
 
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(hideTimeout.current);
-      clearTimeout(immediateTimeout.current);
-    };
-  }, []);
 };
diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -47,6 +47,7 @@ import { gridRowSpanningHiddenCellsOriginMapSelector } from '../rows/gridRowSpan
 import { gridListColumnSelector } from '../listView/gridListViewSelectors';
 import { minimalContentHeight } from '../rows/gridRowsUtils';
 import { gridFocusedVirtualCellSelector } from './gridFocusedVirtualCellSelector';
+import { isJSDOM } from '../../../utils/isJSDOM';
 
 const MINIMUM_COLUMN_WIDTH = 50;
 
@@ -88,15 +89,6 @@ const createScrollCache = (
 });
 type ScrollCache = ReturnType<typeof createScrollCache>;
 
-let isJSDOM = false;
-try {
-  if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
-  }
-} catch (_) {
-  /* ignore */
-}
-
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext() as React.RefObject<PrivateApiWithInfiniteLoader>;
   const rootProps = useGridRootProps();

diff --git a/packages/x-data-grid/src/utils/isJSDOM.ts b/packages/x-data-grid/src/utils/isJSDOM.ts
@@ -0,0 +1,2 @@
+export const isJSDOM =
+  typeof window !== 'undefined' && /jsdom|HappyDOM/.test(window.navigator.userAgent);
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/localization.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/localization.DateCalendar.test.tsx
@@ -4,7 +4,7 @@ import { screen, createRenderer } from '@mui/internal-test-utils';
 import { DateCalendar, dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { createPickerRenderer, AdapterName, availableAdapters } from 'test/utils/pickers';
-import { he, fr } from 'date-fns/locale';
+import { he, fr, enUS } from 'date-fns/locale';
 import 'dayjs/locale/he';
 import 'dayjs/locale/fr';
 import 'moment/locale/he';
@@ -21,7 +21,7 @@ describe('<DateCalendar /> - localization', () => {
       });
 
       it('should display correct week day labels in Hebrew locale ', () => {
-        render(<DateCalendar />);
+        render(<DateCalendar reduceAnimations />);
 
         expect(screen.getByText('א')).toBeVisible();
       });
@@ -31,7 +31,10 @@ describe('<DateCalendar /> - localization', () => {
 
         it('should correctly switch between locale with week starting in Monday and week starting in Sunday', () => {
           const { setProps } = renderWithoutWrapper(
-            <LocalizationProvider dateAdapter={availableAdapters[adapterName]}>
+            <LocalizationProvider
+              dateAdapter={availableAdapters[adapterName]}
+              adapterLocale={adapterName === 'date-fns' ? enUS : 'en-US'}
+            >
               <DateCalendar reduceAnimations />
             </LocalizationProvider>,
           );

diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
@@ -250,7 +250,7 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader<
           </SwitchViewButton>
         )}
       </PickersCalendarHeaderLabelContainer>
-      <Fade in={view === 'day'}>
+      <Fade in={view === 'day'} appear={!reduceAnimations} enter={!reduceAnimations}>
         <PickersArrowSwitcher
           slots={slots}
           slotProps={slotProps}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const isJSDOM =
		typeof window !== 'undefined' && /jsdom\|HappyDOM/.test(window.navigator.userAgent);