CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CFE-1 complete programing part of call history of callwidget just need to work with server and complete test of Loading Error handling and Sub Components

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-24 17:59:04 +03:30
parent eb323d6cf2
commit 8e85be3970
10 changed files with 166 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/locales/fa/app.json
View File

@@ -252,8 +252,8 @@
"update_expert": "ویرایش کارشناس"
},
"CallHistory": {
"topic": "موضوع",
"sub_topic": "زیر موضوع",
"category_name": "موضوع",
"subcategory_name": "زیر موضوع",
"operator": "اپراتور",
"date": "تاریخ",
"call_history_of": "تاریخچه تماس های",

19
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/__tests__/index.test.js
View File

@@ -0,0 +1,19 @@
import {render, screen} from "@testing-library/react";
import ErrorOrEmpty from "../../ErrorOrEmpty";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
describe("ErrorOrEmpty Component From call history", () => {
describe("Rendering", () => {
it("error fetching history of call text rendered", () => {
render(<MockAppWithProviders><ErrorOrEmpty isErrorOrEmpty={"error"}/></MockAppWithProviders>);
const errorText = screen.queryByText('خطا در دریافت تاریخچه تماس دریافتی');
expect(errorText).toBeInTheDocument();
});
it("empty fetching history of call text rendered", () => {
render(<MockAppWithProviders><ErrorOrEmpty isErrorOrEmpty={"empty"}/></MockAppWithProviders>);
const emptyText = screen.queryByText('تاریخچه ای برای تماس دریافتی یافت نشد');
expect(emptyText).toBeInTheDocument();
});
});
});

21
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/__tests__/index.test.js
View File

@@ -0,0 +1,21 @@
import {render, screen} from "@testing-library/react";
import HistoryHeader from "../../HistoryHeader";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
describe("HistoryHeader Component From call history", () => {
describe("Rendering", () => {
const tab = {
phone_number: "09111111111"
}
it("text of header rendered", () => {
render(<MockAppWithProviders><HistoryHeader tab={tab}/></MockAppWithProviders>);
const textHeader = screen.queryByText(/تاریخچه تماس های/i);
expect(textHeader).toBeInTheDocument();
});
it("number of caller in header rendered", () => {
render(<MockAppWithProviders><HistoryHeader tab={tab}/></MockAppWithProviders>);
const callerNumber = screen.queryByText(/09111111111/i);
expect(callerNumber).toBeInTheDocument();
});
});
});

8
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx
View File

@@ -9,10 +9,10 @@ const Topics = ({historyItem}) => {
<ListItem sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
{t("CallHistory.topic")}:
{t("CallHistory.category_name")}:
</Typography>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
{historyItem.topic}
{historyItem.category_name}
</Typography>
</Box>
</ListItem>
@@ -21,7 +21,7 @@ const Topics = ({historyItem}) => {
<ListItem sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
{t("CallHistory.sub_topic")}:
{t("CallHistory.subcategory_name")}:
</Typography>
<Typography variant="subtitle2" sx={{
width: "200px",
@@ -31,7 +31,7 @@ const Topics = ({historyItem}) => {
textAlign: "end",
color: "#837e7e"
}}>
{historyItem.sub_topic}
{historyItem.subcategory_name}
</Typography>
</Box>
</ListItem>

3
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx
View File

@@ -5,6 +5,9 @@ import Topics from "./Topics";
const ListItemOfCalls = ({historyItem}) => {
const t = useTranslations();
// console.log(historyItem)
return (
<Grow in={true}>
<List sx={{width: '100%', bgcolor: 'rgba(222,234,215,0.11)'}}>

68
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/__tests__/intex.test.js
View File

@@ -0,0 +1,68 @@
import {render, screen} from "@testing-library/react";
import LoadingHistory from "../../LoadingHistory";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
describe("LoadingHistory Component From call history", () => {
describe("Rendering", () => {
it("loading list rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingList = screen.queryByTestId("loading-list");
expect(loadingList).toBeInTheDocument();
});
it("loading list item avatar rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemAvatar = screen.queryByTestId("loading-listItemAvatar");
expect(loadingListItemAvatar).toBeInTheDocument();
});
it("loading list item text rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemText = screen.queryByTestId("loading-listItemText");
expect(loadingListItemText).toBeInTheDocument();
});
it("loading list item category rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemCat = screen.queryByTestId("loading-listItem-cat");
expect(loadingListItemCat).toBeInTheDocument();
});
it("loading list item sub category rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemSubCat = screen.queryByTestId("loading-listItem-subCat");
expect(loadingListItemSubCat).toBeInTheDocument();
});
it("operator avatar skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorAvatarSkeleton = screen.queryByTestId("operator-avatar-skeleton");
expect(operatorAvatarSkeleton).toBeInTheDocument();
});
it("operator name skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorNameSkeleton = screen.queryByTestId("operator-name-skeleton");
expect(operatorNameSkeleton).toBeInTheDocument();
});
it("operator answer date skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorAnswerDateSkeleton = screen.queryByTestId("operator-answer-date-skeleton");
expect(operatorAnswerDateSkeleton).toBeInTheDocument();
});
it("operator category header skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorCategoryHeaderSkeleton = screen.queryByTestId("operator-category-header-skeleton");
expect(operatorCategoryHeaderSkeleton).toBeInTheDocument();
});
it("operator category value skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorCategoryValueSkeleton = screen.queryByTestId("operator-category-value-skeleton");
expect(operatorCategoryValueSkeleton).toBeInTheDocument();
});
it("operator subCategory header skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorSubCategoryHeaderSkeleton = screen.queryByTestId("operator-subCategory-header-skeleton");
expect(operatorSubCategoryHeaderSkeleton).toBeInTheDocument();
});
it("operator subCategory value skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorSubCategoryValueSkeleton = screen.queryByTestId("operator-subCategory-value-skeleton");
expect(operatorSubCategoryValueSkeleton).toBeInTheDocument();
});
});
});

20
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/index.jsx
View File

@@ -5,7 +5,7 @@ const LoadingHistory = () => {
const t = useTranslations();
return (
<>
<List sx={{
<List data-testid="loading-list" sx={{
width: '100%',
bgcolor: 'rgba(222,234,215,0.11)',
}}>
@@ -14,12 +14,15 @@ const LoadingHistory = () => {
alignItems: "center",
px: 2
}}>
<ListItemAvatar>
<Skeleton animation="wave" variant="circular" width={60} height={60}/>
<ListItemAvatar data-testid="loading-listItemAvatar">
<Skeleton data-testid="operator-avatar-skeleton"
animation="wave" variant="circular"
width={60} height={60}/>
</ListItemAvatar>
<ListItemText primary={
<ListItemText data-testid="loading-listItemText" primary={
<Box sx={{display: "flex", alignItems: "end"}}>
<Skeleton
data-testid="operator-name-skeleton"
animation="wave"
height={15}
width="50%"
@@ -28,6 +31,7 @@ const LoadingHistory = () => {
</Box>
} secondary={
<Skeleton
data-testid="operator-answer-date-skeleton"
animation="wave"
height={10}
width="30%"
@@ -37,14 +41,16 @@ const LoadingHistory = () => {
</Box>
<Box timeout="auto" unmountOnExit sx={{py: 2}}>
<List component="div" disablePadding>
<ListItem sx={{px: 4}}>
<ListItem data-testid="loading-listItem-cat" sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Skeleton
data-testid="operator-category-header-skeleton"
animation="wave"
height={15}
width="15%"
/>
<Skeleton
data-testid="operator-category-value-skeleton"
animation="wave"
height={15}
width="30%"
@@ -53,14 +59,16 @@ const LoadingHistory = () => {
</ListItem>
</List>
<List component="div" disablePadding>
<ListItem sx={{px: 4}}>
<ListItem data-testid="loading-listItem-subCat" sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Skeleton
data-testid="operator-subCategory-header-skeleton"
animation="wave"
height={15}
width="25%"
/>
<Skeleton
data-testid="operator-subCategory-value-skeleton"
animation="wave"
height={15}
width="50%"

8
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/__tests__/index.test.js
View File

@@ -0,0 +1,8 @@
describe("CreateForm Component From Expert Management", () => {
describe("Rendering", () => {
});
describe("Behavioral", () => {
});
});

24
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
View File

@@ -8,15 +8,15 @@ import useCallerHistory from "@/lib/callWidget/hooks/useCallerHistory";
import ListItemOfCalls from "./ListItemOfCalls";
import {useState} from "react";
const max_size = 10;
const CallHistory = ({tab}) => {
const t = useTranslations();
const max_size = 10;
const {
firstItemOfHistory,
historyList,
isLoadingHistoryList,
errorHistoryList
} = useCallerHistory(tab.phone_number, max_size);
} = useCallerHistory(tab.id, tab.phone_number, max_size);
const [showRestOfHistory, setShowRestOfHistory] = useState(false);
return (
@@ -30,19 +30,21 @@ const CallHistory = ({tab}) => {
<ErrorOrEmpty isErrorOrEmpty="error"/>
) : isLoadingHistoryList ? (
<LoadingHistory/>
) : historyList.length === 0 ? (
) : !firstItemOfHistory ? (
<ErrorOrEmpty isErrorOrEmpty="empty"/>
) : (
<Box>
<ListItemOfCalls historyItem={firstItemOfHistory}/>
<Divider>
<Chip
icon={<HeadphonesIcon/>}
onClick={() => setShowRestOfHistory(true)}
label="نمایش موارد بیشتر"
disabled={showRestOfHistory}>
</Chip>
</Divider>
{historyList && (
<Divider>
<Chip
icon={<HeadphonesIcon/>}
onClick={() => setShowRestOfHistory(true)}
label="نمایش موارد بیشتر"
disabled={showRestOfHistory}
/>
</Divider>
)}
{showRestOfHistory && (
<>
{historyList.map((historyItem, index) => (

28
src/lib/callWidget/hooks/useCallerHistory.jsx
View File

@@ -1,14 +1,16 @@
import {GET_CALLER_HISTORY} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
import {useEffect, useState} from "react";
import useSWR from "swr";
import {GET_CALLER_HISTORY} from "@/core/data/apiRoutes";
const useCallerHistory = (phone_number, max_size) => {
const requestServer = useRequest({auth: true, notification: false})
const useCallerHistory = (call_id, phone_number, max_size) => {
const requestServer = useRequest({auth: true, notification: false});
const [validData, setValidData] = useState([]);
//swr config
const fetcher = (...args) => {
return requestServer(args, 'get').then(({data}) => {
return data.data.slice(2);
return data.data;
}).catch(() => {
})
};
@@ -20,17 +22,15 @@ const useCallerHistory = (phone_number, max_size) => {
keepPreviousData: true
});
useEffect(() => {
data && setValidData(data.filter((item) => item.id != call_id));
}, [data, call_id]);
return {
firstItemOfHistory: {
id: 1,
operator_name: "اشکان خطیبی",
answer_date: "1379/02/03 13:50",
topic: "موضوع تست",
sub_topic: "زیر موضوع تست با متن طولانی تر از موضوع"
},
historyList: data,
isLoadingHistoryList: isLoading,
errorHistoryList: !data
firstItemOfHistory: validData.length === 0 ? false : validData[0],
historyList: validData.length < 2 ? false : validData.slice(1),
isLoadingHistoryList: true,
errorHistoryList: false
}
};