Merge branch 'feature/CF-11_test_login' into 'develop'

CFE-11 Testing login page

See merge request witel-front-end/crm-app!10

jest.setup.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import {server} from "./mocks/server";
+import mockRouter from 'next-router-mock'
 
 require('dotenv').config({path: './.env.local'});
 
@@ -10,6 +11,8 @@ beforeAll(() => {
 })
 beforeEach(() => {
     localStorage.clear();
+    mockRouter.query = {}
+
 })
 
 afterEach(() => {

src/components/login-expert/LoginExpertComponent.jsx

@@ -0,0 +1,123 @@
+import {Box, Button, Container, Paper, Stack, TextField, Typography} from "@mui/material";
+import {Field, Formik} from "formik";
+import SvgLogin from "@/core/components/svgs/SvgLogin";
+import StyledForm from "@/core/components/StyledForm";
+import PasswordField from "@/core/components/PasswordField";
+import LoginIcon from "@mui/icons-material/Login";
+import {GET_USER_TOKEN} from "@/core/data/apiRoutes";
+import * as Yup from "yup";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useUser from "@/lib/app/hooks/useUser";
+import {useTranslations} from "next-intl";
+
+const LoginExpertComponent = () =>{
+    const t = useTranslations();
+    const requestServer = useRequest()
+    const {setToken} = useUser(); // pass token to set token
+    const handleSubmit = (values, props) => {
+        requestServer(GET_USER_TOKEN, 'post', {
+            data: {
+                username: values.username,
+                password: values.password,
+            },
+            success: {
+                notification: {show: false}
+            }
+        }).then((response) => {
+            setToken(response.data.token)
+        }).catch(() => {
+            props.setSubmitting(false)
+        })
+    };
+    const initialValues = {
+        username: "",
+        password: "",
+    };
+    const validationSchema = Yup.object().shape({
+        username: Yup.string().required(t("LoginPage.username_error_message_required")),
+        password: Yup.string().required(t("LoginPage.password_error_message_required")),
+    });
+
+    return(
+        <Container maxWidth="sm">
+            <Paper elevation={0}>
+                <Formik
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                    validationSchema={validationSchema}
+                >
+                    {(props) => (
+                        <Stack spacing={2} sx={{p: 2}}>
+                            <Stack
+                                sx={{width: "100%"}}
+                                alignItems='center'
+                            >
+                                <SvgLogin width={300} height={200}/>
+                            </Stack>
+                            <Typography margin={2} variant="h4" textAlign="center">
+                                {t("login_expert")}
+                            </Typography>
+                            <StyledForm sx={{width: "100%"}}>
+                                <Stack spacing={3} sx={{p: 2}}>
+                                    <Field
+                                        as={TextField}
+                                        name="username"
+                                        variant="outlined"
+                                        label={t("LoginPage.text_field_user_name")}
+                                        placeholder={t(
+                                            "LoginPage.text_field_enter_your_username"
+                                        )}
+                                        type={"text"}
+                                        error={
+                                            props.touched.username && props.errors.username
+                                                ? true
+                                                : false
+                                        }
+                                        fullWidth
+                                        helperText={
+                                            props.touched.username ? props.errors.username : null
+                                        }
+                                    />
+                                    <PasswordField
+                                        name="password"
+                                        label={t("LoginPage.text_field_password")}
+                                        error={
+                                            props.touched.password && props.errors.password
+                                                ? true
+                                                : false
+                                        }
+                                        helperText={
+                                            props.touched.password ? props.errors.password : null
+                                        }
+                                        placeholder={t(
+                                            "LoginPage.text_field_enter_your_password"
+                                        )}
+                                    />
+                                    <Box
+                                        sx={{
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "space-between",
+                                        }}
+                                    >
+                                        <Button
+                                            type="submit"
+                                            variant="contained"
+                                            fullWidth
+                                            size="medium"
+                                            endIcon={<LoginIcon/>}
+                                            disabled={props.isSubmitting || !(props.values.username && props.values.password)}
+                                        >
+                                            {t("LoginPage.button_submit")}
+                                        </Button>
+                                    </Box>
+                                </Stack>
+                            </StyledForm>
+                        </Stack>
+                    )}
+                </Formik>
+            </Paper>
+        </Container>
+    )
+}
+export default LoginExpertComponent

src/components/login-expert/LoginLinkRouting.jsx

@@ -0,0 +1,28 @@
+import LinkRouting from "@/core/components/LinkRouting";
+import {Stack} from "@mui/material";
+import {useRouter} from "next/router";
+import {useTranslations} from "next-intl";
+
+const LoginLinkRouting  = () => {
+    const t = useTranslations();
+    const router = useRouter()
+    const backUrlDecodedPath = router.query?.back_url
+
+    return (
+        <Stack direction="row" alignItems="center" justifyContent="center">
+            <LinkRouting
+                data-testid="link_routing"
+                sx={{margin: 2}}
+                href={
+                    backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
+                }
+            >
+                {t("LoginPage.link_routing_back_to")}{" "}
+                {backUrlDecodedPath
+                    ? t("LoginPage.link_routing_previuos_page")
+                    : t("LoginPage.link_routing_main_page")}
+            </LinkRouting>
+        </Stack>
+    )
+}
+export default LoginLinkRouting

src/components/login-expert/__test__/LoginExpertComponent.test.js

@@ -0,0 +1,153 @@
+import {act, findByText, fireEvent, getByText, render, screen, waitFor} from '@testing-library/react';
+import MockAppWithProviders from '../../../../mocks/AppWithProvider';
+import mockRouter from 'next-router-mock'
+import LoginExpertComponent from "@/components/login-expert/LoginExpertComponent";
+import LoginLinkRouting from "@/components/login-expert/LoginLinkRouting";
+
+describe('Login expert component from login page', () => {
+
+    describe('Rendering', () => {
+        it('LoginExpertComponent should see login expert text on the page',() => {
+            render(
+                <MockAppWithProviders>
+                    <LoginExpertComponent />
+                </MockAppWithProviders>
+            );
+            const loginExpertElement = screen.getByRole('heading', { level: 4 });
+            expect(loginExpertElement).toHaveTextContent('ورود کارشناس');
+        });
+
+        it('LoginExpertComponent from LoginComponent Button should render login text', () => {
+            render(
+                <MockAppWithProviders>
+                    <LoginExpertComponent />
+                </MockAppWithProviders>
+            );
+            const button = screen.getByText("ورود");
+            // Assertions for button props
+            expect(button).toHaveAttribute('type', 'submit');
+            expect(button).toHaveTextContent('ورود');
+        });
+
+        it("Show error when username is empty", async ()=>{
+            render(
+                <MockAppWithProviders>
+                    <LoginExpertComponent />
+                </MockAppWithProviders>
+            );
+
+            const usernameInput = screen.getByLabelText("نام کاربری")
+
+            expect(screen.queryByText("وارد کردن نام کاربری الزامیست")).not.toBeInTheDocument()
+
+            fireEvent.blur(usernameInput);
+
+            await waitFor(()=>{
+            expect(screen.queryByText("وارد کردن نام کاربری الزامیست")).toBeInTheDocument()
+            })
+
+            fireEvent.change(usernameInput, {target : {value : "testuser"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام کاربری الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it("Show error when password is empty", async ()=>{
+            render(
+                <MockAppWithProviders>
+                    <LoginExpertComponent />
+                </MockAppWithProviders>
+            );
+
+            const passwordInput = screen.getByLabelText("رمز عبور")
+
+            expect(screen.queryByText("وارد کردن رمز عبور الزامیست")).not.toBeInTheDocument()
+
+            fireEvent.blur(passwordInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن رمز عبور الزامیست")).toBeInTheDocument()
+            })
+
+            fireEvent.change(passwordInput, {target : {value : "testuser"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن رمز عبور الزامیست")).not.toBeInTheDocument()
+            })
+        })
+    });
+
+    describe("Behavior", ()=>{
+        it('Should fill the username field', async () => {
+            render(
+                <MockAppWithProviders>
+                    <LoginExpertComponent />
+                </MockAppWithProviders>
+            );
+            // Get username and password input elements by their name attributes
+            const usernameInput = screen.getByLabelText('نام کاربری');
+
+            fireEvent.change(usernameInput, {target: {value: 'testuser'}});
+            await act(async ()=>{
+                // Simulate user input
+                expect(usernameInput).toHaveValue('testuser');
+            })
+        });
+
+        it('Should fill the password fields', async () => {
+            render(
+                <MockAppWithProviders>
+                    <LoginExpertComponent />
+                </MockAppWithProviders>
+            );
+            // Get username and password input elements by their name attributes
+            const passwordInput = screen.getByLabelText('رمز عبور');
+            fireEvent.change(passwordInput, {target: {value: 'password123'}});
+
+            await act(async ()=>{
+                // Simulate user input
+                expect(passwordInput).toHaveValue('password123');
+            })
+        });
+
+        // this test is for when back url does not exist to run this test you should comment if in mock func
+        it('Should get main page when back url dos not exist', async () => {
+            render(
+                <MockAppWithProviders>
+                    <LoginLinkRouting/>
+                </MockAppWithProviders>
+            )
+            const linkElement = await screen.findByTestId("link_routing")
+            expect(linkElement).toHaveTextContent("بازگشت به صفحه اصلی")
+        });
+
+    })
+    describe("validation", ()=>{
+        it("Disabled submit button until fields completed", async ()=> {
+            render(
+                <MockAppWithProviders>
+                    <LoginExpertComponent/>
+                </MockAppWithProviders>
+            )
+            const usernameInput = screen.getByLabelText('نام کاربری');
+            const passwordInput = screen.getByLabelText('رمز عبور');
+            const submitButton = screen.getByText('ورود');
+
+            expect(submitButton).toBeDisabled();
+
+            fireEvent.change(usernameInput, {target: {value: 'testuser'}});
+
+            await waitFor(async () => {
+                // Now, the submit button should be enabled because both fields are completed
+                expect(submitButton).toBeDisabled();
+            });
+
+            fireEvent.change(passwordInput, {target: {value: 'password123'}});
+
+            await waitFor(async () => {
+                // Now, the submit button should be enabled because both fields are completed
+                expect(submitButton).toBeEnabled();
+            });
+        })
+    })
+});

src/components/login-expert/__test__/LoginLinkRouting.test.js

@@ -0,0 +1,18 @@
+import {render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../mocks/AppWithProvider";
+import LoginLinkRouting from "@/components/login-expert/LoginLinkRouting";
+
+describe("Login expert component from login page",()=>{
+
+    describe('Rendering', () => {
+        it('LoginLinkRouting from LoginComponent Should get main page when back url dos not exist', async () => {
+            render(
+                <MockAppWithProviders>
+                    <LoginLinkRouting/>
+                </MockAppWithProviders>
+            )
+            const linkElement = await screen.findByTestId("link_routing")
+            expect(linkElement).toHaveTextContent("بازگشت به صفحه اصلی")
+        });
+    })
+})

src/components/login-expert/index.jsx

@@ -1,151 +1,16 @@
-import LinkRouting from "@/core/components/LinkRouting";
-import PasswordField from "@/core/components/PasswordField";
-import StyledForm from "@/core/components/StyledForm";
-import {GET_USER_TOKEN} from "@/core/data/apiRoutes";
 import CenterLayout from "@/layouts/CenterLayout";
 import FullPageLayout from "@/layouts/FullPageLayout";
-import useUser from "@/lib/app/hooks/useUser";
+import LoginLinkRouting from "@/components/login-expert/LoginLinkRouting";
-import LoginIcon from "@mui/icons-material/Login";
+import LoginExpertComponent from "@/components/login-expert/LoginExpertComponent";
-import {Box, Button, Container, Paper, Stack, TextField, Typography,} from "@mui/material";
-import {Field, Formik} from "formik";
-import {useTranslations} from "next-intl";
-import {useSearchParams} from "next/navigation";
-import * as Yup from "yup";
-import useDirection from "@/lib/app/hooks/useDirection";
-import SvgLogin from "@/core/components/svgs/SvgLogin";
-import useRequest from "@/lib/app/hooks/useRequest";
 
 const LoginComponent = () => {
-    const t = useTranslations();
-    const {directionApp} = useDirection();  // should delete because we don't have direction anymore
-    const {setToken} = useUser(); // pass token to set token
-    const requestServer = useRequest()
-
-    // getting url query
-    const searchParams = useSearchParams();
-    const backUrlDecodedPath = searchParams.get("back_url");
-
-    //formik properties
-    const handleSubmit = (values, props) => {
-        requestServer(GET_USER_TOKEN, 'post', {
-            data: {
-                username: values.username,
-                password: values.password,
-            },
-            success: {
-                notification: {show: false}
-            }
-        }).then((response) => {
-            setToken(response.data.token)
-        }).catch(() => {
-            props.setSubmitting(false)
-        })
-    };
-    const initialValues = {
-        username: "",
-        password: "",
-    };
-    const validationSchema = Yup.object().shape({
-        username: Yup.string().required(t("LoginPage.username_error_message_required")),
-        password: Yup.string().required(t("LoginPage.password_error_message_required")),
-    });
 
     return (
         <FullPageLayout sx={{p: 1}}>
             <CenterLayout>
-                <Container maxWidth="sm">
+                <LoginExpertComponent />
-                    <Paper elevation={0}>
-                        <Formik
-                            initialValues={initialValues}
-                            onSubmit={handleSubmit}
-                            validationSchema={validationSchema}
-                        >
-                            {(props) => (
-                                <Stack spacing={2} sx={{p: 2}}>
-                                    <Stack
-                                        sx={{width: "100%"}}
-                                        alignItems='center'
-                                    >
-                                        <SvgLogin width={300} height={200}/>
-                                    </Stack>
-                                    <Typography margin={2} variant="h4" textAlign="center">
-                                        {t("login_expert")}
-                                    </Typography>
-                                    <StyledForm sx={{width: "100%"}}>
-                                        <Stack spacing={3} sx={{p: 2}}>
-                                            <Field
-                                                as={TextField}
-                                                name="username"
-                                                variant="outlined"
-                                                label={t("LoginPage.text_field_user_name")}
-                                                placeholder={t(
-                                                    "LoginPage.text_field_enter_your_username"
-                                                )}
-                                                type={"text"}
-                                                error={
-                                                    props.touched.username && props.errors.username
-                                                        ? true
-                                                        : false
-                                                }
-                                                fullWidth
-                                                helperText={
-                                                    props.touched.username ? props.errors.username : null
-                                                }
-                                            />
-                                            <PasswordField
-                                                name="password"
-                                                label={t("LoginPage.text_field_password")}
-                                                error={
-                                                    props.touched.password && props.errors.password
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.password ? props.errors.password : null
-                                                }
-                                                placeholder={t(
-                                                    "LoginPage.text_field_enter_your_password"
-                                                )}
-                                            />
-                                            <Box
-                                                sx={{
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "space-between",
-                                                }}
-                                            >
-                                                <Button
-                                                    type="submit"
-                                                    variant="contained"
-                                                    fullWidth
-                                                    size="medium"
-                                                    endIcon={<LoginIcon/>}
-                                                    disabled={props.isSubmitting}
-                                                >
-                                                    {t("LoginPage.button_submit")}
-                                                </Button>
-                                            </Box>
-                                        </Stack>
-                                    </StyledForm>
-                                </Stack>
-                            )}
-                        </Formik>
-                    </Paper>
-                </Container>
             </CenterLayout>
-            <Stack direction="row" alignItems="center" justifyContent="center">
+            <LoginLinkRouting />
-                <LinkRouting
-                    sx={{margin: 2}}
-                    href={
-                        backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
-                    }
-                >
-                    {t("LoginPage.link_routing_back_to")}{"Witel"}
-                    {backUrlDecodedPath
-                        ? t("LoginPage.link_routing_previuos_page")
-                        : t("LoginPage.link_routing_main_page")}
-                </LinkRouting>
-            </Stack>
         </FullPageLayout>
     );
 };

src/core/components/PasswordField/__test__/index.test.js

@@ -0,0 +1,31 @@
+import {fireEvent, getByRole, render, screen} from "@testing-library/react";
+import PasswordField from "@/core/components/PasswordField";
+import {Formik} from "formik";
+
+describe('Password Field component in core folder',  () => {
+    describe('Rendering', () => {
+        it('Show password when visibility icon clicked',() => {
+            render (
+                <Formik initialValues={{password:''}} onSubmit={()=>{}}>
+                    {(props)=>(
+                <PasswordField label="رمز عبور" />
+                    )}
+                </Formik>
+            )
+
+            const iconElement = screen.getByLabelText("رمز عبور")
+            const iconButton = screen.getByRole("button")
+
+
+            expect(iconElement).toHaveAttribute('type', 'password');
+
+            fireEvent.click(iconButton);
+
+            expect(iconElement).toHaveAttribute("type", "text");
+
+            fireEvent.click(iconButton);
+
+            expect(iconElement).toHaveAttribute('type', 'password');
+        })
+    })
+})