CFE-2 write tests

This commit is contained in:
2023-10-29 10:38:50 +03:30
parent 45a9c3b2a0
commit fafc61b320
11 changed files with 152 additions and 34 deletions

View File

@@ -0,0 +1,43 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import ActionHeader from "..";
const tab = {
active: true,
active_category_id: 1,
phone_number : "09134849737"
}
describe('Action Header Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see header text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<ActionHeader tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
)
const headingElement = screen.getByRole('heading', {
name: /\.\.\.\. عملیات های مربوط به تماس:/i
})
await waitFor(() => {
expect(headingElement).toBeInTheDocument()
})
});
it('should see phone number', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<ActionHeader tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
)
const phone_numberElement = screen.queryByText(/09134849737/i)
await waitFor(() => {
expect(phone_numberElement).toBeInTheDocument()
})
});
});
});

View File

@@ -15,11 +15,11 @@ const ActionHeader = ({tab}) => {
<Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
.... {t("CallAction.call_history_of")}:
</Typography>
<Typography variant="subtitle1" sx={{color: "#fff"}}>
<Typography data-testid="phone_number" variant="subtitle1" sx={{color: "#fff"}}>
{tab.phone_number} ....
</Typography>
</Stack>
)
}
export default ActionHeader
export default ActionHeader

View File

@@ -8,6 +8,7 @@ const CallActionCategoriesButton = ({ category, tab }) => {
<Grid item xs={4}>
<Button
sx={{py : 1.5}}
fullWidth
variant={"contained"}
color={tab.active_category_id === category.category_id ? "primary" : "inherit"}

View File

@@ -1,4 +1,4 @@
import {render, screen, waitFor} from "@testing-library/react";
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import CallActionCategoriesButton from "../CallActionCategoriesButton";
@@ -28,4 +28,24 @@ describe('Call Action Categories Button from Call Actions Categories', () => {
})
});
});
});
describe("Behavior", ()=>{
it("Should change the color when button clecked",async()=>{
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionCategoriesButton tab={tab} category={category}/>
</AnswersProvider>
</MockAppWithProviders>
)
const buttonElement = screen.getByRole('button', {
name: /اطلاعات راه ها/i
})
fireEvent.click(buttonElement);
await waitFor(() => {
expect(buttonElement).toHaveStyle('background-color: rgb(12, 31, 23)');
})
})
})
})

View File

@@ -0,0 +1,29 @@
import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
import CallActionsCategories from "..";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import { render, screen, waitFor } from "@testing-library/react";
const tab = {
active: true,
active_category_id: 1,
id : 1,
phone_number : "09134849737"
}
describe('Call Action Categories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see divider text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionsCategories tab={tab}/>
</AnswersProvider>
</MockAppWithProviders>
)
const divider_textElement = screen.queryByText("موضوع ها")
await waitFor(() => {
expect(divider_textElement).toBeInTheDocument()
})
});
});
})

View File

@@ -9,8 +9,8 @@ const CallActionsCategories = ({ tab }) => {
return (
<>
<Divider sx={{margin : 2}}><Chip label={t("CallAction.categories")} variant="outlined"/></Divider>
<Stack sx={{margin : 1}} direction={"row"}>
<Grid container spacing={1} sx={{padding : 1}}>
<Stack sx={{m : 1, p : 1}} direction={"row"}>
<Grid container spacing={2}>
{categoryLists.map((category) => {
return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
})}

View File

@@ -23,7 +23,7 @@ const CallActionSubcategoriesButton = ({ sub_category, tab }) => {
};
return sub_category.category_id === tab.active_category_id ? (
<Grid item xs={3}>
<Button fullWidth color="inherit" onClick={handleSubcategoryButton} variant={"contained"}>
<Button sx={{py : 1.5}} fullWidth color="inherit" onClick={handleSubcategoryButton} variant={"contained"}>
{sub_category.subcategory_name}
</Button>
</Grid>

View File

@@ -3,39 +3,35 @@ import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWith
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import CallActionSubcategoriesButton from "../CallActionSubcategoriesButton";
const sub_category = [
{
category_id: 1,
category_name: "اطلاعات راه",
subcategory_id: 1,
subcategory_name:"اطلاعات باز و بسته"
}
]
const sub_category = {
category_id: 1,
category_name: "اطلاعات راه",
subcategory_id: 1,
subcategory_name: "اطلاعات باز و بسته"
};
const tab = [
{
active: true,
active_category_id: 1,
date: new Date(),
id: 1,
phone_number: "09134849737"
}
]
const tab = {
active: true,
active_category_id: 1,
date: new Date(),
id: 1,
phone_number: "09134849737"
};
describe('Call Action Subcategories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should categories names', async () => {
it('should render subcategory name', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionSubcategoriesButton sub_category={sub_category} tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
)
const subCategoryElement = screen.queryByText("اطلاعات باز و بسته")
await waitFor(()=>{
expect(subCategoryElement).toBeInTheDocument()
})
);
const subCategoryElement = screen.queryByText(/اطلاعات باز و بسته/i);
await waitFor(() => {
expect(subCategoryElement).toBeInTheDocument();
});
});
});
});

View File

@@ -0,0 +1,29 @@
import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
import CallActionsSubcategories from "..";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import { render, screen, waitFor } from "@testing-library/react";
const tab = {
active: true,
active_category_id: 1,
id : 1,
phone_number : "09134849737"
}
describe('Call Action Categories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see divider text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionsSubcategories tab={tab}/>
</AnswersProvider>
</MockAppWithProviders>
)
const divider_textElement = screen.queryByText("زیر موضوع ها")
await waitFor(() => {
expect(divider_textElement).toBeInTheDocument()
})
});
});
})

View File

@@ -9,8 +9,8 @@ const CallActionsSubcategories = ({ tab }) => {
return (
<>
<Divider sx={{margin : 2}}><Chip label={t("CallAction.subcategories")} variant="outlined"/></Divider>
<Stack sx={{margin : 1}} direction={"row"}>
<Grid container spacing={1} sx={{padding : 1}}>
<Stack sx={{m : 1, p : 1 }} direction={"row"}>
<Grid container spacing={2}>
{subCategoryLists.map((sub_category, index) => {
return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} />;
})}

View File

@@ -29,8 +29,8 @@ const useCallerHistory = (call_id, phone_number, max_size) => {
return {
firstItemOfHistory: validData.length === 0 ? false : validData[0],
historyList: validData.length < 2 ? false : validData.slice(1),
isLoadingHistoryList: true,
errorHistoryList: false
isLoadingHistoryList: isLoading,
errorHistoryList: !data
}
};