🐛 (block): adding data-testid prop (#48)

app/package.json

@@ -33,6 +33,7 @@
     "react-international-phone": "^4.3.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
+    "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.13",
     "yup": "^1.4.0"
   },

app/src/App.tsx

@@ -15,7 +15,7 @@ import ResetPasswordModal from "@features/authentication/reset-password/ResetPas
 import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
 
-import ChatBox from "@features/Chats/ChatBox";
+import ChatBox from "@features/chats/ChatBox";
 import SocketProvider from "sockets/SocketProvider";
 
 const queryClient = new QueryClient({

app/src/features/privacy-settings/AddToBlockMenuList.tsx

@@ -27,7 +27,6 @@ const StyledList = styled.ul<StyledListProps>`
   border-radius: var(--border-radius-default);
 `;
 
-
 interface StyledListProps {
   $bottom?: number;
   $right?: number;
@@ -81,7 +80,11 @@ function AddToBlockMenuList({ setIsMenuOpened }: any) {
             username: item.name.toLowerCase() + 123,
           };
           return (
-            <StylingWrapper onClick={() => handleClick(item)} key={data.id}>
+            <StylingWrapper
+              onClick={() => handleClick(item)}
+              key={data.id}
+              data-testid={`block-user-${data.id}`}
+            >
               <BlockItem {...data} />
             </StylingWrapper>
           );

app/src/features/privacy-settings/BlockItem.tsx

@@ -85,6 +85,7 @@ function BlockItem({ id, name, username }: BlockedUserInterface) {
   return (
     <StyledSideBarRow
       onClick={() => setIsBlockButtonEnabled(!isBlockButtonEnabled)}
+      data-testid={`open-block-option-${id}`}
     >
       <RowInfo>
         <Avatar name={name[0]} />
@@ -95,7 +96,11 @@ function BlockItem({ id, name, username }: BlockedUserInterface) {
       </RowInfo>
 
       {isBlockButtonEnabled && (
-        <StyledList {...menuStyles} onClick={() => handleRemove(id)}>
+        <StyledList
+          {...menuStyles}
+          onClick={() => handleRemove(id)}
+          data-testid={`remove-from-blocklist-${id}`}
+        >
           <HoverMask>
             <RowInfo>
               {getIcon("Unlock")}

app/src/features/privacy-settings/BlockList.tsx

@@ -38,8 +38,8 @@ function BlockList() {
         $size={3.3}
         $color="white"
         $bgColor="var(--accent-color)"
-        data-testid="add-contacts-icon"
         onClick={() => setIsMenuOpened(!isMenuOpened)}
+        data-testid="block-user-menu-icon"
       />
 
       {isMenuOpened && <AddToBlockMenuList setIsMenuOpened={setIsMenuOpened} />}