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

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

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-09-25 08:02:35 +00:00
parent d7f34d74c8 866cfddd2c
commit 6242a12add
6 changed files with 95 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
jest.setup.js
View File

@@ -6,6 +6,9 @@ jest.mock('next/router', () => jest.requireActual('next-router-mock'))
beforeAll(() => {
server.listen()
})
beforeEach(() => {
localStorage.clear();
})
afterEach(() => {
server.resetHandlers()

13
mocks/AppWithProvider.jsx Normal file
View File

@@ -0,0 +1,13 @@
import App from "@/pages/_app";
import fa from "&/locales/fa/app.json"
const translations = {fa};
const MockAppWithProviders = ({Component, locale, title, isBot}) => {
const pageProps = {
title: title || '', isBot: isBot || true, locale: locale || 'fa', messages: translations[locale || 'fa']
}
return (<App Component={Component} pageProps={pageProps}/>)
}
export default MockAppWithProviders

9
mocks/handler.js
View File

@@ -1 +1,8 @@
export const handler = []
import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
import {rest} from "msw";
export const handler = [rest.get(GET_USER_ROUTE, (req, res, ctx) => {
return res(ctx.json({
id: 10
}))
})]

44
src/components/first/__tests__/index.test.js Normal file
View File

@@ -0,0 +1,44 @@
import {render, screen} from "@testing-library/react";
import MockAppWithProviders from "../../../../mocks/AppWithProvider";
import FirstComponent from "@/components/first";
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(<MockAppWithProviders Component={FirstComponent}/>)
const appNameElement = screen.getByTestId('app-name')
expect(appNameElement).toHaveTextContent('سامانه CRM')
});
});
describe('behavior', () => {
it('Should see login button when is not auth', async () => {
render(<MockAppWithProviders Component={FirstComponent}/>)
const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
expect(buttonLoginOrDashboard).toHaveTextContent('ورود کارشناس')
expect(buttonLoginOrDashboard).not.toHaveTextContent('داشبورد')
});
it('Should see dashboard button when is auth', async () => {
localStorage.setItem("_token", 'token');
render(<MockAppWithProviders Component={FirstComponent}/>)
const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
expect(buttonLoginOrDashboard).not.toHaveTextContent('ورود کارشناس')
expect(buttonLoginOrDashboard).toHaveTextContent('داشبورد')
});
it('Should see login button when token expire', async () => {
localStorage.setItem("_token", 'token');
server.use([
rest.get(GET_USER_ROUTE, (req, res, ctx) => {
return res(ctx.status(403))
})
])
render(<MockAppWithProviders Component={FirstComponent}/>)
const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
expect(buttonLoginOrDashboard).toHaveTextContent('ورود کارشناس')
expect(buttonLoginOrDashboard).not.toHaveTextContent('داشبورد')
});
});
});

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

@@ -14,31 +14,19 @@ const FirstComponent = () => {
<FullPageLayout sx={{p: 1}}>
<CenterLayout spacing={3}>
<SvgDashboard width={300} height={200}/>
<Typography variant="h5" sx={{textAlign: "center"}}>
<Typography variant="h5" data-testid="app-name" sx={{textAlign: "center"}}>
{t("app_name")}
</Typography>
{isAuth ? (
<Button
variant="outlined"
component={NextLinkComposed}
to={{
pathname: "/dashboard",
}}
>
{t("dashboard")}
</Button>
) : (
<Button
sx={{mx: 2}}
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/login-expert",
}}
>
{t("login_expert")}
</Button>
)}
<Button
data-testid="button-login-or-dashboard"
variant={isAuth ? "outlined" : "contained"}
component={NextLinkComposed}
to={{
pathname: isAuth ? "/dashboard" : "/login-expert",
}}
>
{isAuth ? t("dashboard") : t("login_expert")}
</Button>
</CenterLayout>
<Stack direction="row" alignItems="center" justifyContent="center">
<Typography variant={"caption"}

34
src/pages/_app.jsx
View File

@@ -10,24 +10,22 @@ import TitlePage from "@/core/components/TitlePage";
const App = ({Component, pageProps}) => {
return (
<>
<UserProvider>
<LanguageProvider>
<NextIntlProvider messages={pageProps.messages || {}}>
<MuiLayout isBot={pageProps.isBot}>
{pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
<LoadingProvider>
<AppLayout isBot={pageProps.isBot}>
<Component {...pageProps} />
</AppLayout>
</LoadingProvider>
</MuiLayout>
</NextIntlProvider>
</LanguageProvider>
</UserProvider>
</>
);
return (<>
<UserProvider>
<LanguageProvider>
<NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
<MuiLayout isBot={pageProps.isBot}>
{pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
<LoadingProvider>
<AppLayout isBot={pageProps.isBot}>
<Component {...pageProps} />
</AppLayout>
</LoadingProvider>
</MuiLayout>
</NextIntlProvider>
</LanguageProvider>
</UserProvider>
</>)
};
export default App;