cypress-ag-grid 3.2.1 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "3.2.1",
+  "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) => {
@@ -100,6 +146,14 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
     return ele.length;
   });
 
+  // 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) => {
+      return row.indexOf(cell) === index;
+    });
+  });
+
   if (!allRows.length) rows = [];
   else {
     rows = allRows
@@ -116,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) => {
@@ -170,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'.");
   }
@@ -257,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)
@@ -291,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);
     });
   }
 
@@ -306,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();
   }
 }
 
@@ -335,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();
     });
 }
 
@@ -556,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);