From a76c50b59f3f44efe0ca52a6b72a658471fca8cb Mon Sep 17 00:00:00 2001
From: Mohammad Jalali <muhammad.art79@gmail.com>
Date: Wed, 11 Oct 2023 15:17:12 +0330
Subject: [PATCH] CFE-3 solve problem of select box

---
 .../PositionAndRole/__tests__/index.test.js   | 52 +++++++++++--------
 .../RestInfo/PositionAndRole/index.jsx        |  6 ++-
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/__tests__/index.test.js b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/__tests__/index.test.js
index 865bc7d..17be452 100644
--- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/__tests__/index.test.js
+++ b/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(roleSelectBox).toBeInTheDocument();
+                expect(roleSelect).toBeInTheDocument();
             });
         });
     });
@@ -53,13 +54,18 @@ describe("CreateContent Component From Expert Management", () => {
                 expect(positionTextField).toHaveValue('examplePosition');
             })
         });
-        // it("Role Select Box Work Correctly", async () => {
-        //     render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
-        //     await waitFor(() => {
-        //         expect(screen.queryByText("ادمین")).toBeInTheDocument();
-        //     }, {timeout: 3000});
-        //     const roleSelectBox = screen.getByTestId('role-select');
-        // });
+        it("Role Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleSelect = screen.getByTestId("option-opener");
+            await waitFor(() => {
+                expect(roleSelect).toBeInTheDocument();
+            });
+            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 () => {
-        //     render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
-        //
-        //     const roleSelect = screen.queryByLabelText('نقش');
-        //
-        //     fireEvent.change(roleSelect, {target: {value: 1}});
-        //     fireEvent.blur(roleSelect);
-        //
-        //     await waitFor(() => {
-        //         expect(screen.queryByText("نقش خود را وارد کنید")).toBeInTheDocument()
-        //     });
-        // });
+        it('Should See Error When Role Select Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleInput = screen.getByTestId("input-role-id")
+            const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));
+
+            fireEvent.mouseDown(roleSelectOpener);
+
+            const selectItem = await waitFor(() => screen.queryByText("ادمین"));
+            expect(selectItem).toBeInTheDocument();
+            fireEvent.click(selectItem);
+            await waitFor(() => {
+                expect(roleInput.value).toBe('1')
+            });
+        });
     })
 });
\ No newline at end of file
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/index.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/index.jsx
index 305296e..5af2a8b 100644
--- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/index.jsx
+++ b/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 ? (