Ag Grid swallows click during refreshing (Server Side Row Model)

Question

Basically, our grid fetch data every 6 seconds (purge=false). If user clicks on row during that tiny 500ms window between 6th and 7th second, grid will swallow that click and row will not be selected, even if clicked cell has focus. When I try to replicate that behaviour through code with agGrid Api setSelected method, everything works like a charm.

It is problem for Cypress testing, they are flaky because of unpredictable click behaviour - if it happens between that 500ms window, click will be ignored.

export function selectRow(
  value: string,
) {
  getRow(value).then(($el1) => {
    const isSelectedBeforeClick = $el1.closest('.ag-row').hasClass('ag-row-selected');
    getRow(value)
      .click()
      .then(() => {
        getRow(value).then(($el2) => {
          const isSelectedAfterClick = $el2.closest('.ag-row').hasClass('ag-row-selected');
          if (isSelectedBeforeClick === isSelectedAfterClick) {
            cy.wait(1000);
            getRow(value).click();
          }
        });
      });
  });

function getRow(value){
cy.get('my-grid [col-id="test"]').contains(value)
}

With this function it always click on row, but now i have another problem - if there were other rows selected, sometimes they are not being deselected with this method(i have rowSelection set to single), even if click was successful at first and retry click didn't happen, so I end up with two instead of one selected row.

Is there a smarter way of doing this, or does anyone know why it happens?

I'm using Angular 14 with Ag Grid version 27

@BryanBurton I've updated the code. I don't have link to repo. with this function, no click is failing, problem is that other rows in grid arent being deselected — Flo Rida
– Flo Rida, Commented May 25, 2024 at 8:56
Ok, which click is "unpredicatable"? There are two. I'm trying to make sense of it. — user22100517
– user22100517, Commented May 25, 2024 at 8:58

user22438867 · Accepted Answer · 2024-05-25 09:36:20Z

3

Another way to ensure the test clicks at the right time is to set up an intercept and wait for the response, then perform the click.

I am reading that the app is performing the fetch at set intervals, so clock() and tick() can control the timing of that.

Ideally I'd like to see more details, but this is roughly the pattern I would try

cy.clock()                         // stop the timer that sends API fetch
cy.intercept(the-url).as('api')    // set up intercept for the reponse
cy.tick(6000)                      // move clock forward, expect api is triggered
cy.wait('@api')                    // wait on the response

cy.contains('my-grid [col-id="test"]', value)
  .parent('.ag-row')
  .should('have.class', 'ag-row-selected')  // retry that cell and it's parent row
                                            // up to 4 seconds for required class

That code should be the simplest Cypress way to make your test predicable with the interval fetches.

WRT to the deselecting of other rows, can give two general pieces of advice without a runnable example

add cypress-real-events and substitute .realClick() - sometimes an app will respond better to the events from this library.
find out if other events need to be triggered along side click, perhaps .trigger('change')
if setSelected is working, invoke it .parent('.ag-row').invoke('setSelected', true, false) (I'm not sure the parameters that apply here, but substitute whatever you found to do the job).

answered May 25, 2024 at 9:36

user22438867

Sign up to request clarification or add additional context in comments.

4 Comments

Flo Rida Over a year ago

Unfortunately, setSelected is only available through Ag Grid api, and I dont have a reference to it in my Cypress tests.

user21982848 Over a year ago

Actually no, that is incorrect - you can expose the API on the window object.

Flo Rida Over a year ago

@Cat.Crimes isn’t that bad practice

user21982848 Over a year ago

Best practice is a passing test.

Collectives™ on Stack Overflow

Ag Grid swallows click during refreshing (Server Side Row Model)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related