cypress-ag-grid 1.4.0 → 2.0.0-beta
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 +2 -2
- package/app/{grid.js → grid-basic.js} +3 -3
- package/app/grid-grouped.js +71 -0
- package/app/index.html +4 -2
- package/cypress/e2e/ag-grid-data.cy.js +450 -0
- package/cypress/e2e/ag-grid-elements.cy.js +59 -0
- package/cypress/{integration/ag-grid-spec.js → e2e/ag-grid.cy.js} +0 -0
- package/cypress/support/{index.js → e2e.js} +0 -0
- package/cypress.config.js +11 -0
- package/package.json +2 -2
- package/src/agGrid/agGridInteractions.js +69 -26
- package/src/agGrid/agGridValidations.js +1 -1
- package/src/index.d.ts +2 -1
- package/src/index.js +6 -5
- package/cypress.json +0 -1
package/README.md
CHANGED
|
@@ -70,7 +70,7 @@ The correct command will return the following:
|
|
|
70
70
|
To only get certain rows of data, pass the header values into the `getAgGridData()` command, like so:
|
|
71
71
|
|
|
72
72
|
```javascript
|
|
73
|
-
cy.get("#myGrid).getAgGridData({ onlyColumns: ["Year", "Make"] })
|
|
73
|
+
cy.get("#myGrid").getAgGridData({ onlyColumns: ["Year", "Make"] })
|
|
74
74
|
```
|
|
75
75
|
|
|
76
76
|
The above command will return the follwoing:
|
|
@@ -268,7 +268,7 @@ Example:
|
|
|
268
268
|
* 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)
|
|
269
269
|
* Example:
|
|
270
270
|
```javascript
|
|
271
|
-
if(
|
|
271
|
+
if(window.cypress){
|
|
272
272
|
this.api.sizeColumnsToFit();
|
|
273
273
|
}
|
|
274
274
|
```
|
|
@@ -3,7 +3,7 @@ const columnDefs = [
|
|
|
3
3
|
{ field: "year", pinned: "left" },
|
|
4
4
|
{ field: "make", rowGroup: false, pinned: "left" },
|
|
5
5
|
{ field: "model", filter: true },
|
|
6
|
-
{ field: "price", pinned: "right", floatingFilter: false, sortable: false },
|
|
6
|
+
{ field: "price", pinned: "right", floatingFilter: false, sortable: false, editable: true, cellEditor: 'agTextCellEditor' },
|
|
7
7
|
];
|
|
8
8
|
|
|
9
9
|
const autoGroupColumnDef = {
|
|
@@ -47,10 +47,10 @@ new agGrid.Grid(eGridDiv, gridOptions);
|
|
|
47
47
|
// Grab the grid data from the supplied API endpoint
|
|
48
48
|
agGrid
|
|
49
49
|
.simpleHttpRequest({
|
|
50
|
-
url: "https://api.jsonbin.io/b/608304f69a9aa933335613a6/2",
|
|
50
|
+
url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2",
|
|
51
51
|
})
|
|
52
52
|
.then((data) => {
|
|
53
|
-
gridOptions.api.setRowData(data);
|
|
53
|
+
gridOptions.api.setRowData(data.record);
|
|
54
54
|
});
|
|
55
55
|
|
|
56
56
|
function autoSizeAllColumns() {
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// specify the columns
|
|
2
|
+
const columnDefsGrouped = [
|
|
3
|
+
{ field: "year", pivot: true, },
|
|
4
|
+
{ field: "make", rowGroup: true, enableRowGroup: true },
|
|
5
|
+
{ field: "model", filter: true },
|
|
6
|
+
{ field: "price", editable: true, cellEditor: 'agTextCellEditor' },
|
|
7
|
+
];
|
|
8
|
+
|
|
9
|
+
const autoGroupColumnDefGrouped = {
|
|
10
|
+
headerName: "Model",
|
|
11
|
+
field: "model",
|
|
12
|
+
cellRenderer: "agGroupCellRenderer",
|
|
13
|
+
cellRendererParams: {
|
|
14
|
+
checkbox: true,
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
// let the grid know which columns to use
|
|
19
|
+
const gridOptionsGrouped = {
|
|
20
|
+
defaultColDef: {
|
|
21
|
+
sortable: true,
|
|
22
|
+
filter: "agTextColumnFilter",
|
|
23
|
+
floatingFilter: true,
|
|
24
|
+
filterParams: {
|
|
25
|
+
buttons: ["reset", "apply"],
|
|
26
|
+
debounceMs: 200,
|
|
27
|
+
},
|
|
28
|
+
animateRows: true,
|
|
29
|
+
resizable: true,
|
|
30
|
+
},
|
|
31
|
+
groupDefaultExpanded: 2,
|
|
32
|
+
autoGroupColumnDef: autoGroupColumnDefGrouped,
|
|
33
|
+
groupSelectsChildren: true,
|
|
34
|
+
columnDefs: columnDefsGrouped,
|
|
35
|
+
rowSelection: "multiple",
|
|
36
|
+
domLayout: "normal",
|
|
37
|
+
pagination: true,
|
|
38
|
+
paginationPageSize: 5,
|
|
39
|
+
sideBar: false,
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// lookup the container we want the Grid to use
|
|
43
|
+
const eGridDivGrouped = document.querySelector("#myGrid2");
|
|
44
|
+
|
|
45
|
+
// create the grid passing in the div to use together with the columns & data we want to use
|
|
46
|
+
new agGrid.Grid(eGridDivGrouped, gridOptionsGrouped);
|
|
47
|
+
|
|
48
|
+
// Grab the grid data from the supplied API endpoint
|
|
49
|
+
agGrid
|
|
50
|
+
.simpleHttpRequest({
|
|
51
|
+
url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2",
|
|
52
|
+
})
|
|
53
|
+
.then((data) => {
|
|
54
|
+
gridOptionsGrouped.api.setRowData(data.record);
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
function autoSizeAllColumns() {
|
|
58
|
+
var allColumnIds = [];
|
|
59
|
+
gridOptionsGrouped.columnApi.getAllColumns().forEach(function (column) {
|
|
60
|
+
allColumnIds.push(column.colId);
|
|
61
|
+
});
|
|
62
|
+
gridOptionsGrouped.columnApi.autoSizeColumns(allColumnIds);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// If the Cypress test is running, ensure all columns fit within the window
|
|
66
|
+
if (window.Cypress) {
|
|
67
|
+
gridOptionsGrouped.api.sizeColumnsToFit();
|
|
68
|
+
} else {
|
|
69
|
+
// Otherwise auto-size columns the way we wish to view the grid in production.
|
|
70
|
+
autoSizeAllColumns();
|
|
71
|
+
}
|
package/app/index.html
CHANGED
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
</head>
|
|
8
8
|
<body>
|
|
9
9
|
<div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
10
|
-
<script src="grid.js" type="text/javascript" charset="utf-8">
|
|
11
|
-
|
|
10
|
+
<script src="grid-basic.js" type="text/javascript" charset="utf-8"></script>
|
|
11
|
+
|
|
12
|
+
<div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
13
|
+
<script src="grid-grouped.js" type="text/javascript" charset="utf-8"></script>
|
|
12
14
|
</body>
|
|
13
15
|
</html>
|
|
@@ -0,0 +1,450 @@
|
|
|
1
|
+
/// <reference types="cypress" />
|
|
2
|
+
|
|
3
|
+
import { sort } from "../../src/agGrid/sort.enum";
|
|
4
|
+
import {
|
|
5
|
+
deleteKey,
|
|
6
|
+
sortedCollectionByProperty,
|
|
7
|
+
} from "../../src/helpers/arrayHelpers";
|
|
8
|
+
import { filterOperator } from "../../src/agGrid/filterOperator.enum";
|
|
9
|
+
|
|
10
|
+
const _pageSize = 5;
|
|
11
|
+
const agGridSelector = "#myGrid";
|
|
12
|
+
|
|
13
|
+
describe("ag-grid get data scenarios", () => {
|
|
14
|
+
beforeEach(() => {
|
|
15
|
+
cy.visit("../app/index.html");
|
|
16
|
+
cy.get(".ag-cell", {timeout: 10000}).should("be.visible");
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it("verify paginated table data - include all columns", () => {
|
|
20
|
+
const expectedPaginatedTableData = [
|
|
21
|
+
[
|
|
22
|
+
{ Year: "2020", Make: "Toyota", Model: "Celica", Price: "35000" },
|
|
23
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo", Price: "32000" },
|
|
24
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Price: "72000" },
|
|
25
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
|
|
26
|
+
{ Year: "2020", Make: "Mercedes", Model: "GLC300", Price: "53000" },
|
|
27
|
+
],
|
|
28
|
+
[
|
|
29
|
+
{ Year: "2020", Make: "Honda", Model: "Civic", Price: "22000" },
|
|
30
|
+
{ Year: "2020", Make: "Honda", Model: "Accord", Price: "32000" },
|
|
31
|
+
{ Year: "2020", Make: "Ford", Model: "Taurus", Price: "19000" },
|
|
32
|
+
{ Year: "2020", Make: "Hyundai", Model: "Elantra", Price: "22000" },
|
|
33
|
+
{ Year: "2020", Make: "Toyota", Model: "Celica", Price: "5000" },
|
|
34
|
+
],
|
|
35
|
+
[
|
|
36
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo", Price: "25000" },
|
|
37
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
|
|
38
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
|
|
39
|
+
{ Year: "2020", Make: "Mercedes", Model: "GLC300", Price: "35000" },
|
|
40
|
+
{ Year: "2011", Make: "Honda", Model: "Civic", Price: "9000" },
|
|
41
|
+
],
|
|
42
|
+
[
|
|
43
|
+
{ Year: "2020", Make: "Honda", Model: "Accord", Price: "34000" },
|
|
44
|
+
{ Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
|
|
45
|
+
{ Year: "2020", Make: "Hyundai", Model: "Elantra", Price: "3000" },
|
|
46
|
+
{ Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
|
|
47
|
+
],
|
|
48
|
+
];
|
|
49
|
+
cy.get(agGridSelector).agGridValidatePaginatedTable(
|
|
50
|
+
expectedPaginatedTableData
|
|
51
|
+
);
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
it("verify paginated table data - excluding columns", () => {
|
|
55
|
+
const expectedPaginatedTableData = [
|
|
56
|
+
[
|
|
57
|
+
{ Year: "2020", Make: "Toyota", Model: "Celica" },
|
|
58
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo" },
|
|
59
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter" },
|
|
60
|
+
{ Year: "2020", Make: "BMW", Model: "3-series" },
|
|
61
|
+
{ Year: "2020", Make: "Mercedes", Model: "GLC300" },
|
|
62
|
+
],
|
|
63
|
+
[
|
|
64
|
+
{ Year: "2020", Make: "Honda", Model: "Civic" },
|
|
65
|
+
{ Year: "2020", Make: "Honda", Model: "Accord" },
|
|
66
|
+
{ Year: "2020", Make: "Ford", Model: "Taurus" },
|
|
67
|
+
{ Year: "2020", Make: "Hyundai", Model: "Elantra" },
|
|
68
|
+
{ Year: "2020", Make: "Toyota", Model: "Celica" },
|
|
69
|
+
],
|
|
70
|
+
[
|
|
71
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo" },
|
|
72
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter" },
|
|
73
|
+
{ Year: "2020", Make: "BMW", Model: "3-series" },
|
|
74
|
+
{ Year: "2020", Make: "Mercedes", Model: "GLC300" },
|
|
75
|
+
{ Year: "2011", Make: "Honda", Model: "Civic" },
|
|
76
|
+
],
|
|
77
|
+
[
|
|
78
|
+
{ Year: "2020", Make: "Honda", Model: "Accord" },
|
|
79
|
+
{ Year: "1990", Make: "Ford", Model: "Taurus" },
|
|
80
|
+
{ Year: "2020", Make: "Hyundai", Model: "Elantra" },
|
|
81
|
+
{ Year: "2020", Make: "BMW", Model: "2002" },
|
|
82
|
+
],
|
|
83
|
+
];
|
|
84
|
+
cy.get(agGridSelector).agGridValidatePaginatedTable(
|
|
85
|
+
expectedPaginatedTableData,
|
|
86
|
+
{
|
|
87
|
+
onlyColumns: ["Year", "Make", "Model"],
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
it("able to filter by checkbox", () => {
|
|
93
|
+
const expectedTableData = [
|
|
94
|
+
{ Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
|
|
95
|
+
];
|
|
96
|
+
cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
|
|
97
|
+
searchCriteria: {
|
|
98
|
+
columnName: "Model",
|
|
99
|
+
filterValue: "2002",
|
|
100
|
+
},
|
|
101
|
+
selectAllLocaleText: 'Select All', // This is optional if you are using localText for ag grid
|
|
102
|
+
hasApplyButton: true,
|
|
103
|
+
});
|
|
104
|
+
cy.get(agGridSelector)
|
|
105
|
+
.getAgGridData()
|
|
106
|
+
.then((actualTableData) => {
|
|
107
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
it("able to filter by checkbox - multiple columns", () => {
|
|
112
|
+
const expectedTableData = [
|
|
113
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
|
|
114
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
|
|
115
|
+
{ Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
|
|
116
|
+
];
|
|
117
|
+
cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
|
|
118
|
+
searchCriteria: [{
|
|
119
|
+
columnName: "Model",
|
|
120
|
+
filterValue: "2002",
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
columnName: "Model",
|
|
124
|
+
filterValue: "3-series",
|
|
125
|
+
}
|
|
126
|
+
],
|
|
127
|
+
hasApplyButton: true,
|
|
128
|
+
});
|
|
129
|
+
cy.get(agGridSelector)
|
|
130
|
+
.getAgGridData()
|
|
131
|
+
.then((actualTableData) => {
|
|
132
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData, true);
|
|
133
|
+
});
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
it("able to filter by text - menu", () => {
|
|
137
|
+
const expectedTableData = [
|
|
138
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
|
|
139
|
+
{ Year: "2020", Make: "Honda", Model: "Accord", Price: "32000" },
|
|
140
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo", Price: "32000" },
|
|
141
|
+
];
|
|
142
|
+
cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
|
|
143
|
+
cy.get(agGridSelector).agGridColumnFilterTextMenu({
|
|
144
|
+
searchCriteria: {
|
|
145
|
+
columnName: "Price",
|
|
146
|
+
filterValue: "32000",
|
|
147
|
+
operator: filterOperator.equals,
|
|
148
|
+
},
|
|
149
|
+
hasApplyButton: true,
|
|
150
|
+
});
|
|
151
|
+
cy.get(agGridSelector)
|
|
152
|
+
.getAgGridData()
|
|
153
|
+
.then((actualTableData) => {
|
|
154
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
it("able to filter by text - menu - multiple columns", () => {
|
|
159
|
+
const expectedTableData = [
|
|
160
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
|
|
161
|
+
];
|
|
162
|
+
cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
|
|
163
|
+
cy.get(agGridSelector).agGridColumnFilterTextMenu({
|
|
164
|
+
searchCriteria: [{
|
|
165
|
+
columnName: "Price",
|
|
166
|
+
filterValue: "32000",
|
|
167
|
+
operator: filterOperator.equals,
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
columnName: "Make",
|
|
171
|
+
filterValue: "BMW",
|
|
172
|
+
operator: filterOperator.equals,
|
|
173
|
+
}
|
|
174
|
+
],
|
|
175
|
+
hasApplyButton: true,
|
|
176
|
+
});
|
|
177
|
+
cy.get(agGridSelector)
|
|
178
|
+
.getAgGridData()
|
|
179
|
+
.then((actualTableData) => {
|
|
180
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
|
|
181
|
+
});
|
|
182
|
+
});
|
|
183
|
+
|
|
184
|
+
it("able to filter by text - floating filter", () => {
|
|
185
|
+
const expectedTableData = [
|
|
186
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo", Price: "32000" },
|
|
187
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo", Price: "25000" },
|
|
188
|
+
{ Year: "2020", Make: "Ford", Model: "Taurus", Price: "19000" },
|
|
189
|
+
{ Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
|
|
190
|
+
];
|
|
191
|
+
cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
|
|
192
|
+
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
193
|
+
searchCriteria: {
|
|
194
|
+
columnName: "Make",
|
|
195
|
+
filterValue: "Ford",
|
|
196
|
+
},
|
|
197
|
+
hasApplyButton: true,
|
|
198
|
+
});
|
|
199
|
+
cy.get(agGridSelector)
|
|
200
|
+
.getAgGridData()
|
|
201
|
+
.then((actualTableData) => {
|
|
202
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
|
|
203
|
+
});
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
it("able to filter by text - floating filter - multiple columns", () => {
|
|
207
|
+
const expectedTableData = [
|
|
208
|
+
{ Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
|
|
209
|
+
];
|
|
210
|
+
cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
|
|
211
|
+
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
212
|
+
searchCriteria: [{
|
|
213
|
+
columnName: "Make",
|
|
214
|
+
filterValue: "Ford",
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
columnName: "Year",
|
|
218
|
+
filterValue: "1990",
|
|
219
|
+
}
|
|
220
|
+
],
|
|
221
|
+
hasApplyButton: true,
|
|
222
|
+
});
|
|
223
|
+
cy.get(agGridSelector)
|
|
224
|
+
.getAgGridData()
|
|
225
|
+
.then((actualTableData) => {
|
|
226
|
+
cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
|
|
227
|
+
});
|
|
228
|
+
});
|
|
229
|
+
|
|
230
|
+
it("able to validate empty table", () => {
|
|
231
|
+
//Search for an entry that does not exist
|
|
232
|
+
cy.get(agGridSelector).agGridColumnFilterTextMenu({
|
|
233
|
+
searchCriteria: {
|
|
234
|
+
columnName: "Price",
|
|
235
|
+
filterValue: "0",
|
|
236
|
+
operator: filterOperator.equals,
|
|
237
|
+
},
|
|
238
|
+
hasApplyButton: true,
|
|
239
|
+
});
|
|
240
|
+
cy.get(agGridSelector)
|
|
241
|
+
.getAgGridData()
|
|
242
|
+
.then((actualTableData) => {
|
|
243
|
+
cy.agGridValidateEmptyTable(actualTableData);
|
|
244
|
+
});
|
|
245
|
+
});
|
|
246
|
+
|
|
247
|
+
it("able to sort by ascending order", () => {
|
|
248
|
+
cy.get(agGridSelector).agGridSortColumn("Make", sort.ascending);
|
|
249
|
+
cy.fixture("cardata").then((carData) => {
|
|
250
|
+
// This will sort the entirety of our collection by the specified columnName and sort order
|
|
251
|
+
// and will return only the # of records specified. In this example, I include only the first
|
|
252
|
+
// page of data.
|
|
253
|
+
const expectedData_sortedByAscending = sortedCollectionByProperty(
|
|
254
|
+
carData,
|
|
255
|
+
"Make",
|
|
256
|
+
sort.ascending,
|
|
257
|
+
_pageSize
|
|
258
|
+
);
|
|
259
|
+
cy.get(agGridSelector)
|
|
260
|
+
.getAgGridData()
|
|
261
|
+
.then((actualTableData) => {
|
|
262
|
+
cy.agGridValidateRowsExactOrder(
|
|
263
|
+
actualTableData,
|
|
264
|
+
expectedData_sortedByAscending
|
|
265
|
+
);
|
|
266
|
+
});
|
|
267
|
+
});
|
|
268
|
+
});
|
|
269
|
+
|
|
270
|
+
it("able to sort by descending order", () => {
|
|
271
|
+
cy.get(agGridSelector).agGridSortColumn("Make", sort.descending);
|
|
272
|
+
cy.fixture("cardata").then((carData) => {
|
|
273
|
+
// This will sort the entirety of our collection by the specified columnName and sort order
|
|
274
|
+
// and will return only the # of records specified. In this example, I include only the first
|
|
275
|
+
// page of data.
|
|
276
|
+
const expectedData_sortedByDescending = sortedCollectionByProperty(
|
|
277
|
+
carData,
|
|
278
|
+
"Make",
|
|
279
|
+
sort.descending,
|
|
280
|
+
_pageSize
|
|
281
|
+
);
|
|
282
|
+
cy.get(agGridSelector)
|
|
283
|
+
.getAgGridData()
|
|
284
|
+
.then((actualTableData) => {
|
|
285
|
+
cy.agGridValidateRowsExactOrder(
|
|
286
|
+
actualTableData,
|
|
287
|
+
expectedData_sortedByDescending
|
|
288
|
+
);
|
|
289
|
+
});
|
|
290
|
+
});
|
|
291
|
+
});
|
|
292
|
+
|
|
293
|
+
it("remove column from grid and verify select column data", () => {
|
|
294
|
+
cy.get(agGridSelector).agGridToggleColumnsSideBar("Year", true);
|
|
295
|
+
cy.fixture("cardata").then((expectedTableData) => {
|
|
296
|
+
const expectedData_yearColumnRemoved = removePropertyFromCollection(
|
|
297
|
+
expectedTableData,
|
|
298
|
+
["Year"]
|
|
299
|
+
);
|
|
300
|
+
cy.get(agGridSelector)
|
|
301
|
+
.getAgGridData()
|
|
302
|
+
.then((actualTableData) => {
|
|
303
|
+
cy.agGridValidateRowsExactOrder(
|
|
304
|
+
actualTableData,
|
|
305
|
+
expectedData_yearColumnRemoved.slice(0, _pageSize)
|
|
306
|
+
);
|
|
307
|
+
});
|
|
308
|
+
});
|
|
309
|
+
});
|
|
310
|
+
|
|
311
|
+
it("remove single pinned column from grid and verify select column data", () => {
|
|
312
|
+
cy.get(agGridSelector).agGridToggleColumnsSideBar("Price", true);
|
|
313
|
+
cy.fixture("cardata").then((expectedTableData) => {
|
|
314
|
+
const expectedData_priceColumnRemoved = removePropertyFromCollection(
|
|
315
|
+
expectedTableData,
|
|
316
|
+
["Price"]
|
|
317
|
+
);
|
|
318
|
+
|
|
319
|
+
cy.get(agGridSelector)
|
|
320
|
+
.getAgGridData()
|
|
321
|
+
.then((actualTableData) => {
|
|
322
|
+
cy.agGridValidateRowsExactOrder(
|
|
323
|
+
actualTableData,
|
|
324
|
+
expectedData_priceColumnRemoved.slice(0, _pageSize)
|
|
325
|
+
);
|
|
326
|
+
});
|
|
327
|
+
});
|
|
328
|
+
});
|
|
329
|
+
|
|
330
|
+
it("remove multiple columns from grid and verify select column data", () => {
|
|
331
|
+
cy.get(agGridSelector).agGridToggleColumnsSideBar("Price", true);
|
|
332
|
+
cy.get(agGridSelector).agGridToggleColumnsSideBar("Make", true);
|
|
333
|
+
cy.fixture("cardata").then((expectedTableData) => {
|
|
334
|
+
const expectedData_multipleColumnsRemoved = removePropertyFromCollection(
|
|
335
|
+
expectedTableData,
|
|
336
|
+
["Price", "Make"]
|
|
337
|
+
);
|
|
338
|
+
cy.get(agGridSelector)
|
|
339
|
+
.getAgGridData()
|
|
340
|
+
.then((actualTableData) => {
|
|
341
|
+
cy.agGridValidateRowsExactOrder(
|
|
342
|
+
actualTableData,
|
|
343
|
+
expectedData_multipleColumnsRemoved.slice(0, _pageSize)
|
|
344
|
+
);
|
|
345
|
+
});
|
|
346
|
+
});
|
|
347
|
+
});
|
|
348
|
+
|
|
349
|
+
it("only validate select column data", () => {
|
|
350
|
+
const expectedTableData = [
|
|
351
|
+
{ Year: "2020", Make: "Toyota", Model: "Celica" },
|
|
352
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo" },
|
|
353
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter" },
|
|
354
|
+
{ Year: "2020", Make: "BMW", Model: "3-series" },
|
|
355
|
+
{ Year: "2020", Make: "Mercedes", Model: "GLC300" },
|
|
356
|
+
];
|
|
357
|
+
cy.get(agGridSelector)
|
|
358
|
+
.getAgGridData({ onlyColumns: ["Year", "Make", "Model"] })
|
|
359
|
+
.then((actualTableData) => {
|
|
360
|
+
cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
|
|
361
|
+
});
|
|
362
|
+
});
|
|
363
|
+
});
|
|
364
|
+
|
|
365
|
+
function removePropertyFromCollection(expectedTableData, columnsToExclude) {
|
|
366
|
+
//Exclude any specified columns
|
|
367
|
+
if (columnsToExclude) {
|
|
368
|
+
columnsToExclude.forEach((excludedColumn) => {
|
|
369
|
+
expectedTableData.forEach((obj) => deleteKey(obj, excludedColumn));
|
|
370
|
+
});
|
|
371
|
+
}
|
|
372
|
+
return expectedTableData;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
// /// THE BELOW METHODS SHOWCASE HOW TO DYNAMICALLY GET THE EXPECTED DATA AND MANIPULATE IT FOR VALIDATION
|
|
376
|
+
// /// THIS INCLUDES PAGINATION, FILTERING, and COLUMN EXCLUSION
|
|
377
|
+
|
|
378
|
+
// export const carColumns = {
|
|
379
|
+
// year: "Year",
|
|
380
|
+
// make: "Make",
|
|
381
|
+
// model: "Model",
|
|
382
|
+
// price: "Price",
|
|
383
|
+
// };
|
|
384
|
+
|
|
385
|
+
// /**
|
|
386
|
+
// * Returns ALL expected table data populated from the expected test data call and does not factor in pagination
|
|
387
|
+
// * @param columnsToExclude Provide an array of string values for columns to not return in the data set
|
|
388
|
+
// * @param filters a "\^" delimited string of all columns and values to search for in the grid (i.e. "Name=John Smith^Rate Plan=Standard"
|
|
389
|
+
// */
|
|
390
|
+
// export function getExpectedTableData(columnsToExclude, filters) {
|
|
391
|
+
// let table = [];
|
|
392
|
+
|
|
393
|
+
// // Get the expected table data from the cardata fixture file and process it with columns exclusions and filters
|
|
394
|
+
// return cy
|
|
395
|
+
// .fixture("cardata")
|
|
396
|
+
// .then((cars) => {
|
|
397
|
+
// table = cars;
|
|
398
|
+
// })
|
|
399
|
+
// .then(() => {
|
|
400
|
+
// // Iterate over all filter strings and filter table results in the order in which they are provided
|
|
401
|
+
// if (filters) {
|
|
402
|
+
// filters.split("^").forEach((filter) => {
|
|
403
|
+
// const [key, value] = filter.split("=");
|
|
404
|
+
// const getKey = getKeyByValue(carColumns, key);
|
|
405
|
+
// table = table.filter((a) => a[getKey].includes(value));
|
|
406
|
+
// });
|
|
407
|
+
// }
|
|
408
|
+
// })
|
|
409
|
+
// .then(() => {
|
|
410
|
+
// // Update the property key values to match what is represented in the grid for validation purposes
|
|
411
|
+
// // (i.e. in this example, we change make to Make, model to Model, and price to Price to match
|
|
412
|
+
// // what is shown in the grid headers exactly).
|
|
413
|
+
// for (const key in carColumns)
|
|
414
|
+
// table.forEach((obj) => renameKey(obj, key, carColumns[key]));
|
|
415
|
+
|
|
416
|
+
// //Exclude any specified columns
|
|
417
|
+
// if (columnsToExclude) {
|
|
418
|
+
// columnsToExclude.forEach((excludedColumn) => {
|
|
419
|
+
// table.forEach((obj) => deleteKey(obj, excludedColumn));
|
|
420
|
+
// });
|
|
421
|
+
// }
|
|
422
|
+
// return table;
|
|
423
|
+
// });
|
|
424
|
+
// }
|
|
425
|
+
|
|
426
|
+
// /**
|
|
427
|
+
// * Returns ALL expected table data and paginates the data based on the pageSize
|
|
428
|
+
// * @param columnsToExclude Provide an array of string values for columns to not return in the data set
|
|
429
|
+
// * @param pageSize If no value is provided, default value of 5 items per page is used
|
|
430
|
+
// */
|
|
431
|
+
// function getExpectedPaginatedTableData(columnsToExclude, pageSize = 5) {
|
|
432
|
+
// const paginatedTableData = [];
|
|
433
|
+
// // paginates the expected table data, and removes specified column exclusions
|
|
434
|
+
// return getExpectedTableData(columnsToExclude)
|
|
435
|
+
// .then((tableData) => {
|
|
436
|
+
// const pages = Math.floor(tableData.length / pageSize);
|
|
437
|
+
// const finalPageCount = tableData.length % pageSize;
|
|
438
|
+
// let iterator = 0;
|
|
439
|
+
// for (let i = 0; i < pages; i++) {
|
|
440
|
+
// paginatedTableData.push(tableData.slice(iterator, iterator + pageSize));
|
|
441
|
+
// iterator += pageSize;
|
|
442
|
+
// }
|
|
443
|
+
// paginatedTableData.push(
|
|
444
|
+
// tableData.slice(iterator, iterator + finalPageCount)
|
|
445
|
+
// );
|
|
446
|
+
// })
|
|
447
|
+
// .then(() => {
|
|
448
|
+
// return paginatedTableData;
|
|
449
|
+
// });
|
|
450
|
+
// }
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { filterOperator } from "../../src/agGrid/filterOperator.enum";
|
|
2
|
+
|
|
3
|
+
const agGridSelector = "#myGrid2";
|
|
4
|
+
|
|
5
|
+
describe("ag-grid get elements scenario", () => {
|
|
6
|
+
beforeEach(() => {
|
|
7
|
+
cy.visit("../app/index.html");
|
|
8
|
+
cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
it("able to update grid cell value", () => {
|
|
12
|
+
// filter to only show the porsche
|
|
13
|
+
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
14
|
+
searchCriteria: {
|
|
15
|
+
columnName: "Make",
|
|
16
|
+
filterValue: "Porsche",
|
|
17
|
+
operator: filterOperator.equals,
|
|
18
|
+
},
|
|
19
|
+
hasApplyButton: true,
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// expected values before changing the price
|
|
23
|
+
const expectedTableBeforeEditing = [
|
|
24
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Price: "72000" },
|
|
25
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
|
|
26
|
+
];
|
|
27
|
+
|
|
28
|
+
// verify values before editing
|
|
29
|
+
cy.get(agGridSelector)
|
|
30
|
+
.getAgGridData()
|
|
31
|
+
.then((tableData) => {
|
|
32
|
+
cy.agGridValidateRowsSubset(tableData, expectedTableBeforeEditing);
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
// edit the porsche boxter from 72000 to 66000
|
|
36
|
+
cy.get(agGridSelector)
|
|
37
|
+
.getAgGridElements()
|
|
38
|
+
.then((tableElements) => {
|
|
39
|
+
const porscheRow = tableElements.find(
|
|
40
|
+
(row) => row.Price.innerText === "72000"
|
|
41
|
+
);
|
|
42
|
+
const priceCell = porscheRow.Price;
|
|
43
|
+
cy.wrap(priceCell).dblclick().type("66000{enter}");
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// expected values after changing the price
|
|
47
|
+
const expectedTableAfterEditing = [
|
|
48
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Price: "66000" },
|
|
49
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
// verify values before editing
|
|
53
|
+
cy.get(agGridSelector)
|
|
54
|
+
.getAgGridData()
|
|
55
|
+
.then((tableData) => {
|
|
56
|
+
cy.agGridValidateRowsSubset(tableData, expectedTableAfterEditing);
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
});
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const { defineConfig } = require('cypress')
|
|
2
|
+
|
|
3
|
+
module.exports = defineConfig({
|
|
4
|
+
e2e: {
|
|
5
|
+
// We've imported your old cypress plugins here.
|
|
6
|
+
// You may want to clean this up later by importing these.
|
|
7
|
+
setupNodeEvents(on, config) {
|
|
8
|
+
return require('./cypress/plugins/index.js')(on, config)
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cypress-ag-grid",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-beta",
|
|
4
4
|
"description": "Cypress plugin to interact with ag grid",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"repository": {
|
|
@@ -24,6 +24,6 @@
|
|
|
24
24
|
"author": "Kerry McKeever <kerry@kerrymckeever.com>",
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"cypress": "^
|
|
27
|
+
"cypress": "^10.1.0"
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -5,9 +5,9 @@ import { filterTab } from "./menuTab.enum";
|
|
|
5
5
|
/**
|
|
6
6
|
* Uses the attribute value's index and sorts the data accordingly.
|
|
7
7
|
* For our purposes, we are getting the attribute with the items' indices and sorting accordingly.
|
|
8
|
-
*
|
|
9
|
-
* @param {*} index
|
|
10
|
-
* @returns
|
|
8
|
+
*
|
|
9
|
+
* @param {*} index
|
|
10
|
+
* @returns
|
|
11
11
|
*/
|
|
12
12
|
function sortElementsByAttributeValue(attribute) {
|
|
13
13
|
return (a, b) => {
|
|
@@ -23,6 +23,19 @@ function sortElementsByAttributeValue(attribute) {
|
|
|
23
23
|
* @param options Provide an array of columns you wish to exclude from the table retrieval.
|
|
24
24
|
*/
|
|
25
25
|
export const getAgGridData = (agGridElement, options = {}) => {
|
|
26
|
+
return _getAgGrid(agGridElement, options, false);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Retrieves the values from the *displayed* page in ag grid and assigns each value to its respective column name.
|
|
31
|
+
* @param agGridElement The get() selector for which ag grid table you wish to retrieve.
|
|
32
|
+
* @param options Provide an array of columns you wish to exclude from the table retrieval.
|
|
33
|
+
*/
|
|
34
|
+
export const getAgGridElements = (agGridElement, options = {}) => {
|
|
35
|
+
return _getAgGrid(agGridElement, options, true);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
function _getAgGrid(agGridElement, options = {}, returnElements) {
|
|
26
39
|
const agGridColumnSelectors =
|
|
27
40
|
".ag-pinned-left-cols-container^.ag-center-cols-clipper^.ag-pinned-right-cols-container";
|
|
28
41
|
if (agGridElement.get().length > 1)
|
|
@@ -33,45 +46,59 @@ export const getAgGridData = (agGridElement, options = {}) => {
|
|
|
33
46
|
const tableElement = agGridElement.get()[0].querySelectorAll(".ag-root")[0];
|
|
34
47
|
const agGridSelectors = agGridColumnSelectors.split("^");
|
|
35
48
|
const headers = [
|
|
36
|
-
...tableElement.querySelectorAll(
|
|
37
|
-
|
|
49
|
+
...tableElement.querySelectorAll(".ag-header-row-column [aria-colindex]"),
|
|
50
|
+
]
|
|
51
|
+
.sort(sortElementsByAttributeValue("aria-colindex"))
|
|
38
52
|
.map((headerElement) => {
|
|
39
53
|
// Check if the elements returned are already .ag-header-cell-text elements
|
|
40
54
|
// If not, query for that element and return the text content
|
|
41
|
-
let headerCells = [
|
|
55
|
+
let headerCells = [
|
|
56
|
+
...headerElement.querySelectorAll(".ag-header-cell-text"),
|
|
57
|
+
];
|
|
42
58
|
if (headerCells.length === 0) {
|
|
43
|
-
return [headerElement].map((e) => e.textContent.trim())
|
|
59
|
+
return [headerElement].map((e) => e.textContent.trim());
|
|
44
60
|
} else {
|
|
45
|
-
return [...headerElement.querySelectorAll(".ag-header-cell-text")]
|
|
46
|
-
|
|
61
|
+
return [...headerElement.querySelectorAll(".ag-header-cell-text")].map(
|
|
62
|
+
(e) => e.textContent.trim()
|
|
63
|
+
);
|
|
47
64
|
}
|
|
48
|
-
})
|
|
65
|
+
})
|
|
66
|
+
.flat();
|
|
49
67
|
|
|
50
68
|
let allRows = [];
|
|
51
69
|
let rows = [];
|
|
52
70
|
|
|
53
71
|
agGridSelectors.forEach((selector) => {
|
|
54
|
-
const _rows = [
|
|
72
|
+
const _rows = [
|
|
73
|
+
...tableElement.querySelectorAll(`${selector}:not(.ag-hidden) .ag-row`),
|
|
74
|
+
]
|
|
55
75
|
// Sort rows by their row-index attribute value
|
|
56
76
|
.sort(sortElementsByAttributeValue("row-index"))
|
|
57
77
|
.map((row) => {
|
|
58
78
|
// Sort row cells by their aria-colindex attribute value
|
|
59
79
|
// First check if elements returned already contain the aria-colindex
|
|
60
80
|
// If not, just query for the .ag-cell
|
|
61
|
-
let rowCells = [...row.querySelectorAll(".ag-cell [aria-colindex]")]
|
|
81
|
+
let rowCells = [...row.querySelectorAll(".ag-cell [aria-colindex]")];
|
|
62
82
|
if (rowCells.length === 0) {
|
|
63
|
-
rowCells = [...row.querySelectorAll(".ag-cell")]
|
|
83
|
+
rowCells = [...row.querySelectorAll(".ag-cell")];
|
|
64
84
|
}
|
|
65
|
-
return rowCells
|
|
66
|
-
|
|
85
|
+
return rowCells
|
|
86
|
+
.sort(sortElementsByAttributeValue("aria-colindex"))
|
|
87
|
+
.map((e) => {
|
|
88
|
+
if (returnElements) {
|
|
89
|
+
return e;
|
|
90
|
+
} else {
|
|
91
|
+
return e.textContent.trim();
|
|
92
|
+
}
|
|
93
|
+
});
|
|
67
94
|
});
|
|
68
95
|
allRows.push(_rows);
|
|
69
96
|
});
|
|
70
97
|
|
|
71
98
|
// Remove any empty arrays before merging
|
|
72
99
|
allRows = allRows.filter(function (ele) {
|
|
73
|
-
return ele.length
|
|
74
|
-
})
|
|
100
|
+
return ele.length;
|
|
101
|
+
});
|
|
75
102
|
|
|
76
103
|
if (!allRows.length) rows = [];
|
|
77
104
|
else {
|
|
@@ -102,7 +129,7 @@ export const getAgGridData = (agGridElement, options = {}) => {
|
|
|
102
129
|
return { ...acc, [headers[idx]]: curr };
|
|
103
130
|
}, {})
|
|
104
131
|
);
|
|
105
|
-
}
|
|
132
|
+
}
|
|
106
133
|
|
|
107
134
|
/**
|
|
108
135
|
* Retrieve the ag grid column header element based on its column name value
|
|
@@ -221,7 +248,7 @@ function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
|
|
|
221
248
|
.contains(operator)
|
|
222
249
|
.then(($ele) => {
|
|
223
250
|
//Have to use the unwrapped element, since Cypress .click() event does not appropriately select the operator
|
|
224
|
-
$ele.trigger(
|
|
251
|
+
$ele.trigger("click");
|
|
225
252
|
});
|
|
226
253
|
}
|
|
227
254
|
// Input filter term and allow grid a moment to render the results
|
|
@@ -229,6 +256,7 @@ function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
|
|
|
229
256
|
.find(".ag-popup-child")
|
|
230
257
|
.find("input")
|
|
231
258
|
.filter(":visible")
|
|
259
|
+
.clear()
|
|
232
260
|
.type(filterValue)
|
|
233
261
|
.wait(500);
|
|
234
262
|
}
|
|
@@ -239,7 +267,6 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
|
|
|
239
267
|
.find(".ag-filter-apply-panel-button")
|
|
240
268
|
.contains("Apply")
|
|
241
269
|
.click();
|
|
242
|
-
|
|
243
270
|
}
|
|
244
271
|
if (!noMenuTabs) {
|
|
245
272
|
getMenuTabElement(agGridElement, filterTab.filter).click();
|
|
@@ -272,7 +299,11 @@ function toggleColumnCheckboxFilter(
|
|
|
272
299
|
});
|
|
273
300
|
}
|
|
274
301
|
|
|
275
|
-
function populateSearchCriteria(
|
|
302
|
+
function populateSearchCriteria(
|
|
303
|
+
searchCriteria,
|
|
304
|
+
hasApplyButton = false,
|
|
305
|
+
noMenuTabs = false
|
|
306
|
+
) {
|
|
276
307
|
const options = {};
|
|
277
308
|
//@ts-ignore
|
|
278
309
|
options.searchCriteria = {};
|
|
@@ -339,7 +370,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
|
|
|
339
370
|
* @param options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
|
|
340
371
|
* @param options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
|
|
341
372
|
* @param options.noMenuTabs [Optional] True if you use for example the community edition of ag-grid, which has no menu tabs
|
|
342
|
-
*/
|
|
373
|
+
*/
|
|
343
374
|
export function filterBySearchTextColumnFloatingFilter(agGridElement, options) {
|
|
344
375
|
// Check if there are multiple search criteria provided by attempting to access the columnName
|
|
345
376
|
if (!options.searchCriteria.columnName) {
|
|
@@ -369,7 +400,11 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
|
|
|
369
400
|
options.searchCriteria.operator,
|
|
370
401
|
options.noMenuTabs
|
|
371
402
|
);
|
|
372
|
-
applyColumnFilter(
|
|
403
|
+
applyColumnFilter(
|
|
404
|
+
agGridElement,
|
|
405
|
+
options.hasApplyButton,
|
|
406
|
+
options.noMenuTabs
|
|
407
|
+
);
|
|
373
408
|
});
|
|
374
409
|
}
|
|
375
410
|
|
|
@@ -405,7 +440,7 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
|
|
|
405
440
|
agGridElement,
|
|
406
441
|
options.searchCriteria.columnName
|
|
407
442
|
).click();
|
|
408
|
-
const selectAllText = options.selectAllLocaleText ||
|
|
443
|
+
const selectAllText = options.selectAllLocaleText || "Select All";
|
|
409
444
|
toggleColumnCheckboxFilter(
|
|
410
445
|
agGridElement,
|
|
411
446
|
selectAllText,
|
|
@@ -418,7 +453,11 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
|
|
|
418
453
|
true,
|
|
419
454
|
options.noMenuTabs
|
|
420
455
|
);
|
|
421
|
-
applyColumnFilter(
|
|
456
|
+
applyColumnFilter(
|
|
457
|
+
agGridElement,
|
|
458
|
+
options.hasApplyButton,
|
|
459
|
+
options.noMenuTabs
|
|
460
|
+
);
|
|
422
461
|
});
|
|
423
462
|
}
|
|
424
463
|
|
|
@@ -426,7 +465,11 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
|
|
|
426
465
|
* Will perform a filter for all search criteria provided, then selects all found entries in the grid
|
|
427
466
|
* @param searchCriteria a "\^" delimited string of all columns and searchCriteria to search for in the grid (i.e. "Name=John Smith^Rate Plan=Standard"
|
|
428
467
|
*/
|
|
429
|
-
export function filterGridEntriesBySearchText(
|
|
468
|
+
export function filterGridEntriesBySearchText(
|
|
469
|
+
agGridElement,
|
|
470
|
+
searchCriteria,
|
|
471
|
+
isFloatingFilter = false
|
|
472
|
+
) {
|
|
430
473
|
if (isFloatingFilter) {
|
|
431
474
|
filterBySearchTextColumnFloatingFilter(agGridElement, searchCriteria);
|
|
432
475
|
} else {
|
|
@@ -30,7 +30,7 @@ export function validateTablePages(agGridElement,expectedPaginatedTableData, onl
|
|
|
30
30
|
.then((table) => {
|
|
31
31
|
const actualPage = JSON.parse(JSON.stringify(table));
|
|
32
32
|
validateTableExactOrder(agGridElement, actualPage, expectedPage, true);
|
|
33
|
-
cy.get(".ag-icon-next").click();
|
|
33
|
+
cy.get(agGridElement).find(".ag-icon-next").click();
|
|
34
34
|
iterator++;
|
|
35
35
|
});
|
|
36
36
|
});
|
package/src/index.d.ts
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
declare namespace Cypress {
|
|
4
4
|
interface Chainable<Subject> {
|
|
5
|
-
getAgGridData
|
|
5
|
+
getAgGridData(options?: {}): Chainable<Array<Record<string, string>>>;
|
|
6
|
+
getAgGridElements<E extends Node = HTMLElement>(options?: {}): Chainable<JQuery<E>>;
|
|
6
7
|
/**
|
|
7
8
|
* * Performs sorting operation on the specified column
|
|
8
9
|
* @param {*} subject The get() selector for which ag grid table you wish to retrieve.
|
package/src/index.js
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
/// <reference types="cypress" />
|
|
2
2
|
|
|
3
|
-
import {getAgGridData, sortColumnBy} from "./agGrid/agGridInteractions"
|
|
3
|
+
import {getAgGridData, getAgGridElements, sortColumnBy} from "./agGrid/agGridInteractions"
|
|
4
4
|
import {validateTablePages, validateTableExactOrder, validateEmptyTable, validateTableRowSubset} from "./agGrid/agGridValidations"
|
|
5
5
|
import {filterByCheckboxColumnMenu, filterBySearchTextColumnFloatingFilter, filterBySearchTextColumnMenu, toggleColumnFromSideBar} from "./agGrid/agGridInteractions";
|
|
6
6
|
|
|
7
7
|
Cypress.Commands.add('getAgGridData', { prevSubject: true }, getAgGridData);
|
|
8
|
+
Cypress.Commands.add('getAgGridElements', {prevSubject: true}, getAgGridElements);
|
|
8
9
|
Cypress.Commands.add('agGridSortColumn', {prevSubject: true}, sortColumnBy);
|
|
9
10
|
Cypress.Commands.add('agGridColumnFilterCheckboxMenu', {prevSubject: true}, filterByCheckboxColumnMenu)
|
|
10
11
|
Cypress.Commands.add('agGridColumnFilterTextMenu', {prevSubject: true}, filterBySearchTextColumnMenu)
|
|
11
12
|
Cypress.Commands.add('agGridColumnFilterTextFloating', {prevSubject: true}, filterBySearchTextColumnFloatingFilter)
|
|
12
13
|
|
|
13
|
-
Cypress.Commands.add('agGridValidatePaginatedTable', {prevSubject:
|
|
14
|
-
Cypress.Commands.add('agGridValidateRowsExactOrder', {prevSubject:
|
|
15
|
-
Cypress.Commands.add('agGridValidateRowsSubset', {prevSubject:
|
|
16
|
-
Cypress.Commands.add('agGridValidateEmptyTable', {prevSubject:
|
|
14
|
+
Cypress.Commands.add('agGridValidatePaginatedTable', {prevSubject: 'optional'}, validateTablePages)
|
|
15
|
+
Cypress.Commands.add('agGridValidateRowsExactOrder', {prevSubject: 'optional'}, validateTableExactOrder)
|
|
16
|
+
Cypress.Commands.add('agGridValidateRowsSubset', {prevSubject: 'optional'}, validateTableRowSubset)
|
|
17
|
+
Cypress.Commands.add('agGridValidateEmptyTable', {prevSubject: 'optional'}, validateEmptyTable)
|
|
17
18
|
|
|
18
19
|
Cypress.Commands.add('agGridToggleColumnsSideBar', {prevSubject: true}, toggleColumnFromSideBar)
|
package/cypress.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|