cypress-ag-grid 2.0.0-beta → 2.0.0

package/README.md

@@ -7,10 +7,12 @@ Cypress plugin for interacting with and validating against ag grid.
     + [Grid Interaction](#)
         - [Getting Data From the Grid](#getting-data-from-the-grid)
         - [Getting Select Row Data](#getting-select-row-data)
+        - [Getting Elements From the Grid](#getting-elements-from-the-grid)
         - [Sorting Columns](#sorting-columns)
         - [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)
+        - [Filtering - Localization and Internationalization](#filtering---localization-and-internationalization)
         - [Add or Remove Columns](#add-or-remove-columns)
     + [Grid Validation](#)
         - [Validate Paginated Table](#validate-paginated-table)
@@ -86,6 +88,25 @@ The above command will return the follwoing:
 </br>
 </br>
 
+### Getting Elements From the Grid
+To get the Ag Grid data as elements (if you want to interact with the cells themselves), you must chain `.getAgGridElements()` after the `cy.get()` command for the topmost level of the grid, including controls and headers (see selected DOM element in above image).
+```javascript
+    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}");
+      });
+
+```
+
+The above example will grab the table as elements, finds the row whose `Price` equals `72000`. It then gets the `Price` cell for that row, double clicks on it to enable an editable input, and changes the value of the cell.
+</br>
+</br>
+
 ### Sorting Columns
 This command will sort the specified column by the sort direction specified.
 
@@ -128,13 +149,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>
 
@@ -159,6 +215,20 @@ Example:
 
 ```
 </br>
+
+### Filtering - Localization and Internationalization
+When we filter by checkbox, we first deselect the Select All checkbox to ensure we ONLY select the specified checkbox. Since AG grid allows for localization, we need a way to be able to pass in the localeText for Select All. This is the only area of this plugin that has a hard-coded value, so no other localization accommodations are needed.
+
+```
+    cy.get("#myGrid").agGridColumnFilterCheckboxMenu({
+      searchCriteria: {
+        columnName: "Model",
+        filterValue: "2002",
+      },
+      selectAllLocaleText: "Tout Sélectionner"
+      hasApplyButton: true,
+    });
+```   
 </br>
 
 ### Add or Remove Columns
@@ -268,9 +338,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(window.cypress){
+  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/cypress/e2e/ag-grid-data.cy.js

@@ -13,7 +13,7 @@ const agGridSelector = "#myGrid";
 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,7 +98,7 @@ describe("ag-grid get data 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)
@@ -110,20 +110,21 @@ 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", 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)
@@ -161,17 +162,18 @@ describe("ag-grid get data 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 +205,27 @@ describe("ag-grid get data 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 +233,32 @@ describe("ag-grid get data scenarios", () => {
       .then((actualTableData) => {
         cy.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 +480,4 @@ function removePropertyFromCollection(expectedTableData, columnsToExclude) {
 //     .then(() => {
 //       return paginatedTableData;
 //     });
-// }
+// }

package/package.json

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

package/src/agGrid/agGridInteractions.js

@@ -232,7 +232,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);
@@ -256,6 +261,7 @@ function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
     .find(".ag-popup-child")
     .find("input")
     .filter(":visible")
+    .eq(searchInputIndex)
     .clear()
     .type(filterValue)
     .wait(500);
@@ -353,9 +359,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
   ).click();
   filterBySearchTerm(
     agGridElement,
-    options.searchCriteria.filterValue,
-    options.searchCriteria.operator,
-    options.noMenuTabs
+    options
   );
   applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
 }
@@ -367,6 +371,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
@@ -396,9 +401,7 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
     ).click();
     filterBySearchTerm(
       agGridElement,
-      options.searchCriteria.filterValue,
-      options.searchCriteria.operator,
-      options.noMenuTabs
+      options
     );
     applyColumnFilter(
       agGridElement,

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

@@ -1,450 +0,0 @@
-/// <reference types="cypress" />
-
-import { sort } from "../../src/agGrid/sort.enum";
-import {
-  deleteKey,
-  sortedCollectionByProperty,
-} from "../../src/helpers/arrayHelpers";
-import { filterOperator } from "../../src/agGrid/filterOperator.enum";
-
-const _pageSize = 5;
-const agGridSelector = "#myGrid";
-
-describe("ag-grid scenarios", () => {
-  beforeEach(() => {
-    cy.visit("../app/index.html");
-    cy.get(".ag-cell", {timeout: 10000}).should("be.visible");
-  });
-
-  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: "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" },
-      ],
-    ];
-    cy.get(agGridSelector).agGridValidatePaginatedTable(
-      expectedPaginatedTableData
-    );
-  });
-
-  it("verify paginated table data - excluding columns", () => {
-    const expectedPaginatedTableData = [
-      [
-        { Year: "2020", Make: "Toyota", Model: "Celica" },
-        { Year: "2020", Make: "Ford", Model: "Mondeo" },
-        { Year: "2020", Make: "Porsche", Model: "Boxter" },
-        { Year: "2020", Make: "BMW", Model: "3-series" },
-        { Year: "2020", Make: "Mercedes", Model: "GLC300" },
-      ],
-      [
-        { Year: "2020", Make: "Honda", Model: "Civic" },
-        { Year: "2020", Make: "Honda", Model: "Accord" },
-        { Year: "2020", Make: "Ford", Model: "Taurus" },
-        { Year: "2020", Make: "Hyundai", Model: "Elantra" },
-        { Year: "2020", Make: "Toyota", Model: "Celica" },
-      ],
-      [
-        { Year: "2020", Make: "Ford", Model: "Mondeo" },
-        { Year: "2020", Make: "Porsche", Model: "Boxter" },
-        { Year: "2020", Make: "BMW", Model: "3-series" },
-        { Year: "2020", Make: "Mercedes", Model: "GLC300" },
-        { Year: "2011", Make: "Honda", Model: "Civic" },
-      ],
-      [
-        { Year: "2020", Make: "Honda", Model: "Accord" },
-        { Year: "1990", Make: "Ford", Model: "Taurus" },
-        { Year: "2020", Make: "Hyundai", Model: "Elantra" },
-        { Year: "2020", Make: "BMW", Model: "2002" },
-      ],
-    ];
-    cy.get(agGridSelector).agGridValidatePaginatedTable(
-      expectedPaginatedTableData,
-      {
-        onlyColumns: ["Year", "Make", "Model"],
-      }
-    );
-  });
-
-  it("able to filter by checkbox", () => {
-    const expectedTableData = [
-      { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
-    ];
-    cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
-      searchCriteria: {
-        columnName: "Model",
-        filterValue: "2002",
-      },
-      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);
-      });
-  });
-
-  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" },
-    ];
-    cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
-      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);
-      });
-  });
-
-  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" },
-    ];
-    cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
-    cy.get(agGridSelector).agGridColumnFilterTextMenu({
-      searchCriteria: {
-        columnName: "Price",
-        filterValue: "32000",
-        operator: filterOperator.equals,
-      },
-      hasApplyButton: true,
-    });
-    cy.get(agGridSelector)
-      .getAgGridData()
-      .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
-      });
-  });
-
-  it("able to filter by text - menu - multiple columns", () => {
-    const expectedTableData = [
-      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
-    ];
-    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,
-      }
-    ],
-      hasApplyButton: true,
-    });
-    cy.get(agGridSelector)
-      .getAgGridData()
-      .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
-      });
-  });
-
-  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" },
-    ];
-    cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
-    cy.get(agGridSelector).agGridColumnFilterTextFloating({
-      searchCriteria: {
-        columnName: "Make",
-        filterValue: "Ford",
-      },
-      hasApplyButton: true,
-    });
-    cy.get(agGridSelector)
-      .getAgGridData()
-      .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
-    cy.get(agGridSelector).agGridColumnFilterTextMenu({
-      searchCriteria: {
-        columnName: "Price",
-        filterValue: "0",
-        operator: filterOperator.equals,
-      },
-      hasApplyButton: true,
-    });
-    cy.get(agGridSelector)
-      .getAgGridData()
-      .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateEmptyTable(actualTableData);
-      });
-  });
-
-  it("able to sort by ascending order", () => {
-    cy.get(agGridSelector).agGridSortColumn("Make", sort.ascending);
-    cy.fixture("cardata").then((carData) => {
-      // This will sort the entirety of our collection by the specified columnName and sort order
-      // and will return only the # of records specified. In this example, I include only the first
-      // page of data.
-      const expectedData_sortedByAscending = sortedCollectionByProperty(
-        carData,
-        "Make",
-        sort.ascending,
-        _pageSize
-      );
-      cy.get(agGridSelector)
-        .getAgGridData()
-        .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
-            actualTableData,
-            expectedData_sortedByAscending
-          );
-        });
-    });
-  });
-
-  it("able to sort by descending order", () => {
-    cy.get(agGridSelector).agGridSortColumn("Make", sort.descending);
-    cy.fixture("cardata").then((carData) => {
-      // This will sort the entirety of our collection by the specified columnName and sort order
-      // and will return only the # of records specified. In this example, I include only the first
-      // page of data.
-      const expectedData_sortedByDescending = sortedCollectionByProperty(
-        carData,
-        "Make",
-        sort.descending,
-        _pageSize
-      );
-      cy.get(agGridSelector)
-        .getAgGridData()
-        .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
-            actualTableData,
-            expectedData_sortedByDescending
-          );
-        });
-    });
-  });
-
-  it("remove column from grid and verify select column data", () => {
-    cy.get(agGridSelector).agGridToggleColumnsSideBar("Year", true);
-    cy.fixture("cardata").then((expectedTableData) => {
-      const expectedData_yearColumnRemoved = removePropertyFromCollection(
-        expectedTableData,
-        ["Year"]
-      );
-      cy.get(agGridSelector)
-        .getAgGridData()
-        .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
-            actualTableData,
-            expectedData_yearColumnRemoved.slice(0, _pageSize)
-          );
-        });
-    });
-  });
-
-  it("remove single pinned column from grid and verify select column data", () => {
-    cy.get(agGridSelector).agGridToggleColumnsSideBar("Price", true);
-    cy.fixture("cardata").then((expectedTableData) => {
-      const expectedData_priceColumnRemoved = removePropertyFromCollection(
-        expectedTableData,
-        ["Price"]
-      );
-
-      cy.get(agGridSelector)
-        .getAgGridData()
-        .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
-            actualTableData,
-            expectedData_priceColumnRemoved.slice(0, _pageSize)
-          );
-        });
-    });
-  });
-
-  it("remove multiple columns from grid and verify select column data", () => {
-    cy.get(agGridSelector).agGridToggleColumnsSideBar("Price", true);
-    cy.get(agGridSelector).agGridToggleColumnsSideBar("Make", true);
-    cy.fixture("cardata").then((expectedTableData) => {
-      const expectedData_multipleColumnsRemoved = removePropertyFromCollection(
-        expectedTableData,
-        ["Price", "Make"]
-      );
-      cy.get(agGridSelector)
-        .getAgGridData()
-        .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
-            actualTableData,
-            expectedData_multipleColumnsRemoved.slice(0, _pageSize)
-          );
-        });
-    });
-  });
-
-  it("only validate select column data", () => {
-    const expectedTableData = [
-      { Year: "2020", Make: "Toyota", Model: "Celica" },
-      { Year: "2020", Make: "Ford", Model: "Mondeo" },
-      { Year: "2020", Make: "Porsche", Model: "Boxter" },
-      { Year: "2020", Make: "BMW", Model: "3-series" },
-      { Year: "2020", Make: "Mercedes", Model: "GLC300" },
-    ];
-    cy.get(agGridSelector)
-      .getAgGridData({ onlyColumns: ["Year", "Make", "Model"] })
-      .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsSubset(actualTableData, expectedTableData);
-      });
-  });
-});
-
-function removePropertyFromCollection(expectedTableData, columnsToExclude) {
-  //Exclude any specified columns
-  if (columnsToExclude) {
-    columnsToExclude.forEach((excludedColumn) => {
-      expectedTableData.forEach((obj) => deleteKey(obj, excludedColumn));
-    });
-  }
-  return expectedTableData;
-}
-
-// /// THE BELOW METHODS SHOWCASE HOW TO DYNAMICALLY GET THE EXPECTED DATA AND MANIPULATE IT FOR VALIDATION
-// /// THIS INCLUDES PAGINATION, FILTERING, and COLUMN EXCLUSION
-
-// export const carColumns = {
-//   year: "Year",
-//   make: "Make",
-//   model: "Model",
-//   price: "Price",
-// };
-
-// /**
-//  * Returns ALL expected table data populated from the expected test data call and does not factor in pagination
-//  * @param columnsToExclude Provide an array of string values for columns to not return in the data set
-//  * @param filters a "\^" delimited string of all columns and values to search for in the grid (i.e. "Name=John Smith^Rate Plan=Standard"
-//  */
-// export function getExpectedTableData(columnsToExclude, filters) {
-//   let table = [];
-
-//   // Get the expected table data from the cardata fixture file and process it with columns exclusions and filters
-//   return cy
-//     .fixture("cardata")
-//     .then((cars) => {
-//       table = cars;
-//     })
-//     .then(() => {
-//       // Iterate over all filter strings and filter table results in the order in which they are provided
-//       if (filters) {
-//         filters.split("^").forEach((filter) => {
-//           const [key, value] = filter.split("=");
-//           const getKey = getKeyByValue(carColumns, key);
-//           table = table.filter((a) => a[getKey].includes(value));
-//         });
-//       }
-//     })
-//     .then(() => {
-//       // Update the property key values to match what is represented in the grid for validation purposes
-//       // (i.e. in this example, we change make to Make, model to Model, and price to Price to match
-//       // what is shown in the grid headers exactly).
-//       for (const key in carColumns)
-//         table.forEach((obj) => renameKey(obj, key, carColumns[key]));
-
-//       //Exclude any specified columns
-//       if (columnsToExclude) {
-//         columnsToExclude.forEach((excludedColumn) => {
-//           table.forEach((obj) => deleteKey(obj, excludedColumn));
-//         });
-//       }
-//       return table;
-//     });
-// }
-
-// /**
-//  * Returns ALL expected table data and paginates the data based on the pageSize
-//  * @param columnsToExclude Provide an array of string values for columns to not return in the data set
-//  * @param pageSize If no value is provided, default value of 5 items per page is used
-//  */
-// function getExpectedPaginatedTableData(columnsToExclude, pageSize = 5) {
-//   const paginatedTableData = [];
-//   // paginates the expected table data, and removes specified column exclusions
-//   return getExpectedTableData(columnsToExclude)
-//     .then((tableData) => {
-//       const pages = Math.floor(tableData.length / pageSize);
-//       const finalPageCount = tableData.length % pageSize;
-//       let iterator = 0;
-//       for (let i = 0; i < pages; i++) {
-//         paginatedTableData.push(tableData.slice(iterator, iterator + pageSize));
-//         iterator += pageSize;
-//       }
-//       paginatedTableData.push(
-//         tableData.slice(iterator, iterator + finalPageCount)
-//       );
-//     })
-//     .then(() => {
-//       return paginatedTableData;
-//     });
-// }