cypress-ag-grid 3.3.2 → 3.3.5
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 +20 -0
- package/app/ag-grid.css +1253 -194
- package/app/ag-theme-alpine.css +175 -23
- package/app/animation-wait/ag-owned.html +28 -0
- package/app/animation-wait/animation-grid.js +123 -0
- package/app/animation-wait/third-party-subtree.html +41 -0
- package/app/data.json +21 -21
- package/app/grid-basic.js +62 -4
- package/app/grid-grouped.js +8 -2
- package/app/index.html +45 -2
- package/app/v33/index.html +62 -0
- package/app/v34/index.html +62 -0
- package/cypress/e2e/ag-grid-animation-wait.v35.cy.js +46 -0
- package/cypress/e2e/ag-grid-data.v33.cy.js +6 -0
- package/cypress/e2e/ag-grid-data.v34.cy.js +6 -0
- package/cypress/e2e/ag-grid-data.v35.cy.js +6 -0
- package/cypress/e2e/ag-grid-elements.v33.cy.js +6 -0
- package/cypress/e2e/ag-grid-elements.v34.cy.js +6 -0
- package/cypress/e2e/ag-grid-elements.v35.cy.js +6 -0
- package/cypress/e2e/shared/run-ag-grid-data-suite.js +842 -0
- package/cypress/e2e/shared/run-ag-grid-elements-suite.js +56 -0
- package/cypress/fixtures/cardata.json +20 -20
- package/package.json +6 -3
- package/src/agGrid/agGridInteractions.js +184 -36
- package/src/index.d.ts +8 -4
- package/cypress/e2e/ag-grid-data.cy.js +0 -641
- package/cypress/e2e/ag-grid-elements.cy.js +0 -59
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
const rowData = [
|
|
2
|
+
{ make: "Porsche", model: "Boxster", price: 72000 },
|
|
3
|
+
{ make: "Tesla", model: "Model 3", price: 48000 },
|
|
4
|
+
{ make: "Toyota", model: "Celica", price: 35000 },
|
|
5
|
+
];
|
|
6
|
+
|
|
7
|
+
const gridOptions = {
|
|
8
|
+
animateRows: true,
|
|
9
|
+
columnDefs: [
|
|
10
|
+
{ field: "make" },
|
|
11
|
+
{ field: "model" },
|
|
12
|
+
{ field: "price" },
|
|
13
|
+
],
|
|
14
|
+
defaultColDef: {
|
|
15
|
+
resizable: true,
|
|
16
|
+
},
|
|
17
|
+
rowData,
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const animationProbe = {
|
|
21
|
+
agFinished: false,
|
|
22
|
+
agStarted: false,
|
|
23
|
+
thirdPartyInstalled: false,
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
let extraAnimations = [];
|
|
27
|
+
|
|
28
|
+
function getFirstAgRow() {
|
|
29
|
+
return document.querySelector("#myGrid .ag-center-cols-container .ag-row");
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function createTrackedAnimation({ target, duration, onFinish, timingDuration = duration }) {
|
|
33
|
+
let resolveFinished;
|
|
34
|
+
const finished = new Promise((resolve) => {
|
|
35
|
+
resolveFinished = resolve;
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
setTimeout(() => {
|
|
39
|
+
if (typeof onFinish === "function") {
|
|
40
|
+
onFinish();
|
|
41
|
+
}
|
|
42
|
+
resolveFinished();
|
|
43
|
+
}, duration);
|
|
44
|
+
|
|
45
|
+
return {
|
|
46
|
+
effect: {
|
|
47
|
+
target,
|
|
48
|
+
getTiming: () => ({
|
|
49
|
+
duration: timingDuration,
|
|
50
|
+
iterations: 1,
|
|
51
|
+
}),
|
|
52
|
+
},
|
|
53
|
+
finished,
|
|
54
|
+
playState: "running",
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function startAgOwnedAnimation() {
|
|
59
|
+
const row = getFirstAgRow();
|
|
60
|
+
if (!row) {
|
|
61
|
+
throw new Error("Expected an AG Grid row before starting the animation.");
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
animationProbe.agStarted = true;
|
|
65
|
+
animationProbe.agFinished = false;
|
|
66
|
+
|
|
67
|
+
extraAnimations.push(
|
|
68
|
+
createTrackedAnimation({
|
|
69
|
+
target: row,
|
|
70
|
+
duration: 350,
|
|
71
|
+
onFinish: () => {
|
|
72
|
+
animationProbe.agFinished = true;
|
|
73
|
+
},
|
|
74
|
+
})
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function installThirdPartyAnimationTrap() {
|
|
79
|
+
const grid = document.querySelector("#myGrid");
|
|
80
|
+
const overlayScrollbarsApi = window.OverlayScrollbarsGlobal?.OverlayScrollbars;
|
|
81
|
+
if (typeof overlayScrollbarsApi !== "function") {
|
|
82
|
+
throw new Error("Expected OverlayScrollbarsGlobal.OverlayScrollbars to be available.");
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
overlayScrollbarsApi(grid, {});
|
|
86
|
+
|
|
87
|
+
const handle = grid.querySelector(".os-scrollbar-handle");
|
|
88
|
+
if (!handle) {
|
|
89
|
+
throw new Error("Expected OverlayScrollbars to render an .os-scrollbar-handle element.");
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
extraAnimations.push({
|
|
93
|
+
effect: {
|
|
94
|
+
target: handle,
|
|
95
|
+
getTiming: () => ({
|
|
96
|
+
duration: "auto",
|
|
97
|
+
iterations: 1,
|
|
98
|
+
}),
|
|
99
|
+
},
|
|
100
|
+
finished: new Promise(() => {}),
|
|
101
|
+
playState: "running",
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
animationProbe.thirdPartyInstalled = true;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
window.__animationProbe = animationProbe;
|
|
108
|
+
window.startAnimationWaitScenario = () => {
|
|
109
|
+
startAgOwnedAnimation();
|
|
110
|
+
|
|
111
|
+
if (window.ANIMATION_WAIT_SCENARIO === "third-party-subtree") {
|
|
112
|
+
installThirdPartyAnimationTrap();
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
const gridElement = document.querySelector("#myGrid");
|
|
117
|
+
agGrid.createGrid(gridElement, gridOptions);
|
|
118
|
+
|
|
119
|
+
const originalGetAnimations = gridElement.getAnimations.bind(gridElement);
|
|
120
|
+
gridElement.getAnimations = (options) => [
|
|
121
|
+
...originalGetAnimations(options),
|
|
122
|
+
...extraAnimations,
|
|
123
|
+
];
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<title>AG Grid Animation Wait - Third Party Subtree</title>
|
|
7
|
+
<script>
|
|
8
|
+
window.AG_GRID_LIBRARY_VERSION = "35.0.0";
|
|
9
|
+
window.ANIMATION_WAIT_SCENARIO = "third-party-subtree";
|
|
10
|
+
</script>
|
|
11
|
+
<script src="https://unpkg.com/ag-grid-enterprise@35.0.0/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
12
|
+
<link rel="stylesheet" href="https://unpkg.com/overlayscrollbars/styles/overlayscrollbars.min.css">
|
|
13
|
+
<link rel="stylesheet" href="../ag-grid.css">
|
|
14
|
+
<link rel="stylesheet" href="../ag-theme-alpine.css">
|
|
15
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
font-family: Arial, sans-serif;
|
|
18
|
+
margin: 16px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.os-scrollbar-handle {
|
|
22
|
+
background: rgba(31, 77, 143, 0.25);
|
|
23
|
+
border-radius: 999px;
|
|
24
|
+
height: 12px;
|
|
25
|
+
position: absolute;
|
|
26
|
+
right: 12px;
|
|
27
|
+
top: 12px;
|
|
28
|
+
width: 80px;
|
|
29
|
+
z-index: 10;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
32
|
+
</head>
|
|
33
|
+
|
|
34
|
+
<body>
|
|
35
|
+
<h1>AG Grid Animation Wait - Third Party Subtree</h1>
|
|
36
|
+
<div id="myGrid" data-overlayscrollbars-initialize style="height: 400px; width: 900px;" class="ag-theme-alpine"></div>
|
|
37
|
+
<script src="https://unpkg.com/overlayscrollbars/browser/overlayscrollbars.browser.es6.min.js" type="text/javascript"></script>
|
|
38
|
+
<script src="./animation-grid.js" type="text/javascript" charset="utf-8"></script>
|
|
39
|
+
</body>
|
|
40
|
+
|
|
41
|
+
</html>
|
package/app/data.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
[
|
|
2
|
-
{ "year": "2020", "make": "Toyota", "model": "Celica", "condition": "fair", "price": "35000" },
|
|
3
|
-
{ "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"excellent", "price": "32000" },
|
|
4
|
-
{ "year": "2020", "make": "Porsche", "model": "Boxter", "condition": "good", "price": "72000" },
|
|
5
|
-
{ "year": "2020", "make": "BMW", "model": "3-series", "condition": "fair", "price": "45000" },
|
|
6
|
-
{ "year": "2020", "make": "Mercedes", "model": "GLC300", "condition": "good","price": "53000" },
|
|
7
|
-
{ "year": "2020", "make": "Honda", "model": "Civic", "condition": "poor", "price": "22000" },
|
|
8
|
-
{ "year": "2020", "make": "Honda", "model": "Accord", "condition": "poor", "price": "32000" },
|
|
9
|
-
{ "year": "2020", "make": "Ford", "model": "Taurus", "condition":"excellent","price": "19000" },
|
|
10
|
-
{ "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"good","price": "22000" },
|
|
11
|
-
{ "year": "2020", "make": "Toyota", "model": "Celica", "condition":"poor","price": "5000" },
|
|
12
|
-
{ "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"good","price": "25000" },
|
|
13
|
-
{ "year": "2020", "make": "Porsche", "model": "Boxter", "condition":"good","price": "99000" },
|
|
14
|
-
{ "year": "2020", "make": "BMW", "model": "3-series", "condition":"poor","price": "32000" },
|
|
15
|
-
{ "year": "2020", "make": "Mercedes", "model": "GLC300", "condition":"excellent","price": "35000" },
|
|
16
|
-
{ "year": "2011", "make": "Honda", "model": "Civic", "condition":"good","price": "9000" },
|
|
17
|
-
{ "year": "2020", "make": "Honda", "model": "Accord", "condition":"good","price": "34000" },
|
|
18
|
-
{ "year": "1990", "make": "Ford", "model": "Taurus", "condition":"excellent","price": "900" },
|
|
19
|
-
{ "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"fair","price": "3000" },
|
|
20
|
-
{ "year": "2020", "make": "BMW", "model": "2002", "condition":"excellent","price": "88001" },
|
|
21
|
-
{ "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","price": "" }
|
|
22
|
-
]
|
|
2
|
+
{ "year": "2020", "make": "Toyota", "model": "Celica", "condition": "fair", "mileage": 12000, "price": "35000" },
|
|
3
|
+
{ "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"excellent", "mileage": 8000, "price": "32000" },
|
|
4
|
+
{ "year": "2020", "make": "Porsche", "model": "Boxter", "condition": "good", "mileage": 30000, "price": "72000" },
|
|
5
|
+
{ "year": "2020", "make": "BMW", "model": "3-series", "condition": "fair", "mileage": 18000, "price": "45000" },
|
|
6
|
+
{ "year": "2020", "make": "Mercedes", "model": "GLC300", "condition": "good","mileage": 24000, "price": "53000" },
|
|
7
|
+
{ "year": "2020", "make": "Honda", "model": "Civic", "condition": "poor", "mileage": 40000, "price": "22000" },
|
|
8
|
+
{ "year": "2020", "make": "Honda", "model": "Accord", "condition": "poor", "mileage": 42000, "price": "32000" },
|
|
9
|
+
{ "year": "2020", "make": "Ford", "model": "Taurus", "condition":"excellent","mileage": 5000, "price": "19000" },
|
|
10
|
+
{ "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"good","mileage": 28000, "price": "22000" },
|
|
11
|
+
{ "year": "2020", "make": "Toyota", "model": "Celica", "condition":"poor","mileage": 60000, "price": "5000" },
|
|
12
|
+
{ "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"good","mileage": 15000, "price": "25000" },
|
|
13
|
+
{ "year": "2020", "make": "Porsche", "model": "Boxter", "condition":"good","mileage": 1000, "price": "99000" },
|
|
14
|
+
{ "year": "2020", "make": "BMW", "model": "3-series", "condition":"poor","mileage": 52000, "price": "32000" },
|
|
15
|
+
{ "year": "2020", "make": "Mercedes", "model": "GLC300", "condition":"excellent","mileage": 9000, "price": "35000" },
|
|
16
|
+
{ "year": "2011", "make": "Honda", "model": "Civic", "condition":"good","mileage": 70000, "price": "9000" },
|
|
17
|
+
{ "year": "2020", "make": "Honda", "model": "Accord", "condition":"good","mileage": 22000, "price": "34000" },
|
|
18
|
+
{ "year": "1990", "make": "Ford", "model": "Taurus", "condition":"excellent","mileage": 90000, "price": "900" },
|
|
19
|
+
{ "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"fair","mileage": 3500, "price": "3000" },
|
|
20
|
+
{ "year": "2020", "make": "BMW", "model": "2002", "condition":"excellent","mileage": 4500, "price": "88001" },
|
|
21
|
+
{ "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","mileage": 250, "price": "" }
|
|
22
|
+
]
|
package/app/grid-basic.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
function getRowDataUrl() {
|
|
2
|
+
return window.AG_GRID_DATA_PATH || "./data.json";
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
// specify the columns
|
|
2
6
|
function getColumnDefs(floatingFilter) {
|
|
3
7
|
return [
|
|
@@ -5,6 +9,12 @@ function getColumnDefs(floatingFilter) {
|
|
|
5
9
|
{ field: "make", rowGroup: false, pinned: "left", floatingFilter },
|
|
6
10
|
{ field: "model", filter: true, floatingFilter },
|
|
7
11
|
{ field: "condition", filter: "agTextColumnFilter", floatingFilter, filterParams: { numAlwaysVisibleConditions: 2, defaultJoinOperator: 'OR', } },
|
|
12
|
+
{
|
|
13
|
+
field: "mileage",
|
|
14
|
+
filter: "agNumberColumnFilter",
|
|
15
|
+
floatingFilter: false,
|
|
16
|
+
hide: true,
|
|
17
|
+
},
|
|
8
18
|
{
|
|
9
19
|
field: "price",
|
|
10
20
|
pinned: "right",
|
|
@@ -16,6 +26,27 @@ function getColumnDefs(floatingFilter) {
|
|
|
16
26
|
];
|
|
17
27
|
}
|
|
18
28
|
|
|
29
|
+
function isAgGridVersion35OrLater() {
|
|
30
|
+
const majorVersion = Number((window.AG_GRID_LIBRARY_VERSION || "0").split(".")[0]);
|
|
31
|
+
return majorVersion >= 35;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function applyColumnDefs(columnDefs) {
|
|
35
|
+
if (!gridOptions.api) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (!isAgGridVersion35OrLater() && typeof gridOptions.api.setColumnDefs === "function") {
|
|
40
|
+
gridOptions.api.setColumnDefs(columnDefs);
|
|
41
|
+
} else {
|
|
42
|
+
gridOptions.api.setGridOption("columnDefs", columnDefs);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (window.Cypress) {
|
|
46
|
+
gridOptions.api.sizeColumnsToFit();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
19
50
|
const autoGroupColumnDef = {
|
|
20
51
|
headerName: "Model",
|
|
21
52
|
field: "model",
|
|
@@ -44,23 +75,50 @@ const gridOptions = {
|
|
|
44
75
|
rowSelection: "multiple",
|
|
45
76
|
domLayout: "normal",
|
|
46
77
|
pagination: true,
|
|
47
|
-
paginationPageSizeSelector: [5, 10, 20],
|
|
48
78
|
paginationPageSize: 5,
|
|
49
79
|
sideBar: true,
|
|
50
80
|
};
|
|
51
81
|
|
|
82
|
+
if (isAgGridVersion35OrLater()) {
|
|
83
|
+
gridOptions.paginationPageSizeSelector = [5, 10, 20];
|
|
84
|
+
}
|
|
85
|
+
|
|
52
86
|
// lookup the container we want the Grid to use
|
|
53
87
|
const eGridDiv = document.querySelector("#myGrid");
|
|
54
88
|
|
|
55
89
|
function MakeFloating(floating) {
|
|
56
|
-
|
|
90
|
+
applyColumnDefs(getColumnDefs(floating));
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
function setColumnFilter(field, filter, floatingFilter = true, hide) {
|
|
94
|
+
const columnDefs = gridOptions.api.getColumnDefs().map((columnDef) => {
|
|
95
|
+
if (columnDef.field !== field) {
|
|
96
|
+
return columnDef;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
const updatedColumnDef = {
|
|
100
|
+
...columnDef,
|
|
101
|
+
filter,
|
|
102
|
+
floatingFilter,
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
if (hide !== undefined) {
|
|
106
|
+
updatedColumnDef.hide = hide;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
return updatedColumnDef;
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
applyColumnDefs(columnDefs);
|
|
57
113
|
}
|
|
58
114
|
|
|
59
115
|
// create the grid passing in the div to use together with the columns & data we want to use
|
|
60
|
-
|
|
116
|
+
const gridApi = agGrid.createGrid(eGridDiv, gridOptions);
|
|
117
|
+
// keep backward compatibility with code that references gridOptions.api
|
|
118
|
+
gridOptions.api = gridApi;
|
|
61
119
|
|
|
62
120
|
// Grab the grid data from the supplied API endpoint
|
|
63
|
-
fetch(
|
|
121
|
+
fetch(getRowDataUrl())
|
|
64
122
|
.then(res => res.json())
|
|
65
123
|
.then((data) => {
|
|
66
124
|
gridOptions.api.setGridOption('rowData', data);
|
package/app/grid-grouped.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
function getRowDataUrl() {
|
|
2
|
+
return window.AG_GRID_DATA_PATH || "./data.json";
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
// specify the columns
|
|
2
6
|
const columnDefsGrouped = [
|
|
3
7
|
{ field: "year", pivot: true, },
|
|
@@ -43,10 +47,12 @@ const gridOptionsGrouped = {
|
|
|
43
47
|
const eGridDivGrouped = document.querySelector("#myGrid2");
|
|
44
48
|
|
|
45
49
|
// create the grid passing in the div to use together with the columns & data we want to use
|
|
46
|
-
|
|
50
|
+
const gridApiGrouped = agGrid.createGrid(eGridDivGrouped, gridOptionsGrouped);
|
|
51
|
+
// keep backward compatibility with code that references gridOptionsGrouped.api
|
|
52
|
+
gridOptionsGrouped.api = gridApiGrouped;
|
|
47
53
|
|
|
48
54
|
// Grab the grid data from the supplied API endpoint
|
|
49
|
-
fetch(
|
|
55
|
+
fetch(getRowDataUrl())
|
|
50
56
|
.then(res => res.json())
|
|
51
57
|
.then((data) => {
|
|
52
58
|
gridOptionsGrouped.api.setGridOption('rowData', data);
|
package/app/index.html
CHANGED
|
@@ -2,12 +2,55 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
|
-
<
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<title>AG Grid Cypress Example v35</title>
|
|
7
|
+
<script>
|
|
8
|
+
window.AG_GRID_EXAMPLE_VERSION = "v35";
|
|
9
|
+
window.AG_GRID_LIBRARY_VERSION = "35.0.0";
|
|
10
|
+
window.AG_GRID_DATA_PATH = "./data.json";
|
|
11
|
+
</script>
|
|
12
|
+
<script src="https://unpkg.com/ag-grid-enterprise@35.0.0/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
6
13
|
<link rel="stylesheet" href="./ag-grid.css">
|
|
7
14
|
<link rel="stylesheet" href="./ag-theme-alpine.css">
|
|
15
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
font-family: Arial, sans-serif;
|
|
18
|
+
margin: 16px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.example-header {
|
|
22
|
+
align-items: center;
|
|
23
|
+
display: flex;
|
|
24
|
+
gap: 12px;
|
|
25
|
+
margin-bottom: 16px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.example-version {
|
|
29
|
+
border: 1px solid #1f4d8f;
|
|
30
|
+
border-radius: 999px;
|
|
31
|
+
color: #1f4d8f;
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
padding: 4px 10px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.example-links a {
|
|
38
|
+
color: #1f4d8f;
|
|
39
|
+
margin-right: 12px;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
8
42
|
</head>
|
|
9
43
|
|
|
10
44
|
<body>
|
|
45
|
+
<div class="example-header">
|
|
46
|
+
<h1>AG Grid Cypress Example</h1>
|
|
47
|
+
<span class="example-version">AG Grid v35</span>
|
|
48
|
+
<nav class="example-links">
|
|
49
|
+
<a href="./index.html">v35</a>
|
|
50
|
+
<a href="./v34/index.html">v34</a>
|
|
51
|
+
<a href="./v33/index.html">v33</a>
|
|
52
|
+
</nav>
|
|
53
|
+
</div>
|
|
11
54
|
<div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
12
55
|
<script src="grid-basic.js" type="text/javascript" charset="utf-8"></script>
|
|
13
56
|
<button onclick="MakeFloating(true)" id="floating">Floating</button>
|
|
@@ -16,4 +59,4 @@
|
|
|
16
59
|
<script src="grid-grouped.js" type="text/javascript" charset="utf-8"></script>
|
|
17
60
|
</body>
|
|
18
61
|
|
|
19
|
-
</html>
|
|
62
|
+
</html>
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<title>AG Grid Cypress Example v33</title>
|
|
7
|
+
<script>
|
|
8
|
+
window.AG_GRID_EXAMPLE_VERSION = "v33";
|
|
9
|
+
window.AG_GRID_LIBRARY_VERSION = "33.0.0";
|
|
10
|
+
window.AG_GRID_DATA_PATH = "../data.json";
|
|
11
|
+
</script>
|
|
12
|
+
<script src="https://unpkg.com/ag-grid-enterprise@33.0.0/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
13
|
+
<link rel="stylesheet" href="../ag-grid.css">
|
|
14
|
+
<link rel="stylesheet" href="../ag-theme-alpine.css">
|
|
15
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
font-family: Arial, sans-serif;
|
|
18
|
+
margin: 16px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.example-header {
|
|
22
|
+
align-items: center;
|
|
23
|
+
display: flex;
|
|
24
|
+
gap: 12px;
|
|
25
|
+
margin-bottom: 16px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.example-version {
|
|
29
|
+
border: 1px solid #1b5e20;
|
|
30
|
+
border-radius: 999px;
|
|
31
|
+
color: #1b5e20;
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
padding: 4px 10px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.example-links a {
|
|
38
|
+
color: #1b5e20;
|
|
39
|
+
margin-right: 12px;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
</head>
|
|
43
|
+
|
|
44
|
+
<body>
|
|
45
|
+
<div class="example-header">
|
|
46
|
+
<h1>AG Grid Cypress Example</h1>
|
|
47
|
+
<span class="example-version">AG Grid v33</span>
|
|
48
|
+
<nav class="example-links">
|
|
49
|
+
<a href="../index.html">v35</a>
|
|
50
|
+
<a href="../v34/index.html">v34</a>
|
|
51
|
+
<a href="./index.html">v33</a>
|
|
52
|
+
</nav>
|
|
53
|
+
</div>
|
|
54
|
+
<div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
55
|
+
<script src="../grid-basic.js" type="text/javascript" charset="utf-8"></script>
|
|
56
|
+
<button onclick="MakeFloating(true)" id="floating">Floating</button>
|
|
57
|
+
<button onclick="MakeFloating(false)" id="nonFloating">Non Floating</button>
|
|
58
|
+
<div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
59
|
+
<script src="../grid-grouped.js" type="text/javascript" charset="utf-8"></script>
|
|
60
|
+
</body>
|
|
61
|
+
|
|
62
|
+
</html>
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<title>AG Grid Cypress Example v34</title>
|
|
7
|
+
<script>
|
|
8
|
+
window.AG_GRID_EXAMPLE_VERSION = "v34";
|
|
9
|
+
window.AG_GRID_LIBRARY_VERSION = "34.0.0";
|
|
10
|
+
window.AG_GRID_DATA_PATH = "../data.json";
|
|
11
|
+
</script>
|
|
12
|
+
<script src="https://unpkg.com/ag-grid-enterprise@34.0.0/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
13
|
+
<link rel="stylesheet" href="../ag-grid.css">
|
|
14
|
+
<link rel="stylesheet" href="../ag-theme-alpine.css">
|
|
15
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
font-family: Arial, sans-serif;
|
|
18
|
+
margin: 16px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.example-header {
|
|
22
|
+
align-items: center;
|
|
23
|
+
display: flex;
|
|
24
|
+
gap: 12px;
|
|
25
|
+
margin-bottom: 16px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.example-version {
|
|
29
|
+
border: 1px solid #7b341e;
|
|
30
|
+
border-radius: 999px;
|
|
31
|
+
color: #7b341e;
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
padding: 4px 10px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.example-links a {
|
|
38
|
+
color: #7b341e;
|
|
39
|
+
margin-right: 12px;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
</head>
|
|
43
|
+
|
|
44
|
+
<body>
|
|
45
|
+
<div class="example-header">
|
|
46
|
+
<h1>AG Grid Cypress Example</h1>
|
|
47
|
+
<span class="example-version">AG Grid v34</span>
|
|
48
|
+
<nav class="example-links">
|
|
49
|
+
<a href="../index.html">v35</a>
|
|
50
|
+
<a href="./index.html">v34</a>
|
|
51
|
+
<a href="../v33/index.html">v33</a>
|
|
52
|
+
</nav>
|
|
53
|
+
</div>
|
|
54
|
+
<div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
55
|
+
<script src="../grid-basic.js" type="text/javascript" charset="utf-8"></script>
|
|
56
|
+
<button onclick="MakeFloating(true)" id="floating">Floating</button>
|
|
57
|
+
<button onclick="MakeFloating(false)" id="nonFloating">Non Floating</button>
|
|
58
|
+
<div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
59
|
+
<script src="../grid-grouped.js" type="text/javascript" charset="utf-8"></script>
|
|
60
|
+
</body>
|
|
61
|
+
|
|
62
|
+
</html>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
describe("agGridWaitForAnimation", () => {
|
|
2
|
+
it("waits for AG Grid-owned animations to finish", () => {
|
|
3
|
+
cy.visit("../app/animation-wait/ag-owned.html");
|
|
4
|
+
cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
|
|
5
|
+
|
|
6
|
+
cy.window().then((win) => {
|
|
7
|
+
win.startAnimationWaitScenario();
|
|
8
|
+
win.__animationProbe.waitStartedAt = Date.now();
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
cy.get("#myGrid")
|
|
12
|
+
.agGridWaitForAnimation()
|
|
13
|
+
.then(() => {
|
|
14
|
+
cy.window().then((win) => {
|
|
15
|
+
const elapsedMs = Date.now() - win.__animationProbe.waitStartedAt;
|
|
16
|
+
expect(win.__animationProbe.agStarted).to.equal(true);
|
|
17
|
+
expect(win.__animationProbe.agFinished).to.equal(true);
|
|
18
|
+
expect(elapsedMs).to.be.greaterThan(200);
|
|
19
|
+
expect(elapsedMs).to.be.lessThan(2000);
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
it("ignores third-party subtree animations whose finished promise never resolves", () => {
|
|
25
|
+
cy.visit("../app/animation-wait/third-party-subtree.html");
|
|
26
|
+
cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
|
|
27
|
+
|
|
28
|
+
cy.window().then((win) => {
|
|
29
|
+
win.startAnimationWaitScenario();
|
|
30
|
+
win.__animationProbe.waitStartedAt = Date.now();
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
cy.get("#myGrid .os-scrollbar-handle").should("exist");
|
|
34
|
+
|
|
35
|
+
cy.get("#myGrid")
|
|
36
|
+
.agGridWaitForAnimation()
|
|
37
|
+
.then(() => {
|
|
38
|
+
cy.window().then((win) => {
|
|
39
|
+
const elapsedMs = Date.now() - win.__animationProbe.waitStartedAt;
|
|
40
|
+
expect(win.__animationProbe.agFinished).to.equal(true);
|
|
41
|
+
expect(win.__animationProbe.thirdPartyInstalled).to.equal(true);
|
|
42
|
+
expect(elapsedMs).to.be.lessThan(2000);
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
});
|