CFE-3 complete province component test as rendering/behavioral and validation

This commit is contained in:
2023-10-14 12:56:16 +03:30
parent daabad4e33
commit e17c22e5a0
4 changed files with 34 additions and 19 deletions

View File

@@ -80,7 +80,7 @@ describe("CreateContent Component From Expert Management", () => {
expect(screen.queryByText("سمت خود را وارد کنید")).toBeInTheDocument()
});
});
it('Should Select An Item With Valid Value', async () => {
it('Should Select An Item With Valid Value of role', async () => {
render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
const roleInput = screen.getByTestId("input-role-id")
const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));

View File

@@ -5,6 +5,8 @@ import * as Yup from "yup";
import {Formik} from "formik";
import Province from "../../Province";
import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
import PositionAndRole
from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole";
const CreateFormMock = ({Component}) => {
const t = useTranslations();
@@ -30,7 +32,7 @@ describe("CreateContent Component From Expert Management", () => {
it("Province Select Box Rendered", async () => {
render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
await waitFor(() => {
const provinceSelectBox = screen.getByTestId('province-select');
const provinceSelectBox = screen.getByTestId('select-box');
expect(provinceSelectBox).toBeInTheDocument();
});
});
@@ -38,25 +40,34 @@ describe("CreateContent Component From Expert Management", () => {
describe("Behavioral", () => {
it("Province Select Box Work Correctly", async () => {
render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
const provinceSelectBox = screen.getByTestId('province-select');
fireEvent.click(provinceSelectBox)
const provinceSelectBox = screen.getByTestId('select-box');
const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));
await waitFor(() => {
expect(screen.queryByText("آذربایجان شرقی")).toBeInTheDocument();
expect(provinceSelectBox).toBeInTheDocument();
});
fireEvent.mouseDown(provinceSelectOpener);
await waitFor(() => {
const selectItem = screen.queryByText("آذربایجان شرقی");
expect(selectItem).toBeInTheDocument();
});
});
});
describe("validation", () => {
// it('Should See Error When Province Select Is Empty', async () => {
// render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
//
// const provinceSelect = screen.queryByLabelText('استان');
//
// fireEvent.change(provinceSelect, {target: {value: 1}});
// fireEvent.blur(provinceSelect);
//
// await waitFor(() => {
// expect(screen.queryByText("استان خود را وارد کنید")).toBeInTheDocument()
// });
// });
it('Should Select An Item With Valid Value of province', async () => {
render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
const provinceInput = screen.getByTestId("input-province-id")
const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));
fireEvent.mouseDown(provinceSelectOpener);
const selectItem = await waitFor(() => screen.queryByText("آذربایجان شرقی"));
expect(selectItem).toBeInTheDocument();
fireEvent.click(selectItem);
await waitFor(() => {
expect(provinceInput.value).toBe('1')
});
});
})
});

View File

@@ -22,11 +22,15 @@ const Province = ({formik}) => {
name="province_id"
disabled={isLoadingProvinceList || errorProvinceList}
label={t("ExpertMangement.text_field_province_id")}
data-testid="province-select"
value={formik.values.province_id}
onChange={(e) => {
formik.setFieldValue("province_id", e.target.value);
}}
inputProps={{
"data-testid": "input-province-id"
}}
data-testid="select-box"
SelectDisplayProps={{"data-testid": 'option-opener'}}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"

View File

@@ -23,7 +23,7 @@ describe("CreateContent Component From Expert Management", () => {
it('Should enable the submit button when the inputs are valid', async () => {
render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
const submitButton = screen.getByRole('button', {name: 'ثبت'});
const submitButton = screen.getByText('ثبت');
const nameInput = screen.queryByLabelText('نام');
const usernameInput = screen.queryByLabelText('نام کاربری');