We're testing a component with several EuiColorPicker component and assigned test ids like the following:
<EuiColorPicker
key={index}
secondaryInputDisplay="top"
color={color}
isInvalid={!isValidColor(color)}
showAlpha
compressed
data-test-subj={`my_test_id_${index}`}
/>When rendering and testing the component I've realized the my_test_id_${index} was not propagated, rather overridden:
<div class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor">
<div class="euiPopover__anchor">
<div class="euiFormControlLayout euiFormControlLayout--compressed">
<div class="euiFormControlLayout__childrenWrapper">
<div style="color: rgb(96, 146, 192);">
<div class="euiFormControlLayout euiFormControlLayout--compressed">
<div class="euiFormControlLayout__childrenWrapper">
<input type="text" class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed" autocomplete="off" data-test-subj="colorPickerAnchor" aria-label="Press the down key to open a popover containing color options" value="#6092C0">
<div class="euiFormControlLayoutIcons">
<span class="euiFormControlLayoutCustomIcon">...</span>
...Notice the data-test-subj="colorPickerAnchor" at the input level. I guess it's ok to have that test id assigned to the specific input, but there's no trace of the original test it.
We're testing a component with several
EuiColorPickercomponent and assigned test ids like the following:When rendering and testing the component I've realized the
my_test_id_${index}was not propagated, rather overridden:Notice the
data-test-subj="colorPickerAnchor"at the input level. I guess it's ok to have that test id assigned to the specific input, but there's no trace of the original test it.