cypress-ag-grid 2.0.1 → 2.0.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/.circleci/config.yml +13 -13
- package/README.md +378 -376
- package/app/grid-basic.js +70 -70
- package/app/grid-grouped.js +71 -71
- package/app/index.html +14 -14
- package/cypress/e2e/ag-grid-data.cy.js +506 -506
- package/cypress/e2e/ag-grid-elements.cy.js +59 -59
- package/cypress/fixtures/cardata.json +21 -21
- package/cypress/plugins/index.js +22 -22
- package/cypress/support/commands.js +25 -25
- package/cypress/support/e2e.js +21 -21
- package/package.json +29 -29
- package/src/agGrid/agGridInteractions.js +538 -537
- package/src/agGrid/agGridValidations.js +38 -37
- package/src/agGrid/filterOperator.enum.js +13 -13
- package/src/agGrid/menuTab.enum.js +6 -6
- package/src/agGrid/sort.enum.js +5 -5
- package/src/index.js +18 -18
package/app/grid-basic.js
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
// specify the columns
|
|
2
|
-
const columnDefs = [
|
|
3
|
-
{ field: "year", pinned: "left"},
|
|
4
|
-
{ field: "make", rowGroup: false, pinned: "left" },
|
|
5
|
-
{ field: "model", filter: true },
|
|
6
|
-
{ field: "price", pinned: "right", floatingFilter: false, sortable: false, editable: true, cellEditor: 'agTextCellEditor' },
|
|
7
|
-
];
|
|
8
|
-
|
|
9
|
-
const autoGroupColumnDef = {
|
|
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 gridOptions = {
|
|
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
|
-
autoGroupColumnDef: autoGroupColumnDef,
|
|
32
|
-
groupSelectsChildren: true,
|
|
33
|
-
columnDefs: columnDefs,
|
|
34
|
-
rowSelection: "multiple",
|
|
35
|
-
domLayout: "normal",
|
|
36
|
-
pagination: true,
|
|
37
|
-
paginationPageSize: 5,
|
|
38
|
-
sideBar: true,
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
// lookup the container we want the Grid to use
|
|
42
|
-
const eGridDiv = document.querySelector("#myGrid");
|
|
43
|
-
|
|
44
|
-
// create the grid passing in the div to use together with the columns & data we want to use
|
|
45
|
-
new agGrid.Grid(eGridDiv, gridOptions);
|
|
46
|
-
|
|
47
|
-
// Grab the grid data from the supplied API endpoint
|
|
48
|
-
agGrid
|
|
49
|
-
.simpleHttpRequest({
|
|
50
|
-
url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2",
|
|
51
|
-
})
|
|
52
|
-
.then((data) => {
|
|
53
|
-
gridOptions.api.setRowData(data.record);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
function autoSizeAllColumns() {
|
|
57
|
-
var allColumnIds = [];
|
|
58
|
-
gridOptions.columnApi.getAllColumns().forEach(function (column) {
|
|
59
|
-
allColumnIds.push(column.colId);
|
|
60
|
-
});
|
|
61
|
-
gridOptions.columnApi.autoSizeColumns(allColumnIds);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// If the Cypress test is running, ensure all columns fit within the window
|
|
65
|
-
if (window.Cypress) {
|
|
66
|
-
gridOptions.api.sizeColumnsToFit();
|
|
67
|
-
} else {
|
|
68
|
-
// Otherwise auto-size columns the way we wish to view the grid in production.
|
|
69
|
-
autoSizeAllColumns();
|
|
70
|
-
}
|
|
1
|
+
// specify the columns
|
|
2
|
+
const columnDefs = [
|
|
3
|
+
{ field: "year", pinned: "left"},
|
|
4
|
+
{ field: "make", rowGroup: false, pinned: "left" },
|
|
5
|
+
{ field: "model", filter: true },
|
|
6
|
+
{ field: "price", pinned: "right", floatingFilter: false, sortable: false, editable: true, cellEditor: 'agTextCellEditor' },
|
|
7
|
+
];
|
|
8
|
+
|
|
9
|
+
const autoGroupColumnDef = {
|
|
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 gridOptions = {
|
|
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
|
+
autoGroupColumnDef: autoGroupColumnDef,
|
|
32
|
+
groupSelectsChildren: true,
|
|
33
|
+
columnDefs: columnDefs,
|
|
34
|
+
rowSelection: "multiple",
|
|
35
|
+
domLayout: "normal",
|
|
36
|
+
pagination: true,
|
|
37
|
+
paginationPageSize: 5,
|
|
38
|
+
sideBar: true,
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// lookup the container we want the Grid to use
|
|
42
|
+
const eGridDiv = document.querySelector("#myGrid");
|
|
43
|
+
|
|
44
|
+
// create the grid passing in the div to use together with the columns & data we want to use
|
|
45
|
+
new agGrid.Grid(eGridDiv, gridOptions);
|
|
46
|
+
|
|
47
|
+
// Grab the grid data from the supplied API endpoint
|
|
48
|
+
agGrid
|
|
49
|
+
.simpleHttpRequest({
|
|
50
|
+
url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2",
|
|
51
|
+
})
|
|
52
|
+
.then((data) => {
|
|
53
|
+
gridOptions.api.setRowData(data.record);
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
function autoSizeAllColumns() {
|
|
57
|
+
var allColumnIds = [];
|
|
58
|
+
gridOptions.columnApi.getAllColumns().forEach(function (column) {
|
|
59
|
+
allColumnIds.push(column.colId);
|
|
60
|
+
});
|
|
61
|
+
gridOptions.columnApi.autoSizeColumns(allColumnIds);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// If the Cypress test is running, ensure all columns fit within the window
|
|
65
|
+
if (window.Cypress) {
|
|
66
|
+
gridOptions.api.sizeColumnsToFit();
|
|
67
|
+
} else {
|
|
68
|
+
// Otherwise auto-size columns the way we wish to view the grid in production.
|
|
69
|
+
autoSizeAllColumns();
|
|
70
|
+
}
|
package/app/grid-grouped.js
CHANGED
|
@@ -1,71 +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
|
-
}
|
|
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
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
5
|
-
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
|
|
6
|
-
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
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>
|
|
14
|
-
</body>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
|
|
5
|
+
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
|
|
6
|
+
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
|
|
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>
|
|
14
|
+
</body>
|
|
15
15
|
</html>
|