add e2e test for relative time zone overrides

devenv/dev-dashboards/scenarios/relative_time_zone_support.json

@@ -0,0 +1,134 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "grafana",
+          "uid": "-- Grafana --"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": 98,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "datasource": {
+        "type": "testdata",
+        "uid": "gdev-testdata"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "drawStyle": "line",
+            "fillOpacity": 0,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "insertNulls": false,
+            "lineInterpolation": "linear",
+            "lineWidth": 1,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "auto",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 1,
+      "options": {
+        "legend": {
+          "calcs": [],
+          "displayMode": "list",
+          "placement": "bottom",
+          "showLegend": true
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "testdata",
+            "uid": "gdev-testdata"
+          },
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "seriesCount": 1
+        }
+      ],
+      "timeFrom": "now/d",
+      "title": "Panel title",
+      "type": "timeseries"
+    }
+  ],
+  "refresh": "",
+  "schemaVersion": 38,
+  "tags": [],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-6h",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "Asia/Tokyo",
+  "title": "Panel Tests - Relative time zone support",
+  "uid": "d41dbaa2-a39e-4536-ab2b-caca52f1a9c8",
+  "version": 1,
+  "weekStart": ""
+}

devenv/jsonnet/dev-dashboards.libsonnet

@@ -548,6 +548,13 @@ local dashboard = grafana.dashboard;
         id: 0,
       }
     },
+    dashboard.new('relative_time_zone_support', import '../dev-dashboards/scenarios/relative_time_zone_support.json') +
+    resource.addMetadata('folder', 'dev-dashboards') +
+    {
+      spec+: {
+        id: 0,
+      }
+    },
     dashboard.new('reuse', import '../dev-dashboards/transforms/reuse.json') +
     resource.addMetadata('folder', 'dev-dashboards') +
     {

e2e/dashboards-suite/dashboard-time-zone.spec.ts

@@ -85,6 +85,78 @@ e2e.scenario({
   },
 });
 
+e2e.scenario({
+  describeName: 'Dashboard time zone support',
+  itName: 'Tests relative timezone overrides within a panel',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    // Test Default
+    e2e.flows.openDashboard({
+      uid: 'd41dbaa2-a39e-4536-ab2b-caca52f1a9c8',
+      timeRange: {
+        from: 'now-6h',
+        to: 'now',
+        zone: 'Default',
+      },
+    });
+
+    e2e.components.Panels.Panel.title('Panel title')
+      .should('be.visible')
+      .within(() => {
+        e2e().contains('Today so far').should('be.visible');
+        e2e().contains('Today so far').click();
+      });
+
+    e2e.components.Tooltip.container()
+      .should('be.visible')
+      .within(() => {
+        e2e().contains('00:00:00').should('be.visible');
+      });
+
+    // Test Browser
+    e2e.flows.setTimeRange({
+      from: 'now-6h',
+      to: 'now',
+      zone: 'Browser Time',
+    });
+
+    e2e.components.Panels.Panel.title('Panel title')
+      .should('be.visible')
+      .within(() => {
+        e2e().contains('Today so far').should('be.visible');
+        e2e().contains('Today so far').click();
+      });
+
+    e2e.components.Tooltip.container()
+      .should('be.visible')
+      .within(() => {
+        e2e().contains('00:00:00').should('be.visible');
+      });
+
+    // Test specific timezone
+    e2e.flows.setTimeRange({
+      from: 'now-6h',
+      to: 'now',
+      zone: 'Asia/Tokyo',
+    });
+
+    e2e.components.Panels.Panel.title('Panel title')
+      .should('be.visible')
+      .within(() => {
+        e2e().contains('Today so far').should('be.visible');
+        e2e().contains('Today so far').click();
+      });
+
+    e2e.components.Tooltip.container()
+      .should('be.visible')
+      .within(() => {
+        e2e().contains('00:00:00').should('be.visible');
+      });
+  },
+});
+
 const isTimeCorrect = (inUtc: string, inTz: string, offset: number): boolean => {
   if (inUtc === inTz) {
     // we need to catch issues when timezone isn't changed for some reason like https://github.com/grafana/grafana/issues/35504

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -425,4 +425,7 @@ export const Components = {
     annotationsTypeInput: 'annotations-type-input',
     annotationsChoosePanelInput: 'choose-panels-input',
   },
+  Tooltip: {
+    container: 'data-testid tooltip',
+  },
 };

packages/grafana-e2e/src/flows/index.ts

@@ -11,6 +11,7 @@ export * from './openPanelMenuItem';
 export * from './revertAllChanges';
 export * from './saveDashboard';
 export * from './selectOption';
+export * from './setTimeRange';
 export * from './importDashboard';
 export * from './importDashboards';
 export * from './userPreferences';

packages/grafana-ui/src/components/Tooltip/Tooltip.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { buildTooltipTheme } from '../../utils/tooltipUtils';
@@ -76,7 +77,11 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(
         })}
         {visible && (
           <Portal>
-            <div ref={setTooltipRef} {...getTooltipProps({ className: style.container })}>
+            <div
+              data-testid={selectors.components.Tooltip.container}
+              ref={setTooltipRef}
+              {...getTooltipProps({ className: style.container })}
+            >
               <div {...getArrowProps({ className: style.arrow })} />
               {typeof content === 'string' && content}
               {React.isValidElement(content) && React.cloneElement(content)}