[test] Spy on observe method to avoid flaky wait for a callback (mui#…

…14640)

packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx

@@ -2,12 +2,16 @@ import * as React from 'react';
 import { createRenderer, waitFor } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { DataGridPro } from '@mui/x-data-grid-pro';
-import { spy } from 'sinon';
+import { spy, restore } from 'sinon';
 import { getColumnValues, sleep } from 'test/utils/helperFn';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<DataGridPro /> - Infnite loader', () => {
+  afterEach(() => {
+    restore();
+  });
+
   const { render } = createRenderer();
 
   it('should call `onRowsScrollEnd` when viewport scroll reaches the bottom', async function test() {
@@ -161,7 +165,7 @@ describe('<DataGridPro /> - Infnite loader', () => {
     expect(getRow.callCount).to.equal(5);
   });
 
-  it('should not call `onRowsScrollEnd` if there are rows pinned to the bottom and the viewport scroll is at the top', async function test() {
+  it('should not observe intersections with the rows pinned to the bottom', async function test() {
     if (isJSDOM) {
       this.skip(); // Needs layout
     }
@@ -178,6 +182,8 @@ describe('<DataGridPro /> - Infnite loader', () => {
     };
 
     const handleRowsScrollEnd = spy();
+    const observe = spy(window.IntersectionObserver.prototype, 'observe');
+
     function TestCase({
       rows,
       pinnedRows,
@@ -186,7 +192,7 @@ describe('<DataGridPro /> - Infnite loader', () => {
       pinnedRows: typeof basePinnedRows;
     }) {
       return (
-        <div style={{ width: 300, height: 300 }}>
+        <div style={{ width: 300, height: 100 }}>
           <DataGridPro
             columns={[{ field: 'brand', width: 100 }]}
             rows={rows}
@@ -198,14 +204,12 @@ describe('<DataGridPro /> - Infnite loader', () => {
     }
     const { container } = render(<TestCase rows={baseRows} pinnedRows={basePinnedRows} />);
     const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!;
-    // after initial render and a scroll event that did not reach the bottom of the grid
-    // the `onRowsScrollEnd` should not be called
-    expect(handleRowsScrollEnd.callCount).to.equal(0);
+    // on the initial render, last row is not visible and the `observe` method is not called
+    expect(observe.callCount).to.equal(0);
     // arbitrary number to make sure that the bottom of the grid window is reached.
     virtualScroller.scrollTop = 12345;
     virtualScroller.dispatchEvent(new Event('scroll'));
-    await waitFor(() => {
-      expect(handleRowsScrollEnd.callCount).to.equal(1);
-    });
+    // observer was attached
+    expect(observe.callCount).to.equal(1);
   });
 });