cypress-ag-grid 2.0.2 → 2.0.4

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

@@ -19,34 +19,35 @@ describe("ag-grid get data scenarios", () => {
   it("verify paginated table data - include all columns", () => {
     const expectedPaginatedTableData = [
       [
-        { Year: "2020", Make: "Toyota", Model: "Celica", Price: "35000" },
-        { Year: "2020", Make: "Ford", Model: "Mondeo", Price: "32000" },
-        { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "72000" },
-        { Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
-        { Year: "2020", Make: "Mercedes", Model: "GLC300", Price: "53000" },
+        { 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", Price: "22000" },
-        { Year: "2020", Make: "Honda", Model: "Accord", Price: "32000" },
-        { Year: "2020", Make: "Ford", Model: "Taurus", Price: "19000" },
-        { Year: "2020", Make: "Hyundai", Model: "Elantra", Price: "22000" },
-        { Year: "2020", Make: "Toyota", Model: "Celica", Price: "5000" },
+        { 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", Price: "25000" },
-        { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
-        { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
-        { Year: "2020", Make: "Mercedes", Model: "GLC300", Price: "35000" },
-        { Year: "2011", Make: "Honda", Model: "Civic", Price: "9000" },
+        { 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", Price: "34000" },
-        { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
-        { Year: "2020", Make: "Hyundai", Model: "Elantra", Price: "3000" },
-        { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
+        { 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: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" },
       ],
     ];
-    cy.get(agGridSelector).agGridValidatePaginatedTable(
+        cy.get(agGridSelector).agGridValidatePaginatedTable(
       expectedPaginatedTableData
     );
   });
@@ -79,6 +80,7 @@ describe("ag-grid get data scenarios", () => {
         { Year: "1990", Make: "Ford", Model: "Taurus" },
         { Year: "2020", Make: "Hyundai", Model: "Elantra" },
         { Year: "2020", Make: "BMW", Model: "2002" },
+        { Year: "2023", Make: "Hyundai", Model: "Santa Fe"},
       ],
     ];
     cy.get(agGridSelector).agGridValidatePaginatedTable(
@@ -91,7 +93,7 @@ describe("ag-grid get data scenarios", () => {
 
   it("able to filter by checkbox", () => {
     const expectedTableData = [
-      { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
+      { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
     ];
     cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
       searchCriteria: {
@@ -110,10 +112,11 @@ describe("ag-grid get data scenarios", () => {
 
   it("able to filter by checkbox - multiple columns", () => {
     const expectedTableData = [
-      { Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
-      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
-      { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
+      { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
     ];
+    
     cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
       searchCriteria: [
         {
@@ -130,15 +133,19 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData, true);
+        cy.agGridValidateRowsExactOrder(
+          actualTableData,
+          expectedTableData,
+          true
+        );
       });
   });
 
   it("able to filter by text - menu", () => {
     const expectedTableData = [
-      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
-      { Year: "2020", Make: "Honda", Model: "Accord", Price: "32000" },
-      { Year: "2020", Make: "Ford", Model: "Mondeo", Price: "32000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
+      { Year: "2020", Make: "Honda", Model: "Accord", Condition: "poor", Price: "32000" },
+      { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextMenu({
@@ -158,7 +165,7 @@ describe("ag-grid get data scenarios", () => {
 
   it("able to filter by text - menu - multiple columns", () => {
     const expectedTableData = [
-      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextMenu({
@@ -185,11 +192,12 @@ describe("ag-grid get data scenarios", () => {
 
   it("able to filter by text - floating filter", () => {
     const expectedTableData = [
-      { Year: "2020", Make: "Ford", Model: "Mondeo", Price: "32000" },
-      { Year: "2020", Make: "Ford", Model: "Mondeo", Price: "25000" },
-      { Year: "2020", Make: "Ford", Model: "Taurus", Price: "19000" },
-      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+      { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
+      { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "good", Price: "25000" },
+      { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
+      { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
     ];
+    
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextFloating({
       searchCriteria: {
@@ -207,10 +215,11 @@ describe("ag-grid get data scenarios", () => {
 
   it("able to filter by text - floating filter - multiple conditions", () => {
     const expectedTableData = [
-      { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
-      { Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
-      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
+      { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
     ];
+    
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextFloating({
       searchCriteria: {
@@ -237,7 +246,7 @@ describe("ag-grid get data scenarios", () => {
 
   it("able to filter by text - floating filter - multiple columns", () => {
     const expectedTableData = [
-      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+      { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextFloating({
@@ -256,14 +265,17 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          actualTableData,
+          expectedTableData
+        );
       });
   });
 
   it("able to filter by text - floating filter - multi filter", () => {
     const expectedTableData = [
-      { Year: "2020", Make: "Ford", Model: "Taurus", Price: "19000" },
-      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+      { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
+      { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextFloating({
@@ -271,7 +283,7 @@ describe("ag-grid get data scenarios", () => {
         {
           columnName: "Model",
           filterValue: "Taurus",
-          isMultiFilter: true
+          isMultiFilter: true,
         },
       ],
       hasApplyButton: true,
@@ -279,11 +291,13 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          actualTableData,
+          expectedTableData
+        );
       });
   });
 
-
   it("able to validate empty table", () => {
     //Search for an entry that does not exist
     cy.get(agGridSelector).agGridColumnFilterTextMenu({
@@ -417,6 +431,65 @@ describe("ag-grid get data scenarios", () => {
         cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
       });
   });
+
+  it("able to filter by 'Blank'", () =>{
+    const expectedTableData = [
+      { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" }
+    ]
+
+    cy.get(agGridSelector).agGridColumnFilterTextMenu({
+      searchCriteria: {
+        columnName: "Price",
+        operator: filterOperator.blank,
+      },
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector)
+    .getAgGridData()
+    .then((actualTableData) => {
+      cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
+    });  
+
+  });
+
+  it('able to filter by agTextColumnFilter with join operator', ()=>{
+    const expectedTableData = [
+      { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
+      { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
+    ]
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: 
+      {
+        columnName: "Condition",
+        operator: "Starts with",
+        filterValue: 'f',
+        searchInputIndex: 0,
+      },
+      
+      multiple: true,
+      hasApplyButton: true,
+    });
+  
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: 
+      {
+        columnName: "Condition",
+        operator:"Ends with",
+        filterValue: "ir",
+        searchInputIndex: 1,
+      },
+      
+      multiple: true,
+      hasApplyButton: true,
+    });
+
+    cy.get(agGridSelector)
+    .getAgGridData()
+    .then((actualTableData) => {
+      cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
+    });  
+  });
 });
 
 function removePropertyFromCollection(expectedTableData, columnsToExclude) {
@@ -504,4 +577,4 @@ function removePropertyFromCollection(expectedTableData, columnsToExclude) {
 //     .then(() => {
 //       return paginatedTableData;
 //     });
-// }
+// }

package/cypress/fixtures/cardata.json

@@ -1,21 +1,21 @@
 [
-  { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Price": "35000" },
-  { "Year": "2020", "Make": "Ford", "Model": "Mondeo", "Price": "32000" },
-  { "Year": "2020", "Make": "Porsche", "Model": "Boxter", "Price": "72000" },
-  { "Year": "2020", "Make": "BMW", "Model": "3-series", "Price": "45000" },
-  { "Year": "2020", "Make": "Mercedes", "Model": "GLC300", "Price": "53000" },
-  { "Year": "2020", "Make": "Honda", "Model": "Civic", "Price": "22000" },
-  { "Year": "2020", "Make": "Honda", "Model": "Accord", "Price": "32000" },
-  { "Year": "2020", "Make": "Ford", "Model": "Taurus", "Price": "19000" },
-  { "Year": "2020", "Make": "Hyundai", "Model": "Elantra", "Price": "22000" },
-  { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Price": "5000" },
-  { "Year": "2020", "Make": "Ford", "Model": "Mondeo", "Price": "25000" },
-  { "Year": "2020", "Make": "Porsche", "Model": "Boxter", "Price": "99000" },
-  { "Year": "2020", "Make": "BMW", "Model": "3-series", "Price": "32000" },
-  { "Year": "2020", "Make": "Mercedes", "Model": "GLC300", "Price": "35000" },
-  { "Year": "2011", "Make": "Honda", "Model": "Civic", "Price": "9000" },
-  { "Year": "2020", "Make": "Honda", "Model": "Accord", "Price": "34000" },
-  { "Year": "1990", "Make": "Ford", "Model": "Taurus", "Price": "900" },
-  { "Year": "2020", "Make": "Hyundai", "Model": "Elantra", "Price": "3000" },
-  { "Year": "2020", "Make": "BMW", "Model": "2002", "Price": "88001" }
-]
+  { "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" }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "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": "^10.1.0"
+    "cypress": "^13.3.0"
   }
 }

package/src/agGrid/agGridInteractions.js

@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 import { sort } from "./sort.enum";
 import { filterTab } from "./menuTab.enum";
+import { filterOperator } from "./filterOperator.enum";
 
 /**
  * Uses the attribute value's index and sorts the data accordingly.
@@ -37,7 +38,7 @@ export const getAgGridElements = (agGridElement, options = {}) => {
 
 function _getAgGrid(agGridElement, options = {}, returnElements) {
   const agGridColumnSelectors =
-    ".ag-pinned-left-cols-container^.ag-center-cols-clipper^.ag-pinned-right-cols-container";
+    ".ag-pinned-left-cols-container^.ag-center-cols-clipper^.ag-center-cols-viewport^.ag-pinned-right-cols-container";
   if (agGridElement.get().length > 1)
     throw new Error(
       `Selector "${agGridElement.selector}" returned more than 1 element.`
@@ -150,20 +151,26 @@ function getColumnHeaderElement(agGridElement, columnName) {
  * @returns
  */
 export function sortColumnBy(agGridElement, columnName, sortDirection) {
+    if(sortDirection.toLowerCase() === "ascending"){
+      sortDirection = "asc"
+    }else if(sortDirection.toLowerCase() === "descending"){
+      sortDirection = "desc"
+    }
+
   if (sortDirection === sort.ascending || sortDirection === sort.descending) {
     return getColumnHeaderElement(agGridElement, columnName)
-      .parents(".ag-header-cell")
-      .invoke("attr", "aria-sort")
+      .parents(".ag-header-cell .ag-cell-label-container")
+      .invoke("attr", "class")
       .then((value) => {
         cy.log(`sort: ${sortDirection}`);
-        if (value !== sortDirection) {
+        if(!value.includes(`ag-header-cell-sorted-${sortDirection}`)){
           getColumnHeaderElement(agGridElement, columnName).click().wait(250);
           sortColumnBy(agGridElement, columnName, sortDirection);
         }
       });
   } else {
     throw new Error(
-      "sortDirection must be either 'ascending' or 'descending'."
+      "sortDirection must be either 'asc' or 'desc'."
     );
   }
 }
@@ -243,10 +250,12 @@ function getFilterColumnButtonElement(
   if (!noMenuTabs) {
     selectMenuTab(agGridElement, filterTab.filter);
   }
+
   if (operator) {
     cy.get(agGridElement)
       .find(".ag-picker-field-wrapper")
       .filter(":visible")
+      .eq(searchInputIndex)
       .click();
     cy.get(agGridElement)
       .find(".ag-popup")
@@ -276,13 +285,15 @@ function getFilterColumnButtonElement(
     }
 
     // Get the saved filter input and enter the search term
-    cy.get("@filterInput").then(($ele)=>{
-      cy.wrap($ele)
-      .eq(searchInputIndex)
-      .clear()
-      .type(filterValue)
-      .wait(500);  
-    })
+    if(operator !== filterOperator.blank && operator !== filterOperator.notBlank){      
+      cy.get("@filterInput").then(($ele)=>{
+        cy.wrap($ele)
+        .eq(searchInputIndex)
+        .clear()
+        .type(filterValue)
+        .wait(500);  
+      })
+    }
 
     // Finally, if a multi-filter, select the filter value's checkbox
     if(isMultiFilter){
@@ -335,19 +346,9 @@ function populateSearchCriteria(
   selectAllLocaleText = 'Select All'
   ) {
   const options = {};
-  //@ts-ignore
-  options.searchCriteria = {};
-  //@ts-ignore
-  options.searchCriteria.columnName = searchCriteria.columnName;
-  //@ts-ignore
-  options.searchCriteria.filterValue = searchCriteria.filterValue;
-  //@ts-ignore
-  options.searchCriteria.isMultiFilter = searchCriteria.isMultiFilter;
-  //@ts-ignore
+  options.searchCriteria = {...searchCriteria};
   options.selectAllLocaleText = selectAllLocaleText;
-  //@ts-ignore
   options.hasApplyButton = hasApplyButton;
-  //@ts-ignore
   options.noMenuTabs = noMenuTabs;
   return options;
 }

package/src/agGrid/filterOperator.enum.js

@@ -9,5 +9,7 @@ export const filterOperator = {
   lessThanOrEquals: "Less than or equals",
   greaterThan: "Greater than",
   greaterThanOrEquals: "Greater than or equals",
-  inRange: "In range"
+  inRange: "In range",
+  blank: "Blank",
+  notBlank: "Not Blank"
 }

package/src/agGrid/sort.enum.js

@@ -1,5 +1,5 @@
 export const sort = {
-  ascending: "ascending",
-  descending: "descending",
+  ascending: "asc",
+  descending: "desc",
   none: "none"
 }