update dark mode tsvb test (#41618)

elastic · Jul 22, 2019 · 4d884fa · 4d884fa
1 parent 81153c2
commit 4d884fa
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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> {