cypress-ag-grid 1.4.0 → 1.5.0

package/README.md

@@ -70,7 +70,7 @@ The correct command will return the following:
 To only get certain rows of data, pass the header values into the `getAgGridData()` command, like so:
 
 ```javascript
-cy.get("#myGrid).getAgGridData({ onlyColumns: ["Year", "Make"] })
+cy.get("#myGrid").getAgGridData({ onlyColumns: ["Year", "Make"] })
 ```
 
 The above command will return the follwoing:
@@ -128,13 +128,48 @@ The above command will filter the Model column for the value 'GLC300' and set th
 </br>
 </br>
 ### Filterby Text - Floating Filter
-This command will filter a column by a text value from its floating filter (if applicable).
+This command will filter a column by a text value from its floating filter (if applicable). This command will filter a column by a text value from its floating menu. In the options, you must specify a `searchCriteria` object with `columnName`, `filterValue`, and optionally `operator` (i.e. Contains, Not contains, Equals, etc.) and `searchInputIndex` in the event you wish to apply multiple text conditions (see below for multi-condition example).
 
 ![alt text](./ag-grid-example-filter-text-floating.png "AG Grid Dom - Filter by Text Floating")
 
-<b>Definition:</b> .agGridColumnFilterTextMenu(options: {})
+<b>Definition:</b> .agGridColumnFilterTextFloating(options: {})
+
+Example:
+```
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "Ford",
+      },
+      hasApplyButton: true,
+    });
+```
+
+The above example will search for the Make `Ford` from the floating text menu filter.
+
+If you have the option for multiple conditions on the floating filter, you can do two searches, specifying the `searchInputIndex` parameter in the `searchCriteria` object. The below example will ssarch for any `Make` that contains `B` AND `MW`:
+
+Example: 
+```
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "B",
+        searchInputIndex: 0,
+      },
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "MW",
+        searchInputIndex: 1,
+      },
+      hasApplyButton: true,
+    });
+```
+![alt text](./ag-grid-example-filter-text-floating-multi-condition.png "AG Grid Dom - Filter by Text Floating")
 
-See [Filter by Text - Column Menu](#filter-by-Text---Column-Menu) for example and usage.
 <br/>
 </br>
 
@@ -268,9 +303,9 @@ Example:
   * To combat this, in your code where the ag grid is called, check if the Cypress window is controlling the app and set the ag grid object to `.sizeColumnsToFit()`. You can see an example of this in the `app/grid.js` file of this repository. Read more [here](https://www.ag-grid.com/javascript-grid/column-sizing/#size-columns-to-fit)
   * Example: 
   ```javascript
-  if(Cypress.window){
+  if(window.Cypress){
       this.api.sizeColumnsToFit();
   }
   ``` 
 ## Credit
-A portion of the logic to retrieve table data was expanded upon from the project [Cypress-Get-Table](https://github.com/roggerfe/cypress-get-table) by [Rogger Fernandez](https://github.com/roggerfe).
+A portion of the logic to retrieve table data was expanded upon from the project [Cypress-Get-Table](https://github.com/roggerfe/cypress-get-table) by [Rogger Fernandez](https://github.com/roggerfe).

package/app/grid.js

@@ -47,10 +47,10 @@ new agGrid.Grid(eGridDiv, gridOptions);
 // Grab the grid data from the supplied API endpoint
 agGrid
   .simpleHttpRequest({
-    url: "https://api.jsonbin.io/b/608304f69a9aa933335613a6/2",
+    url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2"
   })
   .then((data) => {
-    gridOptions.api.setRowData(data);
+    gridOptions.api.setRowData(data.record);
   });
 
 function autoSizeAllColumns() {

package/cypress/{integration/ag-grid-spec.js → e2e/ag-grid.cy.js}

@@ -10,10 +10,10 @@ import { filterOperator } from "../../src/agGrid/filterOperator.enum";
 const _pageSize = 5;
 const agGridSelector = "#myGrid";
 
-describe("ag-grid scenarios", () => {
+describe("ag-grid get data scenarios", () => {
   beforeEach(() => {
     cy.visit("../app/index.html");
-    cy.get(".ag-cell", {timeout: 10000}).should("be.visible");
+    cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
   });
 
   it("verify paginated table data - include all columns", () => {
@@ -98,38 +98,43 @@ describe("ag-grid scenarios", () => {
         columnName: "Model",
         filterValue: "2002",
       },
-      selectAllLocaleText: 'Select All', // This is optional if you are using localText for ag grid
+      selectAllLocaleText: "Select All", // This is optional if you are using localText for ag grid
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData)
       });
   });
 
   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", Price: "45000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
+      { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
     ];
     cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
-      searchCriteria: [{
-        columnName: "Model",
-        filterValue: "2002",
-      },
-      {
-        columnName: "Model",
-        filterValue: "3-series",
-      }
-    ],
+      searchCriteria: [
+        {
+          columnName: "Model",
+          filterValue: "2002",
+        },
+        {
+          columnName: "Model",
+          filterValue: "3-series",
+        },
+      ],
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData, true);
+        cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          actualTableData,
+          expectedTableData,
+          true
+        );
       });
   });
 
@@ -161,17 +166,18 @@ describe("ag-grid scenarios", () => {
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextMenu({
-      searchCriteria: [{
-        columnName: "Price",
-        filterValue: "32000",
-        operator: filterOperator.equals,
-      },
-      {
-        columnName: "Make",
-        filterValue: "BMW",
-        operator: filterOperator.equals,
-      }
-    ],
+      searchCriteria: [
+        {
+          columnName: "Price",
+          filterValue: "32000",
+          operator: filterOperator.equals,
+        },
+        {
+          columnName: "Make",
+          filterValue: "BMW",
+          operator: filterOperator.equals,
+        },
+      ],
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
@@ -203,21 +209,27 @@ describe("ag-grid scenarios", () => {
       });
   });
 
-  it("able to filter by text - floating filter - multiple columns", () => {
+  it("able to filter by text - floating filter - multiple conditions", () => {
     const expectedTableData = [
-      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+      { 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" },
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextFloating({
-      searchCriteria: [{
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "B",
+        searchInputIndex: 0,
+      },
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
         columnName: "Make",
-        filterValue: "Ford",
+        filterValue: "MW",
+        searchInputIndex: 1,
       },
-      {
-        columnName: "Year",
-        filterValue: "1990",
-      }
-    ],
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
@@ -225,7 +237,32 @@ describe("ag-grid scenarios", () => {
       .then((actualTableData) => {
         cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
-  });  
+  });
+
+  it("able to filter by text - floating filter - multiple columns", () => {
+    const expectedTableData = [
+      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+    ];
+    cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: [
+        {
+          columnName: "Make",
+          filterValue: "Ford",
+        },
+        {
+          columnName: "Year",
+          filterValue: "1990",
+        },
+      ],
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector)
+      .getAgGridData()
+      .then((actualTableData) => {
+        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+      });
+  });
 
   it("able to validate empty table", () => {
     //Search for an entry that does not exist
@@ -447,4 +484,4 @@ function removePropertyFromCollection(expectedTableData, columnsToExclude) {
 //     .then(() => {
 //       return paginatedTableData;
 //     });
-// }
+// }

package/cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "1.4.0",
+  "version": "1.5.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": "^8.5.0"
+    "cypress": "^10.1.0"
   }
 }

package/src/agGrid/agGridInteractions.js

@@ -205,7 +205,12 @@ function getFilterColumnButtonElement(
  * @param operator (optional) use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values)
  * @param noMenuTabs (optional) boolean indicating if the menu has tabs.
  */
-function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
+ function filterBySearchTerm(agGridElement, options) {
+  const filterValue = options.searchCriteria.filterValue;
+  const operator = options.searchCriteria.operator;
+  const searchInputIndex = options.searchCriteria.searchInputIndex || 0;
+  const noMenuTabs = options.noMenuTabs;
+  
   // Navigate to the filter tab
   if (!noMenuTabs) {
     selectMenuTab(agGridElement, filterTab.filter);
@@ -229,6 +234,8 @@ function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
     .find(".ag-popup-child")
     .find("input")
     .filter(":visible")
+    .eq(searchInputIndex)
+    .clear()
     .type(filterValue)
     .wait(500);
 }
@@ -322,9 +329,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
   ).click();
   filterBySearchTerm(
     agGridElement,
-    options.searchCriteria.filterValue,
-    options.searchCriteria.operator,
-    options.noMenuTabs
+    options
   );
   applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
 }
@@ -336,6 +341,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
  * @param options.searchCriteria JSON with search properties and options
  * @param options.searchCriteria.columnName name of the column to filter
  * @param options.searchCriteria.filterValue value to input into the filter textbox
+ * @param options.searchCriteria.searchInputIndex [Optional] Uses 0 by default. Index of which filter box to use in event of having multiple search conditionals
  * @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
@@ -365,9 +371,7 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
     ).click();
     filterBySearchTerm(
       agGridElement,
-      options.searchCriteria.filterValue,
-      options.searchCriteria.operator,
-      options.noMenuTabs
+      options
     );
     applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
   });

package/cypress.json

@@ -1 +0,0 @@
-{}