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

Merge branch 'develop' of https://gitlab.com/witel-front-end/crm-app into feature/CFE-12_change_password_test

Browse Source
This commit is contained in:
Yasiu1376
2023-10-02 15:14:58 +03:30
parent 7a94678fd4 3e36e3fedd
commit 4cf388e920
23 changed files with 477 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/first/__tests__/index.test.js
View File

@@ -1,42 +1,61 @@
import {render, screen, waitFor} from "@testing-library/react";
import FirstComponent from "@/components/first";
import {render, screen} from "@testing-library/react";
import MockAppWithProviders from "../../../../mocks/AppWithProvider";
import {server} from "../../../../mocks/server";
import {rest} from "msw";
import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
describe('First page component', () => {
describe('Rendering', () => {
it('Should see app name text', () => {
render(<FirstComponent/>, {wrapper: MockAppWithProviders})
const appNameElement = screen.getByTestId('app-name')
expect(appNameElement).toHaveTextContent('سامانه CRM')
describe("First Component From First Page", () => {
describe("Rendering", () => {
it("App Name Text Rendered", () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
const appNameElement = screen.queryByText(/سامانه CRM/i);
expect(appNameElement).toBeInTheDocument()
});
it("App version Text Rendered", () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
const versionControler = screen.queryByText(process.env.NEXT_PUBLIC_API_VERSION, {exact: false});
expect(versionControler).toBeInTheDocument()
});
it("Powered By Rendered With Currect URL", () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
const linkElement = screen.queryByText('توسعه یافته توسط وایتل');
expect(linkElement).toBeInTheDocument()
expect(linkElement).toHaveAttribute('href', process.env.NEXT_PUBLIC_POWERED_BY_URL);
});
});
describe('behavior', () => {
it('Should see login button when is not auth', async () => {
render(<FirstComponent/>, {wrapper: MockAppWithProviders})
const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
expect(buttonLoginOrDashboard).toHaveTextContent('ورود کارشناس')
expect(buttonLoginOrDashboard).not.toHaveTextContent('داشبورد')
describe("Behavioral", () => {
it("Show Login Button And Do Not Show Dashboard Button When User Is Not Authenticated", async () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
await waitFor(() => {
const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
expect(authenticationButtonLogin).toBeInTheDocument()
expect(authenticationButtonDashboard).not.toBeInTheDocument()
})
});
it('Should see dashboard button when is auth', async () => {
it("Show Dashboard Button And Do Not Show Login Button When User Is Authenticated", async () => {
localStorage.setItem("_token", 'token');
render(<FirstComponent/>, {wrapper: MockAppWithProviders})
const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
expect(buttonLoginOrDashboard).not.toHaveTextContent('ورود کارشناس')
expect(buttonLoginOrDashboard).toHaveTextContent('داشبورد')
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
await waitFor(() => {
const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
expect(authenticationButtonLogin).not.toBeInTheDocument()
expect(authenticationButtonDashboard).toBeInTheDocument()
})
});
it('Should see login button when token expire', async () => {
it("Show Login Button And Do Not Show Dashboard Button When User Authentication Is Expired", async () => {
localStorage.setItem("_token", 'token');
server.use([rest.get(GET_USER_ROUTE, (req, res, ctx) => {
return res(ctx.status(403))
})])
render(<FirstComponent/>, {wrapper: MockAppWithProviders})
const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
expect(buttonLoginOrDashboard).toHaveTextContent('ورود کارشناس')
expect(buttonLoginOrDashboard).not.toHaveTextContent('داشبورد')
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
await waitFor(() => {
const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
expect(authenticationButtonLogin).toBeInTheDocument()
expect(authenticationButtonDashboard).not.toBeInTheDocument()
})
});
});
});

18
src/components/first/index.jsx
View File

@@ -1,4 +1,4 @@
import {NextLinkComposed} from "@/core/components/LinkRouting";
import LinkRouting, {NextLinkComposed} from "@/core/components/LinkRouting";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useUser from "@/lib/app/hooks/useUser";
@@ -14,7 +14,7 @@ const FirstComponent = () => {
<FullPageLayout sx={{p: 1}}>
<CenterLayout spacing={3}>
<SvgDashboard width={300} height={200}/>
<Typography variant="h5" data-testid="app-name" sx={{textAlign: "center"}}>
<Typography variant="h5" sx={{textAlign: "center"}}>
{t("app_name")}
</Typography>
<Button
@@ -34,7 +34,19 @@ const FirstComponent = () => {
color: 'primary.main',
fontFamily: 'Arial',
fontWeight: 'bold'
}}>v{process.env.NEXT_PUBLIC_API_VERSION}</Typography>
}}
>
v{process.env.NEXT_PUBLIC_API_VERSION}
</Typography>
</Stack>
<Stack direction="row" alignItems="center" justifyContent="center">
<LinkRouting
sx={{margin: 0.5, fontSize: "14px"}}
href={process.env.NEXT_PUBLIC_POWERED_BY_URL}
target="_blank"
>
{t("powered_by_witel")}
</LinkRouting>
</Stack>
</FullPageLayout>
);

123
src/components/login-expert/LoginExpertComponent.jsx Normal file
View File

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

28
src/components/login-expert/LoginLinkRouting.jsx Normal file
View File

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

153
src/components/login-expert/__test__/LoginExpertComponent.test.js Normal file
View File

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

18
src/components/login-expert/__test__/LoginLinkRouting.test.js Normal file
View File

@@ -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("بازگشت به صفحه اصلی")
});
})
})

143
src/components/login-expert/index.jsx
View File

@@ -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 LoginIcon from "@mui/icons-material/Login";
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";
import LoginLinkRouting from "@/components/login-expert/LoginLinkRouting";
import LoginExpertComponent from "@/components/login-expert/LoginExpertComponent";
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">
<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>
<LoginExpertComponent />
</CenterLayout>
<Stack direction="row" alignItems="center" justifyContent="center">
<LinkRouting
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>
<LoginLinkRouting />
</FullPageLayout>
);
};