CFE-10 Merge branch 'feature/CFE-10_rolemanagement_submit_disable' into 'develop'

2023-11-04 08:15:05 +00:00
parent d30fd964a8 d9a2425665
commit 4c591d419b
5 changed files with 83 additions and 48 deletions
--- a/mocks/handlers/roles.js
+++ b/mocks/handlers/roles.js
@@ -1,5 +1,5 @@
 import {rest} from "msw";
-import {GET_ROLE_LIST, GET_ROLES} from "@/core/data/apiRoutes";
+import {GET_PERMISSIONS_LIST, GET_ROLE_LIST, GET_ROLES} from "@/core/data/apiRoutes";

 export const rolesHandler = [
    rest.get(GET_ROLES, (req, res, ctx) => {
@@ -67,4 +67,20 @@ export const rolesHandler = [
            ]
        }))
    }),
+    rest.get(GET_PERMISSIONS_LIST, (req, res, ctx) => {
+        return res(ctx.json({
+            data: [
+                {
+                    id: 1,
+                    name: "admin",
+                    name_fa: "ادمین"
+                },
+                {
+                    id: 2,
+                    name: "manager",
+                    name_fa: "مدیر"
+                }
+            ]
+        }))
+    }),
 ]
--- a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
+++ b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
@@ -108,12 +108,12 @@ const CreateContent = ({mutate, setOpenConfirmDialog}) => {
                                    : (
                                        <Grid container spacing={2}>
                                            <>
-                                                {permissions_list.map((permission) => (
-                                                    <Grid key={permission.id} item xs={6}>
+                                                {permissions_list.map((permission, index) => (
+                                                    <Grid key={permission.id} item xs={6} data-testid= "PermissionList-checkbox">
                                                        <FormControlLabel
                                                            control={
                                                                <Checkbox
-                                                                    data-testid="PermissionList-checkbox"
+                                                                    data-testid= {`PermissionList-checkbox-${index}`}
                                                                    checked={formik.values.permissions.includes(permission.id)}
                                                                    onChange={(e) => {
                                                                        if (e.target.checked) {
@@ -143,7 +143,7 @@ const CreateContent = ({mutate, setOpenConfirmDialog}) => {
                    {t("AddDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
                    {t("AddDialog.button-add")}
                </Button>
            </DialogActions>
--- a/src/components/dashboard/role-management/Form/CreateForm/test/CreateContent.test.js
+++ b/src/components/dashboard/role-management/Form/CreateForm/test/CreateContent.test.js
@@ -145,22 +145,32 @@ describe("Create Content component from Create Form Component in Role Management
                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
            })
        })
-        it('should see errors when click on submit button and field not completed', async () => {
+        it('should submit button be disabled', () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const submitButtonElement = screen.queryByText("ثبت")
-            fireEvent.click(submitButtonElement)
+            expect(submitButtonElement).toBeDisabled()
+        });
+
+        it('should submit button be able if inputs get filled', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const submitButtonElement = screen.queryByText("ثبت")
+            expect(submitButtonElement).toBeDisabled()
+            const nameElement = screen.getByLabelText("نام انگلیسی")
+            const name_faElement = screen.getByLabelText("نام فارسی")
+            const roleElement = await screen.findByTestId("PermissionList-checkbox-0");
+            fireEvent.change(nameElement, { target: { value: 'amin' } })
+            fireEvent.change(name_faElement, { target: { value: 'امین' } })
+            fireEvent.click(roleElement)
            await waitFor(()=>{
-                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
-            })
-            await waitFor(()=>{
-                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
-            })
-            await waitFor(()=>{
-                expect(screen.queryByText("حداقل باید یک دسترسی انتخاب شود")).toBeInTheDocument()
+                expect(submitButtonElement).not.toBeDisabled()
            })
        });
    })
--- a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
+++ b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
@@ -143,7 +143,7 @@ const UpdateContent = ({mutate, row, setOpenConfirmDialog}) => {
                    {t("UpdateDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
                    {t("UpdateDialog.button-update")}
                </Button>
            </DialogActions>
--- a/src/components/dashboard/role-management/Form/UpdateForm/test/UpdateContent.test.js
+++ b/src/components/dashboard/role-management/Form/UpdateForm/test/UpdateContent.test.js
@@ -1,18 +1,18 @@
-import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
 import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+
 const row = {
-    id : 0,
-    getValue : name => {
+    id: 0,
+    getValue: name => {
        if (name === "name") {
            return "manage_passenger_office_navgan";
-        }
-        else if (name === "name_fa") {
+        } else if (name === "name_fa") {
            return "مدیریت کارتابل رییس اداره مسافری استان";
        }
    },
-    original : {
-        permissions : [
+    original: {
+        permissions: [
            {
                id: 1,
                name: "manage_passenger_office_navgan",
@@ -27,8 +27,8 @@ const row = {
    }
 }

-describe("Create Content component from Create Form Component in Role Management Component",()=>{
-    describe("Rendering", ()=>{
+describe("Create Content component from Create Form Component in Role Management Component", () => {
+    describe("Rendering", () => {
        it('should see AddDialog text in the top ', async () => {
            render(
                <MockAppWithProviders>
@@ -36,8 +36,8 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const textElement = screen.queryByText("ویرایش")
-            await waitFor(()=>{
-            expect(textElement).toBeInTheDocument()
+            await waitFor(() => {
+                expect(textElement).toBeInTheDocument()
            })
        });
        it('should see name_en text', async () => {
@@ -47,8 +47,8 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const textElement = screen.queryByLabelText("نام انگلیسی")
-            await waitFor(()=>{
-            expect(textElement).toBeInTheDocument()
+            await waitFor(() => {
+                expect(textElement).toBeInTheDocument()
            })
        });
        it('should see name_fa text', async () => {
@@ -58,8 +58,8 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const textElement = screen.queryByLabelText("نام فارسی")
-            await waitFor(()=>{
-            expect(textElement).toBeInTheDocument()
+            await waitFor(() => {
+                expect(textElement).toBeInTheDocument()
            })
        });
        it('should see update text in the submit button ', async () => {
@@ -69,7 +69,7 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const buttonElement = screen.queryByText("ثبت")
-            await waitFor(()=>{
+            await waitFor(() => {
                expect(buttonElement).toBeInTheDocument()
            })
        });
@@ -80,13 +80,13 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const buttonElement = screen.queryByText("بستن")
-            await waitFor(()=>{
+            await waitFor(() => {
                expect(buttonElement).toBeInTheDocument()
            })
        });
    })

-    describe("Behavior", ()=>{
+    describe("Behavior", () => {
        it('should see what fill in the name_en input', async () => {
            render(
                <MockAppWithProviders>
@@ -96,7 +96,7 @@ describe("Create Content component from Create Form Component in Role Management
            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');

            fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
-            await waitFor(()=>{
+            await waitFor(() => {
                // Simulate user input
                expect(nameEnglishInput).toHaveValue('testuser');
            })
@@ -110,7 +110,7 @@ describe("Create Content component from Create Form Component in Role Management
            const nameFarsiInput = screen.getByLabelText('نام فارسی');

            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
-            await waitFor(()=>{
+            await waitFor(() => {
                // Simulate user input
                expect(nameFarsiInput).toHaveValue('testuser');
            })
@@ -122,7 +122,7 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
-            await waitFor(()=>{
+            await waitFor(() => {
                expect(checkboxElement).toHaveLength(2)
            })
        });
@@ -133,7 +133,7 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const name_enElement = screen.getByLabelText("نام انگلیسی")
-            await waitFor(()=>{
+            await waitFor(() => {
                expect(name_enElement).toHaveValue("manage_passenger_office_navgan")
            })
        });
@@ -144,7 +144,7 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const name_enElement = screen.getByLabelText("نام فارسی")
-            await waitFor(()=>{
+            await waitFor(() => {
                expect(name_enElement).toHaveValue("مدیریت کارتابل رییس اداره مسافری استان")
            })
        });
@@ -155,13 +155,13 @@ describe("Create Content component from Create Form Component in Role Management
                </MockAppWithProviders>
            )
            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
-            await waitFor(()=>{
+            await waitFor(() => {
                expect(checkboxElement).toBeChecked();
            })

        });
    })
-    describe("Validation", ()=>{
+    describe("Validation", () => {
        it('should see error text when name_fa input is empty', async () => {
            render(
                <MockAppWithProviders>
@@ -170,16 +170,16 @@ describe("Create Content component from Create Form Component in Role Management
            )
            const name_faInput = screen.getByLabelText("نام فارسی")
            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
-            fireEvent.change(name_faInput, {target : {value : ''}});
+            fireEvent.change(name_faInput, {target: {value: ''}});

            fireEvent.blur(name_faInput)

-            await waitFor(()=>{
+            await waitFor(() => {
                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
            })
-            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
+            fireEvent.change(name_faInput, {target: {value: "نام فارسی"}})

-            await waitFor(()=>{
+            await waitFor(() => {
                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
            })
        })
@@ -192,18 +192,27 @@ describe("Create Content component from Create Form Component in Role Management
            const name_enInput = screen.getByLabelText("نام انگلیسی")
            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()

-            fireEvent.change(name_enInput, {target : {value : null}});
+            fireEvent.change(name_enInput, {target: {value: null}});
            fireEvent.blur(name_enInput)

-            await waitFor(()=>{
+            await waitFor(() => {

                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
            })
-            fireEvent.change(name_enInput, {target : {value : "english name"}})
+            fireEvent.change(name_enInput, {target: {value: "english name"}})

-            await waitFor(()=>{
+            await waitFor(() => {
                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
            })
        })
+        it('should submit button be disabled', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const submitButtonElement = screen.queryByText("ثبت")
+            expect(submitButtonElement).toBeDisabled()
+        });
    })
 })