cypress-ag-grid 2.0.0 → 2.0.1

package/README.md

@@ -9,6 +9,8 @@ Cypress plugin for interacting with and validating against ag grid.
         - [Getting Select Row Data](#getting-select-row-data)
         - [Getting Elements From the Grid](#getting-elements-from-the-grid)
         - [Sorting Columns](#sorting-columns)
+    + [Grid Filtering](#)
+        - [Filter Options](#filter-options)
         - [Filter by Text - Column Menu](#filter-by-text---column-menu)
         - [Filterby Text - Floating Filter](#filterby-text---floating-filter)
         - [Filter by Checkbox - Column Menu](#filter-by-checkbox---column-menu)
@@ -121,6 +123,34 @@ cy.get("#myGrid").agGridSortColumn("Model", "descending");
 </br>
 </br>
 
+### Filter Options
+
+The below filtering commands takes an `options` parameter comprised of the following properties:
+
+```javascript
+options: {
+    searchCriteria: [{
+        columnName: string;
+        filterValue: string;
+        operator?: string;
+    }];
+    hasApplyButton?: boolean;
+    noMenuTab?: boolean;
+    selectAllLocaleText: string;
+}
+
+/**
+- options.searchCriteria JSON with search properties and options
+- options.searchCriteria.columnName name of the column to filter
+- options.searchCriteria.filterValue value to input into the filter textbox
+- options.searchCriteria.searchInputIndex [Optional] Uses 0 by default. Index of which filter box to use in event of having multiple search conditionals
+- options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
+- options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
+- options.noMenuTabs [Optional] True if you use, for example, the community edition of ag-grid, which has no menu tabs
+- 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
+*/
+```
+
 ### Filter by Text - Column Menu
 This command will filter a column by a text value from its menu. In the options, you must specify a `searchCriteria` objects containing one or more objects with `columnName`, `filterValue`, and optionally `operator` (i.e. Contains, Not contains, Equals, etc.).
 
@@ -286,7 +316,7 @@ Example:
 cy.get("#myGrid")
 .getAgGridData()
 .then((actualTableData) => {
-    cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+    cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
 });
 ```
 <br/>
@@ -309,7 +339,7 @@ Example:
     cy.get(agGridSelector)
       .getAgGridData({ onlyColumns: ["Year", "Make", "Model"] })
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsSubset(actualTableData, expectedTableData);
+        cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
       });
   });
 ```
@@ -326,13 +356,13 @@ Example:
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateEmptyTable(actualTableData);
+        cy.agGridValidateEmptyTable(actualTableData);
       });
 ```
 
 ## Limitations
-* Unable to validate deeply nested row groups
-* Unable to validate deeply nested column groups
+* ~~Unable to validate deeply nested row groups~~ As of v2.x, using `.getAgGridElements()` you should be able to accomplish this.
+* ~~Unable to validate deeply nested column groups~~ As of v2.x, using `.getAgGridElements()` you should be able to accomplish this.
 * Unable to validate the entirety of an unlimited scrolling grid.
 * Unable to validate data that is out of view. The DOM will register the ag grid data as it's scrolled into view.
   * 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)
@@ -343,4 +373,4 @@ Example:
   }
   ``` 
 ## 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-basic.js

@@ -1,6 +1,6 @@
 // specify the columns
 const columnDefs = [
-  { field: "year", pinned: "left" },
+  { field: "year", pinned: "left"},
   { field: "make", rowGroup: false, pinned: "left" },
   { field: "model", filter: true },
   { field: "price", pinned: "right", floatingFilter: false, sortable: false, editable: true, cellEditor: 'agTextCellEditor'  },

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

@@ -260,6 +260,30 @@ describe("ag-grid get data scenarios", () => {
       });
   });
 
+  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" },
+    ];
+    cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: [
+        {
+          columnName: "Model",
+          filterValue: "Taurus",
+          isMultiFilter: true
+        },
+      ],
+      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
     cy.get(agGridSelector).agGridColumnFilterTextMenu({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Cypress plugin to interact with ag grid",
   "main": "src/index.js",
   "repository": {

package/src/agGrid/agGridInteractions.js

@@ -236,6 +236,7 @@ function getFilterColumnButtonElement(
   const filterValue = options.searchCriteria.filterValue;
   const operator = options.searchCriteria.operator;
   const searchInputIndex = options.searchCriteria.searchInputIndex || 0;
+  const isMultiFilter = options.searchCriteria.isMultiFilter;
   const noMenuTabs = options.noMenuTabs;
   
   // Navigate to the filter tab
@@ -261,10 +262,32 @@ function getFilterColumnButtonElement(
     .find(".ag-popup-child")
     .find("input")
     .filter(":visible")
-    .eq(searchInputIndex)
-    .clear()
-    .type(filterValue)
-    .wait(500);
+    .as("filterInput")
+
+    // If it's a multi filter, de-select the 'select-all' checkbox
+    if(isMultiFilter){
+      const selectAllText = options.selectAllLocaleText || "Select All";
+      toggleColumnCheckboxFilter(
+        agGridElement,
+        selectAllText,
+        false,
+        true
+      );
+    }
+
+    // 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);  
+    })
+
+    // Finally, if a multi-filter, select the filter value's checkbox
+    if(isMultiFilter){
+      toggleColumnCheckboxFilter(agGridElement, filterValue, true, true)
+    }
 }
 
 function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
@@ -308,8 +331,9 @@ function toggleColumnCheckboxFilter(
 function populateSearchCriteria(
   searchCriteria,
   hasApplyButton = false,
-  noMenuTabs = false
-) {
+  noMenuTabs = false,
+  selectAllLocaleText = 'Select All'
+  ) {
   const options = {};
   //@ts-ignore
   options.searchCriteria = {};
@@ -318,6 +342,10 @@ function populateSearchCriteria(
   //@ts-ignore
   options.searchCriteria.filterValue = searchCriteria.filterValue;
   //@ts-ignore
+  options.searchCriteria.isMultiFilter = searchCriteria.isMultiFilter;
+  //@ts-ignore
+  options.selectAllLocaleText = selectAllLocaleText;
+  //@ts-ignore
   options.hasApplyButton = hasApplyButton;
   //@ts-ignore
   options.noMenuTabs = noMenuTabs;
@@ -342,7 +370,8 @@ export function filterBySearchTextColumnMenu(agGridElement, options) {
       const _options = populateSearchCriteria(
         _searchCriteria,
         options.hasApplyButton,
-        options.noMenuTabs
+        options.noMenuTabs,
+        options.isMultiFilter
       );
       _filterBySearchTextColumnMenu(agGridElement, _options);
     });
@@ -367,14 +396,15 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
 /**
  *  * Performs a filter operation on the specified column via the column's floating filter field using plain text search
  * @param agGridElement The get() selector for which ag grid table you wish to retrieve.
- * @param {{searchCriteria:[{columnName:string,filterValue:string,operator?:string}], hasApplyButton?:boolean}} options JSON with search properties
+ * @param {{searchCriteria:[{columnName:string,filterValue:string,operator?:string}], hasApplyButton?:boolean, noMenuTab?:boolean, selectAllLocaleText:string}} options JSON with search properties
  * @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
+ * @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
  */
 export function filterBySearchTextColumnFloatingFilter(agGridElement, options) {
   // Check if there are multiple search criteria provided by attempting to access the columnName

package/src/index.d.ts

@@ -44,6 +44,7 @@ declare namespace Cypress {
          * @param options.searchCriteria.columnName name of the column to filter
          * @param options.searchCriteria.filterValue value to input into the filter textbox
          * @param options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
+         * @param options.searchCriteria.isMultiFilter [Optional] Use if floating filter is multiselect checkboxes vs free form input.
          * @param options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
          */
         agGridColumnFilterTextFloating<E extends Node = HTMLElement>(options: {}): Chainable<JQuery<E>>;