test: table transpose validation updates (#7565)

### **PR Type** Tests, Enhancement ___ ### **Description** - Add data validation for table transpose - Flatten and compare transposed table data - Capture and assert no console errors - Consolidate import statements ___ ### **Changes diagram** ```mermaid flowchart LR A["Test initialization"] --> B["Setup console error listener"] B --> C["Capture headers & initial data"] C --> D["Click transpose and apply"] D --> E["Capture transposed data"] E --> F["Compare sorted data"] ``` ___ ### **Changes walkthrough** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Tests</strong></td><td><table> <tr> <td> <details> <summary><strong>dashboard-transpose.spec.js</strong><dd><code>Enhance dashboard transpose test logic</code>                                      </dd></summary> <hr> tests/ui-testing/playwright-tests/dashboards/dashboard-transpose.spec.js <li>Consolidated import statements into single line<br> <li> Added helper validateTableDataBeforeAndAfterTranspose<br> <li> Introduced console error listener assertion<br> <li> Added waits to stabilize asynchronous operations </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/7565/files#diff-da631007cea76a4bc59e4acd1195b59ae4131cd5208d21a9c1f94d3913911dc4">+78/-4</a>    </td> </tr> </table></td></tr></tr></tbody></table> ___ > <details> <summary> Need help?</summary><li>Type <code>/help how to ...</code> in the comments thread for any questions about PR-Agent usage.</li><li>Check out the <a href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a> for more information.</li></details>
2026-11-04 16:09:05 +00:00 · 2025-07-15 14:27:01 +05:30
parent 935dfbad61
commit b152ba877f
1 changed files with 78 additions and 4 deletions
@@ -6,10 +6,7 @@ import DashboardPanelConfigs from "../../pages/dashboardPages/dashboard-panel-co
 import { ingestion } from "./utils/dashIngestion.js";
 import { login } from "./utils/dashLogin.js";
 import ChartTypeSelector from "../../pages/dashboardPages/dashboard-chart";
-import {
-  waitForDashboardPage,
-  deleteDashboard,
-} from "./utils/dashCreation.js";
+import { waitForDashboardPage, deleteDashboard } from "./utils/dashCreation.js";

 const randomDashboardName =
  "Dashboard_" + Math.random().toString(36).slice(2, 11);
@@ -89,6 +86,72 @@ test.describe("dashboard UI testcases", () => {
    await dashboardPanelConfigs.selectTranspose();
    await dashboardActions.applyDashboardBtn();

+    await page.waitForTimeout(2000);
+    // Validate data consistency before and after transpose
+    await validateTableDataBeforeAndAfterTranspose(page);
+
+    // Helper function to validate table data before and after transposing
+    // Helper function to dynamically transpose data and validate it
+    async function validateTableDataBeforeAndAfterTranspose(page) {
+      // Step 1: Capture headers and initial data from the table
+      const headers = await page.$$eval(
+        '[data-test="dashboard-panel-table"] thead tr th',
+        (headerCells) =>
+          headerCells.map((cell) =>
+            cell.textContent.trim().replace(/^arrow_upward/, "")
+          ) // Remove "arrow_upward" prefix
+      );
+
+      const initialData = await page.$$eval(
+        '[data-test="dashboard-panel-table"] tbody tr',
+        (rows) =>
+          rows
+            .map((row) =>
+              Array.from(row.querySelectorAll("td"), (cell) =>
+                cell.textContent.trim()
+              )
+            )
+            .filter((row) => row.length > 0 && row.some((cell) => cell !== ""))
+      );
+
+      // Step 2: Perform transpose by simulating the transpose button click
+      await page
+        .locator('[data-test="dashboard-config-table_transpose"] div')
+        .nth(2)
+        .click();
+      await page.locator('[data-test="dashboard-apply"]').click();
+      await page.waitForTimeout(2000);
+
+      // Step 3: Capture transposed data from the table
+      const transposedData = await page.$$eval(
+        '[data-test="dashboard-panel-table"] tr',
+        (rows) =>
+          rows
+            .map((row) =>
+              Array.from(row.querySelectorAll("td"), (cell) =>
+                cell.textContent.trim()
+              )
+            )
+            .filter((row) => row.length > 0 && row.some((cell) => cell !== ""))
+      );
+
+      // Step 4: Flatten `initialData` by pairing each namespace header with its value, excluding the empty namespace
+      const flattenedInitialData = headers
+        .slice(1)
+        .map((namespace, index) => [namespace, initialData[0][index + 1]]);
+
+      // Step 5: Sort both `flattenedInitialData` and `transposedData` for comparison
+      const sortedFlattenedInitialData = flattenedInitialData.sort((a, b) =>
+        a[0].localeCompare(b[0])
+      );
+      const sortedTransposedData = transposedData.sort((a, b) =>
+        a[0].localeCompare(b[0])
+      );
+
+      // Step 6: Directly compare sorted arrays
+      expect(sortedTransposedData).toEqual(sortedFlattenedInitialData);
+    }
+
    // Save the panel
    await dashboardActions.savePanel();

@@ -144,6 +207,14 @@ test.describe("dashboard UI testcases", () => {
    const dashboardPanelConfigs = new DashboardPanelConfigs(page);
    const panelName = dashboardActions.generateUniquePanelName("panel-test");

+    // Set up listener to catch console errors
+    let errorMessage = "";
+    page.on("console", (msg) => {
+      if (msg.type() === "error") {
+        errorMessage += msg.text() + "\n";
+      }
+    });
+
    // Navigate to the dashboards list
    await dashboardList.menuItem("dashboards-item");
    await waitForDashboardPage(page);
@@ -169,6 +240,9 @@ test.describe("dashboard UI testcases", () => {
    // Save the panel
    await dashboardActions.savePanel();

+    // Assert no error occurred
+    expect(errorMessage).toBe("");
+
    // Delete the created dashboard
    await dashboardCreate.backToDashboardList();
    await deleteDashboard(page, randomDashboardName);