CFE-26 add skeleton and related test

mocks/handler.js

@@ -104,6 +104,7 @@ export const handler = [
                 )
             )
         }
+        return res(ctx.status(404))
 
     })
 ]

public/locales/fa/app.json

@@ -188,5 +188,8 @@
     "button-cancel": "انصراف",
     "typography": "آیا از حدف این مورد اطمینان دارید ؟",
     "button-delete": "حذف کردن"
+  },
+  "CallTabDetails": {
+    "error_use_answer" : "خطا در برقراری ارتباط"
   }
 }

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx

@@ -2,8 +2,10 @@ import {Skeleton, Stack, Typography} from "@mui/material";
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import useAnswer from "@/lib/callWidget/hooks/useAnswer";
 import moment from "jalali-moment";
+import {useTranslations} from "next-intl";
 
 const CallTabDetails = ({tab}) => {
+    const t = useTranslations();
     const {data, isLoading, error} = useAnswer(tab.id)
     const dateChange = (date) => {
         moment.relativeTimeThreshold('s', 60);
@@ -15,17 +17,15 @@ const CallTabDetails = ({tab}) => {
             <Stack alignItems={"start"}>
                 <Typography>{tab.phone_number}</Typography>
                 {
-                    error ? (
+                    isLoading ? (
-                        <Typography variant="body1" color="error">errror</Typography>
+                        <Skeleton width={100} animation="wave"/>
-                        ):
+                    ):(
-                        (
+                        error ? (
-                            isLoading ? (
+                            <Typography variant="caption" color="error">{t("CallTabDetails.error_use_answer")}</Typography>
-                                    <Skeleton variant="text" animation="wave"/>
+                        ): (
-                                )
+                            <Typography variant="caption" color="gray">5 روز پیش</Typography> //dateChange(data.date)
-                                :(
-                                    <Typography variant="caption" color="gray">5 روز پیش</Typography> //dateChange(data.date)
-                                )
                         )
+                    )
                 }
             </Stack>
         </Stack>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js

@@ -31,5 +31,20 @@ describe("Call Tab Details from Call Tan List", ()=>{
                 expect(dateElement).toHaveTextContent("5 روز پیش")
             })
         });
+        it('Should see the error message if error happen', async () => {
+            const tab1 = {
+                phone_number : "09134849737",
+                id : 2
+            }
+            render(
+                <MockAppWithProviders>
+                    <CallTabDetails tab={tab1}/>
+                </MockAppWithProviders>
+            )
+            const errorElement = await screen.findByText("خطا در برقراری ارتباط")
+            await  waitFor(()=>{
+                expect(errorElement).toBeInTheDocument()
+            })
+        });
     })
 })

src/lib/callWidget/hooks/useAnswer.jsx

@@ -7,7 +7,6 @@ const useAnswer = (id) => {
     const fetcher = (...args) => {
         return requestServer(args, 'get').then((response) => {
             return response.data.data;
-        }).catch(() => {
         })
     };