Fix tests

getredash · Nov 23, 2019 · 94e5ac1 · 94e5ac1
1 parent ad114f8
commit 94e5ac1
Show file tree

Hide file tree

Showing 20 changed files with 109 additions and 92 deletions.
diff --git a/client/app/components/ColorPicker/index.jsx b/client/app/components/ColorPicker/index.jsx
@@ -66,7 +66,6 @@ export default function ColorPicker({
       {addonBefore}
       <Popover
         arrowPointAtCenter
-        destroyTooltipOnHide
         overlayClassName={`color-picker ${interactive ? 'color-picker-interactive' : 'color-picker-with-actions'}`}
         overlayStyle={{ '--color-picker-selected-color': currentColor }}
         content={(

diff --git a/client/app/components/TextAlignmentSelect/index.jsx b/client/app/components/TextAlignmentSelect/index.jsx
@@ -1,3 +1,4 @@
+import { pickBy, startsWith } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -9,26 +10,29 @@ import './index.less';
 
 export default function TextAlignmentSelect({ className, ...props }) {
   return (
-    <Radio.Group
-      className={cx('text-alignment-select', className)}
-      {...props}
-    >
-      <Tooltip title="Align left" mouseEnterDelay={0} mouseLeaveDelay={0}>
-        <Radio.Button value="left" data-test="TextAlignmentSelect.Left">
-          <Icon type="align-left" />
-        </Radio.Button>
-      </Tooltip>
-      <Tooltip title="Align center" mouseEnterDelay={0} mouseLeaveDelay={0}>
-        <Radio.Button value="center" data-test="TextAlignmentSelect.Center">
-          <Icon type="align-center" />
-        </Radio.Button>
-      </Tooltip>
-      <Tooltip title="Align right" mouseEnterDelay={0} mouseLeaveDelay={0}>
-        <Radio.Button value="right" data-test="TextAlignmentSelect.Right">
-          <Icon type="align-right" />
-        </Radio.Button>
-      </Tooltip>
-    </Radio.Group>
+    // Antd RadioGroup does not use any custom attributes
+    <div {...pickBy(props, (v, k) => startsWith(k, 'data-'))}>
+      <Radio.Group
+        className={cx('text-alignment-select', className)}
+        {...props}
+      >
+        <Tooltip title="Align left" mouseEnterDelay={0} mouseLeaveDelay={0}>
+          <Radio.Button value="left" data-test="TextAlignmentSelect.Left">
+            <Icon type="align-left" />
+          </Radio.Button>
+        </Tooltip>
+        <Tooltip title="Align center" mouseEnterDelay={0} mouseLeaveDelay={0}>
+          <Radio.Button value="center" data-test="TextAlignmentSelect.Center">
+            <Icon type="align-center" />
+          </Radio.Button>
+        </Tooltip>
+        <Tooltip title="Align right" mouseEnterDelay={0} mouseLeaveDelay={0}>
+          <Radio.Button value="right" data-test="TextAlignmentSelect.Right">
+            <Icon type="align-right" />
+          </Radio.Button>
+        </Tooltip>
+      </Radio.Group>
+    </div>
   );
 }
 

diff --git a/client/app/visualizations/chart/Editor/ColorsSettings.test.js b/client/app/visualizations/chart/Editor/ColorsSettings.test.js
@@ -35,8 +35,10 @@ describe('Visualizations -> Chart -> Editor -> Colors Settings', () => {
         columnMapping: { a: 'x', b: 'y' },
       }, done);
 
-      findByTestID(el, 'Chart.Series.v.Color').first().simulate('click');
-      findByTestID(el, 'ColorPicker').first().find('input')
+      findByTestID(el, 'Chart.Series.v.Color')
+        .find('.color-picker-trigger').last()
+        .simulate('click');
+      findByTestID(el, 'ColorPicker').last().find('input')
         .simulate('change', { target: { value: 'red' } });
     });
   });
@@ -48,8 +50,8 @@ describe('Visualizations -> Chart -> Editor -> Colors Settings', () => {
         columnMapping: { a: 'x', b: 'y' },
       }, done);
 
-      findByTestID(el, 'Chart.Colors.Heatmap.ColorScheme').first().simulate('click');
-      findByTestID(el, 'Chart.Colors.Heatmap.ColorScheme.RdBu').first().simulate('click');
+      findByTestID(el, 'Chart.Colors.Heatmap.ColorScheme').last().simulate('click');
+      findByTestID(el, 'Chart.Colors.Heatmap.ColorScheme.RdBu').last().simulate('click');
     });
 
     test('Sets custom color scheme', async (done) => {
@@ -59,12 +61,16 @@ describe('Visualizations -> Chart -> Editor -> Colors Settings', () => {
         colorScheme: 'Custom...',
       }, after(2, done)); // we will perform 2 actions, so call `done` after all of them completed
 
-      findByTestID(el, 'Chart.Colors.Heatmap.MinColor').first().simulate('click');
-      findByTestID(el, 'ColorPicker').first().find('input')
+      findByTestID(el, 'Chart.Colors.Heatmap.MinColor')
+        .find('.color-picker-trigger').last()
+        .simulate('click');
+      findByTestID(el, 'ColorPicker').last().find('input')
         .simulate('change', { target: { value: 'yellow' } });
 
-      findByTestID(el, 'Chart.Colors.Heatmap.MaxColor').first().simulate('click');
-      findByTestID(el, 'ColorPicker').first().find('input')
+      findByTestID(el, 'Chart.Colors.Heatmap.MaxColor')
+        .find('.color-picker-trigger').last()
+        .simulate('click');
+      findByTestID(el, 'ColorPicker').last().find('input')
         .simulate('change', { target: { value: 'red' } });
     });
   });
@@ -76,8 +82,11 @@ describe('Visualizations -> Chart -> Editor -> Colors Settings', () => {
         columnMapping: { a: 'x', b: 'y' },
       }, done);
 
-      findByTestID(el, 'Chart.Series.b.Color').first().simulate('click');
-      findByTestID(el, 'ColorPicker').first().find('input')
+      findByTestID(el, 'Chart.Series.b.Color')
+        .find('.color-picker-trigger').last()
+        .simulate('click');
+
+      findByTestID(el, 'ColorPicker').last().find('input')
         .simulate('change', { target: { value: 'red' } });
     });
   });

diff --git a/client/app/visualizations/chart/Editor/DataLabelsSettings.test.js b/client/app/visualizations/chart/Editor/DataLabelsSettings.test.js
@@ -30,7 +30,7 @@ describe('Visualizations -> Chart -> Editor -> Data Labels Settings', () => {
       showDataLabels: false,
     }, done);
 
-    findByTestID(el, 'Chart.DataLabels.ShowDataLabels').first().find('input')
+    findByTestID(el, 'Chart.DataLabels.ShowDataLabels').last().find('input')
       .simulate('change', { target: { checked: true } });
   });
 
@@ -40,7 +40,7 @@ describe('Visualizations -> Chart -> Editor -> Data Labels Settings', () => {
       numberFormat: '0[.]0000',
     }, done);
 
-    findByTestID(el, 'Chart.DataLabels.NumberFormat').first()
+    findByTestID(el, 'Chart.DataLabels.NumberFormat').last()
       .simulate('change', { target: { value: '0.00' } });
   });
 
@@ -50,7 +50,7 @@ describe('Visualizations -> Chart -> Editor -> Data Labels Settings', () => {
       percentFormat: '0[.]00%',
     }, done);
 
-    findByTestID(el, 'Chart.DataLabels.PercentFormat').first()
+    findByTestID(el, 'Chart.DataLabels.PercentFormat').last()
       .simulate('change', { target: { value: '0.0%' } });
   });
 
@@ -60,7 +60,7 @@ describe('Visualizations -> Chart -> Editor -> Data Labels Settings', () => {
       dateTimeFormat: 'YYYY-MM-DD HH:mm:ss',
     }, done);
 
-    findByTestID(el, 'Chart.DataLabels.DateTimeFormat').first()
+    findByTestID(el, 'Chart.DataLabels.DateTimeFormat').last()
       .simulate('change', { target: { value: 'YYYY MMM DD' } });
   });
 
@@ -70,7 +70,7 @@ describe('Visualizations -> Chart -> Editor -> Data Labels Settings', () => {
       textFormat: null,
     }, done);
 
-    findByTestID(el, 'Chart.DataLabels.TextFormat').first()
+    findByTestID(el, 'Chart.DataLabels.TextFormat').last()
       .simulate('change', { target: { value: '{{ @@x }} :: {{ @@y }} / {{ @@yPercent }}' } });
   });
 });
diff --git a/client/app/visualizations/chart/Editor/GeneralSettings.test.js b/client/app/visualizations/chart/Editor/GeneralSettings.test.js
@@ -38,8 +38,8 @@ describe('Visualizations -> Chart -> Editor -> General Settings', () => {
       },
     }, done);
 
-    findByTestID(el, 'Chart.GlobalSeriesType').first().simulate('click');
-    findByTestID(el, 'Chart.ChartType.pie').first().simulate('click');
+    findByTestID(el, 'Chart.GlobalSeriesType').last().simulate('click');
+    findByTestID(el, 'Chart.ChartType.pie').last().simulate('click');
   });
 
   test('Pie: changes direction', (done) => {
@@ -48,8 +48,8 @@ describe('Visualizations -> Chart -> Editor -> General Settings', () => {
       direction: { type: 'counterclockwise' },
     }, done);
 
-    findByTestID(el, 'Chart.PieDirection').first().simulate('click');
-    findByTestID(el, 'Chart.PieDirection.Clockwise').first().simulate('click');
+    findByTestID(el, 'Chart.PieDirection').last().simulate('click');
+    findByTestID(el, 'Chart.PieDirection.Clockwise').last().simulate('click');
   });
 
   test('Toggles legend', (done) => {
@@ -58,7 +58,7 @@ describe('Visualizations -> Chart -> Editor -> General Settings', () => {
       legend: { enabled: true },
     }, done);
 
-    findByTestID(el, 'Chart.ShowLegend').first().find('input')
+    findByTestID(el, 'Chart.ShowLegend').last().find('input')
       .simulate('change', { target: { checked: false } });
   });
 
@@ -68,7 +68,7 @@ describe('Visualizations -> Chart -> Editor -> General Settings', () => {
       showpoints: false,
     }, done);
 
-    findByTestID(el, 'Chart.ShowPoints').first().find('input')
+    findByTestID(el, 'Chart.ShowPoints').last().find('input')
       .simulate('change', { target: { checked: true } });
   });
 
@@ -78,8 +78,8 @@ describe('Visualizations -> Chart -> Editor -> General Settings', () => {
       series: {},
     }, done);
 
-    findByTestID(el, 'Chart.Stacking').first().simulate('click');
-    findByTestID(el, 'Chart.Stacking.Stack').first().simulate('click');
+    findByTestID(el, 'Chart.Stacking').last().simulate('click');
+    findByTestID(el, 'Chart.Stacking.Stack').last().simulate('click');
   });
 
   test('Toggles normalize values to percentage', (done) => {
@@ -88,7 +88,7 @@ describe('Visualizations -> Chart -> Editor -> General Settings', () => {
       series: {},
     }, done);
 
-    findByTestID(el, 'Chart.NormalizeValues').first().find('input')
+    findByTestID(el, 'Chart.NormalizeValues').last().find('input')
       .simulate('change', { target: { checked: true } });
   });
 
@@ -98,8 +98,8 @@ describe('Visualizations -> Chart -> Editor -> General Settings', () => {
       missingValuesAsZero: true,
     }, done);
 
-    findByTestID(el, 'Chart.MissingValues').first().simulate('click');
-    findByTestID(el, 'Chart.MissingValues.Keep').first().simulate('click');
+    findByTestID(el, 'Chart.MissingValues').last().simulate('click');
+    findByTestID(el, 'Chart.MissingValues.Keep').last().simulate('click');
   });
 
   describe('Column mappings should be available', () => {

diff --git a/client/app/visualizations/chart/Editor/SeriesSettings.test.js b/client/app/visualizations/chart/Editor/SeriesSettings.test.js
@@ -33,8 +33,8 @@ describe('Visualizations -> Chart -> Editor -> Series Settings', () => {
       },
     }, done);
 
-    findByTestID(el, 'Chart.Series.a.Type').first().simulate('click');
-    findByTestID(el, 'Chart.ChartType.area').first().simulate('click');
+    findByTestID(el, 'Chart.Series.a.Type').last().simulate('click');
+    findByTestID(el, 'Chart.ChartType.area').last().simulate('click');
   });
 
   test('Changes series label', (done) => {
@@ -46,7 +46,7 @@ describe('Visualizations -> Chart -> Editor -> Series Settings', () => {
       },
     }, done);
 
-    findByTestID(el, 'Chart.Series.a.Label').first().simulate('change', { target: { value: 'test' } });
+    findByTestID(el, 'Chart.Series.a.Label').last().simulate('change', { target: { value: 'test' } });
   });
 
   test('Changes series axis', (done) => {
@@ -58,7 +58,7 @@ describe('Visualizations -> Chart -> Editor -> Series Settings', () => {
       },
     }, done);
 
-    findByTestID(el, 'Chart.Series.a.UseRightAxis').first().find('input')
+    findByTestID(el, 'Chart.Series.a.UseRightAxis').last().find('input')
       .simulate('change', { target: { checked: true } });
   });
 });
diff --git a/client/app/visualizations/chart/Editor/XAxisSettings.test.js b/client/app/visualizations/chart/Editor/XAxisSettings.test.js
@@ -30,8 +30,8 @@ describe('Visualizations -> Chart -> Editor -> X-Axis Settings', () => {
       xAxis: { type: '-', labels: { enabled: true } },
     }, done);
 
-    findByTestID(el, 'Chart.XAxis.Type').first().simulate('click');
-    findByTestID(el, 'Chart.XAxis.Type.Linear').first().simulate('click');
+    findByTestID(el, 'Chart.XAxis.Type').last().simulate('click');
+    findByTestID(el, 'Chart.XAxis.Type.Linear').last().simulate('click');
   });
 
   test('Changes axis name', (done) => {
@@ -40,7 +40,7 @@ describe('Visualizations -> Chart -> Editor -> X-Axis Settings', () => {
       xAxis: { type: '-', labels: { enabled: true } },
     }, done);
 
-    findByTestID(el, 'Chart.XAxis.Name').first().simulate('change', { target: { value: 'test' } });
+    findByTestID(el, 'Chart.XAxis.Name').last().simulate('change', { target: { value: 'test' } });
   });
 
   test('Sets Show Labels option', (done) => {
@@ -49,7 +49,7 @@ describe('Visualizations -> Chart -> Editor -> X-Axis Settings', () => {
       xAxis: { type: '-', labels: { enabled: false } },
     }, done);
 
-    findByTestID(el, 'Chart.XAxis.ShowLabels').first().simulate('click');
+    findByTestID(el, 'Chart.XAxis.ShowLabels').last().simulate('click');
   });
 
   test('Sets Sort X Values option', (done) => {
@@ -58,7 +58,7 @@ describe('Visualizations -> Chart -> Editor -> X-Axis Settings', () => {
       sortX: false,
     }, done);
 
-    findByTestID(el, 'Chart.XAxis.Sort').first().simulate('click');
+    findByTestID(el, 'Chart.XAxis.Sort').last().simulate('click');
   });
 
   test('Sets Reverse X Values option', (done) => {
@@ -67,6 +67,6 @@ describe('Visualizations -> Chart -> Editor -> X-Axis Settings', () => {
       reverseX: false,
     }, done);
 
-    findByTestID(el, 'Chart.XAxis.Reverse').first().simulate('click');
+    findByTestID(el, 'Chart.XAxis.Reverse').last().simulate('click');
   });
 });
diff --git a/client/app/visualizations/chart/Editor/YAxisSettings.test.js b/client/app/visualizations/chart/Editor/YAxisSettings.test.js
@@ -34,8 +34,8 @@ describe('Visualizations -> Chart -> Editor -> Y-Axis Settings', () => {
       yAxis: [{ type: 'linear' }, { type: 'linear', opposite: true }],
     }, done);
 
-    findByTestID(el, 'Chart.LeftYAxis.Type').first().simulate('click');
-    findByTestID(el, 'Chart.LeftYAxis.Type.Category').first().simulate('click');
+    findByTestID(el, 'Chart.LeftYAxis.Type').last().simulate('click');
+    findByTestID(el, 'Chart.LeftYAxis.Type.Category').last().simulate('click');
   });
 
   test('Changes axis name', (done) => {
@@ -44,7 +44,7 @@ describe('Visualizations -> Chart -> Editor -> Y-Axis Settings', () => {
       yAxis: [{ type: 'linear' }, { type: 'linear', opposite: true }],
     }, done);
 
-    findByTestID(el, 'Chart.LeftYAxis.Name').first().simulate('change', { target: { value: 'test' } });
+    findByTestID(el, 'Chart.LeftYAxis.Name').last().simulate('change', { target: { value: 'test' } });
   });
 
   test('Changes axis min value', (done) => {
@@ -53,7 +53,7 @@ describe('Visualizations -> Chart -> Editor -> Y-Axis Settings', () => {
       yAxis: [{ type: 'linear' }, { type: 'linear', opposite: true }],
     }, done);
 
-    findByTestID(el, 'Chart.LeftYAxis.RangeMin').find('input').first().simulate('change', { target: { value: '50' } });
+    findByTestID(el, 'Chart.LeftYAxis.RangeMin').find('input').last().simulate('change', { target: { value: '50' } });
   });
 
   test('Changes axis max value', (done) => {
@@ -62,7 +62,7 @@ describe('Visualizations -> Chart -> Editor -> Y-Axis Settings', () => {
       yAxis: [{ type: 'linear' }, { type: 'linear', opposite: true }],
     }, done);
 
-    findByTestID(el, 'Chart.LeftYAxis.RangeMax').find('input').first().simulate('change', { target: { value: '200' } });
+    findByTestID(el, 'Chart.LeftYAxis.RangeMax').find('input').last().simulate('change', { target: { value: '200' } });
   });
 
   describe('for non-heatmap', () => {
@@ -92,7 +92,7 @@ describe('Visualizations -> Chart -> Editor -> Y-Axis Settings', () => {
         sortY: false,
       }, done);
 
-      findByTestID(el, 'Chart.LeftYAxis.Sort').first().simulate('click');
+      findByTestID(el, 'Chart.LeftYAxis.Sort').last().simulate('click');
     });
 
     test('Sets Reverse Y Values option', (done) => {
@@ -101,7 +101,7 @@ describe('Visualizations -> Chart -> Editor -> Y-Axis Settings', () => {
         reverseY: false,
       }, done);
 
-      findByTestID(el, 'Chart.LeftYAxis.Reverse').first().simulate('click');
+      findByTestID(el, 'Chart.LeftYAxis.Reverse').last().simulate('click');
     });
   });
 });
diff --git a/client/app/visualizations/chart/Editor/__snapshots__/ColorsSettings.test.js.snap b/client/app/visualizations/chart/Editor/__snapshots__/ColorsSettings.test.js.snap
@@ -24,7 +24,7 @@ Object {
 
 exports[`Visualizations -> Chart -> Editor -> Colors Settings for heatmap Sets custom color scheme 2`] = `
 Object {
-  "heatMinColor": "#FF0000",
+  "heatMaxColor": "#FF0000",
 }
 `;
 

diff --git a/client/app/visualizations/choropleth/Editor/FormatSettings.jsx b/client/app/visualizations/choropleth/Editor/FormatSettings.jsx
@@ -90,6 +90,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
           </Grid.Col>
           <Grid.Col span={12}>
             <TextAlignmentSelect
+              data-test="Choropleth.Editor.LegendTextAlignment"
               label="Legend text alignment"
               disabled={!options.legend.visible}
               defaultValue={options.legend.alignText}

diff --git a/client/app/visualizations/table/Editor/ColumnEditor.jsx b/client/app/visualizations/table/Editor/ColumnEditor.jsx
@@ -29,6 +29,7 @@ export default function ColumnEditor({ column, onChange }) {
           </Grid.Col>
           <Grid.Col span={8}>
             <TextAlignmentSelect
+              data-test={`Table.Column.${column.name}.TextAlignment`}
               defaultValue={column.alignContent}
               onChange={event => handleChange({ alignContent: event.target.value })}
             />