Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(data-testid): support for Callout, HighlightedCard, Hero, EmptyState and Headers #1296

Merged
merged 3 commits into from
Nov 25, 2024
Merged

feat(data-testid): support for Callout, HighlightedCard, Hero, EmptyState and Headers #1296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
371118b
WEB-2105 feat(data-testid): support for Callout, HighlightedCard, Her…
atabel Nov 19, 2024
6ef6a11
Merge branch 'master' into atoledano-more-testids
atabel Nov 19, 2024
c5a4841
conditional render
atabel Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions src/__tests__/testid-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@ import {screen, render, within} from '@testing-library/react';
import {
ButtonPrimary,
ButtonSecondary,
Callout,
DataCard,
DateField,
Hero,
Image,
HighlightedCard,
IconShopRegular,
Meter,
Placeholder,
Expand All @@ -14,6 +18,10 @@ import {
SuccessFeedbackScreen,
TextField,
ThemeContextProvider,
Tag,
CoverHero,
Header,
MainSectionHeader,
} from '..';
import {makeTheme} from './test-utils';

Expand Down Expand Up @@ -101,6 +109,15 @@ test('Cards test ids', () => {
);
});

test('HighlightedCard test ids', () => {
checkTestIds(<HighlightedCard title="Title" description="Description" imageUrl="https://anyurl.com" />, [
atabel marked this conversation as resolved.
Show resolved Hide resolved
{
componentName: 'HighlightedCard',
internalTestIds: ['title', 'description', 'image'],
},
]);
});

test('FeedbackScreen test ids', () => {
checkTestIds(
<SuccessFeedbackScreen
Expand Down Expand Up @@ -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]} />, [
{
Expand Down
16 changes: 13 additions & 3 deletions src/callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -93,6 +102,7 @@ const Callout = ({
{onClose && (
<div className={styles.closeButtonContainer}>
<IconButton
dataAttributes={{testid: 'closeButton'}}
small
bleedY
bleedRight
Expand Down
32 changes: 27 additions & 5 deletions src/cover-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
);

Expand Down Expand Up @@ -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
Expand Down
17 changes: 14 additions & 3 deletions src/empty-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}),
Expand All @@ -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>
Expand All @@ -115,6 +125,7 @@ const EmptyState = ({
width="100%"
>
<div
data-testid="image"
className={styles.largeImage}
style={{backgroundImage: `url(${largeImageUrl})`}}
/>
Expand Down
Loading
Loading