chore(e2e): generalized data-testid

web3ui · Jul 3, 2022 · 52e1c60 · 52e1c60
1 parent 296bc6e
commit 52e1c60
Show file tree

Hide file tree

Showing 88 changed files with 1,167 additions and 897 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,6 @@
     "eslint.rules.customizations": [{ "rule": "*", "severity": "error" }],
     "scss.lint.unknownAtRules": "ignore",
     "typescript.tsdk": "./node_modules/typescript/lib",
-    "svg.preview.background": "dark-transparent"
+    "svg.preview.background": "dark-transparent",
+    "cSpell.words": ["blockie", "Blockies", "moralis", "testid"]
 }
diff --git a/packages/core/src/lib/Avatar/Avatar.test.tsx b/packages/core/src/lib/Avatar/Avatar.test.tsx
@@ -15,7 +15,7 @@ const {
     CustomSizeAndFontSize,
 } = composeStories(stories);
 
-const testTextId = 'test-text';
+const testTextId = 'test-avatar-title';
 export const testAvatarId = 'test-avatar';
 
 test('Avatar - Default Guy', () => {

diff --git a/packages/core/src/lib/Avatar/Avatar.tsx b/packages/core/src/lib/Avatar/Avatar.tsx
@@ -8,53 +8,53 @@ const { DivStyled, H4Styled } = styles;
 const avatarColors = ['#FEB7B7', '#E1B5F6', '#A7D6F9', '#AADCD6', '#F0DC7D'];
 
 const Avatar: React.FC<AvatarProps> = ({
-  avatarBackground,
-  borderRadius,
-  fontSize = 15,
-  image,
-  isRounded = false,
-  size = 40,
-  text,
-  textColor = color.white,
-  theme,
-  avatarKey = 1,
-  ...props
+    avatarBackground,
+    borderRadius,
+    fontSize = 15,
+    image,
+    isRounded = false,
+    size = 40,
+    text,
+    textColor = color.white,
+    theme,
+    avatarKey = 1,
+    ...props
 }: AvatarProps) => {
-  const getRandomColor = (): string => {
-    if (avatarBackground) {
-      return avatarBackground;
-    }
-    if (theme == 'image' || image) {
-      return 'transparent';
-    }
-    const pos = avatarKey % avatarColors.length;
-    return avatarColors[pos - 1] || '#FEB7B7';
-  };
+    const getRandomColor = (): string => {
+        if (avatarBackground) {
+            return avatarBackground;
+        }
+        if (theme == 'image' || image) {
+            return 'transparent';
+        }
+        const pos = avatarKey % avatarColors.length;
+        return avatarColors[pos - 1] || '#FEB7B7';
+    };
 
-  return (
-    <DivStyled
-      aria-label='users avatar'
-      avatarBackground={getRandomColor()}
-      borderRadius={borderRadius}
-      data-testid='test-avatar'
-      fontSize={fontSize}
-      image={image}
-      isRounded={isRounded}
-      role={theme === 'image' ? 'img' : 'generic'}
-      size={size}
-      textColor={textColor}
-      theme={theme}
-      {...props}
-    >
-      {theme === 'image' ? (
-        !image && renderAvatarSVG()
-      ) : (
-        <H4Styled data-testid='test-text' textColor={textColor}>
-          {text && text.length > 1 ? `${text[0]}${text[1]}` : text}
-        </H4Styled>
-      )}
-    </DivStyled>
-  );
+    return (
+        <DivStyled
+            aria-label="users avatar"
+            avatarBackground={getRandomColor()}
+            borderRadius={borderRadius}
+            data-testid="test-avatar"
+            fontSize={fontSize}
+            image={image}
+            isRounded={isRounded}
+            role={theme === 'image' ? 'img' : 'generic'}
+            size={size}
+            textColor={textColor}
+            theme={theme}
+            {...props}
+        >
+            {theme === 'image' ? (
+                !image && renderAvatarSVG()
+            ) : (
+                <H4Styled data-testid="test-avatar-title" textColor={textColor}>
+                    {text && text.length > 1 ? `${text[0]}${text[1]}` : text}
+                </H4Styled>
+            )}
+        </DivStyled>
+    );
 };
 
 export default Avatar;
diff --git a/packages/core/src/lib/Badge/Badge.test.tsx b/packages/core/src/lib/Badge/Badge.test.tsx
@@ -8,7 +8,7 @@ import { composeStories } from '@storybook/testing-react';
 
 const { Danger, Normal, Success, Warning } = composeStories(stories);
 
-const testId = 'test-badge-id';
+const testId = 'test-badge';
 const testText = 'test-badge-text';
 
 test('Renders Danger', () => {

diff --git a/packages/core/src/lib/Badge/Badge.tsx b/packages/core/src/lib/Badge/Badge.tsx
@@ -1,4 +1,3 @@
-
 import { BadgeProps } from './types';
 import styles from './Badge.styles';
 import { Typography } from '../Typography';
@@ -12,7 +11,7 @@ const Badge: React.FC<BadgeProps> = ({
     ...props
 }) => {
     return (
-        <DivStyled data-testid="test-badge-id" state={state} {...props}>
+        <DivStyled data-testid="test-badge" state={state} {...props}>
             <Typography
                 color="white"
                 data-testid="test-badge-text"

diff --git a/packages/core/src/lib/BannerStrip/BannerStrip.test.tsx b/packages/core/src/lib/BannerStrip/BannerStrip.test.tsx
@@ -7,7 +7,7 @@ import { test, expect, describe } from 'vitest';
 const { Standard, StandardWithButton, Warning, Error, Success } =
     composeStories(stories);
 
-const testId = 'banner-strip';
+const testId = 'test-banner-strip';
 
 test('Renders Standard', () => {
     const testText = 'Hey this is a notification you should check out';

diff --git a/packages/core/src/lib/BannerStrip/BannerStrip.tsx b/packages/core/src/lib/BannerStrip/BannerStrip.tsx
@@ -1,4 +1,3 @@
-
 import { BannerStripProps } from '.';
 import { Button } from '../Button';
 import styles from './BannerStrip.styles';
@@ -12,7 +11,7 @@ const BannerStrip: React.FC<BannerStripProps> = ({
     text,
     type = 'standard',
 }) => (
-    <SectionStyled type={type} height={height} data-testid="banner-strip">
+    <SectionStyled type={type} height={height} data-testid="test-banner-strip">
         <strong>{text}</strong>
         {buttonDisplayed && <Button {...buttonConfig} />}
     </SectionStyled>

diff --git a/packages/core/src/lib/Breadcrumbs/Breadcrumbs.test.tsx b/packages/core/src/lib/Breadcrumbs/Breadcrumbs.test.tsx
@@ -5,25 +5,25 @@ import { color } from '@web3uikit/styles';
 import { test, expect, describe } from 'vitest';
 const { One, Two, Three, Four } = composeStories(stories);
 
-const olId = 'breadcrumbs-ol-test-id';
-const navId = 'breadcrumbs-nav-test-id';
-const separatorId = 'breadcrumbs-separator-test-id';
-const breadcrumbId = 'breadcrumb-test-id';
+const olId = 'test-breadcrumbs-list';
+const navId = 'test-breadcrumbs';
+const separatorId = 'test-breadcrumbs-separator';
+const breadcrumbId = 'test-breadcrumb-item';
 
 test('Renders - Breadcrumbs One', () => {
     render(<One />);
     expect(screen.getByTestId(navId)).not.toBeNull();
     expect(screen.queryByTestId(separatorId)).toBeNull();
     expect(
-        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+        screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
     ).toBeDefined();
     expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
 test.skip('Renders - Breadcrumbs One: Hover Test', async () => {
     render(<One />);
     // TODO: Hover/MouseOver Event does not work as expected so it passes. Need to Fix
-    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
     fireEvent.mouseOver(breadcrumbElement);
     await waitFor(() => breadcrumbElement);
     expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
@@ -34,15 +34,15 @@ test('Renders - Breadcrumbs Two', async () => {
     expect(screen.getByTestId(navId)).not.toBeNull();
     expect(screen.queryByTestId(separatorId)).not.toBeNull();
     expect(
-        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+        screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
     ).toBeDefined();
     expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
 test.skip('Renders - Breadcrumbs Two: Hover Test', async () => {
     render(<Two />);
     // TODO: Hover Event does not work as expected so it passes. Need to Fix
-    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
     fireEvent.mouseOver(breadcrumbElement);
     await waitFor(() => breadcrumbElement);
     expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
@@ -59,15 +59,15 @@ test('Renders - Breadcrumbs Three', () => {
         1,
     );
     expect(
-        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+        screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
     ).toBeDefined();
     expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
 test.skip('Renders - Breadcrumbs Three: Hover Test', async () => {
     render(<Three />);
     // TODO: Hover Event does not work as expected so it passes. Need to Fix
-    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
     fireEvent.mouseOver(breadcrumbElement);
     await waitFor(() => breadcrumbElement);
     expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
@@ -89,15 +89,15 @@ test('Renders - Breadcrumbs Four', () => {
         1,
     );
     expect(
-        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+        screen.queryByTestId(`${breadcrumbId}-0`)?.querySelector('svg'),
     ).toBeDefined();
     expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
 test.skip('Renders - Breadcrumbs Four: Hover Test', async () => {
     render(<Four />);
     // TODO: Hover Event does not work as expected so it passes. Need to Fix
-    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    const breadcrumbElement = screen.getByTestId(`${breadcrumbId}-0`);
     fireEvent.mouseOver(breadcrumbElement);
     await waitFor(() => breadcrumbElement);
     expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);

diff --git a/packages/core/src/lib/Breadcrumbs/Breadcrumbs.tsx b/packages/core/src/lib/Breadcrumbs/Breadcrumbs.tsx
@@ -29,9 +29,7 @@ function renderList(
         const crumb = (
             <ListItemStyled
                 key={`breadcrumb-${i}`}
-                data-testid={
-                    i == 0 ? 'breadcrumb-test-id' : `breadcrumb-test-id-${i}`
-                }
+                data-testid={`test-breadcrumb-item-${i}`}
             >
                 <Breadcrumb to={route.path}>
                     {route?.icon}
@@ -48,7 +46,7 @@ function renderList(
                 crumb,
                 <BreadcrumbsSeparator
                     key={`separator-${i}`}
-                    data-testid={'breadcrumbs-separator-test-id'}
+                    data-testid={'test-breadcrumbs-separator'}
                 >
                     {separator ?? (
                         <ChevronRight
@@ -76,12 +74,8 @@ const Breadcrumbs: IBreadcrumbs = ({
     ...props
 }) => {
     return (
-        <NavStyled
-            color={theme}
-            data-testid={'breadcrumbs-nav-test-id'}
-            {...props}
-        >
-            <ListStyled style={style} data-testid={'breadcrumbs-ol-test-id'}>
+        <NavStyled color={theme} data-testid={'test-breadcrumbs'} {...props}>
+            <ListStyled style={style} data-testid={'test-breadcrumbs-list'}>
                 {renderList(routes, separator, currentLocation)}
             </ListStyled>
         </NavStyled>

diff --git a/packages/core/src/lib/Button/Button.tsx b/packages/core/src/lib/Button/Button.tsx
@@ -1,16 +1,9 @@
-import styled from 'styled-components';
 import { Loading } from '../Loading';
 import ButtonStyles from './Button.styles';
 import { ButtonProps } from './types';
 
 const { ButtonStyled } = ButtonStyles;
 
-const IconStyled = styled.div`
-    height: 24px;
-    weight: 24px;
-    overflow: hidden;
-`;
-
 const Button: React.FC<ButtonProps> = ({
     color,
     disabled = false,

diff --git a/packages/core/src/lib/Card/Card.test.tsx b/packages/core/src/lib/Card/Card.test.tsx
@@ -5,11 +5,12 @@ import { test, expect, describe } from 'vitest';
 
 const { Regular, RegularSelected, Disabled } = composeStories(stories);
 
-const cardId = 'card-test-id';
-const checkmarkId = 'check-test-id';
-const descriptionId = 'desc-test-id';
-const titleId = 'title-test-id';
-const headerId = 'header-test-id';
+const cardId = 'test-card';
+const headerId = 'test-card-header';
+const checkmarkId = 'test-card-icon-check';
+const descriptionId = 'test-card-description';
+const titleId = 'test-card-title';
+
 test('Renders - Card Regular', () => {
     render(<Regular />);
     const desc = Regular?.args?.description;

diff --git a/packages/core/src/lib/Card/Card.tsx b/packages/core/src/lib/Card/Card.tsx
@@ -25,7 +25,7 @@ const Card: React.FC<CardProps> = ({
     return (
         <DivStyled
             aria-label={isSelected ? 'card not selected' : 'card selected'}
-            data-testid={'card-test-id'}
+            data-testid="test-card"
             id={id}
             onClick={() => {
                 if (isDisabled) return;
@@ -39,11 +39,11 @@ const Card: React.FC<CardProps> = ({
             cursorType={cursorType}
             {...props}
         >
-            <HeaderStyled data-testid={'header-test-id'}>
+            <HeaderStyled data-testid={'test-card-header'}>
                 {isSelected && (
                     <AbsoluteIconStyled position="topL">
                         <Checkmark
-                            data-testid={'check-test-id'}
+                            data-testid="test-card-icon-check"
                             title="checkmark icon"
                             titleId="card checkmark icon"
                             fill={color.green}
@@ -54,20 +54,19 @@ const Card: React.FC<CardProps> = ({
                 {!isDisabled && tooltipText && (
                     <AbsoluteIconStyled position="topR">
                         <Tooltip
-                            position={'bottom'}
                             children={[
                                 <HelpCircle
-                                    key="ttip-card"
-                                    title="help circle icon"
-                                    titleId="card help circle icon"
-                                    data-testid={'help-test-id'}
                                     fill={color.blue}
                                     fontSize={22}
+                                    key="tip-card"
+                                    title="help circle icon"
+                                    titleId="card help circle icon"
                                 />,
                             ]}
                             content={tooltipText}
                             move={tooltipMove}
                             moveBody={tooltipMoveBody}
+                            position={'bottom'}
                         />
                     </AbsoluteIconStyled>
                 )}
@@ -77,18 +76,18 @@ const Card: React.FC<CardProps> = ({
                 <FooterStyled>
                     {title && (
                         <Typography
-                            variant="subtitle2"
-                            data-testid={'title-test-id'}
                             color={color.blue}
+                            data-testid="test-card-title"
+                            variant="subtitle2"
                         >
                             {title}
                         </Typography>
                     )}
                     {description && (
                         <Typography
-                            variant="caption14"
-                            data-testid={'desc-test-id'}
                             color={color.blue}
+                            data-testid="test-card-description"
+                            variant="caption14"
                         >
                             {description}
                         </Typography>