[TKAI-3543] test: add data-testid attribute on select-interactive and…

… card value components (#134) * test: add data-testid attribute on select-interactive * test: add data-testid attribute on card value
layerx-labs · Feb 26, 2024 · 434aef5 · 434aef5
1 parent f76251e
commit 434aef5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/atoms/select-interactive/index.tsx b/src/atoms/select-interactive/index.tsx
@@ -22,10 +22,11 @@ const SelectInteractive = ({
   formatGroupLabel = true,
   onChange = () => {},
   onInputChange = () => {},
+  dataTestId,
   ...rest
 }: SelectInteractiveProps<TSelectInteractiveOption>) => {
   return (
-    <Styles.SelectWrapper {...rest}>
+    <Styles.SelectWrapper data-testid={dataTestId} {...rest}>
       <Select
         name={name}
         value={value}

diff --git a/src/atoms/select-interactive/types.ts b/src/atoms/select-interactive/types.ts
@@ -44,4 +44,5 @@ export interface SelectInteractiveProps<T extends Options>
   value?: ReadonlyArray<TOptions> | TOptions | null | undefined;
   onChange: (values: Array<TOptions> | TOptions) => void;
   options: ReadonlyArray<TOptions | OptionsGroup<TOptions>>;
+  dataTestId?: string;
 }
diff --git a/src/molecules/card-value/index.tsx b/src/molecules/card-value/index.tsx
@@ -11,6 +11,7 @@ export interface CardValueProps {
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   className?: string;
   style?: React.CSSProperties;
+  dataTestId?: string;
 }
 
 const CardValue = (props: CardValueProps) => {
@@ -23,10 +24,15 @@ const CardValue = (props: CardValueProps) => {
     onClick,
     className = 'card-value',
     style,
+    dataTestId,
   } = props;
 
   return (
-    <Styles.CardValueStyle className={className} style={style}>
+    <Styles.CardValueStyle
+      className={className}
+      style={style}
+      data-testid={dataTestId}
+    >
       <Label value={label} currency={currency} />
       <span>{value}</span>
       {description && <p>{description}</p>}