cypress-ag-grid 3.2.2 → 3.3.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.
- package/app/ag-grid.css +6356 -6674
- package/app/ag-theme-alpine.css +562 -322
- package/app/data.json +1 -2
- package/app/grid-basic.js +23 -16
- package/app/grid-grouped.js +4 -4
- package/app/index.html +6 -2
- package/cypress/e2e/ag-grid-data.cy.js +45 -30
- package/cypress/fixtures/cardata.json +1 -2
- package/package.json +1 -1
- package/src/agGrid/agGridInteractions.js +114 -54
- package/src/agGrid/filterOperator.enum.js +1 -1
- package/src/index.d.ts +121 -94
- package/src/index.js +4 -2
package/app/data.json
CHANGED
|
@@ -18,6 +18,5 @@
|
|
|
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": "" }
|
|
22
|
-
{ "year": "2020", "make": "Toyota", "model": "Celica", "condition": "fair", "price": "35000" }
|
|
21
|
+
{ "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","price": "" }
|
|
23
22
|
]
|
package/app/grid-basic.js
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
// specify the columns
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
function getColumnDefs(floatingFilter) {
|
|
3
|
+
return [
|
|
4
|
+
{ field: "year", pinned: "left", floatingFilter },
|
|
5
|
+
{ field: "make", rowGroup: false, pinned: "left", floatingFilter },
|
|
6
|
+
{ field: "model", filter: true, floatingFilter },
|
|
7
|
+
{ field: "condition", filter: "agTextColumnFilter", floatingFilter, filterParams: { numAlwaysVisibleConditions: 2, defaultJoinOperator: 'OR', } },
|
|
8
|
+
{
|
|
9
|
+
field: "price",
|
|
10
|
+
pinned: "right",
|
|
11
|
+
floatingFilter: false,
|
|
12
|
+
sortable: false,
|
|
13
|
+
editable: true,
|
|
14
|
+
cellEditor: "agTextCellEditor",
|
|
15
|
+
},
|
|
16
|
+
];
|
|
17
|
+
}
|
|
16
18
|
|
|
17
19
|
const autoGroupColumnDef = {
|
|
18
20
|
headerName: "Model",
|
|
@@ -38,10 +40,11 @@ const gridOptions = {
|
|
|
38
40
|
},
|
|
39
41
|
autoGroupColumnDef: autoGroupColumnDef,
|
|
40
42
|
groupSelectsChildren: true,
|
|
41
|
-
columnDefs:
|
|
43
|
+
columnDefs: getColumnDefs(true),
|
|
42
44
|
rowSelection: "multiple",
|
|
43
45
|
domLayout: "normal",
|
|
44
46
|
pagination: true,
|
|
47
|
+
paginationPageSizeSelector: [5, 10, 20],
|
|
45
48
|
paginationPageSize: 5,
|
|
46
49
|
sideBar: true,
|
|
47
50
|
};
|
|
@@ -49,6 +52,10 @@ const gridOptions = {
|
|
|
49
52
|
// lookup the container we want the Grid to use
|
|
50
53
|
const eGridDiv = document.querySelector("#myGrid");
|
|
51
54
|
|
|
55
|
+
function MakeFloating(floating) {
|
|
56
|
+
gridOptions.api.setGridOption('columnDefs', getColumnDefs(floating));
|
|
57
|
+
}
|
|
58
|
+
|
|
52
59
|
// create the grid passing in the div to use together with the columns & data we want to use
|
|
53
60
|
new agGrid.Grid(eGridDiv, gridOptions);
|
|
54
61
|
|
|
@@ -61,7 +68,7 @@ fetch("./data.json")
|
|
|
61
68
|
|
|
62
69
|
function autoSizeAllColumns() {
|
|
63
70
|
var allColumnIds = [];
|
|
64
|
-
gridOptions.api.
|
|
71
|
+
gridOptions.api.getColumns().forEach(function (column) {
|
|
65
72
|
allColumnIds.push(column.colId);
|
|
66
73
|
});
|
|
67
74
|
gridOptions.api.autoSizeColumns(allColumnIds);
|
package/app/grid-grouped.js
CHANGED
|
@@ -3,7 +3,7 @@ const columnDefsGrouped = [
|
|
|
3
3
|
{ field: "year", pivot: true, },
|
|
4
4
|
{ field: "make", rowGroup: true, enableRowGroup: true },
|
|
5
5
|
{ field: "model", filter: true },
|
|
6
|
-
{ field: "price", editable: true, cellEditor: 'agTextCellEditor'
|
|
6
|
+
{ field: "price", editable: true, cellEditor: 'agTextCellEditor' },
|
|
7
7
|
];
|
|
8
8
|
|
|
9
9
|
const autoGroupColumnDefGrouped = {
|
|
@@ -54,7 +54,7 @@ fetch("./data.json")
|
|
|
54
54
|
|
|
55
55
|
function autoSizeAllColumns() {
|
|
56
56
|
var allColumnIds = [];
|
|
57
|
-
gridOptionsGrouped.api.
|
|
57
|
+
gridOptionsGrouped.api.getColumns().forEach(function (column) {
|
|
58
58
|
allColumnIds.push(column.colId);
|
|
59
59
|
});
|
|
60
60
|
gridOptionsGrouped.api.autoSizeColumns(allColumnIds);
|
|
@@ -64,6 +64,6 @@ function autoSizeAllColumns() {
|
|
|
64
64
|
if (window.Cypress) {
|
|
65
65
|
gridOptionsGrouped.api.sizeColumnsToFit();
|
|
66
66
|
} else {
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
// Otherwise auto-size columns the way we wish to view the grid in production.
|
|
68
|
+
autoSizeAllColumns();
|
|
69
69
|
}
|
package/app/index.html
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html>
|
|
3
|
+
|
|
3
4
|
<head>
|
|
4
|
-
<script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
5
|
+
<script src="https://unpkg.com/ag-grid-enterprise@32.2.1/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
5
6
|
<link rel="stylesheet" href="./ag-grid.css">
|
|
6
7
|
<link rel="stylesheet" href="./ag-theme-alpine.css">
|
|
7
8
|
</head>
|
|
9
|
+
|
|
8
10
|
<body>
|
|
9
11
|
<div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
10
12
|
<script src="grid-basic.js" type="text/javascript" charset="utf-8"></script>
|
|
11
|
-
|
|
13
|
+
<button onclick="MakeFloating(true)" id="floating">Floating</button>
|
|
14
|
+
<button onclick="MakeFloating(false)" id="nonFloating">Non Floating</button>
|
|
12
15
|
<div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
13
16
|
<script src="grid-grouped.js" type="text/javascript" charset="utf-8"></script>
|
|
14
17
|
</body>
|
|
18
|
+
|
|
15
19
|
</html>
|
|
@@ -38,42 +38,15 @@ const expectedPaginatedTableData = [
|
|
|
38
38
|
{ Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
|
|
39
39
|
{ Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" },
|
|
40
40
|
],
|
|
41
|
-
[
|
|
42
|
-
{ Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
|
|
43
|
-
]
|
|
44
41
|
];
|
|
45
42
|
|
|
46
43
|
describe("ag-grid get data scenarios", () => {
|
|
47
44
|
beforeEach(() => {
|
|
48
45
|
cy.visit("../app/index.html");
|
|
49
46
|
cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
|
|
47
|
+
cy.get('#floating').click()
|
|
50
48
|
});
|
|
51
49
|
|
|
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
50
|
it("verify paginated table data - any order - include all columns", () => {
|
|
78
51
|
cy.get(agGridSelector).agGridValidatePaginatedTable(
|
|
79
52
|
expectedPaginatedTableData
|
|
@@ -141,13 +114,14 @@ describe("ag-grid get data scenarios", () => {
|
|
|
141
114
|
const expectedTableData = [
|
|
142
115
|
{ Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
|
|
143
116
|
];
|
|
144
|
-
cy.get(agGridSelector).
|
|
117
|
+
cy.get(agGridSelector).agGridColumnFilterTextFloating({
|
|
145
118
|
searchCriteria: {
|
|
146
119
|
columnName: "Model",
|
|
147
120
|
filterValue: "2002",
|
|
148
121
|
},
|
|
149
|
-
selectAllLocaleText: "Select All", // This is optional if you are using localText for ag grid
|
|
122
|
+
selectAllLocaleText: "(Select All)", // This is optional if you are using localText for ag grid
|
|
150
123
|
hasApplyButton: true,
|
|
124
|
+
|
|
151
125
|
});
|
|
152
126
|
cy.get(agGridSelector)
|
|
153
127
|
.getAgGridData()
|
|
@@ -157,6 +131,7 @@ describe("ag-grid get data scenarios", () => {
|
|
|
157
131
|
});
|
|
158
132
|
|
|
159
133
|
it("able to filter by checkbox - multiple columns", () => {
|
|
134
|
+
cy.get('#nonFloating').click()
|
|
160
135
|
const expectedTableData = [
|
|
161
136
|
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
|
|
162
137
|
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
|
|
@@ -210,6 +185,7 @@ describe("ag-grid get data scenarios", () => {
|
|
|
210
185
|
});
|
|
211
186
|
|
|
212
187
|
it("able to filter by text - menu - multiple columns", () => {
|
|
188
|
+
cy.get('#nonFloating').click()
|
|
213
189
|
const expectedTableData = [
|
|
214
190
|
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
|
|
215
191
|
];
|
|
@@ -498,6 +474,45 @@ describe("ag-grid get data scenarios", () => {
|
|
|
498
474
|
|
|
499
475
|
});
|
|
500
476
|
|
|
477
|
+
it("able to filter by 'Not blank'", () => {
|
|
478
|
+
const expectedTableData = [
|
|
479
|
+
{ Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
|
|
480
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
|
|
481
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "72000" },
|
|
482
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
|
|
483
|
+
{ Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "good", Price: "53000" },
|
|
484
|
+
{ Year: "2020", Make: "Honda", Model: "Civic", Condition: "poor", Price: "22000" },
|
|
485
|
+
{ Year: "2020", Make: "Honda", Model: "Accord", Condition: "poor", Price: "32000" },
|
|
486
|
+
{ Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
|
|
487
|
+
{ Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "good", Price: "22000" },
|
|
488
|
+
{ Year: "2020", Make: "Toyota", Model: "Celica", Condition: "poor", Price: "5000" },
|
|
489
|
+
{ Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "good", Price: "25000" },
|
|
490
|
+
{ Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "99000" },
|
|
491
|
+
{ Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
|
|
492
|
+
{ Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "excellent", Price: "35000" },
|
|
493
|
+
{ Year: "2011", Make: "Honda", Model: "Civic", Condition: "good", Price: "9000" },
|
|
494
|
+
{ Year: "2020", Make: "Honda", Model: "Accord", Condition: "good", Price: "34000" },
|
|
495
|
+
{ Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
|
|
496
|
+
{ Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
|
|
497
|
+
{ Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" }
|
|
498
|
+
]
|
|
499
|
+
|
|
500
|
+
cy.get('.ag-picker-field-display').eq(0).type('{downArrow}{downArrow}{downArrow}{enter}')
|
|
501
|
+
|
|
502
|
+
cy.get(agGridSelector).agGridColumnFilterTextMenu({
|
|
503
|
+
searchCriteria: {
|
|
504
|
+
columnName: "Price",
|
|
505
|
+
operator: filterOperator.notBlank,
|
|
506
|
+
},
|
|
507
|
+
hasApplyButton: true,
|
|
508
|
+
});
|
|
509
|
+
cy.get(agGridSelector)
|
|
510
|
+
.getAgGridData()
|
|
511
|
+
.then((actualTableData) => {
|
|
512
|
+
cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
|
|
513
|
+
});
|
|
514
|
+
});
|
|
515
|
+
|
|
501
516
|
it('able to filter by agTextColumnFilter with join operator', () => {
|
|
502
517
|
const expectedTableData = [
|
|
503
518
|
{ Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
|
|
@@ -17,6 +17,5 @@
|
|
|
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" }
|
|
21
|
-
{ "Year": "2020", "Make": "Toyota", "Model": "Celica", "Condition": "fair", "Price": "35000" }
|
|
20
|
+
{ "Year": "2020", "Make": "BMW", "Model": "2002", "Condition": "excellent", "Price": "88001" }
|
|
22
21
|
]
|
package/package.json
CHANGED
|
@@ -1,7 +1,41 @@
|
|
|
1
1
|
/// <reference types="cypress" />
|
|
2
|
-
import { sort } from "./sort.enum";
|
|
3
|
-
import { filterTab } from "./menuTab.enum";
|
|
4
2
|
import { filterOperator } from "./filterOperator.enum";
|
|
3
|
+
import { filterTab } from "./menuTab.enum";
|
|
4
|
+
import { sort } from "./sort.enum";
|
|
5
|
+
|
|
6
|
+
function isRowNotDestroyed(rowElement) {
|
|
7
|
+
const rect = rowElement.getBoundingClientRect();
|
|
8
|
+
const viewPortRect = rowElement.parentElement.getBoundingClientRect();
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
rect.top >= viewPortRect.top &&
|
|
12
|
+
rect.left >= viewPortRect.left &&
|
|
13
|
+
rect.bottom <= viewPortRect.bottom &&
|
|
14
|
+
rect.right <= viewPortRect.right
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export const agGridWaitForAnimation = async (agGridElement) => {
|
|
19
|
+
if (agGridElement.get().length < 1) {
|
|
20
|
+
throw new Error(`Couldn't find the element ${agGridElement}`);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const animations = agGridElement.get()[0].getAnimations({ subtree: true });
|
|
24
|
+
|
|
25
|
+
await Promise.all(
|
|
26
|
+
animations.map(async (animation) => {
|
|
27
|
+
try {
|
|
28
|
+
await animation.finished;
|
|
29
|
+
} catch (error) {
|
|
30
|
+
if (error.name === "AbortError") return;
|
|
31
|
+
console.error("error", error, error.name);
|
|
32
|
+
throw error;
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
return agGridElement;
|
|
38
|
+
};
|
|
5
39
|
|
|
6
40
|
/**
|
|
7
41
|
* Uses the attribute value's index and sorts the data accordingly.
|
|
@@ -23,7 +57,8 @@ function sortElementsByAttributeValue(attribute) {
|
|
|
23
57
|
* @param agGridElement The get() selector for which ag grid table you wish to retrieve.
|
|
24
58
|
* @param options Provide an array of columns you wish to exclude from the table retrieval.
|
|
25
59
|
*/
|
|
26
|
-
export const getAgGridData = (agGridElement, options = {}) => {
|
|
60
|
+
export const getAgGridData = async (agGridElement, options = {}) => {
|
|
61
|
+
await agGridWaitForAnimation(agGridElement);
|
|
27
62
|
return _getAgGrid(agGridElement, options, false);
|
|
28
63
|
};
|
|
29
64
|
|
|
@@ -32,7 +67,8 @@ export const getAgGridData = (agGridElement, options = {}) => {
|
|
|
32
67
|
* @param agGridElement The get() selector for which ag grid table you wish to retrieve.
|
|
33
68
|
* @param options Provide an array of columns you wish to exclude from the table retrieval.
|
|
34
69
|
*/
|
|
35
|
-
export const getAgGridElements = (agGridElement, options = {}) => {
|
|
70
|
+
export const getAgGridElements = async (agGridElement, options = {}) => {
|
|
71
|
+
await agGridWaitForAnimation(agGridElement);
|
|
36
72
|
return _getAgGrid(agGridElement, options, true);
|
|
37
73
|
};
|
|
38
74
|
|
|
@@ -71,8 +107,18 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
|
|
|
71
107
|
|
|
72
108
|
agGridSelectors.forEach((selector) => {
|
|
73
109
|
const _rows = [
|
|
74
|
-
...tableElement.querySelectorAll(
|
|
110
|
+
...tableElement.querySelectorAll(
|
|
111
|
+
`${selector}:not(.ag-hidden) .ag-row:not(.ag-opacity-zero)`
|
|
112
|
+
),
|
|
75
113
|
]
|
|
114
|
+
// When animation is enabled, ag-grid destroys rows in 2 phases,
|
|
115
|
+
// first it runs an animation to place rows to be destroyed just outside
|
|
116
|
+
// the viewport.
|
|
117
|
+
// In the second phase those rows are removed from the DOM.
|
|
118
|
+
// Because we get here AFTER all animations are finished, it is possible,
|
|
119
|
+
// those rows are still in the DOM, but are not visible.
|
|
120
|
+
// therefore those rows should be filtered out.
|
|
121
|
+
.filter(isRowNotDestroyed)
|
|
76
122
|
// Sort rows by their row-index attribute value
|
|
77
123
|
.sort(sortElementsByAttributeValue("row-index"))
|
|
78
124
|
.map((row) => {
|
|
@@ -102,11 +148,11 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
|
|
|
102
148
|
|
|
103
149
|
// Remove duplicate entries from allRows
|
|
104
150
|
// In some instances we see cell duplication for non-unique rows
|
|
105
|
-
allRows = allRows.map((row)=>{
|
|
106
|
-
return row.filter((cell, index)=>{
|
|
151
|
+
allRows = allRows.map((row) => {
|
|
152
|
+
return row.filter((cell, index) => {
|
|
107
153
|
return row.indexOf(cell) === index;
|
|
108
|
-
})
|
|
109
|
-
})
|
|
154
|
+
});
|
|
155
|
+
});
|
|
110
156
|
|
|
111
157
|
if (!allRows.length) rows = [];
|
|
112
158
|
else {
|
|
@@ -124,12 +170,10 @@ function _getAgGrid(agGridElement, options = {}, returnElements) {
|
|
|
124
170
|
})
|
|
125
171
|
);
|
|
126
172
|
}
|
|
127
|
-
|
|
128
173
|
// if options.rawValues = true, return headers & rows values as arrays instead of mapping as objects
|
|
129
174
|
if (options.valuesArray) {
|
|
130
175
|
return { headers, rows };
|
|
131
176
|
}
|
|
132
|
-
|
|
133
177
|
// return structured object from headers and rows variables
|
|
134
178
|
return rows.map((row) =>
|
|
135
179
|
row.reduce((acc, curr, idx) => {
|
|
@@ -178,11 +222,10 @@ export function sortColumnBy(agGridElement, columnName, sortDirection) {
|
|
|
178
222
|
.then((value) => {
|
|
179
223
|
cy.log(`sort: ${sortDirection}`);
|
|
180
224
|
if (!value.includes(`ag-header-cell-sorted-${sortDirection}`)) {
|
|
181
|
-
getColumnHeaderElement(agGridElement, columnName).click()
|
|
225
|
+
getColumnHeaderElement(agGridElement, columnName).click();
|
|
182
226
|
sortColumnBy(agGridElement, columnName, sortDirection);
|
|
183
227
|
}
|
|
184
|
-
})
|
|
185
|
-
.wait(100);
|
|
228
|
+
});
|
|
186
229
|
} else {
|
|
187
230
|
throw new Error("sortDirection must be either 'asc' or 'desc'.");
|
|
188
231
|
}
|
|
@@ -201,16 +244,22 @@ function getMenuTabElement(agGridElement, tab) {
|
|
|
201
244
|
* @param tab
|
|
202
245
|
*/
|
|
203
246
|
function selectMenuTab(agGridElement, tab) {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
.
|
|
207
|
-
|
|
208
|
-
.then(($
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
247
|
+
cy.get(agGridElement).then((agGr) => {
|
|
248
|
+
if (agGr.find('.ag-menu-list').length > 0) {
|
|
249
|
+
cy.log('Menu uses a list, not tabs');
|
|
250
|
+
} else {
|
|
251
|
+
getMenuTabElement(agGridElement, tab).then(($ele) => {
|
|
252
|
+
cy.wrap($ele)
|
|
253
|
+
.parent("span")
|
|
254
|
+
.invoke("attr", "class")
|
|
255
|
+
.then(($attr) => {
|
|
256
|
+
if (!$attr.includes("selected")) {
|
|
257
|
+
cy.wrap($ele).click();
|
|
258
|
+
}
|
|
259
|
+
});
|
|
212
260
|
});
|
|
213
|
-
|
|
261
|
+
}
|
|
262
|
+
})
|
|
214
263
|
}
|
|
215
264
|
|
|
216
265
|
/**
|
|
@@ -243,7 +292,7 @@ function getFilterColumnButtonElement(
|
|
|
243
292
|
else
|
|
244
293
|
return getColumnHeaderElement(agGridElement, columnName)
|
|
245
294
|
.parent()
|
|
246
|
-
.siblings(".ag-header-cell-
|
|
295
|
+
.siblings(".ag-header-cell-filter-button");
|
|
247
296
|
}
|
|
248
297
|
|
|
249
298
|
/**
|
|
@@ -260,36 +309,40 @@ function filterBySearchTerm(agGridElement, options) {
|
|
|
260
309
|
const noMenuTabs = options.noMenuTabs;
|
|
261
310
|
|
|
262
311
|
// Navigate to the filter tab
|
|
263
|
-
if (!noMenuTabs) {
|
|
264
|
-
|
|
265
|
-
}
|
|
312
|
+
// if (!noMenuTabs) {
|
|
313
|
+
// selectMenuTab(agGridElement, filterTab.filter);
|
|
314
|
+
// }
|
|
266
315
|
|
|
267
316
|
if (operator) {
|
|
268
|
-
cy
|
|
317
|
+
const elem = cy
|
|
318
|
+
.get(agGridElement)
|
|
269
319
|
.find(".ag-filter")
|
|
270
320
|
.find(".ag-picker-field-wrapper")
|
|
271
321
|
.filter(":visible")
|
|
272
|
-
.eq(searchInputIndex)
|
|
273
|
-
|
|
322
|
+
.eq(searchInputIndex);
|
|
323
|
+
cy.get(agGridElement).agGridWaitForAnimation();
|
|
324
|
+
elem.click();
|
|
274
325
|
cy.get(agGridElement)
|
|
275
|
-
.find(".ag-popup")
|
|
326
|
+
.find(".ag-popup .ag-list")
|
|
276
327
|
.find("span")
|
|
277
328
|
.contains(operator)
|
|
278
|
-
.
|
|
279
|
-
//Have to use the unwrapped element, since Cypress .click() event does not appropriately select the operator
|
|
280
|
-
$ele.trigger("click");
|
|
281
|
-
});
|
|
329
|
+
.click();
|
|
282
330
|
}
|
|
283
331
|
// Input filter term and allow grid a moment to render the results
|
|
284
|
-
|
|
285
|
-
.
|
|
286
|
-
.
|
|
287
|
-
|
|
288
|
-
.
|
|
332
|
+
if (
|
|
333
|
+
operator !== filterOperator.blank &&
|
|
334
|
+
operator !== filterOperator.notBlank
|
|
335
|
+
) {
|
|
336
|
+
cy.get(agGridElement)
|
|
337
|
+
.find(".ag-popup-child")
|
|
338
|
+
.find("input")
|
|
339
|
+
.filter(":visible")
|
|
340
|
+
.as("filterInput");
|
|
341
|
+
}
|
|
289
342
|
|
|
290
343
|
// If it's a multi filter, de-select the 'select-all' checkbox
|
|
291
344
|
if (isMultiFilter) {
|
|
292
|
-
const selectAllText = options.selectAllLocaleText || "Select All";
|
|
345
|
+
const selectAllText = options.selectAllLocaleText || "(Select All)";
|
|
293
346
|
toggleColumnCheckboxFilter(agGridElement, selectAllText, false, true);
|
|
294
347
|
}
|
|
295
348
|
|
|
@@ -299,7 +352,7 @@ function filterBySearchTerm(agGridElement, options) {
|
|
|
299
352
|
operator !== filterOperator.notBlank
|
|
300
353
|
) {
|
|
301
354
|
cy.get("@filterInput").then(($ele) => {
|
|
302
|
-
cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue)
|
|
355
|
+
cy.wrap($ele).eq(searchInputIndex).clear().type(filterValue + '{enter}');
|
|
303
356
|
});
|
|
304
357
|
}
|
|
305
358
|
|
|
@@ -314,11 +367,17 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
|
|
|
314
367
|
cy.get(agGridElement)
|
|
315
368
|
.find(".ag-filter-apply-panel-button")
|
|
316
369
|
.contains("Apply")
|
|
317
|
-
.click()
|
|
318
|
-
.wait(500);
|
|
370
|
+
.click();
|
|
319
371
|
}
|
|
320
372
|
if (!noMenuTabs) {
|
|
321
|
-
|
|
373
|
+
cy.get(agGridElement).then((agGr) => {
|
|
374
|
+
if (agGr.find('.ag-tab').length === 0) {
|
|
375
|
+
cy.log('Menu uses a list, not tabs');
|
|
376
|
+
cy.get(agGridElement).agGridWaitForAnimation();
|
|
377
|
+
} else {
|
|
378
|
+
getMenuTabElement(agGridElement, filterTab.filter).click();
|
|
379
|
+
}
|
|
380
|
+
})
|
|
322
381
|
}
|
|
323
382
|
}
|
|
324
383
|
|
|
@@ -334,17 +393,17 @@ function toggleColumnCheckboxFilter(
|
|
|
334
393
|
doSelect,
|
|
335
394
|
noMenuTabs = false
|
|
336
395
|
) {
|
|
337
|
-
if (!noMenuTabs) {
|
|
338
|
-
|
|
339
|
-
}
|
|
396
|
+
// if (!noMenuTabs) {
|
|
397
|
+
// selectMenuTab(agGridElement, filterTab.filter);
|
|
398
|
+
// }
|
|
340
399
|
cy.get(agGridElement)
|
|
341
400
|
.find(".ag-input-field-label")
|
|
342
401
|
.contains(filterValue)
|
|
343
402
|
.siblings("div")
|
|
344
403
|
.find("input")
|
|
345
404
|
.then(($ele) => {
|
|
346
|
-
if (doSelect) cy.wrap($ele).check()
|
|
347
|
-
else cy.wrap($ele).uncheck()
|
|
405
|
+
if (doSelect) cy.wrap($ele).check();
|
|
406
|
+
else cy.wrap($ele).uncheck();
|
|
348
407
|
});
|
|
349
408
|
}
|
|
350
409
|
|
|
@@ -352,7 +411,7 @@ function populateSearchCriteria(
|
|
|
352
411
|
searchCriteria,
|
|
353
412
|
hasApplyButton = false,
|
|
354
413
|
noMenuTabs = false,
|
|
355
|
-
selectAllLocaleText = "Select All"
|
|
414
|
+
selectAllLocaleText = "(Select All)"
|
|
356
415
|
) {
|
|
357
416
|
const options = {};
|
|
358
417
|
options.searchCriteria = { ...searchCriteria };
|
|
@@ -446,7 +505,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
|
|
|
446
505
|
* @param options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
|
|
447
506
|
* @param options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
|
|
448
507
|
* @param options.noMenuTabs [Optional] True if you use, for example, the community edition of ag-grid, which has no menu tabs
|
|
449
|
-
* @param options.selectAllLocaleText [Optional] Pass in the locale text value of "Select All" for when you are filtering by checkbox - this wil first deselect the "Select All" option before selecting your filter value
|
|
508
|
+
* @param options.selectAllLocaleText [Optional] Pass in the locale text value of "(Select All)" for when you are filtering by checkbox - this wil first deselect the "(Select All)" option before selecting your filter value
|
|
450
509
|
*/
|
|
451
510
|
export function filterBySearchTextColumnFloatingFilter(agGridElement, options) {
|
|
452
511
|
// Check if there are multiple search criteria provided by attempting to access the columnName
|
|
@@ -513,7 +572,7 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
|
|
|
513
572
|
agGridElement,
|
|
514
573
|
options.searchCriteria.columnName
|
|
515
574
|
).click();
|
|
516
|
-
const selectAllText = options.selectAllLocaleText || "Select All";
|
|
575
|
+
const selectAllText = options.selectAllLocaleText || "(Select All)";
|
|
517
576
|
toggleColumnCheckboxFilter(
|
|
518
577
|
agGridElement,
|
|
519
578
|
selectAllText,
|
|
@@ -564,7 +623,8 @@ export function toggleColumnFromSideBar(agGridElement, columnName, doRemove) {
|
|
|
564
623
|
if (!$columnFilterInputField.is(":visible")) {
|
|
565
624
|
cy.get(".ag-side-buttons").find("span").contains("Columns").click();
|
|
566
625
|
}
|
|
567
|
-
cy.
|
|
626
|
+
cy.get(agGridElement).agGridWaitForAnimation();
|
|
627
|
+
cy.wrap($columnFilterInputField).clear().type(columnName);
|
|
568
628
|
cy.get(".ag-column-select-column-label")
|
|
569
629
|
.contains(columnName)
|
|
570
630
|
.parent()
|