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

a521a39e · Marcus Andersson · GitHub · e341d4b2 · a521a39e · a521a39e
Commit a521a39e authored May 11, 2020 by Marcus Andersson Committed by GitHub May 11, 2020
7 changed files
--- a/devenv/dev-dashboards/scenarios/time_zone_support.json
+++ b/devenv/dev-dashboards/scenarios/time_zone_support.json
--- a/e2e/suite1/specs/dashboard-time-zone.spec.ts
+++ b/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;
+};
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/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',
+  },
 };
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/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}

--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/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>

--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/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}

--- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
+++ b/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}