StatusHistory: Add e2e suite to confirm standard cases (#113358)

* StatusHistory: Add e2e suite to confirm standard cases

* update dev dashbord tests

* update CODEOWNERS

.github/CODEOWNERS

@@ -242,6 +242,7 @@
 /devenv/dev-dashboards/panel-library @grafana/dataviz-squad
 /devenv/dev-dashboards/panel-piechart @grafana/dataviz-squad
 /devenv/dev-dashboards/panel-stat @grafana/dataviz-squad
+/devenv/dev-dashboards/panel-status-history @grafana/dataviz-squad
 /devenv/dev-dashboards/panel-table @grafana/dataviz-squad
 /devenv/dev-dashboards/panel-timeline @grafana/dataviz-squad
 /devenv/dev-dashboards/panel-timeseries @grafana/dataviz-squad
@@ -473,24 +474,12 @@ i18next.config.ts @grafana/grafana-frontend-platform
 /e2e-playwright/fixtures/long-trace-response.json @grafana/observability-traces-and-profiling
 /e2e-playwright/fixtures/tempo-response.json @grafana/oss-big-tent
 /e2e-playwright/fixtures/prometheus-response.json @grafana/datapro
-/e2e-playwright/panels-suite/canvas-scene.spec.ts @grafana/dataviz-squad
+/e2e-playwright/panels-suite/ @grafana/dataviz-squad
 /e2e-playwright/panels-suite/dashlist.spec.ts @grafana/grafana-search-navigate-organise
-/e2e-playwright/panels-suite/datagrid-data-change.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/datagrid-editing-features.spec.ts @grafana/dataviz-squad
 /e2e-playwright/panels-suite/frontend-sandbox-panel.spec.ts @grafana/plugins-platform-frontend
-/e2e-playwright/panels-suite/geomap-layer-types.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/geomap-map-controls.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/geomap-spatial-operations-transform.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/heatmap.spec.ts @grafana/dataviz-squad
 /e2e-playwright/panels-suite/panelEdit_base.spec.ts @grafana/dashboards-squad
 /e2e-playwright/panels-suite/panelEdit_queries.spec.ts @grafana/dashboards-squad
 /e2e-playwright/panels-suite/panelEdit_transforms.spec.ts @grafana/datapro
-/e2e-playwright/panels-suite/state-timeline.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/table-footer.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/table-kitchenSink.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/table-markdown.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/table-sparkline.spec.ts @grafana/dataviz-squad
-/e2e-playwright/panels-suite/table-utils.ts @grafana/dataviz-squad
 /e2e-playwright/plugin-e2e/ @grafana/oss-big-tent @grafana/partner-datasources
 /e2e-playwright/plugin-e2e/plugin-e2e-api-tests/ @grafana/plugins-platform-frontend
 /e2e-playwright/smoke-tests-suite/ @grafana/grafana-frontend-platform

devenv/jsonnet/dev-dashboards.libsonnet

@@ -96,6 +96,7 @@
     "rows-to-fields": (import '../dev-dashboards/transforms/rows-to-fields.json'),
     "shared_queries": (import '../dev-dashboards/panel-common/shared_queries.json'),
     "slow_queries_and_annotations": (import '../dev-dashboards/scenarios/slow_queries_and_annotations.json'),
+    "status-history-thresholds-mappings": (import '../dev-dashboards/panel-status-history/status-history-thresholds-mappings.json'),
     "table_footer": (import '../dev-dashboards/panel-table/table_footer.json'),
     "table_kitchen_sink": (import '../dev-dashboards/panel-table/table_kitchen_sink.json'),
     "table_markdown": (import '../dev-dashboards/panel-table/table_markdown.json'),

e2e-playwright/panels-suite/status-history.spec.ts

@@ -0,0 +1,87 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+const DASHBOARD_UID = 'a2f4ad9e-3b44-4624-8067-35f31be5d309';
+
+test.use({
+  viewport: { width: 1280, height: 2000 },
+});
+
+test.describe('Panels test: StatusHistory', { tag: ['@panels', '@status-history'] }, () => {
+  test('renders successfully', async ({ gotoDashboardPage, selectors, page }) => {
+    const dashboardPage = await gotoDashboardPage({
+      uid: DASHBOARD_UID,
+    });
+
+    // check that gauges are rendered
+    const statusHistoryUplot = page.locator('.uplot');
+    await expect(statusHistoryUplot, 'panels are rendered').toHaveCount(11);
+
+    // check that no panel errors exist
+    const errorInfo = dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.headerCornerInfo('error'));
+    await expect(errorInfo, 'no errors in the panels').toBeHidden();
+  });
+
+  test('"no data"', async ({ gotoDashboardPage, selectors, page }) => {
+    const dashboardPage = await gotoDashboardPage({
+      uid: DASHBOARD_UID,
+      queryParams: new URLSearchParams({ editPanel: '15' }),
+    });
+
+    const statusHistoryUplot = page.locator('.uplot');
+    await expect(statusHistoryUplot, "that uplot doesn't appear").toBeHidden();
+
+    const emptyMessage = dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.PanelDataErrorMessage);
+    await expect(emptyMessage, '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(emptyMessage, 'that the empty text has changed').toHaveText('My empty value');
+  });
+
+  test('tooltip interactions', async ({ gotoDashboardPage, page, selectors }) => {
+    const dashboardPage = await gotoDashboardPage({
+      uid: DASHBOARD_UID,
+      queryParams: new URLSearchParams({ editPanel: '13' }),
+    });
+
+    const statusHistoryUplot = page.locator('.uplot');
+    await expect(statusHistoryUplot, 'uplot is rendered').toBeVisible();
+
+    const tooltip = dashboardPage.getByGrafanaSelector(selectors.components.Panels.Visualization.Tooltip.Wrapper);
+
+    // hover over a spot to trigger the tooltip
+    await statusHistoryUplot.hover({ position: { x: 100, y: 50 } });
+    await expect(tooltip, 'tooltip appears on hover').toBeVisible();
+    await expect(tooltip, 'tooltip displays the value').toContainText('value5');
+
+    // click to pin the tooltip, hover away to be sure it's pinned
+    await statusHistoryUplot.click({ position: { x: 100, y: 50 } });
+    await statusHistoryUplot.hover({ position: { x: 300, y: 50 } });
+    await expect(tooltip, 'tooltip pinned on click').toBeVisible();
+    await expect(tooltip, 'tooltip displays the first value').toContainText('value5');
+
+    // unpin the tooltip, ensure it closes on hover away
+    await statusHistoryUplot.click({ position: { x: 300, y: 50 } });
+    await statusHistoryUplot.blur();
+    await expect(tooltip, 'tooltip closed after unpinning and hovering away').toBeHidden();
+
+    // test clicking the "x" as well
+    await statusHistoryUplot.click({ position: { x: 100, y: 50 } });
+    await expect(tooltip, 'tooltip appears on click').toBeVisible();
+    await dashboardPage.getByGrafanaSelector(selectors.components.Portal.container).getByLabel('Close').click();
+    await expect(tooltip, 'tooltip closed on "x" click').toBeHidden();
+
+    // disable tooltips
+    await dashboardPage
+      .getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Tooltip Tooltip mode'))
+      .getByLabel('Hidden')
+      .click();
+    await statusHistoryUplot.hover({ position: { x: 100, y: 50 } });
+    await expect(tooltip, 'tooltip is not shown when disabled').toBeHidden();
+  });
+});