cypress-ag-grid 3.3.4 → 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.
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<title>AG Grid Animation Wait - AG Owned</title>
|
|
7
|
+
<script>
|
|
8
|
+
window.AG_GRID_LIBRARY_VERSION = "35.0.0";
|
|
9
|
+
window.ANIMATION_WAIT_SCENARIO = "ag-owned";
|
|
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="../ag-grid.css">
|
|
13
|
+
<link rel="stylesheet" href="../ag-theme-alpine.css">
|
|
14
|
+
<style>
|
|
15
|
+
body {
|
|
16
|
+
font-family: Arial, sans-serif;
|
|
17
|
+
margin: 16px;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
|
|
22
|
+
<body>
|
|
23
|
+
<h1>AG Grid Animation Wait - AG Owned</h1>
|
|
24
|
+
<div id="myGrid" style="height: 400px; width: 900px;" class="ag-theme-alpine"></div>
|
|
25
|
+
<script src="./animation-grid.js" type="text/javascript" charset="utf-8"></script>
|
|
26
|
+
</body>
|
|
27
|
+
|
|
28
|
+
</html>
|
|
@@ -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>
|
|
@@ -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
|
+
});
|
package/package.json
CHANGED
|
@@ -20,26 +20,53 @@ export const agGridWaitForAnimation = async (agGridElement) => {
|
|
|
20
20
|
throw new Error(`Couldn't find the element ${agGridElement}`);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
const
|
|
23
|
+
const AG_GRID_ANIMATION_TIMEOUT_MS = 5000;
|
|
24
|
+
const agGridRootElement = agGridElement.get()[0];
|
|
25
|
+
const animations = agGridRootElement.getAnimations({ subtree: true });
|
|
26
|
+
|
|
27
|
+
const agGridAnimations = animations.filter((animation) => {
|
|
28
|
+
const animationTarget = animation.effect?.target;
|
|
29
|
+
if (
|
|
30
|
+
!animationTarget ||
|
|
31
|
+
animationTarget.nodeType !== 1 ||
|
|
32
|
+
!animationTarget.classList
|
|
33
|
+
) {
|
|
34
|
+
return false;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const hasAgGridClass = [...animationTarget.classList].some((className) =>
|
|
38
|
+
className.startsWith("ag-")
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
animationTarget === agGridRootElement ||
|
|
43
|
+
hasAgGridClass
|
|
44
|
+
);
|
|
45
|
+
});
|
|
24
46
|
|
|
25
47
|
// Filter out infinite animations (e.g. loading spinners) whose .finished
|
|
26
48
|
// promise never resolves per the Web Animations API spec.
|
|
27
|
-
const finiteAnimations =
|
|
49
|
+
const finiteAnimations = agGridAnimations.filter((animation) => {
|
|
28
50
|
const iterations = animation.effect?.getTiming?.()?.iterations;
|
|
29
51
|
return iterations !== Infinity;
|
|
30
52
|
});
|
|
31
53
|
|
|
32
|
-
await Promise.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
54
|
+
await Promise.race([
|
|
55
|
+
Promise.all(
|
|
56
|
+
finiteAnimations.map(async (animation) => {
|
|
57
|
+
try {
|
|
58
|
+
await animation.finished;
|
|
59
|
+
} catch (error) {
|
|
60
|
+
if (error.name === "AbortError") return;
|
|
61
|
+
console.error("error", error, error.name);
|
|
62
|
+
throw error;
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
),
|
|
66
|
+
new Promise((resolve) => {
|
|
67
|
+
setTimeout(resolve, AG_GRID_ANIMATION_TIMEOUT_MS);
|
|
68
|
+
}),
|
|
69
|
+
]);
|
|
43
70
|
|
|
44
71
|
return agGridElement;
|
|
45
72
|
};
|