cypress-ag-grid 3.3.1 → 3.3.4

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.1",
+  "version": "3.3.4",
   "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

@@ -22,8 +22,15 @@ export const agGridWaitForAnimation = async (agGridElement) => {
 
   const animations = agGridElement.get()[0].getAnimations({ subtree: true });
 
+  // Filter out infinite animations (e.g. loading spinners) whose .finished
+  // promise never resolves per the Web Animations API spec.
+  const finiteAnimations = animations.filter((animation) => {
+    const iterations = animation.effect?.getTiming?.()?.iterations;
+    return iterations !== Infinity;
+  });
+
   await Promise.all(
-    animations.map(async (animation) => {
+    finiteAnimations.map(async (animation) => {
       try {
         await animation.finished;
       } catch (error) {
@@ -244,16 +251,22 @@ function getMenuTabElement(agGridElement, tab) {
  * @param tab
  */
 function selectMenuTab(agGridElement, tab) {
-  getMenuTabElement(agGridElement, tab).then(($ele) => {
-    cy.wrap($ele)
-      .parent("span")
-      .invoke("attr", "class")
-      .then(($attr) => {
-        if (!$attr.includes("selected")) {
-          cy.wrap($ele).click();
-        }
+  cy.get(agGridElement).then((agGr) => {
+    if (agGr.find('.ag-menu-list').length > 0) {
+      cy.log('Menu uses a list, not tabs');
+    } else {
+      getMenuTabElement(agGridElement, tab).then(($ele) => {
+        cy.wrap($ele)
+          .parent("span")
+          .invoke("attr", "class")
+          .then(($attr) => {
+            if (!$attr.includes("selected")) {
+              cy.wrap($ele).click();
+            }
+          });
       });
-  });
+    }
+  })
 }
 
 /**
@@ -265,28 +278,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-menu-button");
+      .siblings(".ag-header-cell-filter-button");
+  }
 }
 
 /**
@@ -299,13 +338,16 @@ 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;
 
   // Navigate to the filter tab
-  if (!noMenuTabs) {
-    selectMenuTab(agGridElement, filterTab.filter);
-  }
+  // if (!noMenuTabs) {
+  //   selectMenuTab(agGridElement, filterTab.filter);
+  // }
 
   if (operator) {
     const elem = cy
@@ -313,7 +355,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)
@@ -323,15 +365,20 @@ function filterBySearchTerm(agGridElement, options) {
       .click();
   }
   // Input filter term and allow grid a moment to render the results
-  cy.get(agGridElement)
-    .find(".ag-popup-child")
-    .find("input")
-    .filter(":visible")
-    .as("filterInput");
+  if (
+    operator !== filterOperator.blank &&
+    operator !== filterOperator.notBlank
+  ) {
+    cy.get(agGridElement)
+      .find(".ag-popup-child")
+      .find("input")
+      .filter(":visible")
+      .as("filterInput");
+  }
 
   // If it's a multi filter, de-select the 'select-all' checkbox
   if (isMultiFilter) {
-    const selectAllText = options.selectAllLocaleText || "Select All";
+    const selectAllText = options.selectAllLocaleText || "(Select All)";
     toggleColumnCheckboxFilter(agGridElement, selectAllText, false, true);
   }
 
@@ -341,7 +388,7 @@ function filterBySearchTerm(agGridElement, options) {
     operator !== filterOperator.notBlank
   ) {
     cy.get("@filterInput").then(($ele) => {
-      cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue);
+      cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue + '{enter}');
     });
   }
 
@@ -359,7 +406,14 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
       .click();
   }
   if (!noMenuTabs) {
-    getMenuTabElement(agGridElement, filterTab.filter).click();
+    cy.get(agGridElement).then((agGr) => {
+      if (agGr.find('.ag-tab').length === 0) {
+        cy.log('Menu uses a list, not tabs');
+        cy.get(agGridElement).agGridWaitForAnimation();
+      } else {
+        getMenuTabElement(agGridElement, filterTab.filter).click();
+      }
+    })
   }
 }
 
@@ -375,9 +429,9 @@ function toggleColumnCheckboxFilter(
   doSelect,
   noMenuTabs = false
 ) {
-  if (!noMenuTabs) {
-    selectMenuTab(agGridElement, filterTab.filter);
-  }
+  // if (!noMenuTabs) {
+  //   selectMenuTab(agGridElement, filterTab.filter);
+  // }
   cy.get(agGridElement)
     .find(".ag-input-field-label")
     .contains(filterValue)
@@ -393,7 +447,7 @@ function populateSearchCriteria(
   searchCriteria,
   hasApplyButton = false,
   noMenuTabs = false,
-  selectAllLocaleText = "Select All"
+  selectAllLocaleText = "(Select All)"
 ) {
   const options = {};
   options.searchCriteria = { ...searchCriteria };
@@ -487,24 +541,78 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
  * @param options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
  * @param options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
  * @param options.noMenuTabs [Optional] True if you use, for example, the community edition of ag-grid, which has no menu tabs
- * @param options.selectAllLocaleText [Optional] Pass in the locale text value of "Select All" for when you are filtering by checkbox - this wil first deselect the "Select All" option before selecting your filter value
+ * @param options.selectAllLocaleText [Optional] Pass in the locale text value of "(Select All)" for when you are filtering by checkbox - this wil first deselect the "(Select All)" option before selecting your filter value
  */
 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(
@@ -521,6 +629,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.
@@ -554,7 +693,7 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
       agGridElement,
       options.searchCriteria.columnName
     ).click();
-    const selectAllText = options.selectAllLocaleText || "Select All";
+    const selectAllText = options.selectAllLocaleText || "(Select All)";
     toggleColumnCheckboxFilter(
       agGridElement,
       selectAllText,

package/src/agGrid/filterOperator.enum.js

@@ -11,5 +11,5 @@ export const filterOperator = {
   greaterThanOrEquals: "Greater than or equal to",
   inRange: "Between",
   blank: "Blank",
-  notBlank: "Not Blank"
+  notBlank: "Not blank"
 }