cypress-ag-grid 2.0.4 → 3.2.1
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.
- package/README.md +16 -0
- package/app/grid-basic.js +5 -7
- package/app/grid-grouped.js +5 -7
- package/cypress/e2e/ag-grid-data.cy.js +71 -53
- package/package.json +2 -2
- package/src/agGrid/agGridInteractions.js +101 -71
- package/src/agGrid/filterOperator.enum.js +6 -6
- package/src/agGrid/menuTab.enum.js +1 -1
- 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/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
|
-
|
|
57
|
-
.
|
|
58
|
-
url: "./data.json",
|
|
59
|
-
})
|
|
56
|
+
fetch("./data.json")
|
|
57
|
+
.then(res => res.json())
|
|
60
58
|
.then((data) => {
|
|
61
|
-
gridOptions.api.
|
|
59
|
+
gridOptions.api.setGridOption('rowData', data);
|
|
62
60
|
});
|
|
63
61
|
|
|
64
62
|
function autoSizeAllColumns() {
|
|
65
63
|
var allColumnIds = [];
|
|
66
|
-
gridOptions.
|
|
64
|
+
gridOptions.api.getAllColumns().forEach(function (column) {
|
|
67
65
|
allColumnIds.push(column.colId);
|
|
68
66
|
});
|
|
69
|
-
gridOptions.
|
|
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
|
-
|
|
50
|
-
.
|
|
51
|
-
url: "./data.json",
|
|
52
|
-
})
|
|
49
|
+
fetch("./data.json")
|
|
50
|
+
.then(res => res.json())
|
|
53
51
|
.then((data) => {
|
|
54
|
-
gridOptionsGrouped.api.
|
|
52
|
+
gridOptionsGrouped.api.setGridOption('rowData', data);
|
|
55
53
|
});
|
|
56
54
|
|
|
57
55
|
function autoSizeAllColumns() {
|
|
58
56
|
var allColumnIds = [];
|
|
59
|
-
gridOptionsGrouped.
|
|
57
|
+
gridOptionsGrouped.api.getAllColumns().forEach(function (column) {
|
|
60
58
|
allColumnIds.push(column.colId);
|
|
61
59
|
});
|
|
62
|
-
gridOptionsGrouped.
|
|
60
|
+
gridOptionsGrouped.api.autoSizeColumns(allColumnIds);
|
|
63
61
|
}
|
|
64
62
|
|
|
65
63
|
// If the Cypress test is running, ensure all columns fit within the window
|
|
@@ -9,6 +9,36 @@ 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
|
+
];
|
|
12
42
|
|
|
13
43
|
describe("ag-grid get data scenarios", () => {
|
|
14
44
|
beforeEach(() => {
|
|
@@ -16,42 +46,30 @@ describe("ag-grid get data scenarios", () => {
|
|
|
16
46
|
cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
|
|
17
47
|
});
|
|
18
48
|
|
|
19
|
-
it("verify paginated table data - include all columns", () => {
|
|
20
|
-
|
|
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(
|
|
49
|
+
it("verify paginated table data - any order - include all columns", () => {
|
|
50
|
+
cy.get(agGridSelector).agGridValidatePaginatedTable(
|
|
51
51
|
expectedPaginatedTableData
|
|
52
52
|
);
|
|
53
53
|
});
|
|
54
54
|
|
|
55
|
+
it("verify paginated table data - exact order - include all columns", () => {
|
|
56
|
+
cy.get(agGridSelector)
|
|
57
|
+
.getAgGridData()
|
|
58
|
+
.then((actualTableData) => {
|
|
59
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedPaginatedTableData[0]);
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
it("verify exact order table data when columns are not in order - include all columns", () => {
|
|
64
|
+
cy.get(agGridSelector).agGridPinColumn('Price', 'left');
|
|
65
|
+
|
|
66
|
+
cy.get(agGridSelector)
|
|
67
|
+
.getAgGridData()
|
|
68
|
+
.then((actualTableData) => {
|
|
69
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedPaginatedTableData[0]);
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
|
|
55
73
|
it("verify paginated table data - excluding columns", () => {
|
|
56
74
|
const expectedPaginatedTableData = [
|
|
57
75
|
[
|
|
@@ -80,7 +98,7 @@ describe("ag-grid get data scenarios", () => {
|
|
|
80
98
|
{ Year: "1990", Make: "Ford", Model: "Taurus" },
|
|
81
99
|
{ Year: "2020", Make: "Hyundai", Model: "Elantra" },
|
|
82
100
|
{ Year: "2020", Make: "BMW", Model: "2002" },
|
|
83
|
-
{ Year: "2023", Make: "Hyundai", Model: "Santa Fe"},
|
|
101
|
+
{ Year: "2023", Make: "Hyundai", Model: "Santa Fe" },
|
|
84
102
|
],
|
|
85
103
|
];
|
|
86
104
|
cy.get(agGridSelector).agGridValidatePaginatedTable(
|
|
@@ -116,7 +134,7 @@ describe("ag-grid get data scenarios", () => {
|
|
|
116
134
|
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
|
|
117
135
|
{ Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
|
|
118
136
|
];
|
|
119
|
-
|
|
137
|
+
|
|
120
138
|
cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
|
|
121
139
|
searchCriteria: [
|
|
122
140
|
{
|
|
@@ -197,7 +215,7 @@ describe("ag-grid get data scenarios", () => {
|
|
|
197
215
|
{ Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
|
|
198
216
|
{ Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
|
|
199
217
|
];
|
|
200
|
-
|
|
218
|
+
|
|
201
219
|
cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
|
|
202
220
|
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
203
221
|
searchCriteria: {
|
|
@@ -219,7 +237,7 @@ describe("ag-grid get data scenarios", () => {
|
|
|
219
237
|
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
|
|
220
238
|
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
|
|
221
239
|
];
|
|
222
|
-
|
|
240
|
+
|
|
223
241
|
cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
|
|
224
242
|
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
225
243
|
searchCriteria: {
|
|
@@ -432,7 +450,7 @@ describe("ag-grid get data scenarios", () => {
|
|
|
432
450
|
});
|
|
433
451
|
});
|
|
434
452
|
|
|
435
|
-
it("able to filter by 'Blank'", () =>{
|
|
453
|
+
it("able to filter by 'Blank'", () => {
|
|
436
454
|
const expectedTableData = [
|
|
437
455
|
{ Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" }
|
|
438
456
|
]
|
|
@@ -445,50 +463,50 @@ describe("ag-grid get data scenarios", () => {
|
|
|
445
463
|
hasApplyButton: true,
|
|
446
464
|
});
|
|
447
465
|
cy.get(agGridSelector)
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
466
|
+
.getAgGridData()
|
|
467
|
+
.then((actualTableData) => {
|
|
468
|
+
cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
|
|
469
|
+
});
|
|
452
470
|
|
|
453
471
|
});
|
|
454
472
|
|
|
455
|
-
it('able to filter by agTextColumnFilter with join operator', ()=>{
|
|
473
|
+
it('able to filter by agTextColumnFilter with join operator', () => {
|
|
456
474
|
const expectedTableData = [
|
|
457
475
|
{ Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
|
|
458
476
|
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
|
|
459
477
|
{ Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
|
|
460
478
|
]
|
|
461
479
|
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
462
|
-
searchCriteria:
|
|
480
|
+
searchCriteria:
|
|
463
481
|
{
|
|
464
482
|
columnName: "Condition",
|
|
465
|
-
operator:
|
|
483
|
+
operator: filterOperator.startsWith,
|
|
466
484
|
filterValue: 'f',
|
|
467
485
|
searchInputIndex: 0,
|
|
468
486
|
},
|
|
469
|
-
|
|
487
|
+
|
|
470
488
|
multiple: true,
|
|
471
489
|
hasApplyButton: true,
|
|
472
490
|
});
|
|
473
|
-
|
|
491
|
+
|
|
474
492
|
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
475
|
-
searchCriteria:
|
|
493
|
+
searchCriteria:
|
|
476
494
|
{
|
|
477
495
|
columnName: "Condition",
|
|
478
|
-
operator:
|
|
496
|
+
operator: filterOperator.endsWith,
|
|
479
497
|
filterValue: "ir",
|
|
480
498
|
searchInputIndex: 1,
|
|
481
499
|
},
|
|
482
|
-
|
|
500
|
+
|
|
483
501
|
multiple: true,
|
|
484
502
|
hasApplyButton: true,
|
|
485
503
|
});
|
|
486
504
|
|
|
487
505
|
cy.get(agGridSelector)
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
506
|
+
.getAgGridData()
|
|
507
|
+
.then((actualTableData) => {
|
|
508
|
+
cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
|
|
509
|
+
});
|
|
492
510
|
});
|
|
493
511
|
});
|
|
494
512
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cypress-ag-grid",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "3.2.1",
|
|
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/
|
|
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>",
|
|
@@ -79,23 +79,22 @@ 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
|
|
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
|
-
|
|
87
|
-
.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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;
|
|
@@ -103,12 +102,19 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
|
|
|
103
102
|
|
|
104
103
|
if (!allRows.length) rows = [];
|
|
105
104
|
else {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
105
|
+
rows = allRows
|
|
106
|
+
.filter((rowCells) => rowCells.length)
|
|
107
|
+
.map((rowCells) =>
|
|
108
|
+
rowCells
|
|
109
|
+
.sort(sortElementsByAttributeValue("aria-colindex"))
|
|
110
|
+
.map((e) => {
|
|
111
|
+
if (returnElements) {
|
|
112
|
+
return e;
|
|
113
|
+
} else {
|
|
114
|
+
return e.textContent.trim();
|
|
115
|
+
}
|
|
116
|
+
})
|
|
117
|
+
);
|
|
112
118
|
}
|
|
113
119
|
|
|
114
120
|
// if options.rawValues = true, return headers & rows values as arrays instead of mapping as objects
|
|
@@ -151,11 +157,11 @@ function getColumnHeaderElement(agGridElement, columnName) {
|
|
|
151
157
|
* @returns
|
|
152
158
|
*/
|
|
153
159
|
export function sortColumnBy(agGridElement, columnName, sortDirection) {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
160
|
+
if (sortDirection.toLowerCase() === "ascending") {
|
|
161
|
+
sortDirection = "asc";
|
|
162
|
+
} else if (sortDirection.toLowerCase() === "descending") {
|
|
163
|
+
sortDirection = "desc";
|
|
164
|
+
}
|
|
159
165
|
|
|
160
166
|
if (sortDirection === sort.ascending || sortDirection === sort.descending) {
|
|
161
167
|
return getColumnHeaderElement(agGridElement, columnName)
|
|
@@ -163,15 +169,14 @@ export function sortColumnBy(agGridElement, columnName, sortDirection) {
|
|
|
163
169
|
.invoke("attr", "class")
|
|
164
170
|
.then((value) => {
|
|
165
171
|
cy.log(`sort: ${sortDirection}`);
|
|
166
|
-
if(!value.includes(`ag-header-cell-sorted-${sortDirection}`)){
|
|
172
|
+
if (!value.includes(`ag-header-cell-sorted-${sortDirection}`)) {
|
|
167
173
|
getColumnHeaderElement(agGridElement, columnName).click().wait(250);
|
|
168
174
|
sortColumnBy(agGridElement, columnName, sortDirection);
|
|
169
175
|
}
|
|
170
|
-
})
|
|
176
|
+
})
|
|
177
|
+
.wait(100);
|
|
171
178
|
} else {
|
|
172
|
-
throw new Error(
|
|
173
|
-
"sortDirection must be either 'asc' or 'desc'."
|
|
174
|
-
);
|
|
179
|
+
throw new Error("sortDirection must be either 'asc' or 'desc'.");
|
|
175
180
|
}
|
|
176
181
|
}
|
|
177
182
|
|
|
@@ -239,13 +244,13 @@ function getFilterColumnButtonElement(
|
|
|
239
244
|
* @param operator (optional) use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values)
|
|
240
245
|
* @param noMenuTabs (optional) boolean indicating if the menu has tabs.
|
|
241
246
|
*/
|
|
242
|
-
|
|
247
|
+
function filterBySearchTerm(agGridElement, options) {
|
|
243
248
|
const filterValue = options.searchCriteria.filterValue;
|
|
244
249
|
const operator = options.searchCriteria.operator;
|
|
245
250
|
const searchInputIndex = options.searchCriteria.searchInputIndex || 0;
|
|
246
251
|
const isMultiFilter = options.searchCriteria.isMultiFilter;
|
|
247
252
|
const noMenuTabs = options.noMenuTabs;
|
|
248
|
-
|
|
253
|
+
|
|
249
254
|
// Navigate to the filter tab
|
|
250
255
|
if (!noMenuTabs) {
|
|
251
256
|
selectMenuTab(agGridElement, filterTab.filter);
|
|
@@ -253,6 +258,7 @@ function getFilterColumnButtonElement(
|
|
|
253
258
|
|
|
254
259
|
if (operator) {
|
|
255
260
|
cy.get(agGridElement)
|
|
261
|
+
.find(".ag-filter")
|
|
256
262
|
.find(".ag-picker-field-wrapper")
|
|
257
263
|
.filter(":visible")
|
|
258
264
|
.eq(searchInputIndex)
|
|
@@ -271,34 +277,28 @@ function getFilterColumnButtonElement(
|
|
|
271
277
|
.find(".ag-popup-child")
|
|
272
278
|
.find("input")
|
|
273
279
|
.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
|
-
}
|
|
280
|
+
.as("filterInput");
|
|
286
281
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
.clear()
|
|
293
|
-
.type(filterValue)
|
|
294
|
-
.wait(500);
|
|
295
|
-
})
|
|
296
|
-
}
|
|
282
|
+
// If it's a multi filter, de-select the 'select-all' checkbox
|
|
283
|
+
if (isMultiFilter) {
|
|
284
|
+
const selectAllText = options.selectAllLocaleText || "Select All";
|
|
285
|
+
toggleColumnCheckboxFilter(agGridElement, selectAllText, false, true);
|
|
286
|
+
}
|
|
297
287
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
288
|
+
// Get the saved filter input and enter the search term
|
|
289
|
+
if (
|
|
290
|
+
operator !== filterOperator.blank &&
|
|
291
|
+
operator !== filterOperator.notBlank
|
|
292
|
+
) {
|
|
293
|
+
cy.get("@filterInput").then(($ele) => {
|
|
294
|
+
cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue).wait(500);
|
|
295
|
+
});
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
// Finally, if a multi-filter, select the filter value's checkbox
|
|
299
|
+
if (isMultiFilter) {
|
|
300
|
+
toggleColumnCheckboxFilter(agGridElement, filterValue, true, true);
|
|
301
|
+
}
|
|
302
302
|
}
|
|
303
303
|
|
|
304
304
|
function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
|
|
@@ -306,10 +306,11 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
|
|
|
306
306
|
cy.get(agGridElement)
|
|
307
307
|
.find(".ag-filter-apply-panel-button")
|
|
308
308
|
.contains("Apply")
|
|
309
|
-
.click()
|
|
309
|
+
.click()
|
|
310
|
+
.wait(500);
|
|
310
311
|
}
|
|
311
312
|
if (!noMenuTabs) {
|
|
312
|
-
getMenuTabElement(agGridElement, filterTab.filter).click();
|
|
313
|
+
getMenuTabElement(agGridElement, filterTab.filter).click().wait(500);
|
|
313
314
|
}
|
|
314
315
|
}
|
|
315
316
|
|
|
@@ -334,8 +335,8 @@ function toggleColumnCheckboxFilter(
|
|
|
334
335
|
.siblings("div")
|
|
335
336
|
.find("input")
|
|
336
337
|
.then(($ele) => {
|
|
337
|
-
if (doSelect) cy.wrap($ele).check();
|
|
338
|
-
else cy.wrap($ele).uncheck();
|
|
338
|
+
if (doSelect) cy.wrap($ele).check().wait(500);
|
|
339
|
+
else cy.wrap($ele).uncheck().wait(500);
|
|
339
340
|
});
|
|
340
341
|
}
|
|
341
342
|
|
|
@@ -343,16 +344,51 @@ function populateSearchCriteria(
|
|
|
343
344
|
searchCriteria,
|
|
344
345
|
hasApplyButton = false,
|
|
345
346
|
noMenuTabs = false,
|
|
346
|
-
selectAllLocaleText =
|
|
347
|
-
|
|
347
|
+
selectAllLocaleText = "Select All"
|
|
348
|
+
) {
|
|
348
349
|
const options = {};
|
|
349
|
-
options.searchCriteria = {...searchCriteria};
|
|
350
|
+
options.searchCriteria = { ...searchCriteria };
|
|
350
351
|
options.selectAllLocaleText = selectAllLocaleText;
|
|
351
352
|
options.hasApplyButton = hasApplyButton;
|
|
352
353
|
options.noMenuTabs = noMenuTabs;
|
|
353
354
|
return options;
|
|
354
355
|
}
|
|
355
356
|
|
|
357
|
+
/**
|
|
358
|
+
* Will add or remove a column from ag grid.
|
|
359
|
+
* @param columnName The column name to add/remove
|
|
360
|
+
* @param pin 'left', 'right' or null
|
|
361
|
+
*/
|
|
362
|
+
export function pinColumn(agGridElement, columnName, pin) {
|
|
363
|
+
getColumnHeaderElement(agGridElement, columnName)
|
|
364
|
+
.parent()
|
|
365
|
+
.siblings(".ag-header-cell-menu-button")
|
|
366
|
+
.click();
|
|
367
|
+
|
|
368
|
+
selectMenuTab(agGridElement, filterTab.general);
|
|
369
|
+
|
|
370
|
+
cy.get(agGridElement).find(".ag-menu-option").contains("Pin Column").click();
|
|
371
|
+
|
|
372
|
+
var selectedOption;
|
|
373
|
+
|
|
374
|
+
switch (pin) {
|
|
375
|
+
case "left":
|
|
376
|
+
selectedOption = "Pin Left";
|
|
377
|
+
break;
|
|
378
|
+
case "right":
|
|
379
|
+
selectedOption = "Pin Right";
|
|
380
|
+
break;
|
|
381
|
+
default:
|
|
382
|
+
selectedOption = "No Pin";
|
|
383
|
+
break;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
cy.get(agGridElement)
|
|
387
|
+
.find(".ag-menu-option")
|
|
388
|
+
.contains(selectedOption)
|
|
389
|
+
.click();
|
|
390
|
+
}
|
|
391
|
+
|
|
356
392
|
/**
|
|
357
393
|
* * Performs a filter operation on the specified column via the context menu using plain text search
|
|
358
394
|
* @param agGridElement The get() selector for which ag grid table you wish to retrieve.
|
|
@@ -387,10 +423,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
|
|
|
387
423
|
agGridElement,
|
|
388
424
|
options.searchCriteria.columnName
|
|
389
425
|
).click();
|
|
390
|
-
filterBySearchTerm(
|
|
391
|
-
agGridElement,
|
|
392
|
-
options
|
|
393
|
-
);
|
|
426
|
+
filterBySearchTerm(agGridElement, options);
|
|
394
427
|
applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
|
|
395
428
|
}
|
|
396
429
|
|
|
@@ -430,10 +463,7 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
|
|
|
430
463
|
options.searchCriteria.columnName,
|
|
431
464
|
true
|
|
432
465
|
).click();
|
|
433
|
-
filterBySearchTerm(
|
|
434
|
-
agGridElement,
|
|
435
|
-
options
|
|
436
|
-
);
|
|
466
|
+
filterBySearchTerm(agGridElement, options);
|
|
437
467
|
applyColumnFilter(
|
|
438
468
|
agGridElement,
|
|
439
469
|
options.hasApplyButton,
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
export const filterOperator = {
|
|
2
2
|
contains: "Contains",
|
|
3
|
-
notContains: "
|
|
3
|
+
notContains: "Does not contain",
|
|
4
4
|
equals: "Equals",
|
|
5
|
-
notEquals: "
|
|
6
|
-
startsWith: "
|
|
5
|
+
notEquals: "Does not equal",
|
|
6
|
+
startsWith: "Begins with",
|
|
7
7
|
endsWith: "Ends with",
|
|
8
8
|
lessThan: "Less than",
|
|
9
|
-
lessThanOrEquals: "Less than or
|
|
9
|
+
lessThanOrEquals: "Less than or equal to",
|
|
10
10
|
greaterThan: "Greater than",
|
|
11
|
-
greaterThanOrEquals: "Greater than or
|
|
12
|
-
inRange: "
|
|
11
|
+
greaterThanOrEquals: "Greater than or equal to",
|
|
12
|
+
inRange: "Between",
|
|
13
13
|
blank: "Blank",
|
|
14
14
|
notBlank: "Not Blank"
|
|
15
15
|
}
|
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)
|