test: update aggrid screenshots (#1685)

siemens · Feb 12, 2025 · 6fd44e0 · 6fd44e0
1 parent 5e5aa28
commit 6fd44e0
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 7 deletions.
diff --git a/packages/aggrid/tests/aggrid.e2e.ts b/packages/aggrid/tests/aggrid.e2e.ts
@@ -10,11 +10,34 @@ import { expect } from '@playwright/test';
 import { regressionTest } from '@utils/test';
 
 regressionTest.describe('aggrid', () => {
-  regressionTest('basic', async ({ page }) => {
-    await page.goto('basic.html');
+  regressionTest.describe('version', () => {
+    regressionTest('newest', async ({ page }) => {
+      await page.goto('basic.html');
 
-    await page.getByRole('columnheader').nth(0).hover();
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+      await page.getByRole('columnheader').nth(0).hover();
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
+
+    regressionTest('32', async ({ page }) => {
+      await page.goto('basic_v32.html');
+
+      await page.getByRole('columnheader').nth(0).hover();
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
+
+    regressionTest('31', async ({ page }) => {
+      await page.goto('basic_v31.html');
+
+      await page.getByRole('columnheader').nth(0).hover();
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
+
+    regressionTest('30', async ({ page }) => {
+      await page.goto('basic_v30.html');
+
+      await page.getByRole('columnheader').nth(0).hover();
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
   });
 
   regressionTest('filter', async ({ page }) => {

diff --git a/...id.e2e.ts-snapshots/aggrid-pagination-1-chromium---theme-classic-dark-linux.png b/...id.e2e.ts-snapshots/aggrid-pagination-1-chromium---theme-classic-dark-linux.png
diff --git a/...d.e2e.ts-snapshots/aggrid-pagination-1-chromium---theme-classic-light-linux.png b/...d.e2e.ts-snapshots/aggrid-pagination-1-chromium---theme-classic-light-linux.png
diff --git a/...id.e2e.ts-snapshots/aggrid-version-30-1-chromium---theme-classic-dark-linux.png b/...id.e2e.ts-snapshots/aggrid-version-30-1-chromium---theme-classic-dark-linux.png
diff --git a/...d.e2e.ts-snapshots/aggrid-version-30-1-chromium---theme-classic-light-linux.png b/...d.e2e.ts-snapshots/aggrid-version-30-1-chromium---theme-classic-light-linux.png
diff --git a/...id.e2e.ts-snapshots/aggrid-version-31-1-chromium---theme-classic-dark-linux.png b/...id.e2e.ts-snapshots/aggrid-version-31-1-chromium---theme-classic-dark-linux.png
diff --git a/...d.e2e.ts-snapshots/aggrid-version-31-1-chromium---theme-classic-light-linux.png b/...d.e2e.ts-snapshots/aggrid-version-31-1-chromium---theme-classic-light-linux.png
diff --git a/...1-chromium---theme-classic-dark-linux.png → ...1-chromium---theme-classic-dark-linux.png b/...1-chromium---theme-classic-dark-linux.png → ...1-chromium---theme-classic-dark-linux.png
diff --git a/...-chromium---theme-classic-light-linux.png → ...-chromium---theme-classic-light-linux.png b/...-chromium---theme-classic-light-linux.png → ...-chromium---theme-classic-light-linux.png
diff --git a/...2e.ts-snapshots/aggrid-version-newest-1-chromium---theme-classic-dark-linux.png b/...2e.ts-snapshots/aggrid-version-newest-1-chromium---theme-classic-dark-linux.png
diff --git a/...e.ts-snapshots/aggrid-version-newest-1-chromium---theme-classic-light-linux.png b/...e.ts-snapshots/aggrid-version-newest-1-chromium---theme-classic-light-linux.png
diff --git a/packages/aggrid/tests/basic.html b/packages/aggrid/tests/basic.html
@@ -8,9 +8,9 @@
 -->
 <html>
   <head>
-    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@32.1/dist/ag-grid-community.min.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css" />
-    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css" />
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@32/dist/ag-grid-community.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@32/styles/ag-grid.css" />
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@32/styles/ag-theme-alpine.css" />
 
     <link rel="stylesheet" href="/dist/ix-aggrid/ix-aggrid.css" />
     <link rel="stylesheet" href="/www/siemens-ix.css" />

diff --git a/packages/aggrid/tests/basic_v30.html b/packages/aggrid/tests/basic_v30.html
@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@30/dist/ag-grid-community.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@30/styles/ag-grid.css" />
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@30/styles/ag-theme-alpine.css" />
+
+    <link rel="stylesheet" href="/dist/ix-aggrid/ix-aggrid.css" />
+    <link rel="stylesheet" href="/www/siemens-ix.css" />
+    <link rel="stylesheet" href="/www/ix-icons.css" />
+    <style>
+      body {
+        min-height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100%; height: 100%" class="ag-theme-alpine-dark ag-theme-ix"></div>
+    <script type="module">
+      import { themeSwitcher } from './utils/test/theme-switcher.js';
+
+      themeSwitcher();
+
+      (() => {
+        const columnDefs = [
+          { field: 'make', resizable: true, checkboxSelection: true },
+          { field: 'model', resizable: true, sortable: true, filter: true },
+          { field: 'price', resizable: true, editable: true },
+        ];
+
+        const rowData = [
+          { make: 'Toyota', model: 'Celica', price: 35000, checked: false },
+          { make: 'Ford', model: 'Mondeo', price: 32000, checked: true },
+          { make: 'Porsche', model: 'Boxster', price: 72000, checked: false },
+        ];
+
+        const gridOptions = {
+          columnDefs: columnDefs,
+          rowData: rowData,
+          rowSelection: 'multiple',
+          suppressCellFocus: true,
+        };
+
+        const gridDiv = document.querySelector('div.ag-theme-ix');
+        const grid = new agGrid.Grid(gridDiv, gridOptions);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/packages/aggrid/tests/basic_v31.html b/packages/aggrid/tests/basic_v31.html
@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31/dist/ag-grid-community.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@31/styles/ag-grid.css" />
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@31/styles/ag-theme-alpine.css" />
+
+    <link rel="stylesheet" href="/dist/ix-aggrid/ix-aggrid.css" />
+    <link rel="stylesheet" href="/www/siemens-ix.css" />
+    <link rel="stylesheet" href="/www/ix-icons.css" />
+    <style>
+      body {
+        min-height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100%; height: 100%" class="ag-theme-alpine-dark ag-theme-ix"></div>
+    <script type="module">
+      import { themeSwitcher } from './utils/test/theme-switcher.js';
+
+      themeSwitcher();
+
+      (() => {
+        const columnDefs = [
+          { field: 'make', resizable: true, checkboxSelection: true },
+          { field: 'model', resizable: true, sortable: true, filter: true },
+          { field: 'price', resizable: true, editable: true },
+        ];
+
+        const rowData = [
+          { make: 'Toyota', model: 'Celica', price: 35000, checked: false },
+          { make: 'Ford', model: 'Mondeo', price: 32000, checked: true },
+          { make: 'Porsche', model: 'Boxster', price: 72000, checked: false },
+        ];
+
+        const gridOptions = {
+          columnDefs: columnDefs,
+          rowData: rowData,
+          rowSelection: 'multiple',
+          suppressCellFocus: true,
+        };
+
+        const gridDiv = document.querySelector('div.ag-theme-ix');
+        const grid = new agGrid.Grid(gridDiv, gridOptions);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/packages/aggrid/tests/basic_v32.html b/packages/aggrid/tests/basic_v32.html
@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@32/dist/ag-grid-community.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@32/styles/ag-grid.css" />
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@32/styles/ag-theme-alpine.css" />
+
+    <link rel="stylesheet" href="/dist/ix-aggrid/ix-aggrid.css" />
+    <link rel="stylesheet" href="/www/siemens-ix.css" />
+    <link rel="stylesheet" href="/www/ix-icons.css" />
+    <style>
+      body {
+        min-height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100%; height: 100%" class="ag-theme-alpine-dark ag-theme-ix"></div>
+    <script type="module">
+      import { themeSwitcher } from './utils/test/theme-switcher.js';
+
+      themeSwitcher();
+
+      (() => {
+        const columnDefs = [
+          { field: 'make', resizable: true, checkboxSelection: true },
+          { field: 'model', resizable: true, sortable: true, filter: true },
+          { field: 'price', resizable: true, editable: true },
+        ];
+
+        const rowData = [
+          { make: 'Toyota', model: 'Celica', price: 35000, checked: false },
+          { make: 'Ford', model: 'Mondeo', price: 32000, checked: true },
+          { make: 'Porsche', model: 'Boxster', price: 72000, checked: false },
+        ];
+
+        const gridOptions = {
+          columnDefs: columnDefs,
+          rowData: rowData,
+          rowSelection: 'multiple',
+          suppressCellFocus: true,
+        };
+
+        const gridDiv = document.querySelector('div.ag-theme-ix');
+        const grid = new agGrid.Grid(gridDiv, gridOptions);
+      })();
+    </script>
+  </body>
+</html>