From 94e5ac1e8a8623e812bc0fd609d2fba00d769d35 Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Sat, 23 Nov 2019 00:57:17 +0200
Subject: [PATCH] Fix tests

---
 client/app/components/ColorPicker/index.jsx   |  1 -
 .../components/TextAlignmentSelect/index.jsx  | 44 ++++++++++---------
 .../chart/Editor/ColorsSettings.test.js       | 29 +++++++-----
 .../chart/Editor/DataLabelsSettings.test.js   | 10 ++---
 .../chart/Editor/GeneralSettings.test.js      | 22 +++++-----
 .../chart/Editor/SeriesSettings.test.js       |  8 ++--
 .../chart/Editor/XAxisSettings.test.js        | 12 ++---
 .../chart/Editor/YAxisSettings.test.js        | 14 +++---
 .../__snapshots__/ColorsSettings.test.js.snap |  2 +-
 .../choropleth/Editor/FormatSettings.jsx      |  1 +
 .../table/Editor/ColumnEditor.jsx             |  1 +
 .../table/Editor/ColumnsSettings.test.js      | 21 ++++-----
 .../table/Editor/GridSettings.test.js         |  4 +-
 .../table/columns/boolean.test.js             |  4 +-
 .../table/columns/datetime.test.js            |  2 +-
 .../table/columns/image.test.js               |  8 ++--
 .../visualizations/table/columns/link.test.js |  8 ++--
 .../table/columns/number.test.js              |  2 +-
 .../visualizations/table/columns/text.test.js |  4 +-
 .../visualizations/choropleth_spec.js         |  4 +-
 20 files changed, 109 insertions(+), 92 deletions(-)

diff --git a/client/app/components/ColorPicker/index.jsx b/client/app/components/ColorPicker/index.jsx
index 362b9220e7..d057bbebb9 100644
--- 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
index 2549e237fe..daa854f2d0 100644
--- 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
index 505f20d482..fa90ec39d9 100644
--- 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
index fba5b365c6..675fd9820a 100644
--- 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
index 5866176492..9d334e9579 100644
--- 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
index 0075795cd4..90ae8d0fc1 100644
--- 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
index 57fc4e4361..8b6d865715 100644
--- 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
index c609c1c4e0..3015f27698 100644
--- 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
index dd8111f6d2..b622f085fb 100644
--- 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
index 372c45b39a..95eff6f599 100644
--- 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
index 7921bf0a20..ed009cebbf 100644
--- 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 })}
             />
diff --git a/client/app/visualizations/table/Editor/ColumnsSettings.test.js b/client/app/visualizations/table/Editor/ColumnsSettings.test.js
index 2115eb32da..bdc0f9b33f 100644
--- a/client/app/visualizations/table/Editor/ColumnsSettings.test.js
+++ b/client/app/visualizations/table/Editor/ColumnsSettings.test.js
@@ -31,37 +31,38 @@ describe('Visualizations -> Table -> Editor -> Columns Settings', () => {
   test('Toggles column visibility', (done) => {
     const el = mount({}, done);
 
-    findByTestID(el, 'Table.Column.a.Visibility').first().simulate('click');
+    findByTestID(el, 'Table.Column.a.Visibility').last().simulate('click');
   });
 
   test('Changes column title', (done) => {
     const el = mount({}, done);
-    findByTestID(el, 'Table.Column.a.Name').first().simulate('click'); // expand settings
+    findByTestID(el, 'Table.Column.a.Name').last().simulate('click'); // expand settings
 
-    findByTestID(el, 'Table.Column.a.Title').first().simulate('change', { target: { value: 'test' } });
+    findByTestID(el, 'Table.Column.a.Title').last().simulate('change', { target: { value: 'test' } });
   });
 
   test('Changes column alignment', (done) => {
     const el = mount({}, done);
-    findByTestID(el, 'Table.Column.a.Name').first().simulate('click'); // expand settings
+    findByTestID(el, 'Table.Column.a.Name').last().simulate('click'); // expand settings
 
-    findByTestID(el, 'Table.Column.a.AlignRight').first().find('input')
+    findByTestID(el, 'Table.Column.a.TextAlignment').last()
+      .find('[data-test="TextAlignmentSelect.Right"] input')
       .simulate('change', { target: { checked: true } });
   });
 
   test('Enables search by column data', (done) => {
     const el = mount({}, done);
-    findByTestID(el, 'Table.Column.a.Name').first().simulate('click'); // expand settings
+    findByTestID(el, 'Table.Column.a.Name').last().simulate('click'); // expand settings
 
-    findByTestID(el, 'Table.Column.a.UseForSearch').first().find('input')
+    findByTestID(el, 'Table.Column.a.UseForSearch').last().find('input')
       .simulate('change', { target: { checked: true } });
   });
 
   test('Changes column display type', (done) => {
     const el = mount({}, done);
-    findByTestID(el, 'Table.Column.a.Name').first().simulate('click'); // expand settings
+    findByTestID(el, 'Table.Column.a.Name').last().simulate('click'); // expand settings
 
-    findByTestID(el, 'Table.Column.a.DisplayAs').first().simulate('click');
-    findByTestID(el, 'Table.Column.a.DisplayAs.number').first().simulate('click');
+    findByTestID(el, 'Table.Column.a.DisplayAs').last().simulate('click');
+    findByTestID(el, 'Table.Column.a.DisplayAs.number').last().simulate('click');
   });
 });
diff --git a/client/app/visualizations/table/Editor/GridSettings.test.js b/client/app/visualizations/table/Editor/GridSettings.test.js
index 1eb6209a04..272ac1df89 100644
--- a/client/app/visualizations/table/Editor/GridSettings.test.js
+++ b/client/app/visualizations/table/Editor/GridSettings.test.js
@@ -30,7 +30,7 @@ describe('Visualizations -> Table -> Editor -> Grid Settings', () => {
       itemsPerPage: 25,
     }, done);
 
-    findByTestID(el, 'Table.ItemsPerPage').first().simulate('click');
-    findByTestID(el, 'Table.ItemsPerPage.100').first().simulate('click');
+    findByTestID(el, 'Table.ItemsPerPage').last().simulate('click');
+    findByTestID(el, 'Table.ItemsPerPage.100').last().simulate('click');
   });
 });
diff --git a/client/app/visualizations/table/columns/boolean.test.js b/client/app/visualizations/table/columns/boolean.test.js
index 47596970e3..0e719dd4b8 100644
--- a/client/app/visualizations/table/columns/boolean.test.js
+++ b/client/app/visualizations/table/columns/boolean.test.js
@@ -28,7 +28,7 @@ describe('Visualizations -> Table -> Columns -> Boolean', () => {
         booleanValues: ['false', 'true'],
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Boolean.False').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Boolean.False').last().find('input')
         .simulate('change', { target: { value: 'no' } });
     });
 
@@ -38,7 +38,7 @@ describe('Visualizations -> Table -> Columns -> Boolean', () => {
         booleanValues: ['false', 'true'],
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Boolean.True').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Boolean.True').last().find('input')
         .simulate('change', { target: { value: 'yes' } });
     });
   });
diff --git a/client/app/visualizations/table/columns/datetime.test.js b/client/app/visualizations/table/columns/datetime.test.js
index f3e2c903f7..cacdde3717 100644
--- a/client/app/visualizations/table/columns/datetime.test.js
+++ b/client/app/visualizations/table/columns/datetime.test.js
@@ -28,7 +28,7 @@ describe('Visualizations -> Table -> Columns -> Date/Time', () => {
         dateTimeFormat: 'YYYY-MM-DD HH:mm:ss',
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.DateTime.Format').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.DateTime.Format').last().find('input')
         .simulate('change', { target: { value: 'YYYY/MM/DD HH:ss' } });
     });
   });
diff --git a/client/app/visualizations/table/columns/image.test.js b/client/app/visualizations/table/columns/image.test.js
index e2ba0dc41c..8e13e787f5 100644
--- a/client/app/visualizations/table/columns/image.test.js
+++ b/client/app/visualizations/table/columns/image.test.js
@@ -28,7 +28,7 @@ describe('Visualizations -> Table -> Columns -> Image', () => {
         imageUrlTemplate: '{{ @ }}',
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Image.UrlTemplate').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Image.UrlTemplate').last().find('input')
         .simulate('change', { target: { value: 'http://{{ @ }}.jpeg' } });
     });
 
@@ -38,7 +38,7 @@ describe('Visualizations -> Table -> Columns -> Image', () => {
         imageWidth: null,
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Image.Width').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Image.Width').last().find('input')
         .simulate('change', { target: { value: '400' } });
     });
 
@@ -48,7 +48,7 @@ describe('Visualizations -> Table -> Columns -> Image', () => {
         imageHeight: null,
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Image.Height').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Image.Height').last().find('input')
         .simulate('change', { target: { value: '300' } });
     });
 
@@ -58,7 +58,7 @@ describe('Visualizations -> Table -> Columns -> Image', () => {
         imageUrlTemplate: '{{ @ }}',
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Image.TitleTemplate').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Image.TitleTemplate').last().find('input')
         .simulate('change', { target: { value: 'Image {{ @ }}' } });
     });
   });
diff --git a/client/app/visualizations/table/columns/link.test.js b/client/app/visualizations/table/columns/link.test.js
index 55b3e9da2a..11da831163 100644
--- a/client/app/visualizations/table/columns/link.test.js
+++ b/client/app/visualizations/table/columns/link.test.js
@@ -28,7 +28,7 @@ describe('Visualizations -> Table -> Columns -> Link', () => {
         linkUrlTemplate: '{{ @ }}',
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Link.UrlTemplate').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Link.UrlTemplate').last().find('input')
         .simulate('change', { target: { value: 'http://{{ @ }}/index.html' } });
     });
 
@@ -38,7 +38,7 @@ describe('Visualizations -> Table -> Columns -> Link', () => {
         linkTextTemplate: '{{ @ }}',
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Link.TextTemplate').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Link.TextTemplate').last().find('input')
         .simulate('change', { target: { value: 'Text of {{ @ }}' } });
     });
 
@@ -48,7 +48,7 @@ describe('Visualizations -> Table -> Columns -> Link', () => {
         linkTitleTemplate: '{{ @ }}',
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Link.TitleTemplate').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Link.TitleTemplate').last().find('input')
         .simulate('change', { target: { value: 'Title of {{ @ }}' } });
     });
 
@@ -58,7 +58,7 @@ describe('Visualizations -> Table -> Columns -> Link', () => {
         linkOpenInNewTab: false,
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Link.OpenInNewTab').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Link.OpenInNewTab').last().find('input')
         .simulate('change', { target: { checked: true } });
     });
   });
diff --git a/client/app/visualizations/table/columns/number.test.js b/client/app/visualizations/table/columns/number.test.js
index d7c5e4d85f..91c5c7f890 100644
--- a/client/app/visualizations/table/columns/number.test.js
+++ b/client/app/visualizations/table/columns/number.test.js
@@ -28,7 +28,7 @@ describe('Visualizations -> Table -> Columns -> Number', () => {
         numberFormat: '0[.]0000',
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Number.Format').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Number.Format').last().find('input')
         .simulate('change', { target: { value: '0.00%' } });
     });
   });
diff --git a/client/app/visualizations/table/columns/text.test.js b/client/app/visualizations/table/columns/text.test.js
index 47b690a484..d1153152a6 100644
--- a/client/app/visualizations/table/columns/text.test.js
+++ b/client/app/visualizations/table/columns/text.test.js
@@ -29,7 +29,7 @@ describe('Visualizations -> Table -> Columns -> Text', () => {
         highlightLinks: false,
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Text.AllowHTML').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Text.AllowHTML').last().find('input')
         .simulate('change', { target: { checked: true } });
     });
 
@@ -40,7 +40,7 @@ describe('Visualizations -> Table -> Columns -> Text', () => {
         highlightLinks: false,
       }, done);
 
-      findByTestID(el, 'Table.ColumnEditor.Text.HighlightLinks').first().find('input')
+      findByTestID(el, 'Table.ColumnEditor.Text.HighlightLinks').last().find('input')
         .simulate('change', { target: { checked: true } });
     });
   });
diff --git a/client/cypress/integration/visualizations/choropleth_spec.js b/client/cypress/integration/visualizations/choropleth_spec.js
index 4668ba2d36..d4b1a7e58e 100644
--- a/client/cypress/integration/visualizations/choropleth_spec.js
+++ b/client/cypress/integration/visualizations/choropleth_spec.js
@@ -76,7 +76,9 @@ describe('Choropleth', () => {
       Choropleth.Editor.LegendPosition.TopRight
     `);
 
-    cy.getByTestId('Choropleth.Editor.LegendTextAlignment.Left').check({ force: true });
+    cy.getByTestId('Choropleth.Editor.LegendTextAlignment')
+      .find('[data-test="TextAlignmentSelect.Left"]')
+      .check({ force: true });
 
     // Wait for proper initialization of visualization
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting