feat: adding unit tests for tools component

components/tools/Carddata.js

@@ -37,7 +37,7 @@ export const Carddata = (props) => {
     <div className={className || "text-sm text-gray-500 text-left"}>
       {heading}
       <span className="group relative" >
-        {outsideClick && visible[type] && <span ref={domNode} className="w-48 text-xs border z-10 bg-white border-gray-200 shadow-md -left-2/3 absolute translate-x-1/3 -top-4 rounded px-2 py-1">
+        {outsideClick && visible[type] && <span ref={domNode}   data-testid="Carddata-description" className="w-48 text-xs border z-10 bg-white border-gray-200 shadow-md -left-2/3 absolute translate-x-1/3 -top-4 rounded px-2 py-1">
        {read ? data :<div >
                 <TextTruncate
                   element="span"
@@ -46,7 +46,7 @@ export const Carddata = (props) => {
                 /></div>}
           {description && <button className='cursor-pointer text-cyan-600' onClick={() => {setOutsideClick(true);setRead(!read)}}>{read ? " Show Less" : " Show More"}</button>}
         </span>}
-        <button onClick={() =>{setRead(false);setVisible({ ...initial, [type]: !visible[type] }) }} className="mx-1" >
+        <button onClick={() =>{setRead(false);setVisible({ ...initial, [type]: !visible[type] }) }} className="mx-1" data-testid="Carddata-button">
           <InfoIcon />
         </button>
       </span>

components/tools/CategoryDropdown.js

@@ -1,17 +1,19 @@
 import ToolsData from '../../config/tools.json';
 
-export default function CategoryDropdown({setopenCategory}) {
+export default function CategoryDropdown({ setopenCategory }) {
 
   return (
-  <div className="absolute z-10 w-52 lg:w-56 origin-top-right h-60 overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button">
-    <div className="py-1" role="none">
-    {Object.keys(ToolsData).map((categoryName, index) => {
-      // displaying tools category having atleast one tool
-        if(ToolsData[categoryName].toolsList.length > 0) return (
-        <div onClick={() => setopenCategory(false)}>
-          <a href={`#${categoryName}`} key={index} className="block px-4 py-2 hover:bg-gray-100">{categoryName}</a>
-        </div> )})}
+    <div className="absolute z-10 w-52 lg:w-56 origin-top-right h-60 overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button"
+      data-testid="CategoryDropdown-div">
+      <div className="py-1" role="none">
+        { Object.keys(ToolsData).map((categoryName, index) => {
+          // displaying tools category having atleast one tool
+          if (ToolsData[categoryName].toolsList.length > 0) return (
+            <div onClick={ () => setopenCategory(false) }>
+              <a href={ `#${ categoryName }` } key={ index } className="block px-4 py-2 hover:bg-gray-100" data-testid="CategoryDropdown-link">{ categoryName }</a>
+            </div>)
+        }) }
+      </div>
     </div>
-  </div>
   )
 }

components/tools/FiltersDisplay.js

@@ -14,7 +14,7 @@ export default function FiltersDisplay({ checkedValues = [], setValues }) {
   return (
     <>
     {checkedValues.length>0 && 
-    <div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150">
+    <div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150" data-testid="FiltersDisplay-main">
       {checkedValues.map((items, index) => {
         return (
           <div
@@ -24,7 +24,7 @@ export default function FiltersDisplay({ checkedValues = [], setValues }) {
             )}
           >
             <div className="text-xs m-auto h-fit">{items}</div>
-            <button className="hover:bg-gray-100 p-1 rounded-full -mt-[2px]" onClick={(e) => handleClickOption(e, items, checkedValues, setValues)}>
+            <button className="hover:bg-gray-100 p-1 rounded-full -mt-[2px]" onClick={(e) => handleClickOption(e, items, checkedValues, setValues)} data-testid="Filters-Display-Button">
             <img src="/img/illustrations/icons/close-icon.svg" width="10" /></button>
           </div>
         );

components/tools/FiltersDropdown.js

@@ -1,27 +1,32 @@
 import { twMerge } from "tailwind-merge";
 
-export default function FiltersDropdown({dataList=[], checkedOptions=[], setStateFunction, className=''}) {
+export default function FiltersDropdown({ dataList = [], checkedOptions = [], setStateFunction, className = '' }) {
 
   const handleClickOption = (e, option) => {
-    let tempValueArray = [...checkedOptions]
-    let index = checkedOptions.indexOf(option)
-    if(index>-1){
-      tempValueArray.splice(index, 1);
-    }else{
-      tempValueArray.push(option);
-    }
-    setStateFunction(tempValueArray)
-  }
+    const isChecked = checkedOptions.includes(option);
+    const updatedOptions = isChecked
+      ? checkedOptions.filter(item => item !== option)
+      : [...checkedOptions, option];
+
+    setStateFunction(updatedOptions);
+  };
+
   return (
-    <div className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)}>
+    <div className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)} data-testid="FiltersDropdown-div">
       {dataList.map((data, index) => {
-        let checked = checkedOptions.indexOf(data.name)!=-1 ? true : false
+        const checked = checkedOptions.includes(data.name);
         return (
-          <div key={index} className={twMerge(`border border-secondary-600 text-secondary-600 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? 'bg-secondary-600 text-white' : ''}`)} onClick={(e) => handleClickOption(e, data.name)}>
+          <div
+            key={index}
+            className={twMerge(`border border-secondary-600 text-secondary-600 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? 'bg-secondary-600 text-white' : ''}`)}
+            onClick={(e) => handleClickOption(e, data.name)}
+
+          >
             {checked ? <img src='/img/illustrations/icons/CheckedIcon.svg' /> : <img src='/img/illustrations/icons/UncheckedIcon.svg' />}
             <div className='text-xs -mt-[1px] mb-[1px]'>{data.name}</div>
-        </div>
-        )})}
+          </div>
+        );
+      })}
     </div>
-  )
+  );
 }

components/tools/Tags.js

@@ -1,6 +1,6 @@
 export default function SelectTags({name='', bgColor, borderColor}) {
   return (
-    <div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`}>
+    <div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`} data-testid='Tags-main'>
       {name} 
     </div>
   )