[ML] Adds functional tests for the index data visualizer card contents

elastic · Nov 11, 2020 · 401420f · 401420f
1 parent 7e24ae6
commit 401420f
Show file tree

Hide file tree

Showing 12 changed files with 363 additions and 78 deletions.
diff --git a/...tion/datavisualizer/index_based/components/field_data_card/content_types/date_content.tsx b/...tion/datavisualizer/index_based/components/field_data_card/content_types/date_content.tsx
@@ -25,7 +25,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
   return (
     <div className="mlFieldDataCard__stats">
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
           <EuiIcon type="document" />
           &nbsp;
           <FormattedMessage
@@ -41,7 +41,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
 
       <EuiSpacer size="m" />
 
-      <div>
+      <div data-test-subj="mlFieldDataCardEarliest">
         <FormattedMessage
           id="xpack.ml.fieldDataCard.cardDate.earliestDescription"
           defaultMessage="earliest {earliestFormatted}"
@@ -53,7 +53,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
 
       <EuiSpacer size="s" />
 
-      <div>
+      <div data-test-subj="mlFieldDataCardLatest">
         <FormattedMessage
           id="xpack.ml.fieldDataCard.cardDate.latestDescription"
           defaultMessage="latest {latestFormatted}"

diff --git a/...n/datavisualizer/index_based/components/field_data_card/content_types/keyword_content.tsx b/...n/datavisualizer/index_based/components/field_data_card/content_types/keyword_content.tsx
@@ -24,7 +24,7 @@ export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
   return (
     <div className="mlFieldDataCard__stats">
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
           <EuiIcon type="document" />
           &nbsp;
           <FormattedMessage
@@ -41,7 +41,7 @@ export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
       <EuiSpacer size="xs" />
 
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardCardinality">
           <EuiIcon type="database" />
           &nbsp;
           <FormattedMessage

diff --git a/...on/datavisualizer/index_based/components/field_data_card/content_types/number_content.tsx b/...on/datavisualizer/index_based/components/field_data_card/content_types/number_content.tsx
@@ -29,10 +29,12 @@ import {
 } from '../metric_distribution_chart';
 import { TopValues } from '../top_values';
 
-enum DETAILS_MODE {
-  DISTRIBUTION = 'distribution',
-  TOP_VALUES = 'top_values',
-}
+const DETAILS_MODE = {
+  DISTRIBUTION: 'distribution',
+  TOP_VALUES: 'top_values',
+} as const;
+
+type DetailsModeType = typeof DETAILS_MODE[keyof typeof DETAILS_MODE];
 
 const METRIC_DISTRIBUTION_CHART_WIDTH = 325;
 const METRIC_DISTRIBUTION_CHART_HEIGHT = 210;
@@ -76,7 +78,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
   return (
     <div className="mlFieldDataCard__stats">
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
           <EuiIcon type="document" />
           &nbsp;
           <FormattedMessage
@@ -91,7 +93,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
       </div>
       <EuiSpacer size="xs" />
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardCardinality">
           <EuiIcon type="database" />
           &nbsp;
           <FormattedMessage
@@ -131,28 +133,28 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexGroup gutterSize="xs" justifyContent="center">
-        <EuiFlexItem grow={1} className="eui-textTruncate">
+        <EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMin">
           <DisplayValue value={kibanaFieldFormat(min, fieldFormat)} />
         </EuiFlexItem>
-        <EuiFlexItem grow={1} className="eui-textTruncate">
+        <EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMedian">
           <DisplayValue value={kibanaFieldFormat(median, fieldFormat)} />
         </EuiFlexItem>
-        <EuiFlexItem grow={1} className="eui-textTruncate">
+        <EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMax">
           <DisplayValue value={kibanaFieldFormat(max, fieldFormat)} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiButtonGroup
         options={detailsOptions}
         idSelected={detailsMode}
-        onChange={(optionId) => setDetailsMode(optionId as DETAILS_MODE)}
+        onChange={(optionId) => setDetailsMode(optionId as DetailsModeType)}
         legend={i18n.translate(
           'xpack.ml.fieldDataCard.cardNumber.selectMetricDetailsDisplayAriaLabel',
           {
             defaultMessage: 'Select display option for metric details',
           }
         )}
-        data-test-subj="mlFieldDataCardNumberDetailsSelect"
+        data-test-subj="mlFieldDataCardDetailsSelect"
         isFullWidth={true}
         buttonSize="compressed"
       />

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
@@ -61,7 +61,7 @@ export const DocumentCountChart: FC<Props> = ({
   const EVENT_RATE_COLOR = themeName.euiColorVis2;
 
   return (
-    <div style={{ width, height }}>
+    <div style={{ width, height }} data-test-subj="mlFieldDataCardDocumentCountChart">
       <Chart>
         <Settings
           xDomain={xDomain}

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
@@ -31,7 +31,7 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
   });
 
   return (
-    <div>
+    <div data-test-subj="mlFieldDataCardExamplesList">
       <EuiTitle size="xxxs" className="mlFieldDataCard__valuesTitle">
         <span>
           <FormattedMessage

diff --git a/...lic/application/datavisualizer/index_based/components/field_data_card/field_data_card.tsx b/...lic/application/datavisualizer/index_based/components/field_data_card/field_data_card.tsx
@@ -76,7 +76,7 @@ export const FieldDataCard: FC<FieldDataCardProps> = ({ config }) => {
       hasShadow={false}
     >
       <FieldTitleBar card={config} />
-      <div className="mlFieldDataCard__content">
+      <div className="mlFieldDataCard__content" data-test-subj="mlFieldDataCardContent">
         {loading === true ? <LoadingIndicator /> : getCardContent()}
       </div>
     </EuiPanel>

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
@@ -72,7 +72,7 @@ export const MetricDistributionChart: FC<Props> = ({ width, height, chartData, f
   };
 
   return (
-    <div style={{ width, height }}>
+    <div style={{ width, height }} data-test-subj="mlFieldDataCardMetricDistributionChart">
       <Chart>
         <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
@@ -45,7 +45,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
   const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
 
   return (
-    <Fragment>
+    <div data-test-subj="mlFieldDataCardTopValues">
       {topValues.map((value: any) => (
         <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
           <EuiFlexItem grow={false} style={{ width: 100 }} className="eui-textTruncate">
@@ -55,7 +55,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
               </EuiText>
             </EuiToolTip>
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlFieldDataCardTopValueBar">
             <EuiProgress value={value.doc_count} max={progressBarMax} color={barColor} size="m" />
           </EuiFlexItem>
           <EuiFlexItem grow={false} style={{ width: 70 }} className="eui-textTruncate">
@@ -79,6 +79,6 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
           </EuiText>
         </Fragment>
       )}
-    </Fragment>
+    </div>
   );
 };
diff --git a/...ml/public/application/datavisualizer/index_based/components/search_panel/search_panel.tsx b/...ml/public/application/datavisualizer/index_based/components/search_panel/search_panel.tsx
@@ -48,16 +48,20 @@ const searchSizeOptions = [1000, 5000, 10000, 100000, -1].map((v) => {
     value: String(v),
     inputDisplay:
       v > 0 ? (
-        <FormattedMessage
-          id="xpack.ml.datavisualizer.searchPanel.sampleSizeOptionLabel"
-          defaultMessage="Sample size (per shard): {wrappedValue}"
-          values={{ wrappedValue: <b>{v}</b> }}
-        />
+        <div data-test-subj={`mlDataVisualizerShardSizeOption ${v}`}>
+          <FormattedMessage
+            id="xpack.ml.datavisualizer.searchPanel.sampleSizeOptionLabel"
+            defaultMessage="Sample size (per shard): {wrappedValue}"
+            values={{ wrappedValue: <b>{v}</b> }}
+          />
+        </div>
       ) : (
-        <FormattedMessage
-          id="xpack.ml.datavisualizer.searchPanel.allOptionLabel"
-          defaultMessage="Search all"
-        />
+        <div data-test-subj={`mlDataVisualizerShardSizeOption all`}>
+          <FormattedMessage
+            id="xpack.ml.datavisualizer.searchPanel.allOptionLabel"
+            defaultMessage="Search all"
+          />
+        </div>
       ),
   };
 });
@@ -174,10 +178,18 @@ export const SearchPanel: FC<Props> = ({
       <EuiFlexItem grow={false}>
         <EuiText size="s">
           <FormattedMessage
-            id="xpack.ml.datavisualizer.searchPanel.documentsPerShardLabel"
-            defaultMessage="Total documents: {wrappedTotalCount}"
+            id="xpack.ml.datavisualizer.searchPanel.totalDocCountLabel"
+            defaultMessage="Total documents: {strongTotalCount}"
             values={{
-              wrappedTotalCount: <b data-test-subj="mlDataVisualizerTotalDocCount">{totalCount}</b>,
+              strongTotalCount: (
+                <strong data-test-subj="mlDataVisualizerTotalDocCount">
+                  <FormattedMessage
+                    id="xpack.ml.datavisualizer.searchPanel.totalDocCountNumber"
+                    defaultMessage="{totalCount, plural, one {#} other {#}}"
+                    values={{ totalCount }}
+                  />
+                </strong>
+              ),
             }}
           />
         </EuiText>