feat: add data-testid for testing components

Synthetixio · Jul 26, 2022 · bdf4485 · bdf4485
1 parent 7dbcbd5
commit bdf4485
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 10 deletions.
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -20,15 +20,16 @@ export const Accordion: React.FC<AccordionProps> = ({
   children,
   className = 'ui-p-4 sm:ui-p-4',
   variant,
-  wrapperClassName = ''
+  wrapperClassName = '',
+  ...props
 }) => {
   const [isActive, setIsActive] = useState(false);
 
   const toggleIsActive = () => setIsActive((previous) => !previous);
 
   const nodeRef = useRef(null);
   return (
-    <Card className={className} variant={variant} wrapperClassName={wrapperClassName}>
+    <Card className={className} variant={variant} wrapperClassName={wrapperClassName} {...props}>
       <div
         className={clsx(
           'ui-flex ui-outline-none ui-justify-between ui-items-center ui-select-none',

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -22,7 +22,8 @@ export const Dialog: React.FC<DialogProps> = ({
   onClose,
   children,
   disableClose,
-  hideCloseIcon
+  hideCloseIcon,
+  ...props
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   useOnClickOutside(ref, () => !disableClose && onClose?.());
@@ -56,6 +57,7 @@ export const Dialog: React.FC<DialogProps> = ({
             wrapperClass,
             'ui-overflow-y-auto ui-relative ui-w-full ui-max-w-md ui-h-full ui-max-h-full md:ui-h-auto'
           )}
+          {...props}
         >
           {!hideCloseIcon && (
             <Icon

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -34,7 +34,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
   triggerElementProps,
   contentAlignment = 'left',
   contentClassName = 'ui-gradient-primary',
-  renderFunction
+  renderFunction,
+  ...props
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   const nodeRef = useRef<HTMLDivElement>(null);
@@ -67,6 +68,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
       <CSSTransition unmountOnExit classNames='ui-fade' in={isOpen} nodeRef={nodeRef} timeout={200}>
         <div
           ref={nodeRef}
+          {...props}
           className={clsx(
             contentClassName,
             'ui-absolute ui-dark:bg-gray-900 ui-rounded ui-z-50 ui-shadow-md ui-top-full ui-mt-2 ui-overflow-hidden',

diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx
@@ -14,7 +14,8 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({
   link,
   text,
   withoutIcon,
-  border
+  border,
+  ...props
 }) => {
   return (
     <a
@@ -28,6 +29,7 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({
       href={link}
       rel='noreferrer noopener'
       target='_blank'
+      {...props}
     >
       {text}
       {!withoutIcon && <Icon className='ui-ml-1' name='Link-off' />}

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -11,7 +11,8 @@ export const Icon: React.FC<IconProps> = ({
   name,
   cursorPointer = false,
   className = 'text-lg',
-  onClick
+  onClick,
+  ...props
 }) => {
   return (
     <i
@@ -24,6 +25,7 @@ export const Icon: React.FC<IconProps> = ({
         className
       )}
       onClick={onClick}
+      {...props}
     />
   );
 };

diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
@@ -10,7 +10,7 @@ export default {
 } as ComponentMeta<typeof IconButton>;
 
 const Template: ComponentStory<typeof IconButton> = (args) => (
-  <IconButton {...args}>
+  <IconButton {...args} data-testid='back-button-text'>
     <Icon name='Small-Cross' />
   </IconButton>
 );

diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
@@ -7,9 +7,10 @@ export type TabProps = {
   disabled?: boolean;
   onClick: () => void;
   className?: string;
+  testId?: string;
 };
 
-export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, className }) => (
+export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, className, testId }) => (
   <button
     className={clsx(
       'ui-transition ui-border ui-border-transparent ui-ease-out ui-rounded-[100px] ui-px-2 ui-py-1.5 ui-whitespace-nowrap',
@@ -22,6 +23,7 @@ export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, class
       },
       className
     )}
+    data-testid={testId}
     onClick={onClick}
   >
     {text}

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -26,7 +26,8 @@ export const Tabs: React.FC<TabsProps> = ({
   onChange,
   className,
   contentClassName,
-  tabClassName
+  tabClassName,
+  ...props
 }) => {
   const [activeTab, setActiveTab] = useState(initial);
 
@@ -46,13 +47,17 @@ export const Tabs: React.FC<TabsProps> = ({
 
   return (
     <>
-      <div className={clsx('ui-flex ui-items-center ui-flex-nowrap ui-overflow-auto', className)}>
+      <div
+        {...props}
+        className={clsx('ui-flex ui-items-center ui-flex-nowrap ui-overflow-auto', className)}
+      >
         {items.map((item) => (
           <Tab
             key={item.id}
             active={item.id === activeTab}
             className={clsx('ui-mx-2', tabClassName)}
             disabled={item.disabled}
+            testId={'tab-' + item.id}
             text={item.label}
             onClick={() => selectTab(item)}
           />