CFE-26 rendering test and some change in callTabsList

src/components/dashboard/role-management/index.jsx

@@ -1,8 +1,8 @@
 import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
 import DashboardLayout from "@/layouts/DashboardLayout";
+import moment from "jalali-moment";
 
 function DashboardRoleManagementComponent() {
-
     return (
         <DashboardLayout>
             <RoleManagementComponent />

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

@@ -0,0 +1,34 @@
+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";
+
+const CallTabDetails = ({tab}) => {
+    const {data, isLoading, error} = useAnswer(tab.id)
+    const dateChange = (date) => {
+        moment.relativeTimeThreshold('s', 60);
+        return moment(date).locale("fa").fromNow()
+    }
+    return (
+        <Stack direction="row" justifyContent="center" alignItems="center" spacing={3}>
+            <VisibilityIcon color="red"/>
+            <Stack>
+                <Typography variant="h6">{tab.phone_number}</Typography>
+                {
+                    error ? (
+                        <Typography>errror</Typography>
+                        ):
+                        (
+                            isLoading ? (
+                                    <Skeleton variant="text" animation="wave"/>
+                                )
+                                :(
+                                    <Typography color="gray">5 روز پیش</Typography>
+                                )
+                        )
+                }
+            </Stack>
+        </Stack>
+    )
+}
+export default CallTabDetails

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

@@ -1,6 +1,8 @@
-import {IconButton, Stack, Typography, Zoom} from "@mui/material";
+import {IconButton, Stack, Zoom} from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
 import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+import CallTabDetails
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails";
 
 const CallTabLabel = ({tab}) => {
     const {closeAnswerTab} = useAnswers()
@@ -10,7 +12,7 @@ const CallTabLabel = ({tab}) => {
 
     return (
         <Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
-            <Typography>{tab.phone_number} - {tab.id}</Typography>
+            <CallTabDetails tab={tab} />
             <Zoom in={tab.active}>
                 <IconButton onClick={() => handleCloseClick(tab.id)}>
                     <CloseIcon/>

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

@@ -0,0 +1,35 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import CallTabDetails
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails";
+const tab = {
+    phone_number : "09134849737",
+    id : 1
+}
+
+describe("Call Tab Details from Call Tan List", ()=>{
+    describe("Rendering", ()=>{
+        it('Should see the phone number on tab detail', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CallTabDetails tab={tab}/>
+                </MockAppWithProviders>
+            )
+            const phoneNumberElement = screen.getByRole("heading", {level : 6})
+            await  waitFor(()=>{
+                expect(phoneNumberElement).toHaveTextContent("09134849737")
+            })
+        });
+        it('Should see the date on tab detail', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CallTabDetails tab={tab}/>
+                </MockAppWithProviders>
+            )
+            const dateElement = screen.queryByText("5 روز پیش")
+            await  waitFor(()=>{
+                expect(dateElement).toHaveTextContent("5 روز پیش")
+            })
+        });
+    })
+})

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

@@ -17,7 +17,7 @@ const CallTabsList = () => {
                 variant={'fullWidth'}
             >
                 {answersList.map((answer) => (
-                    <Tab component={'div'} sx={{py: 0.5, pr: 0}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
+                    <Tab component={'div'} sx={{py: 0.5, pr: 0, border : 1}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
                 ))}
             </Tabs>
         </Box>