cypress-ag-grid 3.3.1 → 3.3.4

package/app/data.json

@@ -1,22 +1,22 @@
 [
-        { "year": "2020", "make": "Toyota", "model": "Celica", "condition": "fair", "price": "35000" },
-        { "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"excellent", "price": "32000" },
-        { "year": "2020", "make": "Porsche", "model": "Boxter", "condition": "good", "price": "72000" },
-        { "year": "2020", "make": "BMW", "model": "3-series", "condition": "fair", "price": "45000" },
-        { "year": "2020", "make": "Mercedes", "model": "GLC300", "condition": "good","price": "53000" },
-        { "year": "2020", "make": "Honda", "model": "Civic", "condition": "poor", "price": "22000" },
-        { "year": "2020", "make": "Honda", "model": "Accord", "condition": "poor", "price": "32000" },
-        { "year": "2020", "make": "Ford", "model": "Taurus", "condition":"excellent","price": "19000" },
-        { "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"good","price": "22000" },
-        { "year": "2020", "make": "Toyota", "model": "Celica", "condition":"poor","price": "5000" },
-        { "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"good","price": "25000" },
-        { "year": "2020", "make": "Porsche", "model": "Boxter", "condition":"good","price": "99000" },
-        { "year": "2020", "make": "BMW", "model": "3-series", "condition":"poor","price": "32000" },
-        { "year": "2020", "make": "Mercedes", "model": "GLC300", "condition":"excellent","price": "35000" },
-        { "year": "2011", "make": "Honda", "model": "Civic", "condition":"good","price": "9000" },
-        { "year": "2020", "make": "Honda", "model": "Accord", "condition":"good","price": "34000" },
-        { "year": "1990", "make": "Ford", "model": "Taurus", "condition":"excellent","price": "900" },
-        { "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"fair","price": "3000" },
-        { "year": "2020", "make": "BMW", "model": "2002", "condition":"excellent","price": "88001" },
-        { "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","price": "" }
-]
+        { "year": "2020", "make": "Toyota", "model": "Celica", "condition": "fair", "mileage": 12000, "price": "35000" },
+        { "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"excellent", "mileage": 8000, "price": "32000" },
+        { "year": "2020", "make": "Porsche", "model": "Boxter", "condition": "good", "mileage": 30000, "price": "72000" },
+        { "year": "2020", "make": "BMW", "model": "3-series", "condition": "fair", "mileage": 18000, "price": "45000" },
+        { "year": "2020", "make": "Mercedes", "model": "GLC300", "condition": "good","mileage": 24000, "price": "53000" },
+        { "year": "2020", "make": "Honda", "model": "Civic", "condition": "poor", "mileage": 40000, "price": "22000" },
+        { "year": "2020", "make": "Honda", "model": "Accord", "condition": "poor", "mileage": 42000, "price": "32000" },
+        { "year": "2020", "make": "Ford", "model": "Taurus", "condition":"excellent","mileage": 5000, "price": "19000" },
+        { "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"good","mileage": 28000, "price": "22000" },
+        { "year": "2020", "make": "Toyota", "model": "Celica", "condition":"poor","mileage": 60000, "price": "5000" },
+        { "year": "2020", "make": "Ford", "model": "Mondeo", "condition":"good","mileage": 15000, "price": "25000" },
+        { "year": "2020", "make": "Porsche", "model": "Boxter", "condition":"good","mileage": 1000, "price": "99000" },
+        { "year": "2020", "make": "BMW", "model": "3-series", "condition":"poor","mileage": 52000, "price": "32000" },
+        { "year": "2020", "make": "Mercedes", "model": "GLC300", "condition":"excellent","mileage": 9000, "price": "35000" },
+        { "year": "2011", "make": "Honda", "model": "Civic", "condition":"good","mileage": 70000, "price": "9000" },
+        { "year": "2020", "make": "Honda", "model": "Accord", "condition":"good","mileage": 22000, "price": "34000" },
+        { "year": "1990", "make": "Ford", "model": "Taurus", "condition":"excellent","mileage": 90000, "price": "900" },
+        { "year": "2020", "make": "Hyundai", "model": "Elantra", "condition":"fair","mileage": 3500, "price": "3000" },
+        { "year": "2020", "make": "BMW", "model": "2002", "condition":"excellent","mileage": 4500, "price": "88001" },
+        { "year": "2023", "make": "Hyundai", "model": "Santa Fe", "condition":"excellent","mileage": 250, "price": "" }
+]

package/app/grid-basic.js

@@ -1,18 +1,51 @@
+function getRowDataUrl() {
+  return window.AG_GRID_DATA_PATH || "./data.json";
+}
+
 // specify the columns
-const columnDefs = [
-  { field: "year", pinned: "left" },
-  { field: "make", rowGroup: false, pinned: "left" },
-  { field: "model", filter: true },
-  { field: "condition",filter: "agTextColumnFilter", filterParams: { numAlwaysVisibleConditions: 2, defaultJoinOperator: 'OR', } },
-  {
-    field: "price",
-    pinned: "right",
-    floatingFilter: false,
-    sortable: false,
-    editable: true,
-    cellEditor: "agTextCellEditor",
-  },
-];
+function getColumnDefs(floatingFilter) {
+  return [
+    { field: "year", pinned: "left", floatingFilter },
+    { field: "make", rowGroup: false, pinned: "left", floatingFilter },
+    { field: "model", filter: true, floatingFilter },
+    { field: "condition", filter: "agTextColumnFilter", floatingFilter, filterParams: { numAlwaysVisibleConditions: 2, defaultJoinOperator: 'OR', } },
+    {
+      field: "mileage",
+      filter: "agNumberColumnFilter",
+      floatingFilter: false,
+      hide: true,
+    },
+    {
+      field: "price",
+      pinned: "right",
+      floatingFilter: false,
+      sortable: false,
+      editable: true,
+      cellEditor: "agTextCellEditor",
+    },
+  ];
+}
+
+function isAgGridVersion35OrLater() {
+  const majorVersion = Number((window.AG_GRID_LIBRARY_VERSION || "0").split(".")[0]);
+  return majorVersion >= 35;
+}
+
+function applyColumnDefs(columnDefs) {
+  if (!gridOptions.api) {
+    return;
+  }
+
+  if (!isAgGridVersion35OrLater() && typeof gridOptions.api.setColumnDefs === "function") {
+    gridOptions.api.setColumnDefs(columnDefs);
+  } else {
+    gridOptions.api.setGridOption("columnDefs", columnDefs);
+  }
+
+  if (window.Cypress) {
+    gridOptions.api.sizeColumnsToFit();
+  }
+}
 
 const autoGroupColumnDef = {
   headerName: "Model",
@@ -38,7 +71,7 @@ const gridOptions = {
   },
   autoGroupColumnDef: autoGroupColumnDef,
   groupSelectsChildren: true,
-  columnDefs: columnDefs,
+  columnDefs: getColumnDefs(true),
   rowSelection: "multiple",
   domLayout: "normal",
   pagination: true,
@@ -46,14 +79,46 @@ const gridOptions = {
   sideBar: true,
 };
 
+if (isAgGridVersion35OrLater()) {
+  gridOptions.paginationPageSizeSelector = [5, 10, 20];
+}
+
 // lookup the container we want the Grid to use
 const eGridDiv = document.querySelector("#myGrid");
 
+function MakeFloating(floating) {
+  applyColumnDefs(getColumnDefs(floating));
+}
+
+function setColumnFilter(field, filter, floatingFilter = true, hide) {
+  const columnDefs = gridOptions.api.getColumnDefs().map((columnDef) => {
+    if (columnDef.field !== field) {
+      return columnDef;
+    }
+
+    const updatedColumnDef = {
+      ...columnDef,
+      filter,
+      floatingFilter,
+    };
+
+    if (hide !== undefined) {
+      updatedColumnDef.hide = hide;
+    }
+
+    return updatedColumnDef;
+  });
+
+  applyColumnDefs(columnDefs);
+}
+
 // create the grid passing in the div to use together with the columns & data we want to use
-new agGrid.Grid(eGridDiv, gridOptions);
+const gridApi = agGrid.createGrid(eGridDiv, gridOptions);
+// keep backward compatibility with code that references gridOptions.api
+gridOptions.api = gridApi;
 
 // Grab the grid data from the supplied API endpoint
-fetch("./data.json")
+fetch(getRowDataUrl())
   .then(res => res.json())
   .then((data) => {
     gridOptions.api.setGridOption('rowData', data);
@@ -61,7 +126,7 @@ fetch("./data.json")
 
 function autoSizeAllColumns() {
   var allColumnIds = [];
-  gridOptions.api.getAllColumns().forEach(function (column) {
+  gridOptions.api.getColumns().forEach(function (column) {
     allColumnIds.push(column.colId);
   });
   gridOptions.api.autoSizeColumns(allColumnIds);

package/app/grid-grouped.js

@@ -1,9 +1,13 @@
+function getRowDataUrl() {
+  return window.AG_GRID_DATA_PATH || "./data.json";
+}
+
 // specify the columns
 const columnDefsGrouped = [
   { field: "year", pivot: true, },
   { field: "make", rowGroup: true, enableRowGroup: true },
   { field: "model", filter: true },
-  { field: "price", editable: true, cellEditor: 'agTextCellEditor'  },
+  { field: "price", editable: true, cellEditor: 'agTextCellEditor' },
 ];
 
 const autoGroupColumnDefGrouped = {
@@ -43,10 +47,12 @@ const gridOptionsGrouped = {
 const eGridDivGrouped = document.querySelector("#myGrid2");
 
 // create the grid passing in the div to use together with the columns & data we want to use
-new agGrid.Grid(eGridDivGrouped, gridOptionsGrouped);
+const gridApiGrouped = agGrid.createGrid(eGridDivGrouped, gridOptionsGrouped);
+// keep backward compatibility with code that references gridOptionsGrouped.api
+gridOptionsGrouped.api = gridApiGrouped;
 
 // Grab the grid data from the supplied API endpoint
-fetch("./data.json")
+fetch(getRowDataUrl())
   .then(res => res.json())
   .then((data) => {
     gridOptionsGrouped.api.setGridOption('rowData', data);
@@ -54,7 +60,7 @@ fetch("./data.json")
 
 function autoSizeAllColumns() {
   var allColumnIds = [];
-  gridOptionsGrouped.api.getAllColumns().forEach(function (column) {
+  gridOptionsGrouped.api.getColumns().forEach(function (column) {
     allColumnIds.push(column.colId);
   });
   gridOptionsGrouped.api.autoSizeColumns(allColumnIds);
@@ -64,6 +70,6 @@ function autoSizeAllColumns() {
 if (window.Cypress) {
   gridOptionsGrouped.api.sizeColumnsToFit();
 } else {
-    // Otherwise auto-size columns the way we wish to view the grid in production.
-    autoSizeAllColumns();
+  // Otherwise auto-size columns the way we wish to view the grid in production.
+  autoSizeAllColumns();
 }

package/app/index.html

@@ -1,15 +1,62 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
+  <meta charset="utf-8">
+  <title>AG Grid Cypress Example v35</title>
+  <script>
+    window.AG_GRID_EXAMPLE_VERSION = "v35";
+    window.AG_GRID_LIBRARY_VERSION = "35.0.0";
+    window.AG_GRID_DATA_PATH = "./data.json";
+  </script>
+  <script src="https://unpkg.com/ag-grid-enterprise@35.0.0/dist/ag-grid-enterprise.min.noStyle.js"></script>
   <link rel="stylesheet" href="./ag-grid.css">
   <link rel="stylesheet" href="./ag-theme-alpine.css">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 16px;
+    }
+
+    .example-header {
+      align-items: center;
+      display: flex;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .example-version {
+      border: 1px solid #1f4d8f;
+      border-radius: 999px;
+      color: #1f4d8f;
+      font-size: 14px;
+      font-weight: 700;
+      padding: 4px 10px;
+    }
+
+    .example-links a {
+      color: #1f4d8f;
+      margin-right: 12px;
+    }
+  </style>
 </head>
+
 <body>
+  <div class="example-header">
+    <h1>AG Grid Cypress Example</h1>
+    <span class="example-version">AG Grid v35</span>
+    <nav class="example-links">
+      <a href="./index.html">v35</a>
+      <a href="./v34/index.html">v34</a>
+      <a href="./v33/index.html">v33</a>
+    </nav>
+  </div>
   <div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
   <script src="grid-basic.js" type="text/javascript" charset="utf-8"></script>
-
+  <button onclick="MakeFloating(true)" id="floating">Floating</button>
+  <button onclick="MakeFloating(false)" id="nonFloating">Non Floating</button>
   <div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
   <script src="grid-grouped.js" type="text/javascript" charset="utf-8"></script>
 </body>
-</html>
+
+</html>

package/app/v33/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>AG Grid Cypress Example v33</title>
+  <script>
+    window.AG_GRID_EXAMPLE_VERSION = "v33";
+    window.AG_GRID_LIBRARY_VERSION = "33.0.0";
+    window.AG_GRID_DATA_PATH = "../data.json";
+  </script>
+  <script src="https://unpkg.com/ag-grid-enterprise@33.0.0/dist/ag-grid-enterprise.min.noStyle.js"></script>
+  <link rel="stylesheet" href="../ag-grid.css">
+  <link rel="stylesheet" href="../ag-theme-alpine.css">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 16px;
+    }
+
+    .example-header {
+      align-items: center;
+      display: flex;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .example-version {
+      border: 1px solid #1b5e20;
+      border-radius: 999px;
+      color: #1b5e20;
+      font-size: 14px;
+      font-weight: 700;
+      padding: 4px 10px;
+    }
+
+    .example-links a {
+      color: #1b5e20;
+      margin-right: 12px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="example-header">
+    <h1>AG Grid Cypress Example</h1>
+    <span class="example-version">AG Grid v33</span>
+    <nav class="example-links">
+      <a href="../index.html">v35</a>
+      <a href="../v34/index.html">v34</a>
+      <a href="./index.html">v33</a>
+    </nav>
+  </div>
+  <div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
+  <script src="../grid-basic.js" type="text/javascript" charset="utf-8"></script>
+  <button onclick="MakeFloating(true)" id="floating">Floating</button>
+  <button onclick="MakeFloating(false)" id="nonFloating">Non Floating</button>
+  <div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
+  <script src="../grid-grouped.js" type="text/javascript" charset="utf-8"></script>
+</body>
+
+</html>

package/app/v34/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>AG Grid Cypress Example v34</title>
+  <script>
+    window.AG_GRID_EXAMPLE_VERSION = "v34";
+    window.AG_GRID_LIBRARY_VERSION = "34.0.0";
+    window.AG_GRID_DATA_PATH = "../data.json";
+  </script>
+  <script src="https://unpkg.com/ag-grid-enterprise@34.0.0/dist/ag-grid-enterprise.min.noStyle.js"></script>
+  <link rel="stylesheet" href="../ag-grid.css">
+  <link rel="stylesheet" href="../ag-theme-alpine.css">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 16px;
+    }
+
+    .example-header {
+      align-items: center;
+      display: flex;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .example-version {
+      border: 1px solid #7b341e;
+      border-radius: 999px;
+      color: #7b341e;
+      font-size: 14px;
+      font-weight: 700;
+      padding: 4px 10px;
+    }
+
+    .example-links a {
+      color: #7b341e;
+      margin-right: 12px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="example-header">
+    <h1>AG Grid Cypress Example</h1>
+    <span class="example-version">AG Grid v34</span>
+    <nav class="example-links">
+      <a href="../index.html">v35</a>
+      <a href="./index.html">v34</a>
+      <a href="../v33/index.html">v33</a>
+    </nav>
+  </div>
+  <div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
+  <script src="../grid-basic.js" type="text/javascript" charset="utf-8"></script>
+  <button onclick="MakeFloating(true)" id="floating">Floating</button>
+  <button onclick="MakeFloating(false)" id="nonFloating">Non Floating</button>
+  <div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
+  <script src="../grid-grouped.js" type="text/javascript" charset="utf-8"></script>
+</body>
+
+</html>

package/cypress/e2e/ag-grid-data.v33.cy.js

@@ -0,0 +1,6 @@
+import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite";
+
+runAgGridDataSuite({
+  pagePath: "../app/v33/index.html",
+  versionLabel: "v33",
+});

package/cypress/e2e/ag-grid-data.v34.cy.js

@@ -0,0 +1,6 @@
+import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite";
+
+runAgGridDataSuite({
+  pagePath: "../app/v34/index.html",
+  versionLabel: "v34",
+});

package/cypress/e2e/ag-grid-data.v35.cy.js

@@ -0,0 +1,6 @@
+import { runAgGridDataSuite } from "./shared/run-ag-grid-data-suite";
+
+runAgGridDataSuite({
+  pagePath: "../app/index.html",
+  versionLabel: "v35",
+});

package/cypress/e2e/ag-grid-elements.v33.cy.js

@@ -0,0 +1,6 @@
+import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite";
+
+runAgGridElementsSuite({
+  pagePath: "../app/v33/index.html",
+  versionLabel: "v33",
+});

package/cypress/e2e/ag-grid-elements.v34.cy.js

@@ -0,0 +1,6 @@
+import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite";
+
+runAgGridElementsSuite({
+  pagePath: "../app/v34/index.html",
+  versionLabel: "v34",
+});

package/cypress/e2e/ag-grid-elements.v35.cy.js

@@ -0,0 +1,6 @@
+import { runAgGridElementsSuite } from "./shared/run-ag-grid-elements-suite";
+
+runAgGridElementsSuite({
+  pagePath: "../app/index.html",
+  versionLabel: "v35",
+});