Cypress component test that reorders grid rows does not trigger onRowOrderChange handler.

[mschaefer-gresham]

Order ID or Support key 💳 (optional)

45466

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I can write a Cypress component test that moves the grid rows, but it doesn't fire the onRowOrderChange handler. Here is a CodeSandbox that contains my Cypress test. But the test is not runnable from inside CodeSandbox (as far as I know).

https://codesandbox.io/s/data-grid-community-forked-dg62qx?file=/src/App.cy.tsx

What am I missing? Any help you can provide is much appreciated!

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 19.3.0 - ~/.nvm/versions/node/v19.3.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v19.3.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Edge: Not Found
    Firefox: 114.0.2
    Safari: 16.5.1

[cherniavskii]

Hi @mschaefer-gresham
Can you reproduce this issue outside of Cypress?
This sounds similar to #6165

[mschaefer-gresham]

@cherniavskii I added 1000 rows to my test and the handler gets called if I manually drag a row many hundred rows away. This highlights a separate issue though - it's extremely painful to drag a row to a location that is not visible. It's hard to get the scroll started, and then it moves very slowly through the rows.

[mschaefer-gresham]

I figured this out:

it.only('should render grid in correct order after drag-n-drop', () => {
      cy.get('[data-testid="DragIcon"]:first')
          .trigger('dragstart')
          .trigger('dragenter')
          .trigger('dragleave');

      cy.get('[data-testid="DragIcon"]:last')
          .trigger('dragenter')
          .trigger('dragover')
          .trigger('drop');
 });