cypress-ag-grid 3.2.2 → 3.3.1

package/app/data.json

@@ -18,6 +18,5 @@
         { "year": "1990", "make": "Ford", "model": "Taurus", "condition":"excellent","price": "900" },
         { "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"fair","price": "3000" },
         { "year": "2020", "make": "BMW", "model": "2002", "condition":"excellent","price": "88001" },
-        { "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","price": "" },
-        { "year": "2020", "make": "Toyota", "model": "Celica", "condition": "fair", "price": "35000" }
+        { "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","price": "" }
 ]

package/cypress/e2e/ag-grid-data.cy.js

@@ -38,9 +38,6 @@ const expectedPaginatedTableData = [
     { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
     { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" },
   ],
-  [
-    { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
-  ]
 ];
 
 describe("ag-grid get data scenarios", () => {
@@ -49,31 +46,6 @@ describe("ag-grid get data scenarios", () => {
     cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
   });
 
-  it("verify data when multiple rows are identical", ()=>{
-
-    const expectedTableData = 
-    [
-      { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" },
-      { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "poor", "Price": "5000" },
-      { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" },
-    ]
-    cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
-      searchCriteria: {
-        columnName: "Model",
-        filterValue: "Celica",
-      },
-      selectAllLocaleText: "Select All", // This is optional if you are using localText for ag grid
-      hasApplyButton: true,
-    });
-
-    cy.get(agGridSelector)
-    .getAgGridData()
-    .then((actualTableData) => {
-      cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
-    });
-
-  })
-
   it("verify paginated table data - any order - include all columns", () => {
     cy.get(agGridSelector).agGridValidatePaginatedTable(
       expectedPaginatedTableData

package/cypress/fixtures/cardata.json

@@ -17,6 +17,5 @@
   { "Year": "2020", "Make": "Honda", "Model": "Accord", "Condition": "good", "Price": "34000" },
   { "Year": "1990", "Make": "Ford", "Model": "Taurus", "Condition": "excellent", "Price": "900" },
   { "Year": "2020", "Make": "Hyundai", "Model": "Elantra", "Condition": "fair", "Price": "3000" },
-  { "Year": "2020", "Make": "BMW", "Model": "2002", "Condition": "excellent", "Price": "88001" },
-  { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" }
+  { "Year": "2020", "Make": "BMW", "Model": "2002", "Condition": "excellent", "Price": "88001" }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "3.2.2",
+  "version": "3.3.1",
   "description": "Cypress plugin to interact with ag grid",
   "main": "src/index.js",
   "repository": {

package/src/agGrid/agGridInteractions.js

@@ -1,7 +1,41 @@
 /// <reference types="cypress" />
-import { sort } from "./sort.enum";
-import { filterTab } from "./menuTab.enum";
 import { filterOperator } from "./filterOperator.enum";
+import { filterTab } from "./menuTab.enum";
+import { sort } from "./sort.enum";
+
+function isRowNotDestroyed(rowElement) {
+  const rect = rowElement.getBoundingClientRect();
+  const viewPortRect = rowElement.parentElement.getBoundingClientRect();
+
+  return (
+    rect.top >= viewPortRect.top &&
+    rect.left >= viewPortRect.left &&
+    rect.bottom <= viewPortRect.bottom &&
+    rect.right <= viewPortRect.right
+  );
+}
+
+export const agGridWaitForAnimation = async (agGridElement) => {
+  if (agGridElement.get().length < 1) {
+    throw new Error(`Couldn't find the element ${agGridElement}`);
+  }
+
+  const animations = agGridElement.get()[0].getAnimations({ subtree: true });
+
+  await Promise.all(
+    animations.map(async (animation) => {
+      try {
+        await animation.finished;
+      } catch (error) {
+        if (error.name === "AbortError") return;
+        console.error("error", error, error.name);
+        throw error;
+      }
+    })
+  );
+
+  return agGridElement;
+};
 
 /**
  * Uses the attribute value's index and sorts the data accordingly.
@@ -23,7 +57,8 @@ function sortElementsByAttributeValue(attribute) {
  * @param agGridElement The get() selector for which ag grid table you wish to retrieve.
  * @param options Provide an array of columns you wish to exclude from the table retrieval.
  */
-export const getAgGridData = (agGridElement, options = {}) => {
+export const getAgGridData = async (agGridElement, options = {}) => {
+  await agGridWaitForAnimation(agGridElement);
   return _getAgGrid(agGridElement, options, false);
 };
 
@@ -32,7 +67,8 @@ export const getAgGridData = (agGridElement, options = {}) => {
  * @param agGridElement The get() selector for which ag grid table you wish to retrieve.
  * @param options Provide an array of columns you wish to exclude from the table retrieval.
  */
-export const getAgGridElements = (agGridElement, options = {}) => {
+export const getAgGridElements = async (agGridElement, options = {}) => {
+  await agGridWaitForAnimation(agGridElement);
   return _getAgGrid(agGridElement, options, true);
 };
 
@@ -71,8 +107,18 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
 
   agGridSelectors.forEach((selector) => {
     const _rows = [
-      ...tableElement.querySelectorAll(`${selector}:not(.ag-hidden) .ag-row`),
+      ...tableElement.querySelectorAll(
+        `${selector}:not(.ag-hidden) .ag-row:not(.ag-opacity-zero)`
+      ),
     ]
+      // When animation is enabled, ag-grid destroys rows in 2 phases,
+      // first it runs an animation to place rows to be destroyed just outside
+      // the viewport.
+      // In the second phase those rows are removed from the DOM.
+      // Because we get here AFTER all animations are finished, it is possible,
+      // those rows are still in the DOM, but are not visible.
+      // therefore those rows should be filtered out.
+      .filter(isRowNotDestroyed)
       // Sort rows by their row-index attribute value
       .sort(sortElementsByAttributeValue("row-index"))
       .map((row) => {
@@ -102,11 +148,11 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
 
   // Remove duplicate entries from allRows
   // In some instances we see cell duplication for non-unique rows
-  allRows = allRows.map((row)=>{
-    return row.filter((cell, index)=>{
+  allRows = allRows.map((row) => {
+    return row.filter((cell, index) => {
       return row.indexOf(cell) === index;
-    })
-  })
+    });
+  });
 
   if (!allRows.length) rows = [];
   else {
@@ -124,12 +170,10 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
           })
       );
   }
-
   // if options.rawValues = true, return headers & rows values as arrays instead of mapping as objects
   if (options.valuesArray) {
     return { headers, rows };
   }
-
   // return structured object from headers and rows variables
   return rows.map((row) =>
     row.reduce((acc, curr, idx) => {
@@ -178,11 +222,10 @@ export function sortColumnBy(agGridElement, columnName, sortDirection) {
       .then((value) => {
         cy.log(`sort: ${sortDirection}`);
         if (!value.includes(`ag-header-cell-sorted-${sortDirection}`)) {
-          getColumnHeaderElement(agGridElement, columnName).click().wait(250);
+          getColumnHeaderElement(agGridElement, columnName).click();
           sortColumnBy(agGridElement, columnName, sortDirection);
         }
-      })
-      .wait(100);
+      });
   } else {
     throw new Error("sortDirection must be either 'asc' or 'desc'.");
   }
@@ -265,20 +308,19 @@ function filterBySearchTerm(agGridElement, options) {
   }
 
   if (operator) {
-    cy.get(agGridElement)
+    const elem = cy
+      .get(agGridElement)
       .find(".ag-filter")
       .find(".ag-picker-field-wrapper")
       .filter(":visible")
-      .eq(searchInputIndex)
-      .click();
+      .eq(searchInputIndex);
+    cy.get(agGridElement).agGridWaitForAnimation();
+    elem.click();
     cy.get(agGridElement)
-      .find(".ag-popup")
+      .find(".ag-popup .ag-list")
       .find("span")
       .contains(operator)
-      .then(($ele) => {
-        //Have to use the unwrapped element, since Cypress .click() event does not appropriately select the operator
-        $ele.trigger("click");
-      });
+      .click();
   }
   // Input filter term and allow grid a moment to render the results
   cy.get(agGridElement)
@@ -299,7 +341,7 @@ function filterBySearchTerm(agGridElement, options) {
     operator !== filterOperator.notBlank
   ) {
     cy.get("@filterInput").then(($ele) => {
-      cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue).wait(500);
+      cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue);
     });
   }
 
@@ -314,11 +356,10 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
     cy.get(agGridElement)
       .find(".ag-filter-apply-panel-button")
       .contains("Apply")
-      .click()
-      .wait(500);
+      .click();
   }
   if (!noMenuTabs) {
-    getMenuTabElement(agGridElement, filterTab.filter).click().wait(500);
+    getMenuTabElement(agGridElement, filterTab.filter).click();
   }
 }
 
@@ -343,8 +384,8 @@ function toggleColumnCheckboxFilter(
     .siblings("div")
     .find("input")
     .then(($ele) => {
-      if (doSelect) cy.wrap($ele).check().wait(500);
-      else cy.wrap($ele).uncheck().wait(500);
+      if (doSelect) cy.wrap($ele).check();
+      else cy.wrap($ele).uncheck();
     });
 }
 
@@ -564,7 +605,8 @@ export function toggleColumnFromSideBar(agGridElement, columnName, doRemove) {
       if (!$columnFilterInputField.is(":visible")) {
         cy.get(".ag-side-buttons").find("span").contains("Columns").click();
       }
-      cy.wrap($columnFilterInputField).clear().wait(250).type(columnName);
+      cy.get(agGridElement).agGridWaitForAnimation();
+      cy.wrap($columnFilterInputField).clear().type(columnName);
       cy.get(".ag-column-select-column-label")
         .contains(columnName)
         .parent()

package/src/index.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import {getAgGridData, getAgGridElements, sortColumnBy} from "./agGrid/agGridInteractions"
+import {agGridWaitForAnimation, getAgGridData, getAgGridElements, sortColumnBy} from "./agGrid/agGridInteractions"
 import {validateTablePages, validateTableExactOrder, validateEmptyTable, validateTableRowSubset} from "./agGrid/agGridValidations"
 import {filterByCheckboxColumnMenu, filterBySearchTextColumnFloatingFilter, filterBySearchTextColumnMenu, toggleColumnFromSideBar, pinColumn} from "./agGrid/agGridInteractions";
 
@@ -17,4 +17,6 @@ Cypress.Commands.add('agGridValidateRowsSubset', {prevSubject: 'optional'}, vali
 Cypress.Commands.add('agGridValidateEmptyTable', {prevSubject: 'optional'}, validateEmptyTable)
 
 Cypress.Commands.add('agGridToggleColumnsSideBar', {prevSubject: true}, toggleColumnFromSideBar)
-Cypress.Commands.add('agGridPinColumn', {prevSubject: true}, pinColumn)
+Cypress.Commands.add('agGridPinColumn', {prevSubject: true}, pinColumn)
+
+Cypress.Commands.add('agGridWaitForAnimation', { prevSubject: 'element' }, agGridWaitForAnimation);