CFE-26 rendering test and some change in callTabsList

mocks/handler.js

@@ -1,4 +1,10 @@
-import {GET_PERMISSIONS_LIST, GET_ROLE_MANAGEMENT, GET_USER_ROUTE, SET_USER_PASSWORD} from "@/core/data/apiRoutes";
+import {
+    GET_PERMISSIONS_LIST,
+    GET_ROLE_MANAGEMENT,
+    GET_TAB_DETAILS,
+    GET_USER_ROUTE,
+    SET_USER_PASSWORD
+} from "@/core/data/apiRoutes";
 import {rest} from "msw";
 
 export const handler = [
@@ -84,5 +90,20 @@ export const handler = [
             ),
         );
     }),
+    rest.get(`${GET_TAB_DETAILS}/:id`, (req,res, ctx) =>{
+        const {id} = req.params
+        if(id == 1){
+            return res(
+                ctx.json(
+                    {
+                        data : {
+                            phone_number : "09134849737",
+                            date : "2023-10-10T13:03:18.000000Z"
+                        }
+                    }
+                )
+            )
+        }
 
+    })
 ]

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>

src/core/data/apiRoutes.js

@@ -24,4 +24,9 @@ export const DELETE_ROLE_MANAGEMENT =
 
 export const GET_PERMISSIONS_LIST =
     BASE_URL + "/api/permissions/list"
-//role management
+//role management
+
+//tabs details
+export const GET_TAB_DETAILS =
+    BASE_URL + "/details"
+//tabs details

src/lib/callWidget/contexts/answers.jsx

@@ -17,7 +17,19 @@ export const AnswersContext = createContext()
 export const AnswersProvider = ({children}) => {
     const [openCallDialog, setOpenCallDialog] = useState(false)
     const [activeTab, setActiveTab] = useState(0)
-    const [state, dispatch] = useReducer(reducer, []);
+    const [state, dispatch] = useReducer(reducer, [{
+        id:45,
+        phone_number:'09120630676',
+        active:true
+    }, {
+        id:50,
+        phone_number:'09120630675',
+        active:true
+    }, {
+        id:55,
+        phone_number:'09120630672',
+        active:true
+    }]);
 
     return <AnswersContext.Provider
         value={{

src/lib/callWidget/hooks/useAnswer.jsx

@@ -0,0 +1,25 @@
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+import {GET_TAB_DETAILS} from "@/core/data/apiRoutes";
+
+const useAnswer = (id) => {
+    const requestServer = useRequest({auth: true, notification: false})
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then((response) => {
+            return response.data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, error, isLoading} = useSWR(`${GET_TAB_DETAILS}/${id}`, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        keepPreviousData : true
+    })
+    //swr config
+
+    // render data
+    return {data, isLoading, error}
+}
+export default useAnswer;