Skip to content

Commit 53a0f4f

Browse files
ohltylerohltyler
authored
Add test IDs to components for integ tests (opensearch-project#183)
Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
1 parent 811263a commit 53a0f4f

File tree

57 files changed

+339
-131
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+339
-131
lines changed

‎public/components/ContentPanel/ContentPanel.tsx

+94-81
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
EuiTitle,
2121
EuiSpacer,
2222
} from '@elastic/eui';
23-
import { isEmpty } from 'lodash';
23+
import { isEmpty, get } from 'lodash';
2424

2525
type ContentPanelProps = {
2626
// keep title string part for backwards compatibility
@@ -39,96 +39,109 @@ type ContentPanelProps = {
3939
children: React.ReactNode | React.ReactNode[];
4040
contentPanelClassName?: string;
4141
hideBody?: boolean;
42+
titleDataTestSubj?: string;
4243
};
4344

44-
const ContentPanel = (props: ContentPanelProps) => (
45-
<EuiPanel
46-
style={{ padding: '20px', ...props.panelStyles }}
47-
className={props.contentPanelClassName}
48-
betaBadgeLabel={props.badgeLabel}
49-
>
50-
<EuiFlexGroup
51-
style={{ padding: '0px', ...props.titleContainerStyles }}
52-
justifyContent="spaceBetween"
53-
alignItems="center"
45+
const ContentPanel = (props: ContentPanelProps) => {
46+
const titleDataTestSubj = get(
47+
props,
48+
'titleDataTestSubj',
49+
'contentPanelTitle'
50+
);
51+
return (
52+
<EuiPanel
53+
style={{ padding: '20px', ...props.panelStyles }}
54+
className={props.contentPanelClassName}
55+
betaBadgeLabel={props.badgeLabel}
5456
>
55-
<EuiFlexItem>
56-
{typeof props.title === 'string' ? (
57-
<EuiTitle
58-
size={props.titleSize || 's'}
59-
className={props.titleClassName}
60-
>
61-
<h3>{props.title}</h3>
62-
</EuiTitle>
63-
) : (
64-
<EuiFlexGroup justifyContent="flexStart" alignItems="center">
65-
{Array.isArray(props.title) ? (
66-
props.title.map(
67-
(titleComponent: React.ReactNode, idx: number) => (
68-
<EuiFlexItem grow={false} key={idx}>
69-
{titleComponent}
57+
<EuiFlexGroup
58+
style={{ padding: '0px', ...props.titleContainerStyles }}
59+
justifyContent="spaceBetween"
60+
alignItems="center"
61+
>
62+
<EuiFlexItem>
63+
{typeof props.title === 'string' ? (
64+
<EuiTitle
65+
data-test-subj={titleDataTestSubj}
66+
size={props.titleSize || 's'}
67+
className={props.titleClassName}
68+
>
69+
<h3>{props.title}</h3>
70+
</EuiTitle>
71+
) : (
72+
<EuiFlexGroup
73+
data-test-subj={titleDataTestSubj}
74+
justifyContent="flexStart"
75+
alignItems="center"
76+
>
77+
{Array.isArray(props.title) ? (
78+
props.title.map(
79+
(titleComponent: React.ReactNode, idx: number) => (
80+
<EuiFlexItem grow={false} key={idx}>
81+
{titleComponent}
82+
</EuiFlexItem>
83+
)
84+
)
85+
) : (
86+
<EuiFlexItem>{props.title}</EuiFlexItem>
87+
)}
88+
</EuiFlexGroup>
89+
)}
90+
<EuiFlexGroup>
91+
{Array.isArray(props.subTitle) ? (
92+
props.subTitle.map(
93+
(subTitleComponent: React.ReactNode, idx: number) => (
94+
<EuiFlexItem
95+
grow={false}
96+
key={idx}
97+
className="content-panel-subTitle"
98+
style={{ lineHeight: 'normal', maxWidth: '75%' }}
99+
>
100+
{subTitleComponent}
70101
</EuiFlexItem>
71102
)
72103
)
73104
) : (
74-
<EuiFlexItem>{props.title}</EuiFlexItem>
105+
<EuiFlexItem
106+
className="content-panel-subTitle"
107+
style={{ lineHeight: 'normal', maxWidth: '75%' }}
108+
>
109+
{props.subTitle}
110+
</EuiFlexItem>
75111
)}
76112
</EuiFlexGroup>
77-
)}
78-
<EuiFlexGroup>
79-
{Array.isArray(props.subTitle) ? (
80-
props.subTitle.map(
81-
(subTitleComponent: React.ReactNode, idx: number) => (
82-
<EuiFlexItem
83-
grow={false}
84-
key={idx}
85-
className="content-panel-subTitle"
86-
style={{ lineHeight: 'normal', maxWidth: '75%' }}
87-
>
88-
{subTitleComponent}
89-
</EuiFlexItem>
90-
)
91-
)
92-
) : (
93-
<EuiFlexItem
94-
className="content-panel-subTitle"
95-
style={{ lineHeight: 'normal', maxWidth: '75%' }}
96-
>
97-
{props.subTitle}
98-
</EuiFlexItem>
99-
)}
100-
</EuiFlexGroup>
101-
</EuiFlexItem>
113+
</EuiFlexItem>
102114

103-
<EuiFlexItem grow={false}>
104-
<EuiFlexGroup
105-
justifyContent="spaceBetween"
106-
alignItems="center"
107-
gutterSize="m"
108-
>
109-
{Array.isArray(props.actions) ? (
110-
props.actions.map((action: React.ReactNode, idx: number) => (
111-
<EuiFlexItem key={idx}>{action}</EuiFlexItem>
112-
))
113-
) : (
114-
<EuiFlexItem>{props.actions}</EuiFlexItem>
115-
)}
116-
</EuiFlexGroup>
117-
</EuiFlexItem>
118-
</EuiFlexGroup>
119-
{!isEmpty(props.actions) ? <EuiSpacer size="s" /> : null}
120-
{props.title != '' && props.hideBody !== true ? (
121-
<div>
122-
<EuiHorizontalRule
123-
margin="s"
124-
className={props.horizontalRuleClassName}
125-
/>
126-
<div style={{ padding: '10px 0px', ...props.bodyStyles }}>
127-
{props.children}
115+
<EuiFlexItem grow={false}>
116+
<EuiFlexGroup
117+
justifyContent="spaceBetween"
118+
alignItems="center"
119+
gutterSize="m"
120+
>
121+
{Array.isArray(props.actions) ? (
122+
props.actions.map((action: React.ReactNode, idx: number) => (
123+
<EuiFlexItem key={idx}>{action}</EuiFlexItem>
124+
))
125+
) : (
126+
<EuiFlexItem>{props.actions}</EuiFlexItem>
127+
)}
128+
</EuiFlexGroup>
129+
</EuiFlexItem>
130+
</EuiFlexGroup>
131+
{!isEmpty(props.actions) ? <EuiSpacer size="s" /> : null}
132+
{props.title != '' && props.hideBody !== true ? (
133+
<div>
134+
<EuiHorizontalRule
135+
margin="s"
136+
className={props.horizontalRuleClassName}
137+
/>
138+
<div style={{ padding: '10px 0px', ...props.bodyStyles }}>
139+
{props.children}
140+
</div>
128141
</div>
129-
</div>
130-
) : null}
131-
</EuiPanel>
132-
);
142+
) : null}
143+
</EuiPanel>
144+
);
145+
};
133146

134147
export default ContentPanel;

‎public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
1414
>
1515
<h3
1616
class="euiTitle euiTitle--small"
17+
data-test-subj="contentPanelTitle"
1718
>
1819
Testing
1920
</h3>

‎public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ export const FeatureChart = (props: FeatureChartProps) => {
156156
? props.feature.featureName
157157
: `${props.feature.featureName} (disabled)`
158158
}
159+
titleDataTestSubj="featureNameHeader"
159160
bodyStyles={
160161
!props.feature.featureEnabled
161162
? { backgroundColor: getDisabledChartBackground() }

‎public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,7 @@ export const AnomalyDetailsChart = React.memo(
357357
<EuiFlexGroup style={{ padding: '20px' }}>
358358
<EuiFlexItem>
359359
<EuiStat
360+
data-test-subj="anomalyOccurrenceStat"
360361
title={isLoading ? '-' : anomalySummary.anomalyOccurrence}
361362
description={getAnomalyOccurrenceWording(props.isNotSample)}
362363
titleSize="s"

‎public/pages/ConfigureModel/components/AggregationSelector/AggregationSelector.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export const AggregationSelector = (props: AggregationSelectorProps) => {
8787
error={getError(field.name, form)}
8888
>
8989
<EuiComboBox
90+
data-test-subj={`featureFieldTextInput-${props.index}`}
9091
placeholder="Select field"
9192
singleSelection={{ asPlainText: true }}
9293
selectedOptions={field.value}

‎public/pages/ConfigureModel/components/AggregationSelector/__tests__/__snapshots__/AggregationSelector.test.tsx.snap

+1
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ exports[`<AggregationSelector /> spec Empty results renders component with aggre
109109
aria-expanded="false"
110110
aria-haspopup="listbox"
111111
class="euiComboBox"
112+
data-test-subj="featureFieldTextInput-undefined"
112113
name="featureList.undefined.aggregationOf"
113114
role="combobox"
114115
>

‎public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ exports[`<CategoryField /> spec renders the component when disabled 1`] = `
1818
>
1919
<div
2020
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
21+
data-test-subj="contentPanelTitle"
2122
>
2223
<div
2324
class="euiFlexItem"
@@ -135,6 +136,7 @@ exports[`<CategoryField /> spec renders the component when enabled 1`] = `
135136
>
136137
<div
137138
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
139+
data-test-subj="contentPanelTitle"
138140
>
139141
<div
140142
class="euiFlexItem"

‎public/pages/ConfigureModel/components/FeatureAccordion/FeatureAccordion.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ export const FeatureAccordion = (props: FeatureAccordionProps) => {
132132
error={getError(field.name, form)}
133133
>
134134
<EuiFieldText
135+
data-test-subj={`featureNameTextInput-${props.index}`}
135136
name={`featureList.${props.index}.featureName`}
136137
placeholder="Enter feature name"
137138
value={field.value ? field.value : props.feature.featureName}

‎public/pages/ConfigureModel/containers/ConfigureModel.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,10 @@ export function ConfigureModel(props: ConfigureModelProps) {
229229
<EuiPageBody>
230230
<EuiPageHeader>
231231
<EuiPageHeaderSection>
232-
<EuiTitle size="l">
232+
<EuiTitle
233+
size="l"
234+
data-test-subj="configureOrEditModelConfigurationTitle"
235+
>
233236
<h1>
234237
{props.isEdit
235238
? 'Edit model configuration'

‎public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap

+13
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
1616
>
1717
<h1
1818
class="euiTitle euiTitle--large"
19+
data-test-subj="configureOrEditModelConfigurationTitle"
1920
>
2021
Configure model
2122
@@ -65,6 +66,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
6566
>
6667
<h3
6768
class="euiTitle euiTitle--small"
69+
data-test-subj="contentPanelTitle"
6870
>
6971
Features
7072
</h3>
@@ -229,6 +231,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
229231
<input
230232
aria-describedby="random_html_id-help"
231233
class="euiFieldText"
234+
data-test-subj="featureNameTextInput-0"
232235
id="random_html_id"
233236
name="featureList.0.featureName"
234237
placeholder="Enter feature name"
@@ -455,6 +458,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
455458
aria-expanded="false"
456459
aria-haspopup="listbox"
457460
class="euiComboBox"
461+
data-test-subj="featureFieldTextInput-0"
458462
name="featureList.0.aggregationOf"
459463
role="combobox"
460464
>
@@ -576,6 +580,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
576580
>
577581
<div
578582
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
583+
data-test-subj="contentPanelTitle"
579584
>
580585
<div
581586
class="euiFlexItem"
@@ -715,6 +720,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
715720
>
716721
<div
717722
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
723+
data-test-subj="contentPanelTitle"
718724
>
719725
<div
720726
class="euiFlexItem"
@@ -780,6 +786,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
780786
>
781787
<h3
782788
class="euiTitle euiTitle--small"
789+
data-test-subj="contentPanelTitle"
783790
>
784791
Sample anomalies
785792
</h3>
@@ -919,6 +926,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
919926
>
920927
<h1
921928
class="euiTitle euiTitle--large"
929+
data-test-subj="configureOrEditModelConfigurationTitle"
922930
>
923931
Edit model configuration
924932
@@ -972,6 +980,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
972980
>
973981
<h3
974982
class="euiTitle euiTitle--small"
983+
data-test-subj="contentPanelTitle"
975984
>
976985
Features
977986
</h3>
@@ -1145,6 +1154,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
11451154
<input
11461155
aria-describedby="random_html_id-help"
11471156
class="euiFieldText"
1157+
data-test-subj="featureNameTextInput-0"
11481158
id="random_html_id"
11491159
name="featureList.0.featureName"
11501160
placeholder="Enter feature name"
@@ -1381,6 +1391,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
13811391
aria-expanded="false"
13821392
aria-haspopup="listbox"
13831393
class="euiComboBox"
1394+
data-test-subj="featureFieldTextInput-0"
13841395
name="featureList.0.aggregationOf"
13851396
role="combobox"
13861397
>
@@ -1507,6 +1518,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
15071518
>
15081519
<div
15091520
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
1521+
data-test-subj="contentPanelTitle"
15101522
>
15111523
<div
15121524
class="euiFlexItem"
@@ -1682,6 +1694,7 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
16821694
>
16831695
<div
16841696
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
1697+
data-test-subj="contentPanelTitle"
16851698
>
16861699
<div
16871700
class="euiFlexItem"

‎public/pages/Dashboard/Components/AnomaliesDistribution.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export const AnomaliesDistributionChart = (
119119

120120
return (
121121
<ContentPanel
122+
titleDataTestSubj="dashboardSunburstChartHeader"
122123
title="Anomalies by index and detector"
123124
titleSize="s"
124125
subTitle={`The inner circle shows anomaly distribution by index.

0 commit comments

Comments
 (0)