Gauge: Fix issues found during bug bash (#115740)

* fix warning for VizRepeater styles * Gauge: Update test dashboard to round two of the segment panels to whole numbers * Gauge: E2E tests * add test for sparklines * Gauge: Change inner glow to be friendlier to our a11y tests * remove unused CODEOWNER declaration * expose text mode so that old displayName usage is somewhat preserved * update migrations to use the value_and_text mode if displayName has a non-empty value * more test cases * update unit tests for fixture updates
2025-12-30 15:27:32 -05:00
parent 014d4758c6
commit 44e6ea3d8b
23 changed files with 301 additions and 63 deletions
@@ -0,0 +1,101 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+// this test requires a larger viewport so all gauge panels load properly
+test.use({
+  featureToggles: { newGauge: true },
+  viewport: { width: 1280, height: 3000 },
+});
+
+const OLD_GAUGES_DASHBOARD_UID = '_5rDmaQiz';
+const NEW_GAUGES_DASHBOARD_UID = 'panel-tests-gauge-new';
+
+test.describe(
+  'Gauge Panel',
+  {
+    tag: ['@panels', '@gauge'],
+  },
+  () => {
+    test('successfully migrates all gauge panels', async ({ gotoDashboardPage, selectors }) => {
+      const dashboardPage = await gotoDashboardPage({ uid: OLD_GAUGES_DASHBOARD_UID });
+
+      // check that gauges are rendered
+      const gaugeElements = dashboardPage.getByGrafanaSelector(
+        selectors.components.Panels.Visualization.Gauge.Container
+      );
+      await expect(gaugeElements).toHaveCount(16);
+
+      // check that no panel errors exist
+      const errorInfo = dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.headerCornerInfo('error'));
+      await expect(errorInfo).toBeHidden();
+    });
+
+    test('renders new gauge panels', async ({ gotoDashboardPage, selectors }) => {
+      // open Panel Tests - Gauge
+      const dashboardPage = await gotoDashboardPage({ uid: NEW_GAUGES_DASHBOARD_UID });
+
+      // check that gauges are rendered
+      const gaugeElements = dashboardPage.getByGrafanaSelector(
+        selectors.components.Panels.Visualization.Gauge.Container
+      );
+      await expect(gaugeElements).toHaveCount(32);
+
+      // check that no panel errors exist
+      const errorInfo = dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.headerCornerInfo('error'));
+      await expect(errorInfo).toBeHidden();
+    });
+
+    test('renders sparklines in gauge panels', async ({ gotoDashboardPage, page }) => {
+      await gotoDashboardPage({
+        uid: NEW_GAUGES_DASHBOARD_UID,
+        queryParams: new URLSearchParams({ editPanel: '11' }),
+      });
+
+      await expect(page.locator('.uplot')).toHaveCount(5);
+    });
+
+    test('"no data"', async ({ gotoDashboardPage, selectors }) => {
+      const dashboardPage = await gotoDashboardPage({
+        uid: NEW_GAUGES_DASHBOARD_UID,
+        queryParams: new URLSearchParams({ editPanel: '36' }),
+      });
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Visualization.Gauge.Container),
+        'that the gauge does not appear'
+      ).toBeHidden();
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.PanelDataErrorMessage),
+        'that the empty text appears'
+      ).toHaveText('No data');
+
+      // update the "No value" option and see if the panel updates
+      const noValueOption = dashboardPage
+        .getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Standard options No value'))
+        .locator('input');
+
+      await noValueOption.fill('My empty value');
+      await noValueOption.blur();
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Visualization.Gauge.Container),
+        'that the empty text shows up in an empty gauge'
+      ).toHaveText('My empty value');
+
+      // test the "no numeric fields" message on the next panel
+      const dashboardPage2 = await gotoDashboardPage({
+        uid: NEW_GAUGES_DASHBOARD_UID,
+        queryParams: new URLSearchParams({ editPanel: '37' }),
+      });
+
+      await expect(
+        dashboardPage2.getByGrafanaSelector(selectors.components.Panels.Visualization.Gauge.Container),
+        'that the gauge does not appear'
+      ).toBeHidden();
+
+      await expect(
+        dashboardPage2.getByGrafanaSelector(selectors.components.Panels.Panel.PanelDataErrorMessage),
+        'that the empty text appears'
+      ).toHaveText('Data is missing a number field');
+    });
+  }
+);
@@ -1,27 +0,0 @@
-import { test, expect } from '@grafana/plugin-e2e';
-
-// this test requires a larger viewport so all gauge panels load properly
-test.use({
-  viewport: { width: 1280, height: 1080 },
-});
-
-test.describe(
-  'Gauge Panel',
-  {
-    tag: ['@various'],
-  },
-  () => {
-    test('Gauge rendering e2e tests', async ({ gotoDashboardPage, selectors, page }) => {
-      // open Panel Tests - Gauge
-      const dashboardPage = await gotoDashboardPage({ uid: '_5rDmaQiz' });
-
-      // check that gauges are rendered
-      const gaugeElements = page.locator('.flot-base');
-      await expect(gaugeElements).toHaveCount(16);
-
-      // check that no panel errors exist
-      const errorInfo = dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.headerCornerInfo('error'));
-      await expect(errorInfo).toBeHidden();
-    });
-  }
-);