Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[test] Spy on observe method to avoid flaky wait for a callback #14640

Merged
merged 3 commits into from
Sep 16, 2024
Merged

[test] Spy on observe method to avoid flaky wait for a callback #14640

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
762830c
Spy on observe method to avoid wait for a callback
arminmeh Sep 16, 2024
c3d9273
Fix test
arminmeh Sep 16, 2024
6fddfb3
Remove only
arminmeh Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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
}
Expand All @@ -178,6 +182,8 @@ describe('<DataGridPro /> - Infnite loader', () => {
};

const handleRowsScrollEnd = spy();
const observe = spy(window.IntersectionObserver.prototype, 'observe');

function TestCase({
rows,
pinnedRows,
Expand All @@ -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}
Expand All @@ -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);
});
});