[DataGrid] Fix resize issue

[dtassone]

No description provided.

[oliviertassinari]

How do you reproduce the issue?

[dtassone]

How do you reproduce the issue?

Open a story, hide the addons panel => rows are not extended

[oliviertassinari]

Cool, I could reproduce the bug. Here is a test case for it with our test stack:

import * as React from 'react';
import { createClientRender, act } from 'test/utils';
import { XGrid } from "@material-ui/x-grid";
import { expect } from 'chai';

async function sleep(duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration)
  });
}

describe('<XGrid />', () => {
  const render = createClientRender();

  it('should resize the width of the columns', async () => {
    // jsdom doesn't support layouting
    if (/jsdom/.test(window.navigator.userAgent)) {
      this.skip();
    }

    const App = (props) => {
      const { width = 300 } = props
      return (
        <div style={{ width, height: 300 }}>
          <XGrid
            rows={[
              {
                brand: "Nike",
              },
            ]}
            columns={[
              { field: "id", hide: true },
              { field: "brand", width: 100 },
            ]}
          />
        </div>
      );
    }

    const { container, setProps } = render(<App />);
    let rect;
    rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
    expect(rect.width).to.equal(300 - 2);
    setProps({ width: 400 });
    act(() => {
      window.dispatchEvent(new window.Event('resize', {}));
    });
    await sleep(200);
    rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
    expect(rect.width).to.equal(400 - 2);
  });
});

It runs in 300ms, but spend 200ms waiting for the size to update.

What about we work on adding it?

[oliviertassinari]

Not seeing the fix work on https://deploy-preview-96--muix-storybook.netlify.app/ is frustrating.

You can play with my setup on oliviertassinari/material-ui@9a3c143

[dtassone]

Cool, I could reproduce the bug. Here is a test case for it with our test stack:

import * as React from 'react';
import { createClientRender, act } from 'test/utils';
import { XGrid } from "@material-ui/x-grid";
import { expect } from 'chai';

async function sleep(duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration)
  });
}

describe('<XGrid />', () => {
  const render = createClientRender();

  it('should resize the width of the columns', async () => {
    // jsdom doesn't support layouting
    if (/jsdom/.test(window.navigator.userAgent)) {
      this.skip();
    }

    const App = (props) => {
      const { width = 300 } = props
      return (
        <div style={{ width, height: 300 }}>
          <XGrid
            rows={[
              {
                brand: "Nike",
              },
            ]}
            columns={[
              { field: "id", hide: true },
              { field: "brand", width: 100 },
            ]}
          />
        </div>
      );
    }

    const { container, setProps } = render(<App />);
    let rect;
    rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
    expect(rect.width).to.equal(300 - 2);
    setProps({ width: 400 });
    act(() => {
      window.dispatchEvent(new window.Event('resize', {}));
    });
    await sleep(200);
    rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
    expect(rect.width).to.equal(400 - 2);
  });
});

It runs in 300ms, but spend 200ms waiting for the size to update.

What about we work on adding it?

We can do in a bit, I'm doing some refactoring now on pagination
Not sure why it doesn't work, I need to investigate again

[oliviertassinari]

We can do in a bit, I'm doing some refactoring now on pagination
Not sure why it doesn't work, I need to investigate again

I didn't fully understand what you meant.

• "We can do it in a bit" are you referring to porting the testing stack from the main repository to here and adding the test case I have shared as the first one, then migrating the puppeteer tests that are possible? Sounds like a perfect plan.
• "Not sure why it doesn't work" are you referring to the sync issue with storybook? The solution is to apply the approach of the main repo [RFC] Use Babel #50.