CFE-3 solve problem of select box

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/__tests__/index.test.js

@@ -1,10 +1,11 @@
-import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import {act, findByRole, findByText, fireEvent, render, screen, waitFor} from "@testing-library/react";
 import React from 'react';
 import {useTranslations} from "next-intl";
 import * as Yup from "yup";
 import {Formik} from "formik";
 import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
 import PositionAndRole from "../../PositionAndRole";
+import {MenuItem, Select} from "@mui/material";
 
 const CreateFormMock = ({Component}) => {
     const t = useTranslations();
@@ -38,9 +39,9 @@ describe("CreateContent Component From Expert Management", () => {
         });
         it("Role Select Box Rendered", async () => {
             render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleSelect = screen.getByTestId('select-box');
             await waitFor(() => {
-                const roleSelectBox = screen.getByTestId('role-select');
+                expect(roleSelect).toBeInTheDocument();
-                expect(roleSelectBox).toBeInTheDocument();
             });
         });
     });
@@ -53,13 +54,18 @@ describe("CreateContent Component From Expert Management", () => {
                 expect(positionTextField).toHaveValue('examplePosition');
             })
         });
-        // it("Role Select Box Work Correctly", async () => {
+        it("Role Select Box Work Correctly", async () => {
-        //     render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
-        //     await waitFor(() => {
+            const roleSelect = screen.getByTestId("option-opener");
-        //         expect(screen.queryByText("ادمین")).toBeInTheDocument();
+            await waitFor(() => {
-        //     }, {timeout: 3000});
+                expect(roleSelect).toBeInTheDocument();
-        //     const roleSelectBox = screen.getByTestId('role-select');
+            });
-        // });
+            fireEvent.mouseDown(roleSelect);
+            await waitFor(() => {
+                const selectItem = screen.queryByText("ادمین");
+                expect(selectItem).toBeInTheDocument();
+            });
+        });
     });
     describe("validation", () => {
         it('Should See Error When Position Input Is Empty', async () => {
@@ -74,17 +80,19 @@ describe("CreateContent Component From Expert Management", () => {
                 expect(screen.queryByText("سمت خود را وارد کنید")).toBeInTheDocument()
             });
         });
-        // it('Should See Error When Role Select Is Empty', async () => {
+        it('Should See Error When Role Select Is Empty', async () => {
-        //     render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
-        //
+            const roleInput = screen.getByTestId("input-role-id")
-        //     const roleSelect = screen.queryByLabelText('نقش');
+            const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));
-        //
+
-        //     fireEvent.change(roleSelect, {target: {value: 1}});
+            fireEvent.mouseDown(roleSelectOpener);
-        //     fireEvent.blur(roleSelect);
+
-        //
+            const selectItem = await waitFor(() => screen.queryByText("ادمین"));
-        //     await waitFor(() => {
+            expect(selectItem).toBeInTheDocument();
-        //         expect(screen.queryByText("نقش خود را وارد کنید")).toBeInTheDocument()
+            fireEvent.click(selectItem);
-        //     });
+            await waitFor(() => {
-        // });
+                expect(roleInput.value).toBe('1')
+            });
+        });
     })
 });

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/index.jsx

@@ -36,11 +36,15 @@ const PositionAndRole = ({formik}) => {
                     <Select
                         name="role_id"
                         label={t("ExpertMangement.text_field_role_id")}
-                        data-testid="role-select"
                         value={formik.values.role_id}
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur}
                         fullWidth
+                        inputProps={{
+                            "data-testid": "input-role-id"
+                        }}
+                        data-testid="select-box"
+                        SelectDisplayProps={{"data-testid": 'option-opener'}}
                         variant="outlined"
                     >
                         {isLoadingRoleList ? (