From d46648f30361244ea48c0c046d6d8d7c2f8c4f45 Mon Sep 17 00:00:00 2001
From: marcoskolodny <marcoskolodny@gmail.com>
Date: Thu, 17 Oct 2024 16:40:14 +0200
Subject: [PATCH 1/5] add some test ids

---
 src/button.tsx              |  30 ++++++--
 src/card.tsx                | 132 ++++++++++++++++++++++++++++--------
 src/feedback.tsx            |  33 +++++++--
 src/fixed-footer-layout.tsx |   1 +
 src/icon-button.tsx         |   8 ++-
 src/list.tsx                |  34 ++++++++--
 src/utils/dom.tsx           |   5 +-
 7 files changed, 190 insertions(+), 53 deletions(-)

diff --git a/src/button.tsx b/src/button.tsx
index b3ae0b294a..f7fa2b9a52 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -176,6 +176,7 @@ const renderButtonContent = ({
                             alignItems: 'center',
                             marginRight: styles.iconMargin,
                         }}
+                        data-testid="startIcon"
                     >
                         <StartIcon size={defaultIconSize} color="currentColor" />
                     </div>
@@ -201,6 +202,7 @@ const renderButtonContent = ({
                             alignItems: 'center',
                             marginLeft: styles.iconMargin,
                         }}
+                        data-testid="endIcon"
                     >
                         <EndIcon size={defaultIconSize} color="currentColor" />
                     </div>
@@ -249,7 +251,11 @@ const renderButtonContent = ({
                         }}
                     />
                 )}
-                {loadingText ? <Box paddingLeft={8}>{loadingButtonElement}</Box> : null}
+                {loadingText ? (
+                    <Box paddingLeft={8} dataAttributes={{testid: 'loadingText'}}>
+                        {loadingButtonElement}
+                    </Box>
+                ) : null}
             </div>
         </>
     );
@@ -513,7 +519,7 @@ export const ButtonLink = React.forwardRef<
 >(({dataAttributes, className, ...props}, ref) => {
     return (
         <BaseButton
-            dataAttributes={{'component-name': 'ButtonLink', ...dataAttributes}}
+            dataAttributes={{'component-name': 'ButtonLink', testid: 'ButtonLink', ...dataAttributes}}
             className={classnames(className, {[styles.smallLink]: props.small})}
             {...props}
             ref={ref}
@@ -526,7 +532,11 @@ export const ButtonLinkDanger = React.forwardRef<TouchableElement, ButtonLinkPro
     ({dataAttributes, className, ...props}, ref) => {
         return (
             <BaseButton
-                dataAttributes={{'component-name': 'ButtonLinkDanger', ...dataAttributes}}
+                dataAttributes={{
+                    'component-name': 'ButtonLinkDanger',
+                    testid: 'ButtonLinkDanger',
+                    ...dataAttributes,
+                }}
                 className={classnames(className, {[styles.smallLink]: props.small})}
                 {...props}
                 withChevron={false}
@@ -541,7 +551,11 @@ export const ButtonPrimary = React.forwardRef<TouchableElement, ButtonProps>(
     ({dataAttributes, ...props}, ref) => {
         return (
             <BaseButton
-                dataAttributes={{'component-name': 'ButtonPrimary', ...dataAttributes}}
+                dataAttributes={{
+                    'component-name': 'ButtonPrimary',
+                    testid: 'ButtonPrimary',
+                    ...dataAttributes,
+                }}
                 {...props}
                 ref={ref}
                 buttonType="primary"
@@ -554,7 +568,11 @@ export const ButtonSecondary = React.forwardRef<TouchableElement, ButtonProps>(
     ({dataAttributes, ...props}, ref) => {
         return (
             <BaseButton
-                dataAttributes={{'component-name': 'ButtonSecondary', ...dataAttributes}}
+                dataAttributes={{
+                    'component-name': 'ButtonSecondary',
+                    testid: 'ButtonSecondary',
+                    ...dataAttributes,
+                }}
                 {...props}
                 ref={ref}
                 buttonType="secondary"
@@ -567,7 +585,7 @@ export const ButtonDanger = React.forwardRef<TouchableElement, ButtonProps>(
     ({dataAttributes, ...props}, ref) => {
         return (
             <BaseButton
-                dataAttributes={{'component-name': 'ButtonDanger', ...dataAttributes}}
+                dataAttributes={{'component-name': 'ButtonDanger', testid: 'ButtonDanger', ...dataAttributes}}
                 {...props}
                 ref={ref}
                 buttonType="danger"
diff --git a/src/card.tsx b/src/card.tsx
index 8dcb94fdc2..c0c50a78ea 100644
--- a/src/card.tsx
+++ b/src/card.tsx
@@ -158,7 +158,7 @@ export const CardActionsGroup = ({
                     zIndex: 3, // needed because images has zIndex 1 and touchable overlay has zIndex 2
                 }}
             >
-                <Inline space={16}>
+                <Inline space={16} dataAttributes={{testid: 'topActions'}}>
                     {finalActions.map((action, index) => {
                         if ('Icon' in action || 'checkedProps' in action) {
                             // action is a CardAction object
@@ -406,7 +406,7 @@ const CardContent = ({
             {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
             <div className={styles.flexColumn}>
                 {title && (
-                    <div style={{paddingBottom: subtitle || description ? 4 : 0}}>
+                    <div style={{paddingBottom: subtitle || description ? 4 : 0}} data-testid="title">
                         <Text
                             {...textProps.text4}
                             truncate={titleLinesMax}
@@ -420,19 +420,19 @@ const CardContent = ({
                 )}
                 {headline && (
                     // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                    <div ref={headlineRef} style={{order: -2, paddingBottom: 8}}>
+                    <div ref={headlineRef} style={{order: -2, paddingBottom: 8}} data-testid="headline">
                         {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
                     </div>
                 )}
                 {pretitle && (
-                    <div style={{order: -1, paddingBottom: 4}}>
+                    <div style={{order: -1, paddingBottom: 4}} data-testid="pretitle">
                         <Text2 truncate={pretitleLinesMax} as="div" regular hyphens="auto">
                             {pretitle}
                         </Text2>
                     </div>
                 )}
                 {subtitle && (
-                    <div style={{paddingBottom: description ? 4 : 0}}>
+                    <div style={{paddingBottom: description ? 4 : 0}} data-testid="subtitle">
                         <Text2 truncate={subtitleLinesMax} as="div" regular hyphens="auto">
                             {subtitle}
                         </Text2>
@@ -445,6 +445,7 @@ const CardContent = ({
                         style={{
                             paddingTop: pretitle || title || subtitle ? 4 : 0,
                         }}
+                        data-testid="description"
                     >
                         <Text2
                             truncate={descriptionLinesMax}
@@ -457,7 +458,11 @@ const CardContent = ({
                         </Text2>
                     </div>
                 )}
-                {extra && <div ref={extraRef}>{extra}</div>}
+                {extra && (
+                    <div ref={extraRef} data-testid="slot">
+                        {extra}
+                    </div>
+                )}
             </div>
 
             {(button || buttonLink) && (
@@ -560,7 +565,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
 
         return (
             <CardContainer
-                dataAttributes={{'component-name': 'MediaCard', ...dataAttributes}}
+                dataAttributes={{'component-name': 'MediaCard', testid: 'MediaCard', ...dataAttributes}}
                 ref={ref}
                 aria-label={isTouchable ? undefined : ariaLabelProp}
                 className={styles.touchableContainer}
@@ -602,6 +607,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                     style={applyCssVars({
                                         [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                     })}
+                                    data-testid="asset"
                                 >
                                     {asset}
                                 </div>
@@ -659,7 +665,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
         return (
             <CardContainer
                 ref={ref}
-                dataAttributes={{'component-name': 'NakedCard', ...dataAttributes}}
+                dataAttributes={{'component-name': 'NakedCard', testid: 'NakedCard', ...dataAttributes}}
                 aria-label={isTouchable ? undefined : ariaLabelProp}
                 className={isTouchable ? styles.touchableContainer : undefined}
             >
@@ -705,6 +711,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                 style={applyCssVars({
                                     [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                 })}
+                                data-testid="asset"
                             >
                                 {asset}
                             </div>
@@ -765,7 +772,11 @@ export const SmallNakedCard = React.forwardRef<HTMLDivElement, SmallNakedCardPro
         return (
             <CardContainer
                 ref={ref}
-                dataAttributes={{'component-name': 'SmallNakedCard', ...dataAttributes}}
+                dataAttributes={{
+                    'component-name': 'SmallNakedCard',
+                    testid: 'SmallNakedCard',
+                    ...dataAttributes,
+                }}
                 aria-label={isTouchable ? undefined : ariaLabelProp}
                 className={isTouchable ? styles.touchableContainer : undefined}
             >
@@ -796,12 +807,19 @@ export const SmallNakedCard = React.forwardRef<HTMLDivElement, SmallNakedCardPro
                                             weight={textPresets.cardTitle.weight}
                                             as={titleAs}
                                             hyphens="auto"
+                                            dataAttributes={{testid: 'title'}}
                                         >
                                             {title}
                                         </Text>
                                     )}
                                     {subtitle && (
-                                        <Text2 truncate={subtitleLinesMax} regular as="p" hyphens="auto">
+                                        <Text2
+                                            truncate={subtitleLinesMax}
+                                            regular
+                                            as="p"
+                                            hyphens="auto"
+                                            dataAttributes={{testid: 'subtitle'}}
+                                        >
                                             {subtitle}
                                         </Text2>
                                     )}
@@ -812,13 +830,18 @@ export const SmallNakedCard = React.forwardRef<HTMLDivElement, SmallNakedCardPro
                                             as="p"
                                             color={vars.colors.textSecondary}
                                             hyphens="auto"
+                                            dataAttributes={{testid: 'description'}}
                                         >
                                             {description}
                                         </Text2>
                                     )}
                                 </Stack>
                             </div>
-                            {extra && <div ref={extraRef}>{extra}</div>}
+                            {extra && (
+                                <div ref={extraRef} data-testid="slot">
+                                    {extra}
+                                </div>
+                            )}
                         </div>
                     </div>
                 </BaseTouchable>
@@ -902,7 +925,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
 
         return (
             <CardContainer
-                dataAttributes={{'component-name': 'DataCard', ...dataAttributes}}
+                dataAttributes={{'component-name': 'DataCard', testid: 'DataCard', ...dataAttributes}}
                 ref={ref}
                 aria-label={isTouchable ? undefined : ariaLabelProp}
                 className={styles.touchableContainer}
@@ -925,6 +948,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
                                                 [mediaStyles.vars.mediaBorderRadius]:
                                                     vars.borderRadii.mediaSmall,
                                             })}
+                                            data-testid="asset"
                                         >
                                             {asset}
                                         </div>
@@ -954,7 +978,11 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
                                 )}
                             </Inline>
 
-                            {extra && <div ref={extraRef}>{extra}</div>}
+                            {extra && (
+                                <div ref={extraRef} data-testid="slot">
+                                    {extra}
+                                </div>
+                            )}
 
                             {(button || buttonLink) && (
                                 <div className={styles.actions}>
@@ -1023,13 +1051,18 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
 
         return (
             <CardContainer
-                dataAttributes={{'component-name': 'SnapCard', ...dataAttributes}}
+                dataAttributes={{'component-name': 'SnapCard', testid: 'SnapCard', ...dataAttributes}}
                 ref={ref}
                 className={styles.touchableContainer}
                 aspectRatio={aspectRatio}
                 aria-label={isTouchable ? undefined : ariaLabelProp}
             >
-                <Boxed className={styles.boxed} isInverse={isInverse} width="100%" minHeight="100%">
+                <Boxed
+                    className={styles.boxed}
+                    variant={isInverse ? 'inverse' : 'default'}
+                    width="100%"
+                    minHeight="100%"
+                >
                     <BaseTouchable
                         maybe
                         {...touchableProps}
@@ -1044,6 +1077,7 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
                                         style={applyCssVars({
                                             [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                         })}
+                                        data-testid="asset"
                                     >
                                         <Box paddingBottom={16}>{asset}</Box>
                                     </div>
@@ -1056,6 +1090,7 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
                                             weight={textPresets.cardTitle.weight}
                                             as={titleAs}
                                             hyphens="auto"
+                                            dataAttributes={{testid: 'title'}}
                                         >
                                             {title}
                                         </Text>
@@ -1067,6 +1102,7 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
                                             color={vars.colors.textPrimary}
                                             as="p"
                                             hyphens="auto"
+                                            dataAttributes={{testid: 'subtitle'}}
                                         >
                                             {subtitle}
                                         </Text2>
@@ -1078,13 +1114,18 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
                                             color={vars.colors.textSecondary}
                                             as="p"
                                             hyphens="auto"
+                                            dataAttributes={{testid: 'description'}}
                                         >
                                             {description}
                                         </Text2>
                                     )}
                                 </Stack>
                             </div>
-                            {extra && <div ref={extraRef}>{extra}</div>}
+                            {extra && (
+                                <div ref={extraRef} data-testid="slot">
+                                    {extra}
+                                </div>
+                            )}
                         </section>
                     </BaseTouchable>
                 </Boxed>
@@ -1117,16 +1158,28 @@ const DisplayCardContent = ({
     // using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users
     return (
         <div className={styles.flexColumn}>
-            {title && <div style={{paddingBottom: subtitle || description ? 4 : 0}}>{title}</div>}
+            {title && (
+                <div style={{paddingBottom: subtitle || description ? 4 : 0}} data-testid="title">
+                    {title}
+                </div>
+            )}
             {headline && (
                 // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                <div ref={headlineRef} style={{order: -2, paddingBottom: 16}}>
+                <div ref={headlineRef} style={{order: -2, paddingBottom: 16}} data-testid="headline">
                     {headline}
                 </div>
             )}
-            {pretitle && <div style={{order: -1, paddingBottom: 4}}>{pretitle}</div>}
+            {pretitle && (
+                <div style={{order: -1, paddingBottom: 4}} data-testid="pretitle">
+                    {pretitle}
+                </div>
+            )}
 
-            {subtitle && <div style={{paddingBottom: subtitle ? 4 : 0}}>{subtitle}</div>}
+            {subtitle && (
+                <div style={{paddingBottom: subtitle ? 4 : 0}} data-testid="subtitle">
+                    {subtitle}
+                </div>
+            )}
             {description && (
                 // this is tricky, the padding between a headline and a description is 16px
                 // but the padding between a title|pretitle|subtitle and a description is 8px (4px + 4px)
@@ -1134,11 +1187,16 @@ const DisplayCardContent = ({
                     style={{
                         paddingTop: pretitle || title || subtitle ? 4 : 0,
                     }}
+                    data-testid="description"
                 >
                     {description}
                 </div>
             )}
-            {extra && <div ref={extraRef}>{extra}</div>}
+            {extra && (
+                <div ref={extraRef} data-testid="slot">
+                    {extra}
+                </div>
+            )}
         </div>
     );
 };
@@ -1282,7 +1340,6 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                     className={styles.boxed}
                     width="100%"
                     minHeight="100%"
-                    isInverse={isInverse}
                     background={
                         hasImage || hasVideo
                             ? isExternalInverse
@@ -1290,7 +1347,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                                 : vars.colors.backgroundContainer
                             : undefined
                     }
-                    variant={hasImage || hasVideo ? 'media' : undefined}
+                    variant={hasImage || hasVideo ? 'media' : isInverse ? 'inverse' : 'default'}
                 >
                     <BaseTouchable
                         maybe
@@ -1302,7 +1359,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
 
                         <div className={styles.displayCardContainer}>
                             {(hasImage || hasVideo) && (
-                                <ThemeVariant isInverse={isExternalInverse}>
+                                <ThemeVariant variant={isExternalInverse ? 'inverse' : 'default'}>
                                     <div className={styles.displayCardBackground}>
                                         {hasVideo ? video : image}
                                     </div>
@@ -1321,6 +1378,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                                         style={applyCssVars({
                                             [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                         })}
+                                        data-testid="asset"
                                     >
                                         <Box paddingBottom={withGradient ? 0 : 40} paddingX={24}>
                                             {asset}
@@ -1421,7 +1479,11 @@ export const DisplayMediaCard = React.forwardRef<HTMLDivElement, DisplayMediaCar
             {...props}
             ref={ref}
             isInverse
-            dataAttributes={{'component-name': 'DisplayMediaCard', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'DisplayMediaCard',
+                testid: 'DisplayMediaCard',
+                ...dataAttributes,
+            }}
         />
     )
 );
@@ -1431,7 +1493,11 @@ export const DisplayDataCard = React.forwardRef<HTMLDivElement, DisplayDataCardP
         <DisplayCard
             {...props}
             ref={ref}
-            dataAttributes={{'component-name': 'DisplayDataCard', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'DisplayDataCard',
+                testid: 'DisplayDataCard',
+                ...dataAttributes,
+            }}
         />
     )
 );
@@ -1573,7 +1639,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
             <CardContainer
                 width={width}
                 height={height}
-                dataAttributes={{'component-name': 'PosterCard', ...dataAttributes}}
+                dataAttributes={{'component-name': 'PosterCard', testid: 'PosterCard', ...dataAttributes}}
                 ref={ref}
                 aspectRatio={aspectRatio}
                 className={styles.touchableContainer}
@@ -1584,9 +1650,14 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                     className={styles.boxed}
                     width="100%"
                     minHeight="100%"
-                    isInverse={hasImage || hasVideo || normalizedVariant === 'inverse'}
                     background={calcBackgroundColor()}
-                    variant={hasImage || hasVideo ? 'media' : undefined}
+                    variant={
+                        hasImage || hasVideo
+                            ? 'media'
+                            : hasImage || hasVideo || normalizedVariant === 'inverse'
+                              ? 'inverse'
+                              : 'default'
+                    }
                 >
                     <BaseTouchable
                         maybe
@@ -1598,7 +1669,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
 
                         <div className={styles.displayCardContainer} aria-hidden={isTouchable}>
                             {(hasImage || hasVideo) && (
-                                <ThemeVariant isInverse={isExternalInverse}>
+                                <ThemeVariant variant={isExternalInverse ? 'inverse' : 'default'}>
                                     <div className={styles.displayCardBackground}>
                                         {hasVideo ? video : image}
                                     </div>
@@ -1619,6 +1690,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                         style={applyCssVars({
                                             [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
                                         })}
+                                        data-testid="asset"
                                     >
                                         <Box
                                             paddingBottom={withGradient ? 0 : 40}
diff --git a/src/feedback.tsx b/src/feedback.tsx
index 8aec585c6f..007d9ce814 100644
--- a/src/feedback.tsx
+++ b/src/feedback.tsx
@@ -80,14 +80,19 @@ const renderFeedbackBody = (
         );
     return (
         <Stack space={24}>
-            <div className={styles.assetContainer}>{asset}</div>
+            <div className={styles.assetContainer} data-testid="icon">
+                {asset}
+            </div>
             <Stack space={16} className={classnames(styles.feedbackData)}>
-                <div className={classnames(animateText && styles.feedbackTextAppearFast)}>
+                <div className={classnames(animateText && styles.feedbackTextAppearFast)} data-testid="title">
                     <Text6 as="h1">{title}</Text6>
                 </div>
 
                 {normalizedDescription && (
-                    <div className={classnames(animateText && styles.feedbackTextAppearMedium)}>
+                    <div
+                        className={classnames(animateText && styles.feedbackTextAppearMedium)}
+                        data-testid="description"
+                    >
                         {normalizedDescription && (
                             <Text3 regular color={vars.colors.textSecondary}>
                                 {normalizedDescription}
@@ -104,6 +109,7 @@ const renderFeedbackBody = (
                                     ? styles.feedbackTextAppearSlow
                                     : styles.feedbackTextAppearMedium)
                         )}
+                        data-testid="slot"
                     >
                         {extra}
                     </div>
@@ -151,6 +157,7 @@ const renderFeedback = ({
             {imageUrl && (
                 <div
                     className={styles.desktopImage}
+                    data-testid="image"
                     style={{
                         backgroundImage: `url(${imageUrl})`,
                         backgroundPosition: imageFit === 'fit' ? 'bottom right' : 'center right',
@@ -301,7 +308,11 @@ export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackP
             animateText
             imageUrl={props.imageUrl}
             imageFit={props.imageFit}
-            dataAttributes={{'component-name': 'SuccessFeedbackScreen', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'SuccessFeedbackScreen',
+                testid: 'SuccessFeedbackScreen',
+                ...dataAttributes,
+            }}
         />
     );
 };
@@ -321,7 +332,11 @@ export const ErrorFeedbackScreen = ({
             hapticFeedback="error"
             asset={<IconError size="100%" />}
             animateText
-            dataAttributes={{'component-name': 'ErrorFeedbackScreen', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'ErrorFeedbackScreen',
+                testid: 'ErrorFeedbackScreen',
+                ...dataAttributes,
+            }}
             extra={
                 <Stack space={16}>
                     {errorReference && (
@@ -346,7 +361,11 @@ export const InfoFeedbackScreen = ({
 }: InfoFeedbackScreenProps): JSX.Element => {
     return (
         <FeedbackScreen
-            dataAttributes={{'component-name': 'InfoFeedbackScreen', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'InfoFeedbackScreen',
+                testid: 'InfoFeedbackScreen',
+                ...dataAttributes,
+            }}
             asset={<Icon size="100%" />}
             {...props}
         />
@@ -398,6 +417,6 @@ export const SuccessFeedback = ({
         ),
         imageFit,
         imageUrl,
-        dataAttributes: {'component-name': 'SuccessFeedback', ...dataAttributes},
+        dataAttributes: {'component-name': 'SuccessFeedback', testid: 'SuccessFeedback', ...dataAttributes},
     });
 };
diff --git a/src/fixed-footer-layout.tsx b/src/fixed-footer-layout.tsx
index 62c1ad2df6..cda3ba1989 100644
--- a/src/fixed-footer-layout.tsx
+++ b/src/fixed-footer-layout.tsx
@@ -188,6 +188,7 @@ const FixedFooterLayout = ({
                     <aside
                         ref={ref}
                         data-component-name="FixedFooter"
+                        data-testid="FixedFooter"
                         style={{
                             height: footerHeight,
                             marginBottom: safeAreaInsetBottom,
diff --git a/src/icon-button.tsx b/src/icon-button.tsx
index f0a211db19..5309d40643 100644
--- a/src/icon-button.tsx
+++ b/src/icon-button.tsx
@@ -93,7 +93,7 @@ export const RawIconButton = React.forwardRef<
             role,
             'aria-label': ariaLabel,
             'aria-labelledby': ariaLabelledby,
-            dataAttributes: {'component-name': 'IconButton', ...dataAttributes},
+            dataAttributes: {'component-name': 'IconButton', testid: 'IconButton', ...dataAttributes},
             className: classNames(
                 styles.buttonContainer[buttonSize],
                 styles.iconButtonTokens[buttonTokensKey],
@@ -202,7 +202,11 @@ export const InternalToggleIconButton = React.forwardRef<
             ref={ref}
             {...props}
             {...(checked ?? checkedState ? checkedProps : uncheckedProps)}
-            dataAttributes={{'component-name': 'ToggleIconButton', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'ToggleIconButton',
+                testid: 'ToggleIconButton',
+                ...dataAttributes,
+            }}
             onPress={handleChange}
         />
     );
diff --git a/src/list.tsx b/src/list.tsx
index 79662bf946..2dc4258094 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -115,6 +115,7 @@ export const Content = ({
                     })}
                     // We don't want asset to be readable by screen readers
                     aria-hidden
+                    data-testid="asset"
                 >
                     <div
                         className={styles.asset}
@@ -144,12 +145,18 @@ export const Content = ({
                     truncate={titleLinesMax}
                     hyphens="auto"
                     as={titleAs}
+                    dataAttributes={{testid: 'title'}}
                 >
                     {title}
                 </Text3>
                 {headline && (
                     <div ref={headlineRef} style={{order: -1, paddingBottom: 4}}>
-                        <Text1 regular color={vars.colors.textPrimary} hyphens="auto">
+                        <Text1
+                            regular
+                            color={vars.colors.textPrimary}
+                            hyphens="auto"
+                            dataAttributes={{testid: 'headline'}}
+                        >
                             {headline}
                         </Text1>
                     </div>
@@ -161,6 +168,7 @@ export const Content = ({
                             color={vars.colors.textPrimary}
                             truncate={subtitleLinesMax}
                             hyphens="auto"
+                            dataAttributes={{testid: 'subtitle'}}
                         >
                             {subtitle}
                         </Text2>
@@ -173,13 +181,14 @@ export const Content = ({
                             color={vars.colors.textSecondary}
                             truncate={descriptionLinesMax}
                             hyphens="auto"
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text2>
                     </Box>
                 )}
                 {extra && (
-                    <Box ref={extraRef} paddingTop={2}>
+                    <Box ref={extraRef} paddingTop={2} dataAttributes={{testid: 'slot'}}>
                         {extra}
                     </Box>
                 )}
@@ -197,7 +206,12 @@ export const Content = ({
                 <div className={classNames(styles.rightContent, {[styles.rightRestrictedWidth]: !!detail})}>
                     {detail && (
                         <div className={classNames(styles.detail, {[styles.disabled]: disabled})}>
-                            <Text2 regular color={vars.colors.textSecondary} hyphens="auto">
+                            <Text2
+                                regular
+                                color={vars.colors.textSecondary}
+                                hyphens="auto"
+                                dataAttributes={{testid: 'detail'}}
+                            >
                                 {detail}
                             </Text2>
                         </div>
@@ -210,6 +224,7 @@ export const Content = ({
                                 [styles.disabled]: disabled,
                             })}
                             ref={rightRef}
+                            data-testid="endSlot"
                         >
                             {renderRight(right, centerY)}
                         </div>
@@ -219,6 +234,7 @@ export const Content = ({
                         <div
                             style={{paddingLeft: detail || right ? 4 : 0}}
                             className={classNames(styles.center, {[styles.disabled]: disabled})}
+                            data-testid="chevron"
                         >
                             <IconChevron
                                 color={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
@@ -632,7 +648,11 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
 export const Row = React.forwardRef<TouchableElement, RowContentProps>(
     ({dataAttributes, role = 'listitem', ...props}, ref) => (
         <div role={role} className={styles.row}>
-            <RowContent {...props} ref={ref} dataAttributes={{'component-name': 'Row', ...dataAttributes}} />
+            <RowContent
+                {...props}
+                ref={ref}
+                dataAttributes={{'component-name': 'Row', testid: 'Row', ...dataAttributes}}
+            />
         </div>
     )
 );
@@ -701,9 +721,9 @@ type BoxedRowProps = ExclusifyUnion<
 
 export const BoxedRow = React.forwardRef<HTMLDivElement, BoxedRowProps>(({dataAttributes, ...props}, ref) => (
     <Boxed
-        isInverse={props.isInverse}
+        variant={props.isInverse ? 'inverse' : 'default'}
         ref={ref}
-        dataAttributes={{'component-name': 'BoxedRow', ...dataAttributes}}
+        dataAttributes={{'component-name': 'BoxedRow', testid: 'BoxedRow', ...dataAttributes}}
     >
         <RowContent {...props} />
     </Boxed>
@@ -726,7 +746,7 @@ export const BoxedRowList = ({
         space={16}
         role={role}
         aria-labelledby={ariaLabelledby}
-        dataAttributes={{'component-name': 'BoxedRowList', ...dataAttributes}}
+        dataAttributes={{'component-name': 'BoxedRowList', testid: 'BoxedRowList', ...dataAttributes}}
     >
         {children}
     </Stack>
diff --git a/src/utils/dom.tsx b/src/utils/dom.tsx
index 99203b037e..b62705dcc0 100644
--- a/src/utils/dom.tsx
+++ b/src/utils/dom.tsx
@@ -63,7 +63,10 @@ export const removePassiveEventListener = (
  * For example: `{foo: 'bar'}` => `{data-foo: 'bar'}`
  */
 export const getPrefixedDataAttributes = (attrs?: DataAttributes, componentName?: string): DataAttributes => {
-    const result: DataAttributes = componentName ? {'data-component-name': componentName} : {};
+    const result: DataAttributes = componentName
+        ? // TODO: remove deprecated component-name in next major release
+          {'data-component-name': componentName, 'data-testid': componentName}
+        : {};
     if (attrs) {
         Object.keys(attrs).forEach((key) => {
             result['data-' + key] = attrs[key];

From d03ee75b55618568ffd51163b40278bc3c74ffaf Mon Sep 17 00:00:00 2001
From: marcoskolodny <marcoskolodny@gmail.com>
Date: Fri, 18 Oct 2024 13:11:33 +0200
Subject: [PATCH 2/5] fix boxed logic

---
 src/boxed.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/boxed.tsx b/src/boxed.tsx
index 7ef8b74ea8..3e1ffa8438 100644
--- a/src/boxed.tsx
+++ b/src/boxed.tsx
@@ -71,7 +71,7 @@ export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalPr
     (
         {
             children,
-            isInverse: isInverseInside = false,
+            isInverse = false,
             className,
             role,
             dataAttributes,
@@ -90,6 +90,7 @@ export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalPr
         ref
     ) => {
         const isInverseOutside = useIsInverseOrMediaVariant();
+        const isInverseInside = isInverse || variant === 'inverse' || variant === 'media';
 
         return (
             <div

From 18595e0bd3642b398a0a5bcfa8ede29d3d1300ea Mon Sep 17 00:00:00 2001
From: marcoskolodny <marcoskolodny@gmail.com>
Date: Fri, 18 Oct 2024 13:42:39 +0200
Subject: [PATCH 3/5] input fields

---
 src/credit-card-expiration-field.tsx |  6 +++++-
 src/credit-card-number-field.tsx     |  6 +++++-
 src/cvv-field.tsx                    |  2 +-
 src/date-field.tsx                   |  6 +++---
 src/date-time-field.tsx              | 10 +++++++---
 src/decimal-field.tsx                |  2 +-
 src/email-field.tsx                  |  2 +-
 src/iban-field.tsx                   |  2 +-
 src/integer-field.tsx                |  2 +-
 src/month-field.tsx                  |  6 +++---
 src/password-field.tsx               |  2 +-
 src/phone-number-field.tsx           |  6 +++++-
 src/search-field.tsx                 |  2 +-
 src/select.tsx                       |  2 +-
 src/text-field-base.tsx              | 12 ++++++++++--
 src/text-field-components.tsx        |  8 ++++++--
 src/text-field.tsx                   |  2 +-
 17 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/src/credit-card-expiration-field.tsx b/src/credit-card-expiration-field.tsx
index 40b3a97977..1682f745a5 100644
--- a/src/credit-card-expiration-field.tsx
+++ b/src/credit-card-expiration-field.tsx
@@ -173,7 +173,11 @@ const CreditCardExpirationField = ({
             }}
             autoComplete={autoComplete}
             inputComponent={MonthYearDateInput}
-            dataAttributes={{'component-name': 'CreditCardExpirationField', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'CreditCardExpirationField',
+                testid: 'CreditCardExpirationField',
+                ...dataAttributes,
+            }}
         />
     );
 };
diff --git a/src/credit-card-number-field.tsx b/src/credit-card-number-field.tsx
index 8da9829795..6846b360c3 100644
--- a/src/credit-card-number-field.tsx
+++ b/src/credit-card-number-field.tsx
@@ -231,7 +231,11 @@ const CreditCardNumberField = ({
             inputComponent={CreditCardInput}
             autoComplete={autoComplete}
             endIcon={<CreditcardAdornment value={value ?? rawValues[name] ?? ''} />}
-            dataAttributes={{'component-name': 'CreditCardNumberField', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'CreditCardNumberField',
+                testid: 'CreditCardNumberField',
+                ...dataAttributes,
+            }}
         />
     );
 };
diff --git a/src/cvv-field.tsx b/src/cvv-field.tsx
index d4500b9142..d79ded8f16 100644
--- a/src/cvv-field.tsx
+++ b/src/cvv-field.tsx
@@ -159,7 +159,7 @@ const CvvField = ({
             }
             autoComplete={autoComplete}
             inputComponent={IntegerInput}
-            dataAttributes={{'component-name': 'CvvField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'CvvField', testid: 'CvvField', ...dataAttributes}}
         />
     );
 };
diff --git a/src/date-field.tsx b/src/date-field.tsx
index 6c89de7e6c..74d8e292bc 100644
--- a/src/date-field.tsx
+++ b/src/date-field.tsx
@@ -100,11 +100,11 @@ const DateField = ({
             max={max ? getLocalDateString(max) : undefined}
             type="date"
             endIconOverlay={
-                <div className={styles.iconContainer}>
+                <div className={styles.iconContainer} data-testid="endIcon">
                     <IconCalendarRegular size={iconSize.default} />
                 </div>
             }
-            dataAttributes={{'component-name': 'DateField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}}
         />
     );
 
@@ -119,7 +119,7 @@ const DateField = ({
                 {...fieldProps}
                 optional={optional}
                 isValidDate={(currentDate) => isInRange(getLocalDateString(currentDate.toDate()))}
-                dataAttributes={{'component-name': 'DateField', ...dataAttributes}}
+                dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}}
             />
         </React.Suspense>
     );
diff --git a/src/date-time-field.tsx b/src/date-time-field.tsx
index 754614d12d..bafb129e6b 100644
--- a/src/date-time-field.tsx
+++ b/src/date-time-field.tsx
@@ -106,11 +106,11 @@ const FormDateField = ({
             max={max ? getLocalDateTimeString(max) : undefined}
             type="datetime-local"
             endIconOverlay={
-                <div className={dateStyles.iconContainer}>
+                <div className={dateStyles.iconContainer} data-testid="endIcon">
                     <IconCalendarRegular size={iconSize.default} />
                 </div>
             }
-            dataAttributes={{'component-name': 'DateTimeField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'DateTimeField', testid: 'DateTimeField', ...dataAttributes}}
         />
     );
 
@@ -126,7 +126,11 @@ const FormDateField = ({
                 optional={optional}
                 withTime
                 isValidDate={(currentDate) => isInRange(getLocalDateTimeString(currentDate.toDate()))}
-                dataAttributes={{'component-name': 'DateTimeField', ...dataAttributes}}
+                dataAttributes={{
+                    'component-name': 'DateTimeField',
+                    testid: 'DateTimeField',
+                    ...dataAttributes,
+                }}
             />
         </React.Suspense>
     );
diff --git a/src/decimal-field.tsx b/src/decimal-field.tsx
index f9db3165d7..f98e6e47fc 100644
--- a/src/decimal-field.tsx
+++ b/src/decimal-field.tsx
@@ -150,7 +150,7 @@ const DecimalField = ({
             {...fieldProps}
             inputComponent={DecimalInput}
             inputProps={{maxDecimals}}
-            dataAttributes={{'component-name': 'DecimalField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'DecimalField', testid: 'DecimalField', ...dataAttributes}}
         />
     );
 };
diff --git a/src/email-field.tsx b/src/email-field.tsx
index 41401637a5..9b83330660 100644
--- a/src/email-field.tsx
+++ b/src/email-field.tsx
@@ -66,7 +66,7 @@ const EmailField = ({
             type="email"
             inputMode="email"
             autoComplete={autoComplete}
-            dataAttributes={{'component-name': 'EmailField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'EmailField', testid: 'EmailField', ...dataAttributes}}
         />
     );
 };
diff --git a/src/iban-field.tsx b/src/iban-field.tsx
index af87b8995f..e9287cf309 100644
--- a/src/iban-field.tsx
+++ b/src/iban-field.tsx
@@ -208,7 +208,7 @@ const IbanField = ({
             {...rest}
             {...fieldProps}
             inputComponent={IbanInput}
-            dataAttributes={{'component-name': 'IbanField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'IbanField', testid: 'IbanField', ...dataAttributes}}
         />
     );
 };
diff --git a/src/integer-field.tsx b/src/integer-field.tsx
index 90019e697a..cd749be15d 100644
--- a/src/integer-field.tsx
+++ b/src/integer-field.tsx
@@ -83,7 +83,7 @@ const IntegerField = ({
             {...rest}
             {...fieldProps}
             inputComponent={IntegerInput}
-            dataAttributes={{'component-name': 'IntegerField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'IntegerField', testid: 'IntegerField', ...dataAttributes}}
         />
     );
 };
diff --git a/src/month-field.tsx b/src/month-field.tsx
index 24dee05d21..a116f294f2 100644
--- a/src/month-field.tsx
+++ b/src/month-field.tsx
@@ -93,11 +93,11 @@ const DateField = ({
             max={max ? getLocalYearMonthString(max) : undefined}
             type="month"
             endIconOverlay={
-                <div className={dateStyles.iconContainer}>
+                <div className={dateStyles.iconContainer} data-testid="endIcon">
                     <IconCalendarRegular size={iconSize.default} />
                 </div>
             }
-            dataAttributes={{'component-name': 'MonthField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}}
         />
     );
 
@@ -113,7 +113,7 @@ const DateField = ({
                 optional={optional}
                 isValidDate={(currentDate) => isInRange(getLocalYearMonthString(currentDate.toDate()))}
                 mode="year-month"
-                dataAttributes={{'component-name': 'MonthField', ...dataAttributes}}
+                dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}}
             />
         </React.Suspense>
     );
diff --git a/src/password-field.tsx b/src/password-field.tsx
index 4d3417e261..0bad28b5da 100644
--- a/src/password-field.tsx
+++ b/src/password-field.tsx
@@ -116,7 +116,7 @@ const PasswordField = ({
             }}
             autoComplete={autoComplete}
             endIcon={<PasswordAdornment focus={focus} isVisible={isVisible} setVisibility={setIsVisible} />}
-            dataAttributes={{'component-name': 'PasswordField', ...dataAttributes}}
+            dataAttributes={{'component-name': 'PasswordField', testid: 'PasswordField', ...dataAttributes}}
         />
     );
 };
diff --git a/src/phone-number-field.tsx b/src/phone-number-field.tsx
index fa2a04be73..032a5b965d 100644
--- a/src/phone-number-field.tsx
+++ b/src/phone-number-field.tsx
@@ -158,7 +158,11 @@ const PhoneNumberField = ({
             type="phone"
             inputProps={{prefix: rest.prefix}}
             inputComponent={PhoneInput}
-            dataAttributes={{'component-name': 'PhoneNumberField', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'PhoneNumberField',
+                testid: 'PhoneNumberField',
+                ...dataAttributes,
+            }}
         />
     );
 };
diff --git a/src/search-field.tsx b/src/search-field.tsx
index afa53daf50..a55305e301 100644
--- a/src/search-field.tsx
+++ b/src/search-field.tsx
@@ -96,7 +96,7 @@ const SearchField = React.forwardRef<any, SearchFieldProps>(
                 {...rest}
                 {...fieldProps}
                 type="search"
-                dataAttributes={{'component-name': 'SearchField', ...dataAttributes}}
+                dataAttributes={{'component-name': 'SearchField', testid: 'SearchField', ...dataAttributes}}
             />
         );
     }
diff --git a/src/select.tsx b/src/select.tsx
index bc28326ca1..8beff25f8f 100644
--- a/src/select.tsx
+++ b/src/select.tsx
@@ -382,7 +382,7 @@ const Select = ({
                         ))}
                     </select>
                     <div className={styles.arrowDown} aria-hidden>
-                        <div className={styles.iconContainer}>
+                        <div className={styles.iconContainer} data-testid="endIcon">
                             <ChevronDownRegular size={iconSize} />
                         </div>
                     </div>
diff --git a/src/text-field-base.tsx b/src/text-field-base.tsx
index 6b07dc623a..beb207fd82 100644
--- a/src/text-field-base.tsx
+++ b/src/text-field-base.tsx
@@ -328,7 +328,11 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 dataAttributes={dataAttributes}
             >
                 <ThemeVariant variant="default">
-                    {startIcon && <div className={styles.startIcon}>{startIcon}</div>}
+                    {startIcon && (
+                        <div className={styles.startIcon} data-testid="startIcon">
+                            {startIcon}
+                        </div>
+                    )}
 
                     {prefix && (
                         <div
@@ -435,7 +439,11 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                             })}
                         </Text3>
                     </div>
-                    {endIcon && <div className={styles.endIconContainer}>{endIcon}</div>}
+                    {endIcon && (
+                        <div className={styles.endIconContainer} data-testId="endIcon">
+                            {endIcon}
+                        </div>
+                    )}
                     {endIconOverlay}
                 </ThemeVariant>
             </FieldContainer>
diff --git a/src/text-field-components.tsx b/src/text-field-components.tsx
index 9f57711d16..2816fe4420 100644
--- a/src/text-field-components.tsx
+++ b/src/text-field-components.tsx
@@ -62,6 +62,7 @@ export const Label = ({
             className={classnames(styles.labelContainer, {[styles.shrinked]: isShrinked})}
             htmlFor={forId}
             style={{color, ...style, transition: transitionStyle}}
+            data-testid="label"
         >
             <span className={styles.labelText}>{children}</span>
             {optional ? (
@@ -94,7 +95,10 @@ export const HelperText = ({leftText, rightText, error, id}: HelperTextProps): J
     return (
         <>
             {leftText && (
-                <p className={classnames(styles.helperText, styles.leftHelperText)}>
+                <p
+                    className={classnames(styles.helperText, styles.leftHelperText)}
+                    data-testid={error ? 'errorText' : 'helperText'}
+                >
                     {error && (
                         <Text1 regular>
                             <IconWarningRegular color={leftColor} className={styles.warnIcon} />
@@ -106,7 +110,7 @@ export const HelperText = ({leftText, rightText, error, id}: HelperTextProps): J
                 </p>
             )}
             {rightText && (
-                <div className={classnames(styles.helperText)}>
+                <div className={classnames(styles.helperText)} data-testid="endHelperText">
                     <Text1 color={rightColor} regular as="p" textAlign="right">
                         {rightText}
                     </Text1>
diff --git a/src/text-field.tsx b/src/text-field.tsx
index 045f46aa52..d84618d424 100644
--- a/src/text-field.tsx
+++ b/src/text-field.tsx
@@ -107,7 +107,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
                 inputRef={combineRefs(inputRef, fieldProps.inputRef, ref)}
                 onFocus={onFocus}
                 type="text"
-                dataAttributes={{'component-name': 'TextField', ...dataAttributes}}
+                dataAttributes={{'component-name': 'TextField', testid: 'TextField', ...dataAttributes}}
             />
         );
     }

From 6650b2bc3c5a95c4a837568ac5122915d38249e7 Mon Sep 17 00:00:00 2001
From: marcoskolodny <marcoskolodny@gmail.com>
Date: Fri, 18 Oct 2024 14:10:37 +0200
Subject: [PATCH 4/5] fix typo

---
 src/__private_stories__/image-sizes-story.tsx | 2 +-
 src/text-field-base.tsx                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/__private_stories__/image-sizes-story.tsx b/src/__private_stories__/image-sizes-story.tsx
index 79d7e71991..bd140a4ce1 100644
--- a/src/__private_stories__/image-sizes-story.tsx
+++ b/src/__private_stories__/image-sizes-story.tsx
@@ -74,7 +74,7 @@ export const Default: StoryComponent<Args> = ({forceNonCssAspectRatio}) => {
     );
 
     return (
-        <Stack space={16} dataAttributes={{testId: 'story'}}>
+        <Stack space={16} dataAttributes={{testid: 'story'}}>
             <div style={{width: 400, border: '2px solid pink'}}>
                 <Stack space={16}>{cases.map((props, index) => renderCase(props, index))}</Stack>
             </div>
diff --git a/src/text-field-base.tsx b/src/text-field-base.tsx
index beb207fd82..45cedafc91 100644
--- a/src/text-field-base.tsx
+++ b/src/text-field-base.tsx
@@ -440,7 +440,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                         </Text3>
                     </div>
                     {endIcon && (
-                        <div className={styles.endIconContainer} data-testId="endIcon">
+                        <div className={styles.endIconContainer} data-testid="endIcon">
                             {endIcon}
                         </div>
                     )}

From 8349410d12c6a5f9a3fc2d1bc390870aa082d467 Mon Sep 17 00:00:00 2001
From: marcoskolodny <marcoskolodny@gmail.com>
Date: Mon, 21 Oct 2024 13:54:51 +0200
Subject: [PATCH 5/5] add unit tests

---
 src/__tests__/testid-test.tsx | 175 ++++++++++++++++++++++++++++++++++
 1 file changed, 175 insertions(+)
 create mode 100644 src/__tests__/testid-test.tsx

diff --git a/src/__tests__/testid-test.tsx b/src/__tests__/testid-test.tsx
new file mode 100644
index 0000000000..277a1e5db7
--- /dev/null
+++ b/src/__tests__/testid-test.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react';
+import {RowList, Row} from '../list';
+import {screen, render, within} from '@testing-library/react';
+import {
+    ButtonPrimary,
+    ButtonSecondary,
+    DataCard,
+    DateField,
+    IconShopRegular,
+    Placeholder,
+    SearchField,
+    Stack,
+    SuccessFeedbackScreen,
+    TextField,
+    ThemeContextProvider,
+} from '..';
+import {makeTheme} from './test-utils';
+
+const checkTestIds = (
+    content: React.ReactElement,
+    elements: ReadonlyArray<{componentName: string; internalTestIds: ReadonlyArray<string>}>
+) => {
+    render(<ThemeContextProvider theme={makeTheme()}>{content}</ThemeContextProvider>);
+
+    elements.forEach(({componentName, internalTestIds}) => {
+        const element = screen.getByTestId(componentName);
+        expect(element).toBeInTheDocument();
+
+        internalTestIds.forEach((id) => expect(within(element).getByTestId(id)).toBeInTheDocument());
+    });
+};
+
+test('Row test ids', () => {
+    checkTestIds(
+        <RowList>
+            <Row
+                title="Title"
+                headline="Headline"
+                subtitle="Subtitle"
+                description="Description"
+                detail="Detail"
+                asset={<IconShopRegular />}
+                extra={<Placeholder />}
+                right="right"
+                href="#"
+            />
+        </RowList>,
+        [
+            {
+                componentName: 'Row',
+                internalTestIds: [
+                    'headline',
+                    'title',
+                    'subtitle',
+                    'description',
+                    'detail',
+                    'asset',
+                    'slot',
+                    'chevron',
+                    'endSlot',
+                ],
+            },
+        ]
+    );
+});
+
+test('Cards test ids', () => {
+    checkTestIds(
+        <DataCard
+            headline="Headline"
+            pretitle="Pretitle"
+            title="Title"
+            subtitle="Subtitle"
+            description="Description"
+            extra={<Placeholder />}
+            asset={<IconShopRegular />}
+            actions={[
+                {
+                    Icon: IconShopRegular,
+                    onPress: () => {},
+                    label: 'Lightning',
+                },
+            ]}
+        />,
+        [
+            {
+                componentName: 'DataCard',
+                internalTestIds: [
+                    'headline',
+                    'pretitle',
+                    'title',
+                    'subtitle',
+                    'description',
+                    'asset',
+                    'topActions',
+                    'slot',
+                ],
+            },
+        ]
+    );
+});
+
+test('FeedbackScreen test ids', () => {
+    checkTestIds(
+        <SuccessFeedbackScreen
+            title="Title"
+            description="Description"
+            extra={<Placeholder />}
+            primaryButton={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
+            imageUrl="https://picsum.photos/1200/1200"
+        />,
+        [
+            {
+                componentName: 'SuccessFeedbackScreen',
+                internalTestIds: ['icon', 'title', 'description', 'image', 'slot'],
+            },
+        ]
+    );
+});
+
+test('InputFields test ids', () => {
+    checkTestIds(
+        <Stack space={16}>
+            <TextField
+                name="textField"
+                label="Label 1"
+                helperText="Helper"
+                multiline
+                maxLength={200}
+                endIcon={<IconShopRegular />}
+            />
+            <SearchField name="searchField" label="Label 2" helperText="helperText" error />
+            <DateField name="dateField" label="Label 3" />
+        </Stack>,
+
+        [
+            {
+                componentName: 'TextField',
+                internalTestIds: ['label', 'helperText', 'endHelperText', 'endIcon'],
+            },
+            {
+                componentName: 'SearchField',
+                internalTestIds: ['startIcon', 'errorText'],
+            },
+            // In DateField/MonthField/DatetimeField, we use endIconOverlay for setting the endIcon
+            {
+                componentName: 'DateField',
+                internalTestIds: ['endIcon'],
+            },
+        ]
+    );
+});
+
+test('Buttons test ids', () => {
+    checkTestIds(
+        <Stack space={16}>
+            <ButtonPrimary StartIcon={IconShopRegular} EndIcon={IconShopRegular} onPress={() => {}}>
+                Action
+            </ButtonPrimary>
+            <ButtonSecondary loadingText="Loading text" showSpinner onPress={() => {}}>
+                Action 2
+            </ButtonSecondary>
+        </Stack>,
+        [
+            {
+                componentName: 'ButtonPrimary',
+                internalTestIds: ['startIcon', 'endIcon'],
+            },
+            {
+                componentName: 'ButtonSecondary',
+                internalTestIds: ['loadingText'],
+            },
+        ]
+    );
+});