cypress-ag-grid 3.3.2 → 3.3.5

package/cypress/e2e/shared/run-ag-grid-elements-suite.js

@@ -0,0 +1,56 @@
+import { filterOperator } from "../../../src/agGrid/filterOperator.enum";
+
+const agGridSelector = "#myGrid2";
+
+export function runAgGridElementsSuite({ pagePath, versionLabel }) {
+  describe(`ag-grid get elements scenario (${versionLabel})`, () => {
+    beforeEach(() => {
+      cy.visit(pagePath);
+      cy.contains(".example-version", `AG Grid ${versionLabel}`).should("be.visible");
+      cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
+    });
+
+    it("able to update grid cell value", () => {
+      cy.get(agGridSelector).agGridColumnFilterTextFloating({
+        searchCriteria: {
+          columnName: "Make",
+          filterValue: "Porsche",
+          operator: filterOperator.equals,
+        },
+        hasApplyButton: true,
+      });
+
+      const expectedTableBeforeEditing = [
+        { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "72000" },
+        { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
+      ];
+
+      cy.get(agGridSelector)
+        .getAgGridData()
+        .then((tableData) => {
+          cy.agGridValidateRowsSubset(tableData, expectedTableBeforeEditing);
+        });
+
+      cy.get(agGridSelector)
+        .getAgGridElements()
+        .then((tableElements) => {
+          const porscheRow = tableElements.find(
+            (row) => row.Price.innerText === "72000"
+          );
+          const priceCell = porscheRow.Price;
+          cy.wrap(priceCell).dblclick().type("66000{enter}");
+        });
+
+      const expectedTableAfterEditing = [
+        { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "66000" },
+        { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
+      ];
+
+      cy.get(agGridSelector)
+        .getAgGridData()
+        .then((tableData) => {
+          cy.agGridValidateRowsSubset(tableData, expectedTableAfterEditing);
+        });
+    });
+  });
+}

package/cypress/fixtures/cardata.json

@@ -1,21 +1,21 @@
 [
-  { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" },
-  { "Year": "2020", "Make": "Ford", "Model": "Mondeo", "Condition": "excellent", "Price": "32000" },
-  { "Year": "2020", "Make": "Porsche", "Model": "Boxter", "Condition": "good", "Price": "72000" },
-  { "Year": "2020", "Make": "BMW", "Model": "3-series", "Condition": "fair", "Price": "45000" },
-  { "Year": "2020", "Make": "Mercedes", "Model": "GLC300", "Condition": "good", "Price": "53000" },
-  { "Year": "2020", "Make": "Honda", "Model": "Civic", "Condition": "poor", "Price": "22000" },
-  { "Year": "2020", "Make": "Honda", "Model": "Accord", "Condition": "poor", "Price": "32000" },
-  { "Year": "2020", "Make": "Ford", "Model": "Taurus", "Condition": "excellent", "Price": "19000" },
-  { "Year": "2020", "Make": "Hyundai", "Model": "Elantra", "Condition": "good", "Price": "22000" },
-  { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "poor", "Price": "5000" },
-  { "Year": "2020", "Make": "Ford", "Model": "Mondeo", "Condition": "good", "Price": "25000" },
-  { "Year": "2020", "Make": "Porsche", "Model": "Boxter", "Condition": "good", "Price": "99000" },
-  { "Year": "2020", "Make": "BMW", "Model": "3-series", "Condition": "poor", "Price": "32000" },
-  { "Year": "2020", "Make": "Mercedes", "Model": "GLC300", "Condition": "excellent", "Price": "35000" },
-  { "Year": "2011", "Make": "Honda", "Model": "Civic", "Condition": "good", "Price": "9000" },
-  { "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", "Mileage": "12000", "Price": "35000" },
+  { "Year": "2020", "Make": "Ford", "Model": "Mondeo", "Condition": "excellent", "Mileage": "8000", "Price": "32000" },
+  { "Year": "2020", "Make": "Porsche", "Model": "Boxter", "Condition": "good", "Mileage": "30000", "Price": "72000" },
+  { "Year": "2020", "Make": "BMW", "Model": "3-series", "Condition": "fair", "Mileage": "18000", "Price": "45000" },
+  { "Year": "2020", "Make": "Mercedes", "Model": "GLC300", "Condition": "good", "Mileage": "24000", "Price": "53000" },
+  { "Year": "2020", "Make": "Honda", "Model": "Civic", "Condition": "poor", "Mileage": "40000", "Price": "22000" },
+  { "Year": "2020", "Make": "Honda", "Model": "Accord", "Condition": "poor", "Mileage": "42000", "Price": "32000" },
+  { "Year": "2020", "Make": "Ford", "Model": "Taurus", "Condition": "excellent", "Mileage": "5000", "Price": "19000" },
+  { "Year": "2020", "Make": "Hyundai", "Model": "Elantra", "Condition": "good", "Mileage": "28000", "Price": "22000" },
+  { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "poor", "Mileage": "60000", "Price": "5000" },
+  { "Year": "2020", "Make": "Ford", "Model": "Mondeo", "Condition": "good", "Mileage": "15000", "Price": "25000" },
+  { "Year": "2020", "Make": "Porsche", "Model": "Boxter", "Condition": "good", "Mileage": "1000", "Price": "99000" },
+  { "Year": "2020", "Make": "BMW", "Model": "3-series", "Condition": "poor", "Mileage": "52000", "Price": "32000" },
+  { "Year": "2020", "Make": "Mercedes", "Model": "GLC300", "Condition": "excellent", "Mileage": "9000", "Price": "35000" },
+  { "Year": "2011", "Make": "Honda", "Model": "Civic", "Condition": "good", "Mileage": "70000", "Price": "9000" },
+  { "Year": "2020", "Make": "Honda", "Model": "Accord", "Condition": "good", "Mileage": "22000", "Price": "34000" },
+  { "Year": "1990", "Make": "Ford", "Model": "Taurus", "Condition": "excellent", "Mileage": "90000", "Price": "900" },
+  { "Year": "2020", "Make": "Hyundai", "Model": "Elantra", "Condition": "fair", "Mileage": "3500", "Price": "3000" },
+  { "Year": "2020", "Make": "BMW", "Model": "2002", "Condition": "excellent", "Mileage": "4500", "Price": "88001" }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "3.3.2",
+  "version": "3.3.5",
   "description": "Cypress plugin to interact with ag grid",
   "main": "src/index.js",
   "repository": {
@@ -18,12 +18,15 @@
     "cypress aggrid"
   ],
   "scripts": {
-    "test": "npx cypress run --headless --spec cypress/e2e/*.cy.js",
+    "test": "npx cypress run --headless --spec \"cypress/e2e/*.cy.js\"",
+    "test:v33": "npx cypress run --headless --spec \"cypress/e2e/*.v33.cy.js\"",
+    "test:v34": "npx cypress run --headless --spec \"cypress/e2e/*.v34.cy.js\"",
+    "test:v35": "npx cypress run --headless --spec \"cypress/e2e/*.v35.cy.js\"",
     "test:watch": "npx cypress open"
   },
   "author": "Kerry McKeever <kerry@kerrymckeever.com>",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^13.3.0"
+    "cypress": "^15.12.0"
   }
 }

package/src/agGrid/agGridInteractions.js

@@ -20,19 +20,53 @@ export const agGridWaitForAnimation = async (agGridElement) => {
     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;
-      }
-    })
-  );
+  const AG_GRID_ANIMATION_TIMEOUT_MS = 5000;
+  const agGridRootElement = agGridElement.get()[0];
+  const animations = agGridRootElement.getAnimations({ subtree: true });
+
+  const agGridAnimations = animations.filter((animation) => {
+    const animationTarget = animation.effect?.target;
+    if (
+      !animationTarget ||
+      animationTarget.nodeType !== 1 ||
+      !animationTarget.classList
+    ) {
+      return false;
+    }
+
+    const hasAgGridClass = [...animationTarget.classList].some((className) =>
+      className.startsWith("ag-")
+    );
+
+    return (
+      animationTarget === agGridRootElement ||
+      hasAgGridClass
+    );
+  });
+
+  // Filter out infinite animations (e.g. loading spinners) whose .finished
+  // promise never resolves per the Web Animations API spec.
+  const finiteAnimations = agGridAnimations.filter((animation) => {
+    const iterations = animation.effect?.getTiming?.()?.iterations;
+    return iterations !== Infinity;
+  });
+
+  await Promise.race([
+    Promise.all(
+      finiteAnimations.map(async (animation) => {
+        try {
+          await animation.finished;
+        } catch (error) {
+          if (error.name === "AbortError") return;
+          console.error("error", error, error.name);
+          throw error;
+        }
+      })
+    ),
+    new Promise((resolve) => {
+      setTimeout(resolve, AG_GRID_ANIMATION_TIMEOUT_MS);
+    }),
+  ]);
 
   return agGridElement;
 };
@@ -271,28 +305,54 @@ function getFilterColumnButtonElement(
   columnName,
   isFloatingFilter = false
 ) {
-  let columnIndex;
-  if (isFloatingFilter)
+  if (isFloatingFilter) {
     return getColumnHeaderElement(agGridElement, columnName)
       .parents(".ag-header-cell")
-      .then(($ele) => {
-        cy.wrap($ele)
-          .invoke("attr", "aria-colindex")
-          .then((colIndex) => {
-            columnIndex = colIndex;
-          })
-          .then(() => {
-            cy.wrap($ele)
-              .parents(".ag-header-row-column")
-              .siblings(".ag-header-row-column-filter")
-              .find(`.ag-header-cell[aria-colindex=${columnIndex}]`)
-              .find(".ag-floating-filter-button");
-          });
+      .then(($headerCell) => {
+        const columnIndex = $headerCell.attr("aria-colindex");
+        const visibleHeaderCells = $headerCell
+          .closest(".ag-header")
+          .find(".ag-header-row-column .ag-header-cell:visible");
+        const headerPosition = visibleHeaderCells.index($headerCell);
+
+        return cy.get(agGridElement).then(($gridElement) => {
+          const usesV35FloatingFilterRow =
+            $gridElement.find(".ag-header-row-filter").length > 0;
+
+          let floatingFilterButton;
+
+          if (usesV35FloatingFilterRow) {
+            floatingFilterButton = $gridElement.find(
+              `.ag-header-row-filter .ag-header-cell[aria-colindex="${columnIndex}"] .ag-floating-filter-button:visible`
+            );
+
+            if (!floatingFilterButton.length && headerPosition > -1) {
+              floatingFilterButton = $gridElement
+                .find(".ag-header-row-filter .ag-floating-filter-button:visible")
+                .eq(headerPosition);
+            }
+          } else {
+            floatingFilterButton = $gridElement.find(
+              `.ag-header-row-column-filter .ag-header-cell[aria-colindex="${columnIndex}"] .ag-floating-filter-button-button:visible`
+            );
+
+            if (!floatingFilterButton.length && headerPosition > -1) {
+              floatingFilterButton = $gridElement
+                .find(
+                  ".ag-header-row-column-filter .ag-floating-filter-button-button:visible"
+                )
+                .eq(headerPosition);
+            }
+          }
+
+          return cy.wrap(floatingFilterButton.first());
+        });
       });
-  else
+  } else {
     return getColumnHeaderElement(agGridElement, columnName)
       .parent()
       .siblings(".ag-header-cell-filter-button");
+  }
 }
 
 /**
@@ -305,6 +365,9 @@ function filterBySearchTerm(agGridElement, options) {
   const filterValue = options.searchCriteria.filterValue;
   const operator = options.searchCriteria.operator;
   const searchInputIndex = options.searchCriteria.searchInputIndex || 0;
+  const operatorIndex =
+    options.searchCriteria.operatorIndex ??
+    (operator === filterOperator.inRange ? 0 : searchInputIndex);
   const isMultiFilter = options.searchCriteria.isMultiFilter;
   const noMenuTabs = options.noMenuTabs;
 
@@ -319,7 +382,7 @@ function filterBySearchTerm(agGridElement, options) {
       .find(".ag-filter")
       .find(".ag-picker-field-wrapper")
       .filter(":visible")
-      .eq(searchInputIndex);
+      .eq(operatorIndex);
     cy.get(agGridElement).agGridWaitForAnimation();
     elem.click();
     cy.get(agGridElement)
@@ -510,19 +573,73 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
 export function filterBySearchTextColumnFloatingFilter(agGridElement, options) {
   // Check if there are multiple search criteria provided by attempting to access the columnName
   if (!options.searchCriteria.columnName) {
-    options.searchCriteria.forEach((_searchCriteria) => {
-      const _options = populateSearchCriteria(
-        _searchCriteria,
-        options.hasApplyButton,
-        options.noMenuTabs
+    groupFloatingFilterSearchCriteria(
+      normalizeFloatingFilterSearchCriteria(options.searchCriteria)
+    ).forEach((searchCriteriaGroup) => {
+      const criteriaOptions = searchCriteriaGroup.map((_searchCriteria) =>
+        populateSearchCriteria(
+          _searchCriteria,
+          options.hasApplyButton,
+          options.noMenuTabs
+        )
       );
-      _filterBySearchTextColumnFloatingFilter(agGridElement, _options);
+
+      if (criteriaOptions.length === 1) {
+        _filterBySearchTextColumnFloatingFilter(agGridElement, criteriaOptions[0]);
+        return;
+      }
+
+      _filterBySearchTextColumnFloatingFilterGroup(agGridElement, criteriaOptions);
     });
   } else {
     _filterBySearchTextColumnFloatingFilter(agGridElement, options);
   }
 }
 
+function normalizeFloatingFilterSearchCriteria(searchCriteria) {
+  const betweenInputIndexes = new Map();
+
+  return searchCriteria.map((criteria) => {
+    if (
+      criteria.operator !== filterOperator.inRange ||
+      criteria.searchInputIndex !== undefined
+    ) {
+      return criteria;
+    }
+
+    const criteriaKey = `${criteria.columnName}::${criteria.operator}`;
+    const nextInputIndex = betweenInputIndexes.get(criteriaKey) || 0;
+    betweenInputIndexes.set(criteriaKey, nextInputIndex + 1);
+
+    return {
+      ...criteria,
+      searchInputIndex: nextInputIndex,
+    };
+  });
+}
+
+function groupFloatingFilterSearchCriteria(searchCriteria) {
+  const groupedCriteria = [];
+
+  searchCriteria.forEach((criteria) => {
+    const lastGroup = groupedCriteria[groupedCriteria.length - 1];
+
+    if (
+      criteria.operator === filterOperator.inRange &&
+      lastGroup &&
+      lastGroup[0].columnName === criteria.columnName &&
+      lastGroup[0].operator === criteria.operator
+    ) {
+      lastGroup.push(criteria);
+      return;
+    }
+
+    groupedCriteria.push([criteria]);
+  });
+
+  return groupedCriteria;
+}
+
 function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
   cy.get(agGridElement).then((agGridElement) => {
     getFilterColumnButtonElement(
@@ -539,6 +656,37 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
   });
 }
 
+function _filterBySearchTextColumnFloatingFilterGroup(
+  agGridElement,
+  criteriaOptions
+) {
+  cy.get(agGridElement).then((agGridElement) => {
+    getFilterColumnButtonElement(
+      agGridElement,
+      criteriaOptions[0].searchCriteria.columnName,
+      true
+    ).click();
+
+    criteriaOptions.forEach((criteriaOption, index) => {
+      const searchCriteria =
+        index === 0
+          ? criteriaOption.searchCriteria
+          : { ...criteriaOption.searchCriteria, operator: undefined };
+
+      filterBySearchTerm(agGridElement, {
+        ...criteriaOption,
+        searchCriteria,
+      });
+    });
+
+    applyColumnFilter(
+      agGridElement,
+      criteriaOptions[0].hasApplyButton,
+      criteriaOptions[0].noMenuTabs
+    );
+  });
+}
+
 /**
  *  * Performs a filter operation on the specified column and selects only the provided filterValue
  * @param agGridElement The get() selector for which ag grid table you wish to retrieve.

package/src/index.d.ts

@@ -119,7 +119,11 @@ interface agGridColumnFilterSearchCriteriaOptionsWithOperator extends agGridColu
   operator?: string
 }
 
-interface agGridColumnFilterSearchCriteriaOptionsWithMultiFilter extends agGridColumnFilterSearchCriteriaOptionsWithOperator {
-  /** Use if floating filter is multiselect checkboxes vs free form input */
-  isMultiFilter?: boolean
-}
+interface agGridColumnFilterSearchCriteriaOptionsWithMultiFilter extends agGridColumnFilterSearchCriteriaOptionsWithOperator {
+  /** Index of which visible filter input to use when the floating filter renders multiple inputs */
+  searchInputIndex?: number
+  /** Index of which visible operator dropdown to use when the floating filter renders multiple conditions */
+  operatorIndex?: number
+  /** Use if floating filter is multiselect checkboxes vs free form input */
+  isMultiFilter?: boolean
+}