cypress-ag-grid 3.0.0 → 3.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +16 -0
  2. package/app/data.json +2 -1
  3. package/app/grid-basic.js +5 -7
  4. package/app/grid-grouped.js +5 -7
  5. package/cypress/e2e/ag-grid-data.cy.js +99 -53
  6. package/cypress/fixtures/cardata.json +2 -1
  7. package/package.json +2 -2
  8. package/src/agGrid/agGridInteractions.js +109 -71
  9. package/src/agGrid/filterOperator.enum.js +6 -6
  10. package/src/agGrid/menuTab.enum.js +1 -1
  11. package/src/index.js +3 -2
package/README.md CHANGED
@@ -9,6 +9,7 @@ Cypress plugin for interacting with and validating against ag grid.
9
9
  - [Getting Select Row Data](#getting-select-row-data)
10
10
  - [Getting Elements From the Grid](#getting-elements-from-the-grid)
11
11
  - [Sorting Columns](#sorting-columns)
12
+ - [Pinning Columns](#pinning-columns)
12
13
  + [Grid Filtering](#)
13
14
  - [Filter Options](#filter-options)
14
15
  - [Filter by Text - Column Menu](#filter-by-text---column-menu)
@@ -123,6 +124,21 @@ cy.get("#myGrid").agGridSortColumn("Model", "descending");
123
124
  </br>
124
125
  </br>
125
126
 
127
+ ### Pinning Columns
128
+ This command will pin the specified column.
129
+ <b>Definition</b>
130
+ `.agGridPinColumn(columnName: string, pin: ['left', 'right', null])`
131
+
132
+ Example:
133
+ ```javascript
134
+ cy.get("#myGrid").agGridPinColumn("Model", "left") // Pins the "Model" column to the left
135
+ cy.get("#myGrid").agGridPinColumn("Model", "right") // Pins the "Model" column to the right
136
+ cy.get("#mGrid").agGridPinColumn("Model") // Removes the pin
137
+
138
+ ```
139
+ </br>
140
+ </br>
141
+
126
142
  ### Filter Options
127
143
 
128
144
  The below filtering commands takes an `options` parameter comprised of the following properties:
package/app/data.json CHANGED
@@ -18,5 +18,6 @@
18
18
  { "year": "1990", "make": "Ford", "model": "Taurus", "condition":"excellent","price": "900" },
19
19
  { "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"fair","price": "3000" },
20
20
  { "year": "2020", "make": "BMW", "model": "2002", "condition":"excellent","price": "88001" },
21
- { "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","price": "" }
21
+ { "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","price": "" },
22
+ { "year": "2020", "make": "Toyota", "model": "Celica", "condition": "fair", "price": "35000" }
22
23
  ]
package/app/grid-basic.js CHANGED
@@ -53,20 +53,18 @@ const eGridDiv = document.querySelector("#myGrid");
53
53
  new agGrid.Grid(eGridDiv, gridOptions);
54
54
 
55
55
  // Grab the grid data from the supplied API endpoint
56
- agGrid
57
- .simpleHttpRequest({
58
- url: "./data.json",
59
- })
56
+ fetch("./data.json")
57
+ .then(res => res.json())
60
58
  .then((data) => {
61
- gridOptions.api.setRowData(data);
59
+ gridOptions.api.setGridOption('rowData', data);
62
60
  });
63
61
 
64
62
  function autoSizeAllColumns() {
65
63
  var allColumnIds = [];
66
- gridOptions.columnApi.getAllColumns().forEach(function (column) {
64
+ gridOptions.api.getAllColumns().forEach(function (column) {
67
65
  allColumnIds.push(column.colId);
68
66
  });
69
- gridOptions.columnApi.autoSizeColumns(allColumnIds);
67
+ gridOptions.api.autoSizeColumns(allColumnIds);
70
68
  }
71
69
 
72
70
  // If the Cypress test is running, ensure all columns fit within the window
package/app/grid-grouped.js CHANGED
@@ -46,20 +46,18 @@ const eGridDivGrouped = document.querySelector("#myGrid2");
46
46
  new agGrid.Grid(eGridDivGrouped, gridOptionsGrouped);
47
47
 
48
48
  // Grab the grid data from the supplied API endpoint
49
- agGrid
50
- .simpleHttpRequest({
51
- url: "./data.json",
52
- })
49
+ fetch("./data.json")
50
+ .then(res => res.json())
53
51
  .then((data) => {
54
- gridOptionsGrouped.api.setRowData(data);
52
+ gridOptionsGrouped.api.setGridOption('rowData', data);
55
53
  });
56
54
 
57
55
  function autoSizeAllColumns() {
58
56
  var allColumnIds = [];
59
- gridOptionsGrouped.columnApi.getAllColumns().forEach(function (column) {
57
+ gridOptionsGrouped.api.getAllColumns().forEach(function (column) {
60
58
  allColumnIds.push(column.colId);
61
59
  });
62
- gridOptionsGrouped.columnApi.autoSizeColumns(allColumnIds);
60
+ gridOptionsGrouped.api.autoSizeColumns(allColumnIds);
63
61
  }
64
62
 
65
63
  // If the Cypress test is running, ensure all columns fit within the window
package/cypress/e2e/ag-grid-data.cy.js CHANGED
@@ -9,6 +9,39 @@ import { filterOperator } from "../../src/agGrid/filterOperator.enum";
9
9
 
10
10
  const _pageSize = 5;
11
11
  const agGridSelector = "#myGrid";
12
+ const expectedPaginatedTableData = [
13
+ [
14
+ { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
15
+ { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
16
+ { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "72000" },
17
+ { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
18
+ { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "good", Price: "53000" },
19
+ ],
20
+ [
21
+ { Year: "2020", Make: "Honda", Model: "Civic", Condition: "poor", Price: "22000" },
22
+ { Year: "2020", Make: "Honda", Model: "Accord", Condition: "poor", Price: "32000" },
23
+ { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
24
+ { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "good", Price: "22000" },
25
+ { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "poor", Price: "5000" },
26
+ ],
27
+ [
28
+ { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "good", Price: "25000" },
29
+ { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "99000" },
30
+ { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
31
+ { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "excellent", Price: "35000" },
32
+ { Year: "2011", Make: "Honda", Model: "Civic", Condition: "good", Price: "9000" },
33
+ ],
34
+ [
35
+ { Year: "2020", Make: "Honda", Model: "Accord", Condition: "good", Price: "34000" },
36
+ { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
37
+ { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
38
+ { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
39
+ { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" },
40
+ ],
41
+ [
42
+ { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
43
+ ]
44
+ ];
12
45
 
13
46
  describe("ag-grid get data scenarios", () => {
14
47
  beforeEach(() => {
@@ -16,42 +49,55 @@ describe("ag-grid get data scenarios", () => {
16
49
  cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
17
50
  });
18
51
 
19
- it("verify paginated table data - include all columns", () => {
20
- const expectedPaginatedTableData = [
21
- [
22
- { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
23
- { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
24
- { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "72000" },
25
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
26
- { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "good", Price: "53000" },
27
- ],
28
- [
29
- { Year: "2020", Make: "Honda", Model: "Civic", Condition: "poor", Price: "22000" },
30
- { Year: "2020", Make: "Honda", Model: "Accord", Condition: "poor", Price: "32000" },
31
- { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
32
- { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "good", Price: "22000" },
33
- { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "poor", Price: "5000" },
34
- ],
35
- [
36
- { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "good", Price: "25000" },
37
- { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "99000" },
38
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
39
- { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "excellent", Price: "35000" },
40
- { Year: "2011", Make: "Honda", Model: "Civic", Condition: "good", Price: "9000" },
41
- ],
42
- [
43
- { Year: "2020", Make: "Honda", Model: "Accord", Condition: "good", Price: "34000" },
44
- { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
45
- { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
46
- { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
47
- { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" },
48
- ],
49
- ];
50
- cy.get(agGridSelector).agGridValidatePaginatedTable(
52
+ it("verify data when multiple rows are identical", ()=>{
53
+
54
+ const expectedTableData =
55
+ [
56
+ { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" },
57
+ { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "poor", "Price": "5000" },
58
+ { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" },
59
+ ]
60
+ cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
61
+ searchCriteria: {
62
+ columnName: "Model",
63
+ filterValue: "Celica",
64
+ },
65
+ selectAllLocaleText: "Select All", // This is optional if you are using localText for ag grid
66
+ hasApplyButton: true,
67
+ });
68
+
69
+ cy.get(agGridSelector)
70
+ .getAgGridData()
71
+ .then((actualTableData) => {
72
+ cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
73
+ });
74
+
75
+ })
76
+
77
+ it("verify paginated table data - any order - include all columns", () => {
78
+ cy.get(agGridSelector).agGridValidatePaginatedTable(
51
79
  expectedPaginatedTableData
52
80
  );
53
81
  });
54
82
 
83
+ it("verify paginated table data - exact order - include all columns", () => {
84
+ cy.get(agGridSelector)
85
+ .getAgGridData()
86
+ .then((actualTableData) => {
87
+ cy.agGridValidateRowsExactOrder(actualTableData, expectedPaginatedTableData[0]);
88
+ });
89
+ });
90
+
91
+ it("verify exact order table data when columns are not in order - include all columns", () => {
92
+ cy.get(agGridSelector).agGridPinColumn('Price', 'left');
93
+
94
+ cy.get(agGridSelector)
95
+ .getAgGridData()
96
+ .then((actualTableData) => {
97
+ cy.agGridValidateRowsExactOrder(actualTableData, expectedPaginatedTableData[0]);
98
+ });
99
+ });
100
+
55
101
  it("verify paginated table data - excluding columns", () => {
56
102
  const expectedPaginatedTableData = [
57
103
  [
@@ -80,7 +126,7 @@ describe("ag-grid get data scenarios", () => {
80
126
  { Year: "1990", Make: "Ford", Model: "Taurus" },
81
127
  { Year: "2020", Make: "Hyundai", Model: "Elantra" },
82
128
  { Year: "2020", Make: "BMW", Model: "2002" },
83
- { Year: "2023", Make: "Hyundai", Model: "Santa Fe"},
129
+ { Year: "2023", Make: "Hyundai", Model: "Santa Fe" },
84
130
  ],
85
131
  ];
86
132
  cy.get(agGridSelector).agGridValidatePaginatedTable(
@@ -116,7 +162,7 @@ describe("ag-grid get data scenarios", () => {
116
162
  { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
117
163
  { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
118
164
  ];
119
-
165
+
120
166
  cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
121
167
  searchCriteria: [
122
168
  {
@@ -197,7 +243,7 @@ describe("ag-grid get data scenarios", () => {
197
243
  { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
198
244
  { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
199
245
  ];
200
-
246
+
201
247
  cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
202
248
  cy.get(agGridSelector).agGridColumnFilterTextFloating({
203
249
  searchCriteria: {
@@ -219,7 +265,7 @@ describe("ag-grid get data scenarios", () => {
219
265
  { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
220
266
  { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
221
267
  ];
222
-
268
+
223
269
  cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
224
270
  cy.get(agGridSelector).agGridColumnFilterTextFloating({
225
271
  searchCriteria: {
@@ -432,7 +478,7 @@ describe("ag-grid get data scenarios", () => {
432
478
  });
433
479
  });
434
480
 
435
- it("able to filter by 'Blank'", () =>{
481
+ it("able to filter by 'Blank'", () => {
436
482
  const expectedTableData = [
437
483
  { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" }
438
484
  ]
@@ -445,50 +491,50 @@ describe("ag-grid get data scenarios", () => {
445
491
  hasApplyButton: true,
446
492
  });
447
493
  cy.get(agGridSelector)
448
- .getAgGridData()
449
- .then((actualTableData) => {
450
- cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
451
- });
494
+ .getAgGridData()
495
+ .then((actualTableData) => {
496
+ cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
497
+ });
452
498
 
453
499
  });
454
500
 
455
- it('able to filter by agTextColumnFilter with join operator', ()=>{
501
+ it('able to filter by agTextColumnFilter with join operator', () => {
456
502
  const expectedTableData = [
457
503
  { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
458
504
  { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
459
505
  { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
460
506
  ]
461
507
  cy.get(agGridSelector).agGridColumnFilterTextFloating({
462
- searchCriteria:
508
+ searchCriteria:
463
509
  {
464
510
  columnName: "Condition",
465
- operator: "Starts with",
511
+ operator: filterOperator.startsWith,
466
512
  filterValue: 'f',
467
513
  searchInputIndex: 0,
468
514
  },
469
-
515
+
470
516
  multiple: true,
471
517
  hasApplyButton: true,
472
518
  });
473
-
519
+
474
520
  cy.get(agGridSelector).agGridColumnFilterTextFloating({
475
- searchCriteria:
521
+ searchCriteria:
476
522
  {
477
523
  columnName: "Condition",
478
- operator:"Ends with",
524
+ operator: filterOperator.endsWith,
479
525
  filterValue: "ir",
480
526
  searchInputIndex: 1,
481
527
  },
482
-
528
+
483
529
  multiple: true,
484
530
  hasApplyButton: true,
485
531
  });
486
532
 
487
533
  cy.get(agGridSelector)
488
- .getAgGridData()
489
- .then((actualTableData) => {
490
- cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
491
- });
534
+ .getAgGridData()
535
+ .then((actualTableData) => {
536
+ cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
537
+ });
492
538
  });
493
539
  });
494
540
 
package/cypress/fixtures/cardata.json CHANGED
@@ -17,5 +17,6 @@
17
17
  { "Year": "2020", "Make": "Honda", "Model": "Accord", "Condition": "good", "Price": "34000" },
18
18
  { "Year": "1990", "Make": "Ford", "Model": "Taurus", "Condition": "excellent", "Price": "900" },
19
19
  { "Year": "2020", "Make": "Hyundai", "Model": "Elantra", "Condition": "fair", "Price": "3000" },
20
- { "Year": "2020", "Make": "BMW", "Model": "2002", "Condition": "excellent", "Price": "88001" }
20
+ { "Year": "2020", "Make": "BMW", "Model": "2002", "Condition": "excellent", "Price": "88001" },
21
+ { "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" }
21
22
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cypress-ag-grid",
3
- "version": "3.0.0",
3
+ "version": "3.2.2",
4
4
  "description": "Cypress plugin to interact with ag grid",
5
5
  "main": "src/index.js",
6
6
  "repository": {
@@ -18,7 +18,7 @@
18
18
  "cypress aggrid"
19
19
  ],
20
20
  "scripts": {
21
- "test": "npx cypress run --headless --spec cypress/integration/ag-grid-spec.js",
21
+ "test": "npx cypress run --headless --spec cypress/e2e/*.cy.js",
22
22
  "test:watch": "npx cypress open"
23
23
  },
24
24
  "author": "Kerry McKeever <kerry@kerrymckeever.com>",
package/src/agGrid/agGridInteractions.js CHANGED
@@ -79,36 +79,50 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
79
79
  // Sort row cells by their aria-colindex attribute value
80
80
  // First check if elements returned already contain the aria-colindex
81
81
  // If not, just query for the .ag-cell
82
- let rowCells = [...row.querySelectorAll(".ag-cell [aria-colindex]")];
82
+ let rowCells = [...row.querySelectorAll(".ag-cell[aria-colindex]")];
83
83
  if (rowCells.length === 0) {
84
84
  rowCells = [...row.querySelectorAll(".ag-cell")];
85
85
  }
86
- return rowCells
87
- .sort(sortElementsByAttributeValue("aria-colindex"))
88
- .map((e) => {
89
- if (returnElements) {
90
- return e;
91
- } else {
92
- return e.textContent.trim();
93
- }
94
- });
86
+ const rowIndex = parseInt(
87
+ row.attributes["row-index"].nodeValue,
88
+ 10
89
+ ).valueOf();
90
+
91
+ if (allRows[rowIndex]) {
92
+ allRows[rowIndex] = [...allRows[rowIndex], ...rowCells];
93
+ } else {
94
+ allRows[rowIndex] = rowCells;
95
+ }
95
96
  });
96
- allRows.push(_rows);
97
97
  });
98
-
99
98
  // Remove any empty arrays before merging
100
99
  allRows = allRows.filter(function (ele) {
101
100
  return ele.length;
102
101
  });
103
102
 
103
+ // Remove duplicate entries from allRows
104
+ // In some instances we see cell duplication for non-unique rows
105
+ allRows = allRows.map((row)=>{
106
+ return row.filter((cell, index)=>{
107
+ return row.indexOf(cell) === index;
108
+ })
109
+ })
110
+
104
111
  if (!allRows.length) rows = [];
105
112
  else {
106
- // Combine results from all specified tables (either single table, or all pinned columns) by index
107
- rows = allRows.reduce(function (a, b) {
108
- return a.map(function (v, i) {
109
- return v.concat(b[i]);
110
- });
111
- });
113
+ rows = allRows
114
+ .filter((rowCells) => rowCells.length)
115
+ .map((rowCells) =>
116
+ rowCells
117
+ .sort(sortElementsByAttributeValue("aria-colindex"))
118
+ .map((e) => {
119
+ if (returnElements) {
120
+ return e;
121
+ } else {
122
+ return e.textContent.trim();
123
+ }
124
+ })
125
+ );
112
126
  }
113
127
 
114
128
  // if options.rawValues = true, return headers & rows values as arrays instead of mapping as objects
@@ -151,11 +165,11 @@ function getColumnHeaderElement(agGridElement, columnName) {
151
165
  * @returns
152
166
  */
153
167
  export function sortColumnBy(agGridElement, columnName, sortDirection) {
154
- if(sortDirection.toLowerCase() === "ascending"){
155
- sortDirection = "asc"
156
- }else if(sortDirection.toLowerCase() === "descending"){
157
- sortDirection = "desc"
158
- }
168
+ if (sortDirection.toLowerCase() === "ascending") {
169
+ sortDirection = "asc";
170
+ } else if (sortDirection.toLowerCase() === "descending") {
171
+ sortDirection = "desc";
172
+ }
159
173
 
160
174
  if (sortDirection === sort.ascending || sortDirection === sort.descending) {
161
175
  return getColumnHeaderElement(agGridElement, columnName)
@@ -163,15 +177,14 @@ export function sortColumnBy(agGridElement, columnName, sortDirection) {
163
177
  .invoke("attr", "class")
164
178
  .then((value) => {
165
179
  cy.log(`sort: ${sortDirection}`);
166
- if(!value.includes(`ag-header-cell-sorted-${sortDirection}`)){
180
+ if (!value.includes(`ag-header-cell-sorted-${sortDirection}`)) {
167
181
  getColumnHeaderElement(agGridElement, columnName).click().wait(250);
168
182
  sortColumnBy(agGridElement, columnName, sortDirection);
169
183
  }
170
- });
184
+ })
185
+ .wait(100);
171
186
  } else {
172
- throw new Error(
173
- "sortDirection must be either 'asc' or 'desc'."
174
- );
187
+ throw new Error("sortDirection must be either 'asc' or 'desc'.");
175
188
  }
176
189
  }
177
190
 
@@ -239,13 +252,13 @@ function getFilterColumnButtonElement(
239
252
  * @param operator (optional) use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values)
240
253
  * @param noMenuTabs (optional) boolean indicating if the menu has tabs.
241
254
  */
242
- function filterBySearchTerm(agGridElement, options) {
255
+ function filterBySearchTerm(agGridElement, options) {
243
256
  const filterValue = options.searchCriteria.filterValue;
244
257
  const operator = options.searchCriteria.operator;
245
258
  const searchInputIndex = options.searchCriteria.searchInputIndex || 0;
246
259
  const isMultiFilter = options.searchCriteria.isMultiFilter;
247
260
  const noMenuTabs = options.noMenuTabs;
248
-
261
+
249
262
  // Navigate to the filter tab
250
263
  if (!noMenuTabs) {
251
264
  selectMenuTab(agGridElement, filterTab.filter);
@@ -253,6 +266,7 @@ function getFilterColumnButtonElement(
253
266
 
254
267
  if (operator) {
255
268
  cy.get(agGridElement)
269
+ .find(".ag-filter")
256
270
  .find(".ag-picker-field-wrapper")
257
271
  .filter(":visible")
258
272
  .eq(searchInputIndex)
@@ -271,34 +285,28 @@ function getFilterColumnButtonElement(
271
285
  .find(".ag-popup-child")
272
286
  .find("input")
273
287
  .filter(":visible")
274
- .as("filterInput")
275
-
276
- // If it's a multi filter, de-select the 'select-all' checkbox
277
- if(isMultiFilter){
278
- const selectAllText = options.selectAllLocaleText || "Select All";
279
- toggleColumnCheckboxFilter(
280
- agGridElement,
281
- selectAllText,
282
- false,
283
- true
284
- );
285
- }
288
+ .as("filterInput");
286
289
 
287
- // Get the saved filter input and enter the search term
288
- if(operator !== filterOperator.blank && operator !== filterOperator.notBlank){
289
- cy.get("@filterInput").then(($ele)=>{
290
- cy.wrap($ele)
291
- .eq(searchInputIndex)
292
- .clear()
293
- .type(filterValue)
294
- .wait(500);
295
- })
296
- }
290
+ // If it's a multi filter, de-select the 'select-all' checkbox
291
+ if (isMultiFilter) {
292
+ const selectAllText = options.selectAllLocaleText || "Select All";
293
+ toggleColumnCheckboxFilter(agGridElement, selectAllText, false, true);
294
+ }
295
+
296
+ // Get the saved filter input and enter the search term
297
+ if (
298
+ operator !== filterOperator.blank &&
299
+ operator !== filterOperator.notBlank
300
+ ) {
301
+ cy.get("@filterInput").then(($ele) => {
302
+ cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue).wait(500);
303
+ });
304
+ }
297
305
 
298
- // Finally, if a multi-filter, select the filter value's checkbox
299
- if(isMultiFilter){
300
- toggleColumnCheckboxFilter(agGridElement, filterValue, true, true)
301
- }
306
+ // Finally, if a multi-filter, select the filter value's checkbox
307
+ if (isMultiFilter) {
308
+ toggleColumnCheckboxFilter(agGridElement, filterValue, true, true);
309
+ }
302
310
  }
303
311
 
304
312
  function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
@@ -306,10 +314,11 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
306
314
  cy.get(agGridElement)
307
315
  .find(".ag-filter-apply-panel-button")
308
316
  .contains("Apply")
309
- .click();
317
+ .click()
318
+ .wait(500);
310
319
  }
311
320
  if (!noMenuTabs) {
312
- getMenuTabElement(agGridElement, filterTab.filter).click();
321
+ getMenuTabElement(agGridElement, filterTab.filter).click().wait(500);
313
322
  }
314
323
  }
315
324
 
@@ -334,8 +343,8 @@ function toggleColumnCheckboxFilter(
334
343
  .siblings("div")
335
344
  .find("input")
336
345
  .then(($ele) => {
337
- if (doSelect) cy.wrap($ele).check();
338
- else cy.wrap($ele).uncheck();
346
+ if (doSelect) cy.wrap($ele).check().wait(500);
347
+ else cy.wrap($ele).uncheck().wait(500);
339
348
  });
340
349
  }
341
350
 
@@ -343,16 +352,51 @@ function populateSearchCriteria(
343
352
  searchCriteria,
344
353
  hasApplyButton = false,
345
354
  noMenuTabs = false,
346
- selectAllLocaleText = 'Select All'
347
- ) {
355
+ selectAllLocaleText = "Select All"
356
+ ) {
348
357
  const options = {};
349
- options.searchCriteria = {...searchCriteria};
358
+ options.searchCriteria = { ...searchCriteria };
350
359
  options.selectAllLocaleText = selectAllLocaleText;
351
360
  options.hasApplyButton = hasApplyButton;
352
361
  options.noMenuTabs = noMenuTabs;
353
362
  return options;
354
363
  }
355
364
 
365
+ /**
366
+ * Will add or remove a column from ag grid.
367
+ * @param columnName The column name to add/remove
368
+ * @param pin 'left', 'right' or null
369
+ */
370
+ export function pinColumn(agGridElement, columnName, pin) {
371
+ getColumnHeaderElement(agGridElement, columnName)
372
+ .parent()
373
+ .siblings(".ag-header-cell-menu-button")
374
+ .click();
375
+
376
+ selectMenuTab(agGridElement, filterTab.general);
377
+
378
+ cy.get(agGridElement).find(".ag-menu-option").contains("Pin Column").click();
379
+
380
+ var selectedOption;
381
+
382
+ switch (pin) {
383
+ case "left":
384
+ selectedOption = "Pin Left";
385
+ break;
386
+ case "right":
387
+ selectedOption = "Pin Right";
388
+ break;
389
+ default:
390
+ selectedOption = "No Pin";
391
+ break;
392
+ }
393
+
394
+ cy.get(agGridElement)
395
+ .find(".ag-menu-option")
396
+ .contains(selectedOption)
397
+ .click();
398
+ }
399
+
356
400
  /**
357
401
  * * Performs a filter operation on the specified column via the context menu using plain text search
358
402
  * @param agGridElement The get() selector for which ag grid table you wish to retrieve.
@@ -387,10 +431,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
387
431
  agGridElement,
388
432
  options.searchCriteria.columnName
389
433
  ).click();
390
- filterBySearchTerm(
391
- agGridElement,
392
- options
393
- );
434
+ filterBySearchTerm(agGridElement, options);
394
435
  applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
395
436
  }
396
437
 
@@ -430,10 +471,7 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
430
471
  options.searchCriteria.columnName,
431
472
  true
432
473
  ).click();
433
- filterBySearchTerm(
434
- agGridElement,
435
- options
436
- );
474
+ filterBySearchTerm(agGridElement, options);
437
475
  applyColumnFilter(
438
476
  agGridElement,
439
477
  options.hasApplyButton,
package/src/agGrid/filterOperator.enum.js CHANGED
@@ -1,15 +1,15 @@
1
1
  export const filterOperator = {
2
2
  contains: "Contains",
3
- notContains: "Not contains",
3
+ notContains: "Does not contain",
4
4
  equals: "Equals",
5
- notEquals: "Not equals",
6
- startsWith: "Starts with",
5
+ notEquals: "Does not equal",
6
+ startsWith: "Begins with",
7
7
  endsWith: "Ends with",
8
8
  lessThan: "Less than",
9
- lessThanOrEquals: "Less than or equals",
9
+ lessThanOrEquals: "Less than or equal to",
10
10
  greaterThan: "Greater than",
11
- greaterThanOrEquals: "Greater than or equals",
12
- inRange: "In range",
11
+ greaterThanOrEquals: "Greater than or equal to",
12
+ inRange: "Between",
13
13
  blank: "Blank",
14
14
  notBlank: "Not Blank"
15
15
  }
package/src/agGrid/menuTab.enum.js CHANGED
@@ -2,5 +2,5 @@ export const filterTab = {
2
2
  columns: "columns",
3
3
  filter: "filter",
4
4
  search: "search",
5
- general: "general"
5
+ general: "menu"
6
6
  }
package/src/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import {getAgGridData, getAgGridElements, sortColumnBy} from "./agGrid/agGridInteractions"
4
4
  import {validateTablePages, validateTableExactOrder, validateEmptyTable, validateTableRowSubset} from "./agGrid/agGridValidations"
5
- import {filterByCheckboxColumnMenu, filterBySearchTextColumnFloatingFilter, filterBySearchTextColumnMenu, toggleColumnFromSideBar} from "./agGrid/agGridInteractions";
5
+ import {filterByCheckboxColumnMenu, filterBySearchTextColumnFloatingFilter, filterBySearchTextColumnMenu, toggleColumnFromSideBar, pinColumn} from "./agGrid/agGridInteractions";
6
6
 
7
7
  Cypress.Commands.add('getAgGridData', { prevSubject: true }, getAgGridData);
8
8
  Cypress.Commands.add('getAgGridElements', {prevSubject: true}, getAgGridElements);
@@ -16,4 +16,5 @@ Cypress.Commands.add('agGridValidateRowsExactOrder', {prevSubject: 'optional'},
16
16
  Cypress.Commands.add('agGridValidateRowsSubset', {prevSubject: 'optional'}, validateTableRowSubset)
17
17
  Cypress.Commands.add('agGridValidateEmptyTable', {prevSubject: 'optional'}, validateEmptyTable)
18
18
 
19
- Cypress.Commands.add('agGridToggleColumnsSideBar', {prevSubject: true}, toggleColumnFromSideBar)
19
+ Cypress.Commands.add('agGridToggleColumnsSideBar', {prevSubject: true}, toggleColumnFromSideBar)
20
+ Cypress.Commands.add('agGridPinColumn', {prevSubject: true}, pinColumn)