Skip to content

Commit 52e1c60

Browse files
AbhinavMVAbhinavMV
committed
chore(e2e): generalized data-testid
1 parent 296bc6e commit 52e1c60

File tree

88 files changed

+1167
-897
lines changed

Some content is hidden

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

88 files changed

+1167
-897
lines changed

‎.vscode/settings.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@
1313
"eslint.rules.customizations": [{ "rule": "*", "severity": "error" }],
1414
"scss.lint.unknownAtRules": "ignore",
1515
"typescript.tsdk": "./node_modules/typescript/lib",
16-
"svg.preview.background": "dark-transparent"
16+
"svg.preview.background": "dark-transparent",
17+
"cSpell.words": ["blockie", "Blockies", "moralis", "testid"]
1718
}

‎packages/core/src/lib/Avatar/Avatar.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const {
1515
CustomSizeAndFontSize,
1616
} = composeStories(stories);
1717

18-
const testTextId = 'test-text';
18+
const testTextId = 'test-avatar-title';
1919
export const testAvatarId = 'test-avatar';
2020

2121
test('Avatar - Default Guy', () => {

‎packages/core/src/lib/Avatar/Avatar.tsx

+45-45
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,53 @@ const { DivStyled, H4Styled } = styles;
88
const avatarColors = ['#FEB7B7', '#E1B5F6', '#A7D6F9', '#AADCD6', '#F0DC7D'];
99

1010
const Avatar: React.FC<AvatarProps> = ({
11-
avatarBackground,
12-
borderRadius,
13-
fontSize = 15,
14-
image,
15-
isRounded = false,
16-
size = 40,
17-
text,
18-
textColor = color.white,
19-
theme,
20-
avatarKey = 1,
21-
...props
11+
avatarBackground,
12+
borderRadius,
13+
fontSize = 15,
14+
image,
15+
isRounded = false,
16+
size = 40,
17+
text,
18+
textColor = color.white,
19+
theme,
20+
avatarKey = 1,
21+
...props
2222
}: AvatarProps) => {
23-
const getRandomColor = (): string => {
24-
if (avatarBackground) {
25-
return avatarBackground;
26-
}
27-
if (theme == 'image' || image) {
28-
return 'transparent';
29-
}
30-
const pos = avatarKey % avatarColors.length;
31-
return avatarColors[pos - 1] || '#FEB7B7';
32-
};
23+
const getRandomColor = (): string => {
24+
if (avatarBackground) {
25+
return avatarBackground;
26+
}
27+
if (theme == 'image' || image) {
28+
return 'transparent';
29+
}
30+
const pos = avatarKey % avatarColors.length;
31+
return avatarColors[pos - 1] || '#FEB7B7';
32+
};
3333

34-
return (
35-
<DivStyled
36-
aria-label='users avatar'
37-
avatarBackground={getRandomColor()}
38-
borderRadius={borderRadius}
39-
data-testid='test-avatar'
40-
fontSize={fontSize}
41-
image={image}
42-
isRounded={isRounded}
43-
role={theme === 'image' ? 'img' : 'generic'}
44-
size={size}
45-
textColor={textColor}
46-
theme={theme}
47-
{...props}
48-
>
49-
{theme === 'image' ? (
50-
!image && renderAvatarSVG()
51-
) : (
52-
<H4Styled data-testid='test-text' textColor={textColor}>
53-
{text && text.length > 1 ? `${text[0]}${text[1]}` : text}
54-
</H4Styled>
55-
)}
56-
</DivStyled>
57-
);
34+
return (
35+
<DivStyled
36+
aria-label="users avatar"
37+
avatarBackground={getRandomColor()}
38+
borderRadius={borderRadius}
39+
data-testid="test-avatar"
40+
fontSize={fontSize}
41+
image={image}
42+
isRounded={isRounded}
43+
role={theme === 'image' ? 'img' : 'generic'}
44+
size={size}
45+
textColor={textColor}
46+
theme={theme}
47+
{...props}
48+
>
49+
{theme === 'image' ? (
50+
!image && renderAvatarSVG()
51+
) : (
52+
<H4Styled data-testid="test-avatar-title" textColor={textColor}>
53+
{text && text.length > 1 ? `${text[0]}${text[1]}` : text}
54+
</H4Styled>
55+
)}
56+
</DivStyled>
57+
);
5858
};
5959

6060
export default Avatar;

‎packages/core/src/lib/Badge/Badge.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { composeStories } from '@storybook/testing-react';
88

99
const { Danger, Normal, Success, Warning } = composeStories(stories);
1010

11-
const testId = 'test-badge-id';
11+
const testId = 'test-badge';
1212
const testText = 'test-badge-text';
1313

1414
test('Renders Danger', () => {

‎packages/core/src/lib/Badge/Badge.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import { BadgeProps } from './types';
32
import styles from './Badge.styles';
43
import { Typography } from '../Typography';
@@ -12,7 +11,7 @@ const Badge: React.FC<BadgeProps> = ({
1211
...props
1312
}) => {
1413
return (
15-
<DivStyled data-testid="test-badge-id" state={state} {...props}>
14+
<DivStyled data-testid="test-badge" state={state} {...props}>
1615
<Typography
1716
color="white"
1817
data-testid="test-badge-text"

‎packages/core/src/lib/BannerStrip/BannerStrip.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { test, expect, describe } from 'vitest';
77
const { Standard, StandardWithButton, Warning, Error, Success } =
88
composeStories(stories);
99

10-
const testId = 'banner-strip';
10+
const testId = 'test-banner-strip';
1111

1212
test('Renders Standard', () => {
1313
const testText = 'Hey this is a notification you should check out';

‎packages/core/src/lib/BannerStrip/BannerStrip.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import { BannerStripProps } from '.';
32
import { Button } from '../Button';
43
import styles from './BannerStrip.styles';
@@ -12,7 +11,7 @@ const BannerStrip: React.FC<BannerStripProps> = ({
1211
text,
1312
type = 'standard',
1413
}) => (
15-
<SectionStyled type={type} height={height} data-testid="banner-strip">
14+
<SectionStyled type={type} height={height} data-testid="test-banner-strip">
1615
<strong>{text}</strong>
1716
{buttonDisplayed && <Button {...buttonConfig} />}
1817
</SectionStyled>

‎packages/core/src/lib/Breadcrumbs/Breadcrumbs.test.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,25 @@ import { color } from '@web3uikit/styles';
55
import { test, expect, describe } from 'vitest';
66
const { One, Two, Three, Four } = composeStories(stories);
77

8-
const olId = 'breadcrumbs-ol-test-id';
9-
const navId = 'breadcrumbs-nav-test-id';
10-
const separatorId = 'breadcrumbs-separator-test-id';
11-
const breadcrumbId = 'breadcrumb-test-id';
8+
const olId = 'test-breadcrumbs-list';
9+
const navId = 'test-breadcrumbs';
10+
const separatorId = 'test-breadcrumbs-separator';
11+
const breadcrumbId = 'test-breadcrumb-item';
1212

1313
test('Renders - Breadcrumbs One', () => {
1414
render(<One />);
1515
expect(screen.getByTestId(navId)).not.toBeNull();
1616
expect(screen.queryByTestId(separatorId)).toBeNull();
1717
expect(
18-
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
18+
screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
1919
).toBeDefined();
2020
expect(screen.queryByTestId(olId)).not.toBeNull();
2121
});
2222

2323
test.skip('Renders - Breadcrumbs One: Hover Test', async () => {
2424
render(<One />);
2525
// TODO: Hover/MouseOver Event does not work as expected so it passes. Need to Fix
26-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
26+
const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
2727
fireEvent.mouseOver(breadcrumbElement);
2828
await waitFor(() => breadcrumbElement);
2929
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
@@ -34,15 +34,15 @@ test('Renders - Breadcrumbs Two', async () => {
3434
expect(screen.getByTestId(navId)).not.toBeNull();
3535
expect(screen.queryByTestId(separatorId)).not.toBeNull();
3636
expect(
37-
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
37+
screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
3838
).toBeDefined();
3939
expect(screen.queryByTestId(olId)).not.toBeNull();
4040
});
4141

4242
test.skip('Renders - Breadcrumbs Two: Hover Test', async () => {
4343
render(<Two />);
4444
// TODO: Hover Event does not work as expected so it passes. Need to Fix
45-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
45+
const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
4646
fireEvent.mouseOver(breadcrumbElement);
4747
await waitFor(() => breadcrumbElement);
4848
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
@@ -59,15 +59,15 @@ test('Renders - Breadcrumbs Three', () => {
5959
1,
6060
);
6161
expect(
62-
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
62+
screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
6363
).toBeDefined();
6464
expect(screen.queryByTestId(olId)).not.toBeNull();
6565
});
6666

6767
test.skip('Renders - Breadcrumbs Three: Hover Test', async () => {
6868
render(<Three />);
6969
// TODO: Hover Event does not work as expected so it passes. Need to Fix
70-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
70+
const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
7171
fireEvent.mouseOver(breadcrumbElement);
7272
await waitFor(() => breadcrumbElement);
7373
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
@@ -89,15 +89,15 @@ test('Renders - Breadcrumbs Four', () => {
8989
1,
9090
);
9191
expect(
92-
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
92+
screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
9393
).toBeDefined();
9494
expect(screen.queryByTestId(olId)).not.toBeNull();
9595
});
9696

9797
test.skip('Renders - Breadcrumbs Four: Hover Test', async () => {
9898
render(<Four />);
9999
// TODO: Hover Event does not work as expected so it passes. Need to Fix
100-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
100+
const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
101101
fireEvent.mouseOver(breadcrumbElement);
102102
await waitFor(() => breadcrumbElement);
103103
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);

‎packages/core/src/lib/Breadcrumbs/Breadcrumbs.tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ function renderList(
2929
const crumb = (
3030
<ListItemStyled
3131
key={`breadcrumb-${i}`}
32-
data-testid={
33-
i == 0 ? 'breadcrumb-test-id' : `breadcrumb-test-id-${i}`
34-
}
32+
data-testid={`test-breadcrumb-item-${i}`}
3533
>
3634
<Breadcrumb to={route.path}>
3735
{route?.icon}
@@ -48,7 +46,7 @@ function renderList(
4846
crumb,
4947
<BreadcrumbsSeparator
5048
key={`separator-${i}`}
51-
data-testid={'breadcrumbs-separator-test-id'}
49+
data-testid={'test-breadcrumbs-separator'}
5250
>
5351
{separator ?? (
5452
<ChevronRight
@@ -76,12 +74,8 @@ const Breadcrumbs: IBreadcrumbs = ({
7674
...props
7775
}) => {
7876
return (
79-
<NavStyled
80-
color={theme}
81-
data-testid={'breadcrumbs-nav-test-id'}
82-
{...props}
83-
>
84-
<ListStyled style={style} data-testid={'breadcrumbs-ol-test-id'}>
77+
<NavStyled color={theme} data-testid={'test-breadcrumbs'} {...props}>
78+
<ListStyled style={style} data-testid={'test-breadcrumbs-list'}>
8579
{renderList(routes, separator, currentLocation)}
8680
</ListStyled>
8781
</NavStyled>

‎packages/core/src/lib/Button/Button.tsx

-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
import styled from 'styled-components';
21
import { Loading } from '../Loading';
32
import ButtonStyles from './Button.styles';
43
import { ButtonProps } from './types';
54

65
const { ButtonStyled } = ButtonStyles;
76

8-
const IconStyled = styled.div`
9-
height: 24px;
10-
weight: 24px;
11-
overflow: hidden;
12-
`;
13-
147
const Button: React.FC<ButtonProps> = ({
158
color,
169
disabled = false,

‎packages/core/src/lib/Card/Card.test.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import { test, expect, describe } from 'vitest';
55

66
const { Regular, RegularSelected, Disabled } = composeStories(stories);
77

8-
const cardId = 'card-test-id';
9-
const checkmarkId = 'check-test-id';
10-
const descriptionId = 'desc-test-id';
11-
const titleId = 'title-test-id';
12-
const headerId = 'header-test-id';
8+
const cardId = 'test-card';
9+
const headerId = 'test-card-header';
10+
const checkmarkId = 'test-card-icon-check';
11+
const descriptionId = 'test-card-description';
12+
const titleId = 'test-card-title';
13+
1314
test('Renders - Card Regular', () => {
1415
render(<Regular />);
1516
const desc = Regular?.args?.description;

‎packages/core/src/lib/Card/Card.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Card: React.FC<CardProps> = ({
2525
return (
2626
<DivStyled
2727
aria-label={isSelected ? 'card not selected' : 'card selected'}
28-
data-testid={'card-test-id'}
28+
data-testid="test-card"
2929
id={id}
3030
onClick={() => {
3131
if (isDisabled) return;
@@ -39,11 +39,11 @@ const Card: React.FC<CardProps> = ({
3939
cursorType={cursorType}
4040
{...props}
4141
>
42-
<HeaderStyled data-testid={'header-test-id'}>
42+
<HeaderStyled data-testid={'test-card-header'}>
4343
{isSelected && (
4444
<AbsoluteIconStyled position="topL">
4545
<Checkmark
46-
data-testid={'check-test-id'}
46+
data-testid="test-card-icon-check"
4747
title="checkmark icon"
4848
titleId="card checkmark icon"
4949
fill={color.green}
@@ -54,20 +54,19 @@ const Card: React.FC<CardProps> = ({
5454
{!isDisabled && tooltipText && (
5555
<AbsoluteIconStyled position="topR">
5656
<Tooltip
57-
position={'bottom'}
5857
children={[
5958
<HelpCircle
60-
key="ttip-card"
61-
title="help circle icon"
62-
titleId="card help circle icon"
63-
data-testid={'help-test-id'}
6459
fill={color.blue}
6560
fontSize={22}
61+
key="tip-card"
62+
title="help circle icon"
63+
titleId="card help circle icon"
6664
/>,
6765
]}
6866
content={tooltipText}
6967
move={tooltipMove}
7068
moveBody={tooltipMoveBody}
69+
position={'bottom'}
7170
/>
7271
</AbsoluteIconStyled>
7372
)}
@@ -77,18 +76,18 @@ const Card: React.FC<CardProps> = ({
7776
<FooterStyled>
7877
{title && (
7978
<Typography
80-
variant="subtitle2"
81-
data-testid={'title-test-id'}
8279
color={color.blue}
80+
data-testid="test-card-title"
81+
variant="subtitle2"
8382
>
8483
{title}
8584
</Typography>
8685
)}
8786
{description && (
8887
<Typography
89-
variant="caption14"
90-
data-testid={'desc-test-id'}
9188
color={color.blue}
89+
data-testid="test-card-description"
90+
variant="caption14"
9291
>
9392
{description}
9493
</Typography>

0 commit comments

Comments
 (0)