CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-11-04 08:15:05 +00:00
parent d30fd964a8 d9a2425665
commit 4c591d419b
5 changed files with 83 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
mocks/handlers/roles.js
View File

@@ -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: "مدیر"
}
]
}))
}),
]

8
src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
View File

@@ -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>

28
src/components/dashboard/role-management/Form/CreateForm/__test__/CreateContent.test.js
View File

@@ -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()
})
});
})

2
src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
View File

@@ -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>

69
src/components/dashboard/role-management/Form/UpdateForm/__test__/UpdateContent.test.js
View File

@@ -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,7 +36,7 @@ describe("Create Content component from Create Form Component in Role Management
</MockAppWithProviders>
)
const textElement = screen.queryByText("ویرایش")
await waitFor(()=>{
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
@@ -47,7 +47,7 @@ describe("Create Content component from Create Form Component in Role Management
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام انگلیسی")
await waitFor(()=>{
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
@@ -58,7 +58,7 @@ describe("Create Content component from Create Form Component in Role Management
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام فارسی")
await waitFor(()=>{
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
@@ -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()
});
})
})