TimeZone: added e2e tests for the custom time zone support. (#24442)

e2e/suite1/specs/dashboard-time-zone.spec.ts

+import { e2e } from '@grafana/e2e';
+
+e2e.scenario({
+  describeName: 'Dashboard time zone support',
+  itName: 'Tests dashboard time zone scenarios',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    e2e.flows.openDashboard('5SdHCasdf');
+
+    const fromTimeZone = 'UTC';
+    const toTimeZone = 'America/Chicago';
+    const offset = -5;
+
+    const panelsToCheck = [
+      'Random walk series',
+      'Millisecond res x-axis and tooltip',
+      '2 yaxis and axis labels',
+      'Stacking value ontop of nulls',
+      'Null between points',
+      'Legend Table No Scroll Visible',
+    ];
+
+    const timesInUtc: Record<string, string> = {};
+
+    for (const title of panelsToCheck) {
+      e2e.components.Panels.Panel.containerByTitle(title)
+        .should('be.visible')
+        .within(() =>
+          e2e.components.Panels.Visualization.Graph.xAxis
+            .labels()
+            .should('be.visible')
+            .last()
+            .should(element => {
+              timesInUtc[title] = element.text();
+            })
+        );
+    }
+
+    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
+
+    e2e.components.TimeZonePicker.container()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.singleValue()
+          .should('be.visible')
+          .should('have.text', fromTimeZone);
+
+        e2e.components.Select.input()
+          .should('be.visible')
+          .click();
+
+        e2e.components.Select.option()
+          .should('be.visible')
+          .contains(toTimeZone)
+          .click();
+      });
+
+    e2e.components.BackButton.backArrow().click();
+
+    for (const title of panelsToCheck) {
+      e2e.components.Panels.Panel.containerByTitle(title)
+        .should('be.visible')
+        .within(() =>
+          e2e.components.Panels.Visualization.Graph.xAxis
+            .labels()
+            .should('be.visible')
+            .last()
+            .should(element => {
+              const utc = timesInUtc[title];
+              const tz = element.text();
+              const isCorrect = isTimeCorrect(utc, tz, offset);
+              assert.isTrue(isCorrect, `Panel with title: "${title}"`);
+            })
+        );
+    }
+  },
+});
+
+const isTimeCorrect = (utc: string, tz: string, offset: number): boolean => {
+  const minutes = 1000 * 60;
+
+  const a = Cypress.moment(utc, 'HH:mm')
+    .set('seconds', 0)
+    .set('milliseconds', 0);
+
+  const b = Cypress.moment(tz, 'HH:mm')
+    .set('seconds', 0)
+    .set('milliseconds', 0)
+    .add('hours', offset);
+
+  return a.diff(b, 'minutes') <= 6 * minutes;
+};

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

@@ -18,6 +18,7 @@ export const Components = {
     Panel: {
       title: (title: string) => `Panel header title item ${title}`,
       headerItems: (item: string) => `Panel header item ${item}`,
+      containerByTitle: (title: string) => `Panel container title ${title}`,
     },
     Visualization: {
       Graph: {
@@ -28,6 +29,9 @@ export const Components = {
           legendItemAlias: (name: string) => `gpl alias ${name}`,
           showLegendSwitch: 'gpl show legend',
         },
+        xAxis: {
+          labels: () => 'div.flot-x-axis > div.flot-tick-label',
+        },
       },
     },
   },
@@ -109,6 +113,7 @@ export const Components = {
   Select: {
     option: 'Select option',
     input: () => 'input[id*="react-select-"]',
+    singleValue: () => 'div[class*="-singleValue"]',
   },
   FieldConfigEditor: {
     content: 'Field config editor content',
@@ -119,4 +124,7 @@ export const Components = {
   FolderPicker: {
     container: 'Folder picker select container',
   },
+  TimeZonePicker: {
+    container: 'Time zone picker select container',
+  },
 };

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -6,6 +6,7 @@ const { Select } = LegacyForms;
 import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { getTimeZoneGroups, SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 export interface Props {
   resourceUri: string;
@@ -156,7 +157,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
             width={20}
           />
         </div>
-        <div className="gf-form">
+        <div className="gf-form" aria-label={selectors.components.TimeZonePicker.container}>
           <label className="gf-form-label width-11">Timezone</label>
           <Select
             isSearchable={true}

public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx

@@ -5,6 +5,7 @@ import { getTimeZoneGroups, TimeZone, rangeUtil, SelectableValue } from '@grafan
 import { config } from '@grafana/runtime';
 import kbn from 'app/core/utils/kbn';
 import isEmpty from 'lodash/isEmpty';
+import { selectors } from '@grafana/e2e-selectors';
 
 const grafanaTimeZones = [
   { value: '', label: 'Default' },
@@ -112,7 +113,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
       <div className="editor-row">
         <h5 className="section-heading">Time Options</h5>
         <div className="gf-form-group">
-          <div className="gf-form">
+          <div className="gf-form" aria-label={selectors.components.TimeZonePicker.container}>
             <label className="gf-form-label width-7">Timezone</label>
             <Select isSearchable={true} value={value} onChange={this.onTimeZoneChange} options={timeZones} width={40} />
           </div>

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -26,6 +26,7 @@ import {
   PanelPlugin,
   FieldConfigSource,
 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 
@@ -329,7 +330,7 @@ export class PanelChrome extends PureComponent<Props, State> {
     });
 
     return (
-      <div className={containerClassNames}>
+      <div className={containerClassNames} aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}>
         <PanelHeader
           panel={panel}
           dashboard={dashboard}

public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

@@ -16,6 +16,7 @@ import { StoreState } from 'app/types';
 import { DefaultTimeRange, LoadingState, PanelData, PanelEvents, PanelPlugin } from '@grafana/data';
 import { updateLocation } from 'app/core/actions';
 import { PANEL_BORDER } from 'app/core/constants';
+import { selectors } from '@grafana/e2e-selectors';
 
 interface OwnProps {
   panel: PanelModel;
@@ -238,7 +239,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
     });
 
     return (
-      <div className={containerClassNames}>
+      <div className={containerClassNames} aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}>
         <PanelHeader
           panel={panel}
           dashboard={dashboard}