cypress-ag-grid 1.1.0 → 1.3.0

package/cypress/integration/ag-grid-spec.js

@@ -128,7 +128,7 @@ describe("ag-grid scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData, true);
       });
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Cypress plugin to interact with ag grid",
   "main": "src/index.js",
   "repository": {
@@ -24,6 +24,6 @@
   "author": "Kerry McKeever <kerry@kerrymckeever.com>",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "6.2.1"
+    "cypress": "^8.5.0"
   }
 }

package/src/agGrid/agGridInteractions.js

@@ -5,13 +5,14 @@ import { filterTab } from "./menuTab.enum";
 /**
  * Uses the attribute value's index and sorts the data accordingly.
  * For our purposes, we are getting the attribute with the items' indices and sorting accordingly.
+ * 
  * @param {*} index 
  * @returns 
  */
-function sortElementsByAttributeIndex(index) {
+function sortElementsByAttributeValue(attribute) {
   return (a, b) => {
-    const contentA = parseInt(a.attributes[index].nodeValue, 10).valueOf();
-    const contentB = parseInt(b.attributes[index].nodeValue, 10).valueOf();
+    const contentA = parseInt(a.attributes[attribute].nodeValue, 10).valueOf();
+    const contentB = parseInt(b.attributes[attribute].nodeValue, 10).valueOf();
     return contentA < contentB ? -1 : contentA > contentB ? 1 : 0;
   };
 }
@@ -32,42 +33,59 @@ export const getAgGridData = (agGridElement, options = {}) => {
   const tableElement = agGridElement.get()[0].querySelectorAll(".ag-root")[0];
   const agGridSelectors = agGridColumnSelectors.split("^");
   const headers = [
-    ...tableElement.querySelectorAll(".ag-header-cell-text")
-  ].map((e) => e.textContent.trim());
+    ...tableElement.querySelectorAll('.ag-header-row-column [aria-colindex]')]
+    .sort(sortElementsByAttributeValue('aria-colindex'))
+    .map((headerElement) => {
+      // Check if the elements returned are already .ag-header-cell-text elements
+      // If not, query for that element and return the text content
+      let headerCells = [...headerElement.querySelectorAll(".ag-header-cell-text")]
+      if (headerCells.length === 0) {
+        return [headerElement].map((e) => e.textContent.trim())
+      } else {
+        return [...headerElement.querySelectorAll(".ag-header-cell-text")]
+          .map((e) => e.textContent.trim())
+      }
+    }).flat()
+
   let allRows = [];
   let rows = [];
 
   agGridSelectors.forEach((selector) => {
     const _rows = [...tableElement.querySelectorAll(`${selector}:not(.ag-hidden) .ag-row`)]
       // Sort rows by their row-index attribute value
-      .sort(sortElementsByAttributeIndex(3))
+      .sort(sortElementsByAttributeValue("row-index"))
       .map((row) => {
         // Sort row cells by their aria-colindex attribute value
-        return [...row.querySelectorAll(".ag-cell")]
-          .sort(sortElementsByAttributeIndex(3))
-          .map((e) => e.textContent.trim());
+        // First check if elements returned already contain the aria-colindex
+        // If not, just query for the .ag-cell
+        let rowCells = [...row.querySelectorAll(".ag-cell [aria-colindex]")]
+        if (rowCells.length === 0) {
+          rowCells = [...row.querySelectorAll(".ag-cell")]
+        }
+        return rowCells.sort(sortElementsByAttributeValue("aria-colindex"))
+        .map((e)=> e.textContent.trim())
       });
     allRows.push(_rows);
   });
 
   // Remove any empty arrays before merging
-  allRows = allRows.filter(function(ele){
+  allRows = allRows.filter(function (ele) {
     return ele.length
   })
 
-  if(!allRows.length) rows = [];
-  else{
-  // Combine results from all specified tables (either single table, or all pinned columns) by index
-  rows = allRows.reduce(function(a, b) {
-    return a.map(function(v, i) {
-      return v.concat(b[i]);
+  if (!allRows.length) rows = [];
+  else {
+    // Combine results from all specified tables (either single table, or all pinned columns) by index
+    rows = allRows.reduce(function (a, b) {
+      return a.map(function (v, i) {
+        return v.concat(b[i]);
+      });
     });
-  });
-}
+  }
 
   // if options.rawValues = true, return headers & rows values as arrays instead of mapping as objects
   if (options.valuesArray) {
-    return {headers, rows};
+    return { headers, rows };
   }
 
   // return structured object from headers and rows variables
@@ -170,7 +188,7 @@ function getFilterColumnButtonElement(
           .then(() => {
             cy.wrap($ele)
               .parents(".ag-header-row-column")
-              .siblings(".ag-header-row-floating-filter")
+              .siblings(".ag-header-row-column-filter")
               .find(`.ag-header-cell[aria-colindex=${columnIndex}]`)
               .find(".ag-floating-filter-button");
           });
@@ -189,7 +207,7 @@ function getFilterColumnButtonElement(
  */
 function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
   // Navigate to the filter tab
-  if (!noMenuTabs) { 
+  if (!noMenuTabs) {
     selectMenuTab(agGridElement, filterTab.filter);
   }
   if (operator) {
@@ -223,9 +241,8 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
       .click();
 
   }
-  if (!noMenuTabs)
-  {
-     getMenuTabElement(agGridElement, filterTab.filter).click();
+  if (!noMenuTabs) {
+    getMenuTabElement(agGridElement, filterTab.filter).click();
   }
 }
 
@@ -241,9 +258,8 @@ 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")

package/src/agGrid/agGridValidations.js

@@ -2,12 +2,24 @@ export function validateEmptyTable(agGridElement, actualTableData){
     expect(actualTableData).to.be.empty;
 }
 
-export function validateTableExactOrder(agGridElement, actualTableData,expectedTableData){
-    expect(actualTableData, `The expected table data did not match the actual table data`).to.deep.equal(expectedTableData);
+export function validateTableExactOrder(agGridElement, actualTableData,expectedTableData, showFullError = true){
+    let errorMessage = `The expected table data did not match the actual table data`
+
+    if(showFullError){
+        errorMessage = errorMessage + ` \r\nEXPECTED:\r\n${JSON.stringify(expectedTableData)}\r\nACTUAL:\r\n:${JSON.stringify(actualTableData)}`
+    }
+
+    expect(actualTableData, errorMessage).to.deep.equal(expectedTableData);
 }
 
-export function validateTableRowSubset(agGridElement, actualTableData,expectedTableData){
-    expectedTableData.forEach((item)=> expect(actualTableData).to.deep.include(item));
+export function validateTableRowSubset(agGridElement, actualTableData,expectedTableData, showFullError = true){
+    let errorMessage = `The expected item does not exist in the actual table data`
+
+    if(showFullError){
+        errorMessage = errorMessage + ` \r\nEXPECTED:\r\n${JSON.stringify(expectedTableData)}\r\nACTUAL:\r\n:${JSON.stringify(actualTableData)}`
+    }
+
+    expectedTableData.forEach((item)=> expect(actualTableData, errorMessage).to.deep.include(item));
 }
 
 export function validateTablePages(agGridElement,expectedPaginatedTableData, onlyColumns = {}) {
@@ -17,7 +29,7 @@ export function validateTablePages(agGridElement,expectedPaginatedTableData, onl
             .getAgGridData(onlyColumns)
             .then((table) => {
                 const actualPage = JSON.parse(JSON.stringify(table));
-                validateTableExactOrder(agGridElement, actualPage, expectedPage);
+                validateTableExactOrder(agGridElement, actualPage, expectedPage, true);
                 cy.get(".ag-icon-next").click();
                 iterator++;
             });