test: add camelCase test scenarios (#8570)

### **PR Type**
Tests, Enhancement


___

### **Description**
- Add transpose custom SQL dashboard test

- Extend error checking return structure

- Validate no errors post-transpose

- Optimize test flow and assertions


___

### Diagram Walkthrough


```mermaid
flowchart LR
  Tests["Dashboards transpose test"] -- "enable transpose via config" --> Transpose["Apply transpose"]
  Transpose -- "check errors" --> ErrorCheck["Enhanced error results"]
  ErrorCheck -- "assert zero errors" --> Save["Save panel and cleanup"]
```



<details> <summary><h3> File Walkthrough</h3></summary>

<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>visualise.js</strong><dd><code>Enrich dashboard error
check return payload</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

tests/ui-testing/pages/dashboardPages/visualise.js

<ul><li>Extend error result object.<br> <li> Include
<code>errorTextCount</code> and <code>errorListCount</code>.<br> <li>
Preserve existing no-error logic.</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8570/files#diff-c14ac1db3e4aa86190d7525e8e38c410bcbbae7f46b01890e74937cc11be67e6">+2/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr><tr><td><strong>Tests</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>dashboard-transpose.spec.js</strong><dd><code>New E2E
test: transpose with custom SQL</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

tests/ui-testing/playwright-tests/dashboards/dashboard-transpose.spec.js

<ul><li>Add test for transpose with custom SQL.<br> <li> Configure
fields, time range, and transpose.<br> <li> Use enhanced error counts
for assertions.<br> <li> Save and cleanup created dashboard.</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8570/files#diff-da631007cea76a4bc59e4acd1195b59ae4131cd5208d21a9c1f94d3913911dc4">+88/-0</a>&nbsp;
&nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

</details>

___

tests/ui-testing/pages/dashboardPages/visualise.js

@@ -252,12 +252,12 @@ export default class LogsVisualise {
     const errorContainerExists = await dashboardErrorContainer.count();
 
     if (errorContainerExists === 0) {
-      return { hasErrors: false, errors: [] };
+      return { hasErrors: false, errors: [], errorTextCount: 0, errorListCount: 0 };
     }
 
     const isErrorVisible = await dashboardErrorContainer.first().isVisible();
     if (!isErrorVisible) {
-      return { hasErrors: false, errors: [] };
+      return { hasErrors: false, errors: [], errorTextCount: 0, errorListCount: 0 };
     }
 
     const errors = [];

tests/ui-testing/playwright-tests/dashboards/dashboard-transpose.spec.js

@@ -250,4 +250,85 @@ test.describe("dashboard UI testcases", () => {
     await pm.dashboardCreate.backToDashboardList();
     await deleteDashboard(page, randomDashboardName);
   });
+
+  test("should not show an error when transpose is enabled from config with custom SQL query", async ({
+    page,
+  }) => {
+    // Instantiate PageManager with the current page
+    const pm = new PageManager(page);
+
+    const panelName =
+      pm.dashboardPanelActions.generateUniquePanelName("panel-test");
+
+    // Navigate to the dashboards list
+    await pm.dashboardList.menuItem("dashboards-item");
+    await waitForDashboardPage(page);
+
+    // Create a new dashboard and add a panel
+    await pm.dashboardCreate.createDashboard(randomDashboardName);
+    await pm.dashboardCreate.addPanel();
+    await pm.dashboardPanelActions.addPanelName(panelName);
+
+    // Select table chart type
+    await pm.chartTypeSelector.selectChartType("table");
+    
+    // Now we can access the field removal buttons
+    await pm.chartTypeSelector.removeField("_timestamp", "x");
+
+    // Open Custom SQL editor
+    await page.locator('[data-test="dashboard-customSql"]').click();
+
+    // Focus on the editor and enter the custom SQL query
+    await page.locator(".view-line").first().click();
+    await page
+      .locator('[data-test="dashboard-panel-query-editor"]')
+      .locator(".monaco-editor")
+      .click();
+    await page
+      .locator('[data-test="dashboard-panel-query-editor"]')
+      .locator(".inputarea")
+      .fill(
+        'SELECT kubernetes_namespace_name as "xAxis", count(kubernetes_namespace_name) as "y_axis_1"  FROM "e2e_automate"  GROUP BY "xAxis"'
+      );
+
+    await pm.chartTypeSelector.searchAndAddField("y_axis_1", "x");
+    await pm.chartTypeSelector.searchAndAddField("xAxis", "y");
+    
+    // Set relative time range  
+     await pm.dashboardTimeRefresh.setRelative("6", "w");    
+
+    await pm.dashboardPanelActions.waitForChartToRender();
+
+    // Open the configuration panel and enable transpose
+    await pm.dashboardPanelConfigs.openConfigPanel();
+    await pm.dashboardPanelConfigs.selectTranspose();
+    await pm.dashboardPanelActions.applyDashboardBtn();
+
+    // Wait for chart to render after transpose and check for errors
+    await pm.dashboardPanelActions.waitForChartToRender();
+
+    // await page.waitForLoadState("networkidle");
+    await page.waitForTimeout(1000);
+
+    // Check for dashboard errors ONLY after transpose is applied
+    const transposeErrorResult = await pm.logsVisualise.checkDashboardErrors(
+      page,
+      "Table (After Transpose)"
+    );
+
+    if (transposeErrorResult.hasErrors) {
+      transposeErrorResult.errors.forEach((error, index) => {
+      testLogger.error(`Transpose Error ${index + 1}: ${error}`);});
+
+      // Fail the test with detailed error information
+      expect(transposeErrorResult.errorTextCount).toBe(0);
+      expect(transposeErrorResult.errorListCount).toBe(0);
+    }
+
+    // Save the panel
+    await pm.dashboardPanelActions.savePanel();
+    // Delete the created dashboard
+    await pm.dashboardCreate.backToDashboardList();
+    await deleteDashboard(page, randomDashboardName);
+  });
 });