From e869656ad1a127ba32427344f064b8382d142fc2 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 29 Aug 2023 14:40:31 +0100 Subject: [PATCH] add e2e test for relative time zone overrides --- .../scenarios/relative_time_zone_support.json | 134 ++++++++++++++++++ devenv/jsonnet/dev-dashboards.libsonnet | 7 + .../dashboard-time-zone.spec.ts | 72 ++++++++++ .../src/selectors/components.ts | 3 + packages/grafana-e2e/src/flows/index.ts | 1 + .../src/components/Tooltip/Tooltip.tsx | 7 +- 6 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 devenv/dev-dashboards/scenarios/relative_time_zone_support.json diff --git a/devenv/dev-dashboards/scenarios/relative_time_zone_support.json b/devenv/dev-dashboards/scenarios/relative_time_zone_support.json new file mode 100644 index 00000000000..eb57be0ac51 --- /dev/null +++ b/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": "" +} diff --git a/devenv/jsonnet/dev-dashboards.libsonnet b/devenv/jsonnet/dev-dashboards.libsonnet index bd946d2f062..56259f979bf 100644 --- a/devenv/jsonnet/dev-dashboards.libsonnet +++ b/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') + { diff --git a/e2e/dashboards-suite/dashboard-time-zone.spec.ts b/e2e/dashboards-suite/dashboard-time-zone.spec.ts index 08686be2cbc..320a499ac95 100644 --- a/e2e/dashboards-suite/dashboard-time-zone.spec.ts +++ b/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 diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index adef35cd7c4..cca9fb07f6b 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/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', + }, }; diff --git a/packages/grafana-e2e/src/flows/index.ts b/packages/grafana-e2e/src/flows/index.ts index e699542788f..e7fbfb3ce82 100644 --- a/packages/grafana-e2e/src/flows/index.ts +++ b/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'; diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx index db2b3ff55a0..b3c78762360 100644 --- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx +++ b/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( })} {visible && ( -
+
{typeof content === 'string' && content} {React.isValidElement(content) && React.cloneElement(content)}