Merge pull request #46 from input-output-hk/feat/add-test-id-lw-10959

feat: add test ids for tokens table list lw-10959

Author: bslabiak

src/design-system/assets-table/assets-table-token-amount.component.tsx

@@ -16,7 +16,9 @@ export const TokenAmount = ({
 }: Readonly<Props>): JSX.Element => {
   return (
     <Flex flexDirection="column" alignItems="flex-end" className={cx.container}>
-      <Text.Body.Large weight="$semibold">{amount}</Text.Body.Large>
+      <Text.Body.Large weight="$semibold" data-testid="token-amount">
+        {amount}
+      </Text.Body.Large>
       <Text.Body.Normal color="secondary" weight="$semibold">
         {fiatPrice}
       </Text.Body.Normal>

src/design-system/assets-table/assets-table-token-profile.component.tsx

@@ -11,25 +11,33 @@ interface Props {
   imageSrc: string;
   name: string;
   description: string;
+  testId?: string;
 }
 
 export const TokenProfile = ({
   imageSrc,
   name,
   description,
+  testId = 'token-profile',
 }: Readonly<Props>): JSX.Element => {
   return (
     <div className={cx.container}>
       <Grid columns="$fitContent" gutters="$0">
         <Cell>
           <Box mr="$24">
-            <Image imageSrc={imageSrc} alt={name} />
+            <Image imageSrc={imageSrc} alt={name} testId={`${testId}-icon`} />
           </Box>
         </Cell>
         <Cell>
-          <Text.Body.Large weight="$semibold">{name}</Text.Body.Large>
+          <Text.Body.Large weight="$semibold" data-testid={`${testId}-name`}>
+            {name}
+          </Text.Body.Large>
           <Box>
-            <Text.Body.Normal color="secondary" weight="$semibold">
+            <Text.Body.Normal
+              color="secondary"
+              weight="$semibold"
+              data-testid={`${testId}-ticker`}
+            >
               {description}
             </Text.Body.Normal>
           </Box>

src/design-system/profile-picture/image.component.tsx

@@ -12,6 +12,7 @@ interface Props {
   alt?: string;
   delayMs?: number;
   selected?: boolean;
+  testId?: string;
 }
 
 export const Image = ({
@@ -20,13 +21,19 @@ export const Image = ({
   alt,
   delayMs = 600,
   selected,
+  testId = 'profile-picture',
 }: Readonly<Props>): JSX.Element => (
   <RadixUIAvatar.Root
     className={classNames(cx.root, cx.container, {
       [cx.selected]: selected,
     })}
   >
-    <RadixUIAvatar.Image className={cx.image} src={imageSrc} alt={alt} />
+    <RadixUIAvatar.Image
+      className={cx.image}
+      src={imageSrc}
+      alt={alt}
+      data-testid={testId}
+    />
     <RadixUIAvatar.Fallback delayMs={delayMs}>
       {fallback}
     </RadixUIAvatar.Fallback>