Add test IDs to components for integ tests (#183)

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Mar 1, 2022 · 53a0f4f · 53a0f4f
1 parent 811263a
commit 53a0f4f
Show file tree

Hide file tree

Showing 57 changed files with 339 additions and 131 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -20,7 +20,7 @@ import {
   EuiTitle,
   EuiSpacer,
 } from '@elastic/eui';
-import { isEmpty } from 'lodash';
+import { isEmpty, get } from 'lodash';
 
 type ContentPanelProps = {
   // keep title string part for backwards compatibility
@@ -39,96 +39,109 @@ type ContentPanelProps = {
   children: React.ReactNode | React.ReactNode[];
   contentPanelClassName?: string;
   hideBody?: boolean;
+  titleDataTestSubj?: string;
 };
 
-const ContentPanel = (props: ContentPanelProps) => (
-  <EuiPanel
-    style={{ padding: '20px', ...props.panelStyles }}
-    className={props.contentPanelClassName}
-    betaBadgeLabel={props.badgeLabel}
-  >
-    <EuiFlexGroup
-      style={{ padding: '0px', ...props.titleContainerStyles }}
-      justifyContent="spaceBetween"
-      alignItems="center"
+const ContentPanel = (props: ContentPanelProps) => {
+  const titleDataTestSubj = get(
+    props,
+    'titleDataTestSubj',
+    'contentPanelTitle'
+  );
+  return (
+    <EuiPanel
+      style={{ padding: '20px', ...props.panelStyles }}
+      className={props.contentPanelClassName}
+      betaBadgeLabel={props.badgeLabel}
     >
-      <EuiFlexItem>
-        {typeof props.title === 'string' ? (
-          <EuiTitle
-            size={props.titleSize || 's'}
-            className={props.titleClassName}
-          >
-            <h3>{props.title}</h3>
-          </EuiTitle>
-        ) : (
-          <EuiFlexGroup justifyContent="flexStart" alignItems="center">
-            {Array.isArray(props.title) ? (
-              props.title.map(
-                (titleComponent: React.ReactNode, idx: number) => (
-                  <EuiFlexItem grow={false} key={idx}>
-                    {titleComponent}
+      <EuiFlexGroup
+        style={{ padding: '0px', ...props.titleContainerStyles }}
+        justifyContent="spaceBetween"
+        alignItems="center"
+      >
+        <EuiFlexItem>
+          {typeof props.title === 'string' ? (
+            <EuiTitle
+              data-test-subj={titleDataTestSubj}
+              size={props.titleSize || 's'}
+              className={props.titleClassName}
+            >
+              <h3>{props.title}</h3>
+            </EuiTitle>
+          ) : (
+            <EuiFlexGroup
+              data-test-subj={titleDataTestSubj}
+              justifyContent="flexStart"
+              alignItems="center"
+            >
+              {Array.isArray(props.title) ? (
+                props.title.map(
+                  (titleComponent: React.ReactNode, idx: number) => (
+                    <EuiFlexItem grow={false} key={idx}>
+                      {titleComponent}
+                    </EuiFlexItem>
+                  )
+                )
+              ) : (
+                <EuiFlexItem>{props.title}</EuiFlexItem>
+              )}
+            </EuiFlexGroup>
+          )}
+          <EuiFlexGroup>
+            {Array.isArray(props.subTitle) ? (
+              props.subTitle.map(
+                (subTitleComponent: React.ReactNode, idx: number) => (
+                  <EuiFlexItem
+                    grow={false}
+                    key={idx}
+                    className="content-panel-subTitle"
+                    style={{ lineHeight: 'normal', maxWidth: '75%' }}
+                  >
+                    {subTitleComponent}
                   </EuiFlexItem>
                 )
               )
             ) : (
-              <EuiFlexItem>{props.title}</EuiFlexItem>
+              <EuiFlexItem
+                className="content-panel-subTitle"
+                style={{ lineHeight: 'normal', maxWidth: '75%' }}
+              >
+                {props.subTitle}
+              </EuiFlexItem>
             )}
           </EuiFlexGroup>
-        )}
-        <EuiFlexGroup>
-          {Array.isArray(props.subTitle) ? (
-            props.subTitle.map(
-              (subTitleComponent: React.ReactNode, idx: number) => (
-                <EuiFlexItem
-                  grow={false}
-                  key={idx}
-                  className="content-panel-subTitle"
-                  style={{ lineHeight: 'normal', maxWidth: '75%' }}
-                >
-                  {subTitleComponent}
-                </EuiFlexItem>
-              )
-            )
-          ) : (
-            <EuiFlexItem
-              className="content-panel-subTitle"
-              style={{ lineHeight: 'normal', maxWidth: '75%' }}
-            >
-              {props.subTitle}
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </EuiFlexItem>
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup
-          justifyContent="spaceBetween"
-          alignItems="center"
-          gutterSize="m"
-        >
-          {Array.isArray(props.actions) ? (
-            props.actions.map((action: React.ReactNode, idx: number) => (
-              <EuiFlexItem key={idx}>{action}</EuiFlexItem>
-            ))
-          ) : (
-            <EuiFlexItem>{props.actions}</EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    {!isEmpty(props.actions) ? <EuiSpacer size="s" /> : null}
-    {props.title != '' && props.hideBody !== true ? (
-      <div>
-        <EuiHorizontalRule
-          margin="s"
-          className={props.horizontalRuleClassName}
-        />
-        <div style={{ padding: '10px 0px', ...props.bodyStyles }}>
-          {props.children}
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            justifyContent="spaceBetween"
+            alignItems="center"
+            gutterSize="m"
+          >
+            {Array.isArray(props.actions) ? (
+              props.actions.map((action: React.ReactNode, idx: number) => (
+                <EuiFlexItem key={idx}>{action}</EuiFlexItem>
+              ))
+            ) : (
+              <EuiFlexItem>{props.actions}</EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {!isEmpty(props.actions) ? <EuiSpacer size="s" /> : null}
+      {props.title != '' && props.hideBody !== true ? (
+        <div>
+          <EuiHorizontalRule
+            margin="s"
+            className={props.horizontalRuleClassName}
+          />
+          <div style={{ padding: '10px 0px', ...props.bodyStyles }}>
+            {props.children}
+          </div>
         </div>
-      </div>
-    ) : null}
-  </EuiPanel>
-);
+      ) : null}
+    </EuiPanel>
+  );
+};
 
 export default ContentPanel;
diff --git a/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap b/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     >
       <h3
         class="euiTitle euiTitle--small"
+        data-test-subj="contentPanelTitle"
       >
         Testing
       </h3>

diff --git a/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx b/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx
@@ -156,6 +156,7 @@ export const FeatureChart = (props: FeatureChartProps) => {
           ? props.feature.featureName
           : `${props.feature.featureName} (disabled)`
       }
+      titleDataTestSubj="featureNameHeader"
       bodyStyles={
         !props.feature.featureEnabled
           ? { backgroundColor: getDisabledChartBackground() }

diff --git a/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx b/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx
@@ -357,6 +357,7 @@ export const AnomalyDetailsChart = React.memo(
         <EuiFlexGroup style={{ padding: '20px' }}>
           <EuiFlexItem>
             <EuiStat
+              data-test-subj="anomalyOccurrenceStat"
               title={isLoading ? '-' : anomalySummary.anomalyOccurrence}
               description={getAnomalyOccurrenceWording(props.isNotSample)}
               titleSize="s"

diff --git a/public/pages/ConfigureModel/components/AggregationSelector/AggregationSelector.tsx b/public/pages/ConfigureModel/components/AggregationSelector/AggregationSelector.tsx
@@ -87,6 +87,7 @@ export const AggregationSelector = (props: AggregationSelectorProps) => {
             error={getError(field.name, form)}
           >
             <EuiComboBox
+              data-test-subj={`featureFieldTextInput-${props.index}`}
               placeholder="Select field"
               singleSelection={{ asPlainText: true }}
               selectedOptions={field.value}

diff --git a/.../components/AggregationSelector/__tests__/__snapshots__/AggregationSelector.test.tsx.snap b/.../components/AggregationSelector/__tests__/__snapshots__/AggregationSelector.test.tsx.snap
@@ -109,6 +109,7 @@ exports[`<AggregationSelector /> spec Empty results renders component with aggre
         aria-expanded="false"
         aria-haspopup="listbox"
         class="euiComboBox"
+        data-test-subj="featureFieldTextInput-undefined"
         name="featureList.undefined.aggregationOf"
         role="combobox"
       >

diff --git a/...nfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap b/...nfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`<CategoryField /> spec renders the component when disabled 1`] = `
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="contentPanelTitle"
           >
             <div
               class="euiFlexItem"
@@ -135,6 +136,7 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="contentPanelTitle"
           >
             <div
               class="euiFlexItem"

diff --git a/public/pages/ConfigureModel/components/FeatureAccordion/FeatureAccordion.tsx b/public/pages/ConfigureModel/components/FeatureAccordion/FeatureAccordion.tsx
@@ -132,6 +132,7 @@ export const FeatureAccordion = (props: FeatureAccordionProps) => {
             error={getError(field.name, form)}
           >
             <EuiFieldText
+              data-test-subj={`featureNameTextInput-${props.index}`}
               name={`featureList.${props.index}.featureName`}
               placeholder="Enter feature name"
               value={field.value ? field.value : props.feature.featureName}

diff --git a/public/pages/ConfigureModel/containers/ConfigureModel.tsx b/public/pages/ConfigureModel/containers/ConfigureModel.tsx
@@ -229,7 +229,10 @@ export function ConfigureModel(props: ConfigureModelProps) {
             <EuiPageBody>
               <EuiPageHeader>
                 <EuiPageHeaderSection>
-                  <EuiTitle size="l">
+                  <EuiTitle
+                    size="l"
+                    data-test-subj="configureOrEditModelConfigurationTitle"
+                  >
                     <h1>
                       {props.isEdit
                         ? 'Edit model configuration'

diff --git a/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap b/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
       >
         <h1
           class="euiTitle euiTitle--large"
+          data-test-subj="configureOrEditModelConfigurationTitle"
         >
           Configure model
            
@@ -65,6 +66,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
         >
           <h3
             class="euiTitle euiTitle--small"
+            data-test-subj="contentPanelTitle"
           >
             Features
           </h3>
@@ -229,6 +231,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                             <input
                               aria-describedby="random_html_id-help"
                               class="euiFieldText"
+                              data-test-subj="featureNameTextInput-0"
                               id="random_html_id"
                               name="featureList.0.featureName"
                               placeholder="Enter feature name"
@@ -455,6 +458,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                           aria-expanded="false"
                           aria-haspopup="listbox"
                           class="euiComboBox"
+                          data-test-subj="featureFieldTextInput-0"
                           name="featureList.0.aggregationOf"
                           role="combobox"
                         >
@@ -576,6 +580,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="contentPanelTitle"
           >
             <div
               class="euiFlexItem"
@@ -715,6 +720,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="contentPanelTitle"
           >
             <div
               class="euiFlexItem"
@@ -780,6 +786,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
         >
           <h3
             class="euiTitle euiTitle--small"
+            data-test-subj="contentPanelTitle"
           >
             Sample anomalies
           </h3>
@@ -919,6 +926,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
       >
         <h1
           class="euiTitle euiTitle--large"
+          data-test-subj="configureOrEditModelConfigurationTitle"
         >
           Edit model configuration
            
@@ -972,6 +980,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
         >
           <h3
             class="euiTitle euiTitle--small"
+            data-test-subj="contentPanelTitle"
           >
             Features
           </h3>
@@ -1145,6 +1154,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                             <input
                               aria-describedby="random_html_id-help"
                               class="euiFieldText"
+                              data-test-subj="featureNameTextInput-0"
                               id="random_html_id"
                               name="featureList.0.featureName"
                               placeholder="Enter feature name"
@@ -1381,6 +1391,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
                           aria-expanded="false"
                           aria-haspopup="listbox"
                           class="euiComboBox"
+                          data-test-subj="featureFieldTextInput-0"
                           name="featureList.0.aggregationOf"
                           role="combobox"
                         >
@@ -1507,6 +1518,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="contentPanelTitle"
           >
             <div
               class="euiFlexItem"
@@ -1682,6 +1694,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="contentPanelTitle"
           >
             <div
               class="euiFlexItem"

diff --git a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx b/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
@@ -119,6 +119,7 @@ export const AnomaliesDistributionChart = (
 
   return (
     <ContentPanel
+      titleDataTestSubj="dashboardSunburstChartHeader"
       title="Anomalies by index and detector"
       titleSize="s"
       subTitle={`The inner circle shows anomaly distribution by index.
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = ` @@
         >
           <h3
             class="euiTitle euiTitle--small"
+            data-test-subj="contentPanelTitle"
           >
             Testing
           </h3>
@@ Expand Down @@