cypress-ag-grid 3.3.2 → 3.3.4

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.
Files changed (23) hide show
  1. package/README.md +20 -0
  2. package/app/ag-grid.css +1253 -194
  3. package/app/ag-theme-alpine.css +175 -23
  4. package/app/data.json +21 -21
  5. package/app/grid-basic.js +62 -4
  6. package/app/grid-grouped.js +8 -2
  7. package/app/index.html +45 -2
  8. package/app/v33/index.html +62 -0
  9. package/app/v34/index.html +62 -0
  10. package/cypress/e2e/ag-grid-data.v33.cy.js +6 -0
  11. package/cypress/e2e/ag-grid-data.v34.cy.js +6 -0
  12. package/cypress/e2e/ag-grid-data.v35.cy.js +6 -0
  13. package/cypress/e2e/ag-grid-elements.v33.cy.js +6 -0
  14. package/cypress/e2e/ag-grid-elements.v34.cy.js +6 -0
  15. package/cypress/e2e/ag-grid-elements.v35.cy.js +6 -0
  16. package/cypress/e2e/shared/run-ag-grid-data-suite.js +842 -0
  17. package/cypress/e2e/shared/run-ag-grid-elements-suite.js +56 -0
  18. package/cypress/fixtures/cardata.json +20 -20
  19. package/package.json +6 -3
  20. package/src/agGrid/agGridInteractions.js +145 -24
  21. package/src/index.d.ts +8 -4
  22. package/cypress/e2e/ag-grid-data.cy.js +0 -641
  23. package/cypress/e2e/ag-grid-elements.cy.js +0 -59
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
- gridOptions.api.setGridOption('columnDefs', getColumnDefs(floating));
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
- new agGrid.Grid(eGridDiv, gridOptions);
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("./data.json")
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
- new agGrid.Grid(eGridDivGrouped, gridOptionsGrouped);
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("./data.json")
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
- <script src="https://unpkg.com/ag-grid-enterprise@32.2.1/dist/ag-grid-enterprise.min.noStyle.js"></script>
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>
package/app/v33/index.html ADDED
@@ -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>
package/app/v34/index.html ADDED
@@ -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>
package/cypress/e2e/ag-grid-data.v33.cy.js ADDED
@@ -0,0 +1,6 @@
1
+ import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite";
2
+
3
+ runAgGridDataSuite({
4
+ pagePath: "../app/v33/index.html",
5
+ versionLabel: "v33",
6
+ });
package/cypress/e2e/ag-grid-data.v34.cy.js ADDED
@@ -0,0 +1,6 @@
1
+ import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite";
2
+
3
+ runAgGridDataSuite({
4
+ pagePath: "../app/v34/index.html",
5
+ versionLabel: "v34",
6
+ });
package/cypress/e2e/ag-grid-data.v35.cy.js ADDED
@@ -0,0 +1,6 @@
1
+ import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite";
2
+
3
+ runAgGridDataSuite({
4
+ pagePath: "../app/index.html",
5
+ versionLabel: "v35",
6
+ });
package/cypress/e2e/ag-grid-elements.v33.cy.js ADDED
@@ -0,0 +1,6 @@
1
+ import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite";
2
+
3
+ runAgGridElementsSuite({
4
+ pagePath: "../app/v33/index.html",
5
+ versionLabel: "v33",
6
+ });
package/cypress/e2e/ag-grid-elements.v34.cy.js ADDED
@@ -0,0 +1,6 @@
1
+ import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite";
2
+
3
+ runAgGridElementsSuite({
4
+ pagePath: "../app/v34/index.html",
5
+ versionLabel: "v34",
6
+ });
package/cypress/e2e/ag-grid-elements.v35.cy.js ADDED
@@ -0,0 +1,6 @@
1
+ import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite";
2
+
3
+ runAgGridElementsSuite({
4
+ pagePath: "../app/index.html",
5
+ versionLabel: "v35",
6
+ });