Skip to content

Commit 9f51f44

Browse files
author
Kubit
committed
Improve datatestid default values on all Components
1 parent 2fd4499 commit 9f51f44

File tree

185 files changed

+642
-742
lines changed

Some content is hidden

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

185 files changed

+642
-742
lines changed

‎src/components/accordion/accordionStandAlone.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const ACCORDION_BASE_ID = 'AccordionComponent';
3030

3131
const AccordionStandAloneComponent = (
3232
{
33+
dataTestId = 'accordion',
3334
hasHeaderLineSeparator = true,
3435
open = false,
3536
...props
@@ -41,19 +42,19 @@ const AccordionStandAloneComponent = (
4142
const HEADER_ID = `${BASE_ID}-header`;
4243
const PANEL_ID = `${BASE_ID}-panel`;
4344

44-
const getDataTestId = (uniqueId = ''): string => `${props.dataTestId}${uniqueId}`;
45+
const getDataTestId = (uniqueId = ''): string => `${dataTestId}-${uniqueId}`;
4546

4647
return (
4748
<AccordionContainerStyled
4849
ref={ref}
49-
data-testid={getDataTestId()}
50+
data-testid={dataTestId}
5051
id={BASE_ID}
5152
styles={props.styles.container}
5253
>
5354
<AccordionDecorativeBackgroundStyled styles={props.styles.decorative} />
5455
<AccordionHeaderExternalContainerStyled styles={props.styles.headerExternalContainer}>
5556
<AccordionHeaderInternalContainerStyled
56-
data-testid={getDataTestId('Header')}
57+
data-testid={getDataTestId('header')}
5758
id={HEADER_ID}
5859
styles={props.styles.headerInternalContainer}
5960
>
@@ -65,20 +66,19 @@ const AccordionStandAloneComponent = (
6566
<AccordionTriggerStyled
6667
aria-controls={PANEL_ID}
6768
aria-expanded={open}
68-
data-testid={getDataTestId('TriggerButton')}
69+
data-testid={getDataTestId('trigger-button')}
6970
id={TRIGGER_ID}
7071
styles={props.styles[typeof props.title?.content !== 'string' ? 'link' : 'trigger']}
7172
type={ButtonType.BUTTON}
7273
{...props.triggerButton}
7374
>
7475
<AccordionTriggerIconContainerStyled
7576
$rotate={open}
76-
data-testid={`${props.dataTestId}TriggerIconWrapper`}
77+
data-testid={`${dataTestId}-trigger-icon-wrapper`}
7778
styles={props.styles.triggerIconContainer}
7879
>
7980
<ElementOrIcon
8081
customIconStyles={props.styles.triggerIcon}
81-
dataTestId={getDataTestId('TriggerIcon')}
8282
{...props.triggerIcon}
8383
/>
8484
</AccordionTriggerIconContainerStyled>
@@ -87,15 +87,13 @@ const AccordionStandAloneComponent = (
8787
<AccordionTitleIconWrapper styles={props.styles.titleIconContainer}>
8888
<ElementOrIcon
8989
customIconStyles={props.styles.titleIcon}
90-
dataTestId={getDataTestId('TitleIcon')}
9190
{...props.titleIcon}
9291
/>
9392
</AccordionTitleIconWrapper>
9493
)}
9594
<Text
9695
component={TextComponentType.SPAN}
9796
customTypography={props.styles.title}
98-
dataTestId={getDataTestId('TriggerText')}
9997
{...props.title}
10098
>
10199
{props.title?.content}
@@ -105,7 +103,7 @@ const AccordionStandAloneComponent = (
105103
</AccordionHeaderTitleHeadlineStyled>
106104
{props.headerRightContent && (
107105
<AccordionHeaderRightContentStyled
108-
data-testid={`${props.dataTestId}RightContent`}
106+
data-testid={`${dataTestId}-right-content`}
109107
styles={props.styles.headerRightContentContainer}
110108
>
111109
{props.headerRightContent}
@@ -114,7 +112,7 @@ const AccordionStandAloneComponent = (
114112
</AccordionHeaderMainContainerStyled>
115113
{props.subHeaderContent && (
116114
<AccordionSubHeaderContainerStyled
117-
data-testid={`${props.dataTestId}SubHeader`}
115+
data-testid={`${dataTestId}-subheader`}
118116
styles={props.styles.subHeader}
119117
>
120118
{props.subHeaderContent}
@@ -134,11 +132,11 @@ const AccordionStandAloneComponent = (
134132
styles={props.styles.lineSeparatorContainer}
135133
/>
136134
)}
137-
<AccordionPanelStyled data-testid={getDataTestId('Panel')} styles={props.styles.panel}>
135+
<AccordionPanelStyled data-testid={getDataTestId('panel')} styles={props.styles.panel}>
138136
{props.children}
139137
</AccordionPanelStyled>
140138
{props.footerContent && (
141-
<AccordionFooterStyled data-testid={getDataTestId('Footer')} styles={props.styles.footer}>
139+
<AccordionFooterStyled data-testid={getDataTestId('footer')} styles={props.styles.footer}>
142140
{props.footerContent}
143141
</AccordionFooterStyled>
144142
)}

‎src/components/actionBottomSheet/actionBottomSheetControlled.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const ActionBottomSheetControlledComponent = React.forwardRef(
8585
ref: React.ForwardedRef<HTMLDivElement> | undefined | null
8686
): JSX.Element => {
8787
const uniqueTitleId = useId('actionSheet-title');
88-
const titleId = (title?.id ?? title?.content) ? uniqueTitleId : undefined;
88+
const titleId = title?.id ?? title?.content ? uniqueTitleId : undefined;
8989
const styles = useStyles<ActionBottomSheetVariantStylesType>(
9090
STYLES_NAME.ACTION_BOTTOM_SHEET,
9191
props.variant,

‎src/components/actionBottomSheet/actionBottomSheetStandAlone.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@ import {
2020
import { IActionBottomSheetStandAlone } from './types';
2121

2222
const ActionBottomSheetStandAloneComponent = (
23-
{ hasHeader = true, scrollableRef, shadowRef, ...props }: IActionBottomSheetStandAlone,
23+
{
24+
dataTestId = 'action-bottom-sheet',
25+
hasHeader = true,
26+
scrollableRef,
27+
shadowRef,
28+
...props
29+
}: IActionBottomSheetStandAlone,
2430
ref: React.ForwardedRef<HTMLDivElement> | undefined | null
2531
): JSX.Element => {
2632
// Parent container Ref
@@ -44,7 +50,7 @@ const ActionBottomSheetStandAloneComponent = (
4450
<ActionBottomSheetStyled
4551
ref={actionBottomRef}
4652
$height={props.height}
47-
data-testid={`${props.dataTestId}Container`}
53+
data-testid={dataTestId}
4854
styles={props.styles.container}
4955
>
5056
{props.dragIcon && isMobileOrTablet && (
@@ -59,19 +65,14 @@ const ActionBottomSheetStandAloneComponent = (
5965
{props.actionLink && <Link {...props.actionLink} />}
6066
</ActionBottomSheetActionStyled>
6167
<ActionBottomSheetIconSyled styles={props.styles.closeIconContainer}>
62-
<ElementOrIcon
63-
customIconStyles={props.styles.closeIcon}
64-
dataTestId={`${props.dataTestId}Icon`}
65-
{...props.closeIcon}
66-
/>
68+
<ElementOrIcon customIconStyles={props.styles.closeIcon} {...props.closeIcon} />
6769
</ActionBottomSheetIconSyled>
6870
</ActionBottomSheetControlStyled>
6971
<ActionBottomSheetHeaderStyled styles={props.styles.header}>
7072
<ActionBottomSheetTitleSyled styles={props.styles}>
7173
<Text
7274
component={TextComponentType.H5}
7375
customTypography={props.styles.title}
74-
dataTestId={`${props.dataTestId}Title`}
7576
{...props.title}
7677
>
7778
{props.title?.content}

‎src/components/avatar/avatarStandAlone.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const AvatarStandAloneComponent = (
1818
image,
1919
onClick,
2020
styles,
21-
dataTestId,
21+
dataTestId = 'avatar',
2222
maxLengthInitials = 2,
2323
...props
2424
}: IAvatarStandAlone,

‎src/components/backToTop/__tests__/backToTop.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('BackToTop component', () => {
2626
</div>
2727
);
2828

29-
const buttonBackToTop = screen.getByTestId('backToTopButton');
29+
const buttonBackToTop = screen.getByTestId('back-to-top');
3030
expect(buttonBackToTop).toBeInTheDocument();
3131

3232
fireEvent.click(buttonBackToTop);
@@ -45,7 +45,7 @@ describe('BackToTop component', () => {
4545
</div>
4646
);
4747

48-
const buttonBackToTop = screen.getByTestId('backToTopButton');
48+
const buttonBackToTop = screen.getByTestId('back-to-top');
4949
expect(buttonBackToTop).toHaveStyle('display: flex');
5050
});
5151
});

‎src/components/backToTop/backToTopStandAlone.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,20 @@ import { BackToTopStyled } from './backToTop.styled';
88
import { IBackToTopStandAlone } from './types';
99

1010
const BackToTopStandAloneComponent = (
11-
{ dataTestId = 'backToTop', ...props }: IBackToTopStandAlone,
11+
{ dataTestId = 'back-to-top', ...props }: IBackToTopStandAlone,
1212
ref: React.ForwardedRef<HTMLButtonElement> | undefined
1313
): JSX.Element => {
1414
const ariaProps = pickAriaProps(props);
1515
return (
1616
<BackToTopStyled
1717
{...ariaProps}
1818
ref={ref}
19-
data-testid={`${dataTestId}Button`}
19+
data-testid={dataTestId}
2020
styles={props.styles}
2121
onClick={props.onClick}
2222
>
2323
{props.icon?.icon && (
24-
<Icon
25-
customIconStyles={props.styles[props.state]?.icon}
26-
dataTestId={`${dataTestId}Icon`}
27-
{...props.icon}
28-
/>
24+
<Icon customIconStyles={props.styles[props.state]?.icon} {...props.icon} />
2925
)}
3026
</BackToTopStyled>
3127
);

‎src/components/badge/__tests__/badge.test.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('Badge component', () => {
3939
const ref = jest.fn();
4040
const { container } = renderProvider(<Badge ref={ref} {...mockProps} />);
4141

42-
const badge = screen.getByTestId(mockProps.dataTestId + 'Dot');
42+
const badge = screen.getByTestId('dot');
4343
expect(badge).toBeInTheDocument();
4444

4545
const results = await axe(container);
@@ -53,7 +53,7 @@ describe('Badge component', () => {
5353
<Badge ref={ref} {...mockProps} customDotTranslate="translate(2px, 2px)" />
5454
);
5555

56-
const badge = screen.getByTestId(mockProps.dataTestId + 'Dot');
56+
const badge = screen.getByTestId('dot');
5757
expect(badge).toBeInTheDocument();
5858

5959
const results = await axe(container);
@@ -64,7 +64,7 @@ describe('Badge component', () => {
6464
it('Should be displayed correctly without label', async () => {
6565
const { container } = renderProvider(<Badge {...mockProps} label={undefined} />);
6666

67-
const badge = screen.getByTestId(mockProps.dataTestId + 'Dot');
67+
const badge = screen.getByTestId('dot');
6868
expect(badge).toBeInTheDocument();
6969

7070
const results = await axe(container);
@@ -78,7 +78,7 @@ describe('Badge component', () => {
7878
const triggerButton = screen.getByLabelText('Open menu');
7979
fireEvent.click(triggerButton);
8080

81-
const badge = screen.getByTestId(mockProps.dataTestId + 'Dot');
81+
const badge = screen.getByTestId('dot');
8282
expect(badge).toBeInTheDocument();
8383

8484
const results = await axe(container);
@@ -150,7 +150,7 @@ describe('Badge component', () => {
150150
const contentExpand = screen.getByText('Hello');
151151
expect(contentExpand).toBeInTheDocument();
152152

153-
const badgeContainer = screen.getByTestId(mockProps.dataTestId + 'BadgeContainer');
153+
const badgeContainer = screen.getByTestId(mockProps.dataTestId + '-container');
154154
fireEvent.blur(badgeContainer);
155155

156156
expect(contentExpand).not.toBeInTheDocument();

‎src/components/badge/badgeStandAlone.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
import { DotUseStateType, IBadgeStandAlone } from './types';
2323

2424
const BadgeStandAloneComponent = (
25-
{ ...props }: IBadgeStandAlone,
25+
{ dataTestId = 'badge', ...props }: IBadgeStandAlone,
2626
ref: React.ForwardedRef<unknown> | undefined | null
2727
): JSX.Element => {
2828
const badgeButtonRef = React.useRef(null);
@@ -72,15 +72,15 @@ const BadgeStandAloneComponent = (
7272
return (
7373
<BadgeContainerStyled
7474
ref={containerRef}
75-
data-testid={`${props.dataTestId}BadgeContainer`}
75+
data-testid={`${dataTestId}-container`}
7676
onBlur={props.onBadgeBlur}
7777
>
7878
<BadgeStyled
7979
ref={badgeButtonRef}
8080
aria-controls={`${id}-popover`}
8181
aria-expanded={props.open}
8282
aria-label={props['aria-label']}
83-
data-testid={`${props.dataTestId}Badge`}
83+
data-testid={dataTestId}
8484
styles={props.styles}
8585
type={ButtonType.BUTTON}
8686
onClick={props.onClick}
@@ -92,7 +92,7 @@ const BadgeStandAloneComponent = (
9292
customDotTranslate={getCustomDotTranslate()}
9393
dotWidthHeight={dotWidthHeight}
9494
>
95-
<Dot ref={dotRef} dataTestId={`${props.dataTestId}Dot`} {...props.dot} />
95+
<Dot ref={dotRef} {...props.dot} />
9696
</BadgeDotStyled>
9797
)}
9898
<ElementOrIcon
@@ -107,7 +107,7 @@ const BadgeStandAloneComponent = (
107107
color={props.iconStyles?.labelFontColor}
108108
component={TextComponentType.SPAN}
109109
customTypography={labelStyles}
110-
dataTestId={`${props.dataTestId}Label`}
110+
dataTestId={`${dataTestId}-label`}
111111
{...props.label}
112112
>
113113
{props.label.content}
@@ -120,18 +120,14 @@ const BadgeStandAloneComponent = (
120120
/>
121121
</BadgeLabelStyled>
122122
)}
123-
<ScreenReaderOnly
124-
ariaLive={AriaLiveOptionType.POLITE}
125-
dataTestId={`${props.dataTestId}ScreenReader`}
126-
>
123+
<ScreenReaderOnly ariaLive={AriaLiveOptionType.POLITE}>
127124
{props.ariaLiveText}
128125
</ScreenReaderOnly>
129126
</BadgeStyled>
130127
{props.popover.variant && props.popover.content && (
131128
<Popover
132129
ref={callbackRef}
133130
align={POSITIONS.BOTTOM_GAP_RIGHT}
134-
dataTestId={`${props.dataTestId}Popover`}
135131
id={`${id}-popover`}
136132
open={props.open}
137133
preventCloseOnClickElements={[badgeButtonRef.current]}

‎src/components/badgeV2/__tests__/badge.test.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ describe('Badge component', () => {
3131
const ref = jest.fn();
3232
const { container } = renderProvider(<Badge ref={ref} {...mockProps} />);
3333

34-
const badge = screen.getByTestId(mockProps.dataTestId + 'Badge');
34+
const badge = screen.getByTestId(mockProps.dataTestId as string);
3535
expect(badge).toBeInTheDocument();
3636

3737
const results = await axe(container);
@@ -43,7 +43,7 @@ describe('Badge component', () => {
4343
const ref = jest.fn();
4444
renderProvider(<Badge ref={ref} {...mockProps} customDotTranslate="translate(2px, 2px)" />);
4545

46-
const badge = screen.getByTestId(mockProps.dataTestId + 'Badge');
46+
const badge = screen.getByTestId(mockProps.dataTestId as string);
4747
expect(badge).toBeInTheDocument();
4848
});
4949

@@ -53,14 +53,14 @@ describe('Badge component', () => {
5353
<Badge ref={ref} {...mockProps} cts={{ customDotNumberTranslate: '"translate(2px, 2px)' }} />
5454
);
5555

56-
const badge = screen.getByTestId(mockProps.dataTestId + 'Badge');
56+
const badge = screen.getByTestId(mockProps.dataTestId as string);
5757
expect(badge).toBeInTheDocument();
5858
});
5959

6060
it('Should be displayed correctly without label', async () => {
6161
const { container } = renderProvider(<Badge {...mockProps} label={undefined} />);
6262

63-
const badge = screen.getByTestId(mockProps.dataTestId + 'Badge');
63+
const badge = screen.getByTestId(mockProps.dataTestId as string);
6464
expect(badge).toBeInTheDocument();
6565

6666
const results = await axe(container);
@@ -74,7 +74,7 @@ describe('Badge component', () => {
7474
const triggerButton = screen.getByLabelText('Open menu');
7575
fireEvent.click(triggerButton);
7676

77-
const badge = screen.getByTestId(mockProps.dataTestId + 'Badge');
77+
const badge = screen.getByTestId(mockProps.dataTestId as string);
7878
expect(badge).toBeInTheDocument();
7979
});
8080

@@ -100,7 +100,7 @@ describe('Badge component', () => {
100100
const triggerButton = screen.getByLabelText('Open menu');
101101
fireEvent.blur(triggerButton);
102102

103-
const badge = screen.getByTestId(mockProps.dataTestId + 'Badge');
103+
const badge = screen.getByTestId(mockProps.dataTestId as string);
104104
expect(badge).toBeInTheDocument();
105105
});
106106
});

0 commit comments

Comments
 (0)