From 4d884fa448bc2f662df139997284403d69adabae Mon Sep 17 00:00:00 2001
From: Dmitry Lemeshko <dzmitry.lemechko@elastic.co>
Date: Mon, 22 Jul 2019 09:41:00 +0200
Subject: [PATCH] update dark mode tsvb test (#41618)

---
 .../components/panel_config/timeseries.js     |  6 ++++-
 test/functional/apps/visualize/_tsvb_chart.ts | 16 +------------
 .../apps/visualize/_tsvb_time_series.ts       | 24 +++++++++++++++++++
 .../page_objects/visual_builder_page.ts       | 15 +++++++++---
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
index aacc444390375..d84a2bcdb3e98 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -370,7 +370,11 @@ class TimeseriesPanelConfigUi extends Component {
           <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
             <FormattedMessage id="tsvb.timeseries.dataTab.dataButtonLabel" defaultMessage="Data" />
           </EuiTab>
-          <EuiTab isSelected={selectedTab === 'options'} onClick={() => this.switchTab('options')}>
+          <EuiTab
+            isSelected={selectedTab === 'options'}
+            onClick={() => this.switchTab('options')}
+            data-test-subj="timeSeriesEditorPanelOptionsBtn"
+          >
             <FormattedMessage
               id="tsvb.timeseries.optionsTab.panelOptionsButtonLabel"
               defaultMessage="Panel options"
diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts
index cf52e6e8a5aed..ad88bd5299b9e 100644
--- a/test/functional/apps/visualize/_tsvb_chart.ts
+++ b/test/functional/apps/visualize/_tsvb_chart.ts
@@ -25,8 +25,6 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const log = getService('log');
   const inspector = getService('inspector');
-  const kibanaServer = getService('kibanaServer');
-  const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['visualize', 'visualBuilder', 'timePicker']);
 
   describe('visual builder', function describeIndexTests() {
@@ -109,7 +107,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
       it('should be able to switch between index patterns', async () => {
         const value = await PageObjects.visualBuilder.getMetricValue();
         expect(value).to.eql('156');
-        await PageObjects.visualBuilder.clickMetricPanelOptions();
+        await PageObjects.visualBuilder.clickPanelOptions('metric');
         const fromTime = '2018-10-22 00:00:00.000';
         const toTime = '2018-10-28 23:59:59.999';
         await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
@@ -119,17 +117,5 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
         expect(newValue).to.eql('10');
       });
     });
-
-    describe.skip('dark mode', () => {
-      it('uses dark mode flag', async () => {
-        await kibanaServer.uiSettings.update({
-          'theme:darkMode': true,
-        });
-
-        await PageObjects.visualBuilder.resetPage();
-        const classNames = await testSubjects.getAttribute('timeseriesChart', 'class');
-        expect(classNames.includes('reversed')).to.be(true);
-      });
-    });
   });
 }
diff --git a/test/functional/apps/visualize/_tsvb_time_series.ts b/test/functional/apps/visualize/_tsvb_time_series.ts
index 87a16b6c661a2..f3f285c03cfc7 100644
--- a/test/functional/apps/visualize/_tsvb_time_series.ts
+++ b/test/functional/apps/visualize/_tsvb_time_series.ts
@@ -24,6 +24,8 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
   const { visualize, visualBuilder } = getPageObjects(['visualBuilder', 'visualize']);
   const retry = getService('retry');
   const log = getService('log');
+  const kibanaServer = getService('kibanaServer');
+  const testSubjects = getService('testSubjects');
 
   describe('visual builder', function describeIndexTests() {
     beforeEach(async () => {
@@ -124,6 +126,28 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
         const actualCountMin = await visualBuilder.getRhythmChartLegendValue();
         expect(actualCountMin).to.be('3 hours');
       });
+
+      describe('Dark mode', () => {
+        before(async () => {
+          await kibanaServer.uiSettings.update({
+            'theme:darkMode': true,
+          });
+        });
+
+        it(`viz should have 'reversed' class when background color is white`, async () => {
+          await visualBuilder.clickPanelOptions('timeSeries');
+          await visualBuilder.setBackgroundColor('#FFFFFF');
+
+          const classNames = await testSubjects.getAttribute('timeseriesChart', 'class');
+          expect(classNames.includes('tvbVisTimeSeries--reversed')).to.be(true);
+        });
+
+        after(async () => {
+          await kibanaServer.uiSettings.update({
+            'theme:darkMode': false,
+          });
+        });
+      });
     });
   });
 }
diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts
index 95d6e6fa22962..c64d623979313 100644
--- a/test/functional/page_objects/visual_builder_page.ts
+++ b/test/functional/page_objects/visual_builder_page.ts
@@ -387,8 +387,8 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       return await tableView.getVisibleText();
     }
 
-    public async clickMetricPanelOptions() {
-      await testSubjects.click('metricEditorPanelOptionsBtn');
+    public async clickPanelOptions(tabName: string) {
+      await testSubjects.click(`${tabName}EditorPanelOptionsBtn`);
       await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
@@ -446,7 +446,16 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
     }
 
     public async clickColorPicker(): Promise<void> {
-      await testSubjects.click('tvbColorPicker');
+      const picker = await find.byCssSelector('.tvbColorPicker button');
+      await browser.clickMouseButton(picker);
+    }
+
+    public async setBackgroundColor(colorHex: string): Promise<void> {
+      await this.clickColorPicker();
+      await this.checkColorPickerPopUpIsPresent();
+      await find.setValue('.tvbColorPickerPopUp input', colorHex);
+      await this.clickColorPicker();
+      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
     }
 
     public async checkColorPickerPopUpIsPresent(): Promise<void> {