The getAgGridData function fails to include the last row of the table

[karuppusamy-blunav]

Expected Behavior

The getAgGridData function should return data for all the rows in a table.

Current Behavior

While running the provided command, the getAgGridData function fails to include the last row of the table.

cy.get("#ag-grid").getAgGridData()

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Set up an Ag-Grid table with more than three rows.
2. Create a test that retrieves all the data from the Ag-Grid table.
3. After executing the getAgGridData function, examine the returned data.

Failure Information

I have conducted further analysis and discovered that the isRowNotDestroyed filter is failing for the last row. Specifically, the condition rect.bottom <= viewPortRect.bottom within the isRowNotDestroyed function is not holding true for the last row.

The values of the rect.bottom and viewPortRect.bottom are,

rect.bottom: 822.9000244140625
viewPortRect.bottom: 822.8999938964844

[unclecheese]

FWIW this is the fix I'm using just to get the tests passing. Just bump the height of the containers by 1px:

  cy.get(".ag-theme-my-theme").then(($el) => {
    const tableElement = $el[0].querySelector(".ag-root")
    if (!tableElement) {
      return
    }
    const centerEl = tableElement.querySelector<HTMLDivElement>(
      ".ag-center-cols-container",
    )
    const pinnedEl = tableElement.querySelector<HTMLDivElement>(
      ".ag-pinned-left-cols-container",
    )
    if (centerEl) {
      const centerHeight = Number(centerEl.style.height.replace(/px$/, ""))
      centerEl.style.height = `${centerHeight + 1}px`
    }
    if (pinnedEl) {
      const pinnedHeight = Number(pinnedEl.style.height.replace(/px$/, ""))
      pinnedEl.style.height = `${pinnedHeight + 1}px`
    }
  })

There's probably a more succinct way to do this with jQuery.

[karuppusamy-blunav]

FWIW this is the fix I'm using just to get the tests passing. Just bump the height of the containers by 1px:

  cy.get(".ag-theme-my-theme").then(($el) => {
    const tableElement = $el[0].querySelector(".ag-root")
    if (!tableElement) {
      return
    }
    const centerEl = tableElement.querySelector<HTMLDivElement>(
      ".ag-center-cols-container",
    )
    const pinnedEl = tableElement.querySelector<HTMLDivElement>(
      ".ag-pinned-left-cols-container",
    )
    if (centerEl) {
      const centerHeight = Number(centerEl.style.height.replace(/px$/, ""))
      centerEl.style.height = `${centerHeight + 1}px`
    }
    if (pinnedEl) {
      const pinnedHeight = Number(pinnedEl.style.height.replace(/px$/, ""))
      pinnedEl.style.height = `${pinnedHeight + 1}px`
    }
  })

There's probably a more succinct way to do this with jQuery.

Thanks for the solution, it was working as expected! I have attached the simplified version of it.

  cy.get("#ag-grid").within(() => {
     cy.get(".ag-center-cols-container").then((el) => {
       el.height((_i, h) => h + 1);
     });
     cy.get(".ag-pinned-left-cols-container").then((el) => {
       el.height((_i, h) => h + 1);
     });
  });