feat(data-testid): support for Callout, HighlightedCard, Hero, EmptyS…

…tate and Headers (#1296) WEB-2105 Figma specs: https://www.figma.com/design/MopZWljO6aLvAoWfsmust0/testids?node-id=2861-8201&t=pvugflxmiHR0CJ43-4 (merged) https://www.figma.com/design/H3OStb207o9VIJg5mE95S9/testids?node-id=2261-1732&t=FkQ42lukX47JRwf9-4 (merged) https://www.figma.com/design/l750xJQse8DwuEmYFnXmAp/testids?node-id=3390-3251&t=aLSpLmHtjxBiqqhU-4 (merged) https://www.figma.com/design/zUspRtleDhuq9f6BfLj7ZY/testids?node-id=5527-6701&t=mbnJHzFcUAd6KUZR-4 (merged) https://www.figma.com/design/oaSYsDNA70XjZ3KOLdvp4T/testids-highlighed-card?node-id=9583-1016&t=xtM8CYBGQENVsd46-4 (in review)
Telefonica · Nov 25, 2024 · 15b798c · 15b798c · github-actions · Nov 25, 2024
1 parent 42099fb
commit 15b798c
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 43 deletions.
diff --git a/src/__tests__/testid-test.tsx b/src/__tests__/testid-test.tsx
@@ -4,8 +4,12 @@ import {screen, render, within} from '@testing-library/react';
 import {
     ButtonPrimary,
     ButtonSecondary,
+    Callout,
     DataCard,
     DateField,
+    Hero,
+    Image,
+    HighlightedCard,
     IconShopRegular,
     Meter,
     Placeholder,
@@ -14,6 +18,10 @@ import {
     SuccessFeedbackScreen,
     TextField,
     ThemeContextProvider,
+    Tag,
+    CoverHero,
+    Header,
+    MainSectionHeader,
 } from '..';
 import {makeTheme} from './test-utils';
 
@@ -101,6 +109,15 @@ test('Cards test ids', () => {
     );
 });
 
+test('HighlightedCard test ids', () => {
+    checkTestIds(<HighlightedCard title="Title" description="Description" imageUrl="https://anyurl.com" />, [
+        {
+            componentName: 'HighlightedCard',
+            internalTestIds: ['title', 'description', 'image'],
+        },
+    ]);
+});
+
 test('FeedbackScreen test ids', () => {
     checkTestIds(
         <SuccessFeedbackScreen
@@ -175,6 +192,94 @@ test('Buttons test ids', () => {
     );
 });
 
+test('Callout test ids', () => {
+    checkTestIds(
+        <Callout title="Title" description="Description" asset={<IconShopRegular />} onClose={() => {}} />,
+        [
+            {
+                componentName: 'Callout',
+                internalTestIds: ['title', 'description', 'asset', 'closeButton'],
+            },
+        ]
+    );
+});
+
+test('Hero test ids', () => {
+    checkTestIds(
+        <Hero
+            background="default"
+            media={<Image src="https://anyurl.com" />}
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+            button={<ButtonPrimary fake>button</ButtonPrimary>}
+            desktopMediaPosition="right"
+            extra={<Placeholder />}
+        />,
+        [
+            {
+                componentName: 'Hero',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description', 'slot'],
+            },
+        ]
+    );
+});
+
+test('CoverHero test ids', () => {
+    checkTestIds(
+        <CoverHero
+            backgroundImage="https://anyurl.com"
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+            button={<ButtonPrimary fake>button</ButtonPrimary>}
+            extra={<Placeholder />}
+            sideExtra={<Placeholder />}
+        />,
+        [
+            {
+                componentName: 'CoverHero',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description', 'slot', 'sideSlot'],
+            },
+        ]
+    );
+});
+
+test('Header test ids', () => {
+    checkTestIds(
+        <Header
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+        />,
+        [
+            {
+                componentName: 'Header',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description'],
+            },
+        ]
+    );
+});
+
+test('MainSectionHeader test ids', () => {
+    checkTestIds(
+        <MainSectionHeader
+            title="Title"
+            description="Description"
+            button={<ButtonPrimary href="asdf">Action</ButtonPrimary>}
+        />,
+        [
+            {
+                componentName: 'MainSectionHeader',
+                internalTestIds: ['title', 'description'],
+            },
+        ]
+    );
+});
+
 test('Meter test ids', () => {
     checkTestIds(<Meter values={[10, 20, 30]} />, [
         {

diff --git a/src/callout.tsx b/src/callout.tsx
@@ -63,15 +63,24 @@ const Callout = ({
             {...getPrefixedDataAttributes(dataAttributes, 'Callout')}
         >
             <ThemeVariant isInverse={false}>
-                {asset && <Box paddingRight={16}>{asset}</Box>}
+                {asset && (
+                    <Box paddingRight={16} dataAttributes={{testid: 'asset'}}>
+                        {asset}
+                    </Box>
+                )}
                 <div className={styles.content}>
                     <Stack space={16}>
                         <Inline fullWidth alignItems="flex-start" space="between">
                             <Stack space={4}>
-                                <Text3 as={titleAs} regular>
+                                <Text3 as={titleAs} regular dataAttributes={{testid: 'title'}}>
                                     {title}
                                 </Text3>
-                                <Text2 as="p" regular color={vars.colors.textSecondary}>
+                                <Text2
+                                    as="p"
+                                    regular
+                                    color={vars.colors.textSecondary}
+                                    dataAttributes={{testid: 'description'}}
+                                >
                                     {description}
                                 </Text2>
                             </Stack>
@@ -93,6 +102,7 @@ const Callout = ({
                     {onClose && (
                         <div className={styles.closeButtonContainer}>
                             <IconButton
+                                dataAttributes={{testid: 'closeButton'}}
                                 small
                                 bleedY
                                 bleedRight

diff --git a/src/cover-hero.tsx b/src/cover-hero.tsx
@@ -110,17 +110,34 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
 
         const mainContent = (
             <div className={styles.mainContent}>
-                {headline && <Box paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}>{headline}</Box>}
+                {headline && (
+                    <Box
+                        dataAttributes={{testid: 'headline'}}
+                        paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
+                    >
+                        {headline}
+                    </Box>
+                )}
                 <Stack space={16}>
                     <Stack space={8}>
                         {pretitle && (
                             <div className={styles.sixColumns}>
-                                <Text3 regular truncate={pretitleLinesMax} textShadow={textShadow}>
+                                <Text3
+                                    regular
+                                    truncate={pretitleLinesMax}
+                                    textShadow={textShadow}
+                                    dataAttributes={{testid: 'pretitle'}}
+                                >
                                     {pretitle}
                                 </Text3>
                             </div>
                         )}
-                        <Text8 as={titleAs} truncate={titleLinesMax} textShadow={textShadow}>
+                        <Text8
+                            as={titleAs}
+                            truncate={titleLinesMax}
+                            textShadow={textShadow}
+                            dataAttributes={{testid: 'title'}}
+                        >
                             {title}
                         </Text8>
                     </Stack>
@@ -132,13 +149,14 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                 truncate={descriptionLinesMax}
                                 color={hasMedia ? vars.colors.textPrimary : vars.colors.textSecondary}
                                 textShadow={textShadow}
+                                dataAttributes={{testid: 'description'}}
                             >
                                 {description}
                             </Text3>
                         </div>
                     )}
                 </Stack>
-                {extra}
+                {extra && <div data-testid="slot">{extra}</div>}
             </div>
         );
 
@@ -180,7 +198,11 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                         template="8+4"
                                         collapseBreakpoint="mobile"
                                         left={mainContent}
-                                        right={<div className={styles.sideExtra}>{sideExtra}</div>}
+                                        right={
+                                            <div className={styles.sideExtra} data-testid="sideSlot">
+                                                {sideExtra}
+                                            </div>
+                                        }
                                     />
                                 )}
                                 <ButtonGroup

diff --git a/src/empty-state.tsx b/src/empty-state.tsx
@@ -67,7 +67,9 @@ const EmptyState = ({
     const {isDarkMode} = useTheme();
     const isInverse = useIsInverseOrMediaVariant();
 
-    const image = imageUrl ? <img className={styles.smallImage} alt="" src={imageUrl} /> : undefined;
+    const image = imageUrl ? (
+        <img data-testid="image" className={styles.smallImage} alt="" src={imageUrl} />
+    ) : undefined;
 
     const buttons: ButtonGroupProps = {
         ...(button?.type === ButtonPrimary ? {primaryButton: button} : {secondaryButton: button}),
@@ -92,13 +94,21 @@ const EmptyState = ({
                         largeImageUrl ? styles.contentVariants.largeImage : styles.contentVariants.default
                     }
                 >
-                    {image ?? (asset && <div className={styles.assetContainer}>{asset}</div>)}
+                    {image ??
+                        (asset && (
+                            <div data-testid="asset" className={styles.assetContainer}>
+                                {asset}
+                            </div>
+                        ))}
                     <Stack space={16}>
-                        <Text6 as={titleAs}>{title}</Text6>
+                        <Text6 as={titleAs} dataAttributes={{testid: 'title'}}>
+                            {title}
+                        </Text6>
                         <Text3
                             regular
                             as="p"
                             color={isInverse ? vars.colors.inverse : vars.colors.textSecondary}
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text3>
@@ -115,6 +125,7 @@ const EmptyState = ({
                         width="100%"
                     >
                         <div
+                            data-testid="image"
                             className={styles.largeImage}
                             style={{backgroundImage: `url(${largeImageUrl})`}}
                         />