[7.x] [ML] Fix functional tests for index based Data Visualizer (#86071…

…) (#86408) Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 18, 2020 · 7fba080 · 7fba080
1 parent e86d30d
commit 7fba080
Show file tree

Hide file tree

Showing 13 changed files with 388 additions and 461 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx b/x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx
@@ -84,6 +84,7 @@ export const MultiSelectPicker: FC<{
 
   const button = (
     <EuiFilterButton
+      data-test-subj={`${dataTestSubj}-button`}
       iconType="arrowDown"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
@@ -98,32 +99,41 @@ export const MultiSelectPicker: FC<{
   return (
     <EuiFilterGroup data-test-subj={dataTestSubj}>
       <EuiPopover
+        data-test-subj={`${dataTestSubj}-popover`}
         id="popoverExampleMultiSelect"
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         panelPaddingSize="none"
       >
         <EuiPopoverTitle paddingSize="s">
-          <EuiFieldSearch compressed onChange={(e) => setSearchTerm(e.target.value)} />
+          <EuiFieldSearch
+            compressed
+            onChange={(e) => setSearchTerm(e.target.value)}
+            data-test-subj={`${dataTestSubj}-searchInput`}
+          />
         </EuiPopoverTitle>
         <div style={{ maxHeight: 250, overflow: 'auto' }}>
           {Array.isArray(items) && items.length > 0 ? (
-            items.map((item, index) => (
-              <EuiFilterSelectItem
-                checked={
-                  checkedOptions &&
-                  checkedOptions.findIndex((fieldValue) => fieldValue === item.value) > -1
-                    ? 'on'
-                    : undefined
-                }
-                key={index}
-                onClick={() => handleOnChange(index)}
-                style={{ flexDirection: 'row' }}
-              >
-                {item.name ?? item.value}
-              </EuiFilterSelectItem>
-            ))
+            items.map((item, index) => {
+              const checked =
+                checkedOptions &&
+                checkedOptions.findIndex((fieldValue) => fieldValue === item.value) > -1;
+
+              return (
+                <EuiFilterSelectItem
+                  checked={checked ? 'on' : undefined}
+                  key={index}
+                  onClick={() => handleOnChange(index)}
+                  style={{ flexDirection: 'row' }}
+                  data-test-subj={`${dataTestSubj}-option-${item.value}${
+                    checked ? '-checked' : ''
+                  }`}
+                >
+                  {item.name ?? item.value}
+                </EuiFilterSelectItem>
+              );
+            })
           ) : (
             <NoFilterItems />
           )}

diff --git a/...izer/index_based/components/field_data_card/document_count_chart/document_count_chart.tsx b/...izer/index_based/components/field_data_card/document_count_chart/document_count_chart.tsx
@@ -52,7 +52,7 @@ export const DocumentCountChart: FC<Props> = ({
   const dateFormatter = niceTimeFormatter([timeRangeEarliest, timeRangeLatest]);
 
   return (
-    <div style={{ width: width ?? '100%' }} data-test-subj="mlFieldDataCardDocumentCountChart">
+    <div style={{ width: width ?? '100%' }} data-test-subj="mlFieldDataDocumentCountChart">
       <Chart
         size={{
           width: '100%',

diff --git a/...ion/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx b/...ion/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
@@ -36,7 +36,7 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
   });
 
   return (
-    <div data-test-subj="mlFieldDataCardExamplesList">
+    <div data-test-subj="mlFieldDataExamplesList">
       <ExpandedRowFieldHeader>
         <FormattedMessage
           id="xpack.ml.fieldDataCard.examplesList.title"

diff --git a/..._based/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx b/..._based/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx
@@ -79,7 +79,7 @@ export const MetricDistributionChart: FC<Props> = ({
   };
 
   return (
-    <div data-test-subj="mlFieldDataCardMetricDistributionChart">
+    <div data-test-subj="mlFieldDataMetricDistributionChart">
       <Chart size={{ width, height }}>
         <Settings
           theme={{

diff --git a/...plication/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx b/...plication/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx
@@ -46,7 +46,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
   } = stats;
   const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
   return (
-    <div data-test-subj="mlFieldDataCardTopValues">
+    <div data-test-subj="mlFieldDataTopValues">
       {Array.isArray(topValues) &&
         topValues.map((value: any) => (
           <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
@@ -64,7 +64,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
                 </EuiText>
               </EuiToolTip>
             </EuiFlexItem>
-            <EuiFlexItem data-test-subj="mlFieldDataCardTopValueBar">
+            <EuiFlexItem data-test-subj="mlFieldDataTopValueBar">
               <EuiProgress value={value.doc_count} max={progressBarMax} color={barColor} size="m" />
             </EuiFlexItem>
             <EuiFlexItem

diff --git a/...cation/datavisualizer/stats_datagrid/components/field_data_row/number_content_preview.tsx b/...cation/datavisualizer/stats_datagrid/components/field_data_row/number_content_preview.tsx
@@ -23,7 +23,7 @@ export const NumberContentPreview: FC<FieldDataCardProps> = ({ config }) => {
   const defaultChartData: MetricDistributionChartData[] = [];
   const [distributionChartData, setDistributionChartData] = useState(defaultChartData);
   const [legendText, setLegendText] = useState<{ min: number; max: number } | undefined>();
-  const dataTestSubj = fieldName;
+  const dataTestSubj = `mlDataGridChart-${fieldName}`;
   useEffect(() => {
     const chartData = buildChartDataFromStats(stats, METRIC_DISTRIBUTION_CHART_WIDTH);
     if (

diff --git a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/expanded_row.tsx b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/expanded_row.tsx
@@ -60,7 +60,7 @@ export const DataVisualizerFieldExpandedRow = ({ item }: { item: FieldVisConfig
   return (
     <div
       className="mlDataVisualizerFieldExpandedRow"
-      data-test-subj={`mlDataVisualizerFieldExpandedRow ${fieldName} ${type}`}
+      data-test-subj={`mlDataVisualizerFieldExpandedRow-${fieldName}`}
     >
       {loading === true ? <LoadingIndicator /> : getCardContent()}
     </div>

diff --git a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/stats_datagrid.tsx b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/stats_datagrid.tsx
@@ -112,7 +112,7 @@ export const DataVisualizerDataGrid = ({
         const direction = expandedRowItemIds.includes(item.fieldName) ? 'arrowUp' : 'arrowDown';
         return (
           <EuiButtonIcon
-            data-test-subj={`mlDataVisualizerToggleDetails ${item.fieldName} ${direction}`}
+            data-test-subj={`mlDataVisualizerDetailsToggle-${item.fieldName}-${direction}`}
             onClick={() => toggleDetails(item)}
             aria-label={
               expandedRowItemIds.includes(item.fieldName)