[test] Mock getComputedStyle to speed up unit tests (#4142)

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

@@ -31,7 +31,11 @@ describe('<DataGridPro /> - Detail panel', () => {
     );
   };
 
-  it('should add a bottom margin to the expanded row', () => {
+  it('should add a bottom margin to the expanded row', function test() {
+    if (isJSDOM) {
+      this.skip(); // Doesn't work with mocked window.getComputedStyle
+    }
+
     render(<TestCase getDetailPanelContent={({ id }) => (id === 0 ? <div /> : null)} />);
     fireEvent.click(screen.getAllByRole('button', { name: 'Expand' })[0]);
     expect(getRow(0)).toHaveComputedStyle({ marginBottom: '500px' });
@@ -74,7 +78,11 @@ describe('<DataGridPro /> - Detail panel', () => {
     expect(getColumnValues(1)[0]).to.equal('2'); // If there was no expanded row, the first rendered would be 5
   });
 
-  it('should position correctly the detail panels', () => {
+  it('should position correctly the detail panels', function test() {
+    if (isJSDOM) {
+      this.skip(); // Doesn't work with mocked window.getComputedStyle
+    }
+
     const rowHeight = 50;
     const evenHeight = rowHeight;
     const oddHeight = 2 * rowHeight;

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

@@ -212,7 +212,11 @@ describe('<DataGridPro /> - Filter', () => {
     expect(onFilterModelChange.callCount).to.equal(0);
     expect(getColumnValues()).to.deep.equal([]);
 
-    const select = screen.queryByRole('combobox', { name: 'Logic operator' });
+    // The first combo is hidden and we include hidden elements to make the query faster
+    // https://github.com/testing-library/dom-testing-library/issues/820#issuecomment-726936225
+    const select = screen.queryAllByRole('combobox', { name: 'Logic operator', hidden: true })[
+      isJSDOM ? 1 : 0 // https://github.com/testing-library/dom-testing-library/issues/846
+    ];
     fireEvent.change(select, { target: { value: 'or' } });
     expect(onFilterModelChange.callCount).to.equal(1);
     expect(getColumnValues()).to.deep.equal([]);

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

@@ -205,7 +205,11 @@ describe('<DataGridPro /> - Layout', () => {
     expect(document.querySelector('[title="Ordenar"]')).not.to.equal(null);
   });
 
-  it('should support the sx prop', () => {
+  it('should support the sx prop', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip(); // Doesn't work with mocked window.getComputedStyle
+    }
+
     const theme = createTheme({
       palette: {
         primary: {

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

@@ -627,9 +627,9 @@ describe('<DataGridPro /> - Rows', () => {
 
     const TestCase = (props: Partial<DataGridProProps> & { nbRows?: number; nbCols?: number }) => {
       apiRef = useGridApiRef();
-      const data = useData(props.nbRows || 100, props.nbCols || 10);
+      const data = useData(props.nbRows || 10, props.nbCols || 10);
       return (
-        <div style={{ width: 300, height: 300 }}>
+        <div style={{ width: 100, height: 300 }}>
           <DataGridPro
             apiRef={apiRef}
             columns={data.columns}
@@ -642,16 +642,16 @@ describe('<DataGridPro /> - Rows', () => {
     };
 
     it('should allow to disable virtualization', () => {
-      render(<TestCase nbRows={100} nbCols={10} />);
-      expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(100);
-      expect(document.querySelectorAll('[role="cell"]')).to.have.length(100 * 10);
+      render(<TestCase />);
+      expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(10);
+      expect(document.querySelectorAll('[role="cell"]')).to.have.length(10 * 10);
     });
 
     it('should render the correct rows when changing pages', () => {
-      render(<TestCase nbRows={150} nbCols={10} pagination />);
-      expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(100);
+      render(<TestCase pageSize={6} rowsPerPageOptions={[6]} pagination />);
+      expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(6);
       apiRef.current.setPage(1);
-      expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(50);
+      expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(4);
     });
   });
 

packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx

@@ -60,7 +60,9 @@ describe('useGridApiEventHandler', () => {
 
   describe('Timer-based implementation', () => {
     it('should unsubscribe event listeners registered by uncommitted components', async () => {
-      const useGridApiEventHandler = createUseGridApiEventHandler(new TimerBasedCleanupTracking());
+      const useGridApiEventHandler = createUseGridApiEventHandler(
+        new TimerBasedCleanupTracking(50),
+      );
       const unsubscribe = spy();
       const apiRef = {
         current: { subscribeEvent: spy(() => unsubscribe) },
@@ -80,7 +82,7 @@ describe('useGridApiEventHandler', () => {
       expect(apiRef.current.subscribeEvent.callCount).to.equal(2);
 
       unmount();
-      await sleep(1100);
+      await sleep(60);
 
       // Ensure that both event listeners were unsubscribed
       expect(unsubscribe.callCount).to.equal(2);

packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx

@@ -988,7 +988,11 @@ describe('<DataGrid /> - Layout & Warnings', () => {
     });
   });
 
-  it('should allow style customization using the theme', () => {
+  it('should allow style customization using the theme', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip(); // Doesn't work with mocked window.getComputedStyle
+    }
+
     const theme = createTheme({
       components: {
         MuiDataGrid: {
@@ -1028,7 +1032,11 @@ describe('<DataGrid /> - Layout & Warnings', () => {
     expect(window.getComputedStyle(getCell(0, 0)).backgroundColor).to.equal('rgb(0, 128, 0)');
   });
 
-  it('should support the sx prop', () => {
+  it('should support the sx prop', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip(); // Doesn't work with mocked window.getComputedStyle
+    }
+
     const theme = createTheme({
       palette: {
         primary: {

packages/grid/x-data-grid/src/utils/cleanupTracking/TimerBasedCleanupTracking.ts

@@ -6,6 +6,12 @@ const CLEANUP_TIMER_LOOP_MILLIS = 1000;
 export class TimerBasedCleanupTracking implements CleanupTracking {
   timeouts? = new Map<number, NodeJS.Timeout>();
 
+  cleanupTimeout = CLEANUP_TIMER_LOOP_MILLIS;
+
+  constructor(timeout = CLEANUP_TIMER_LOOP_MILLIS) {
+    this.cleanupTimeout = timeout;
+  }
+
   register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void {
     if (!this.timeouts) {
       this.timeouts = new Map<number, NodeJS.Timeout>();
@@ -16,7 +22,7 @@ export class TimerBasedCleanupTracking implements CleanupTracking {
         unsubscribe();
       }
       this.timeouts!.delete(unregisterToken.cleanupToken);
-    }, CLEANUP_TIMER_LOOP_MILLIS);
+    }, this.cleanupTimeout);
 
     this.timeouts!.set(unregisterToken!.cleanupToken, timeout);
   }

test/utils/createDOM.js

@@ -64,6 +64,16 @@ function createDOM() {
         global[key] = dom.window[key];
       }
     });
+
+  // The JSDOM implementation is too slow
+  // https://github.com/jsdom/jsdom/issues/3234
+  window.getComputedStyle = function getComputedStyleMock() {
+    return {
+      getPropertyValue: () => {
+        return undefined;
+      },
+    };
+  };
 }
 
 module.exports = createDOM;