LFFE-14 Create test for first page

example.env.local

@@ -7,6 +7,7 @@ NEXT_PUBLIC_PRIMARY_MAIN = "#084070"
 NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00"
 
 NEXT_PUBLIC_BASE_URL = "https://loan.witel.ir"
+NEXT_PUBLIC_POWERED_BY_URL = "https://witel.ir"
 
 #["NEXT_PUBLIC_HAS_WIDGET" , "NEXT_PUBLIC_HAS_NOTIFICATION"]
 NEXT_PUBLIC_HAS_VALUE=["NEXT_PUBLIC_HAS_NOTIFICATION"]

mocks/handler.js

@@ -1 +1,5 @@
-export const handler = [];
+import {userHandler} from "./handlers/user";
+
+export const handler = [
+    ...userHandler
+];

mocks/handlers/user.js

@@ -0,0 +1,19 @@
+import {rest} from "msw";
+import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
+
+export const userHandler = [
+    rest.get(GET_USER_ROUTE, (req, res, ctx) => {
+        return res(ctx.json({
+            data: {
+                id: 10,
+                full_name: "Witel Company",
+                position: "Software Engineer",
+                permissions: [
+                    "manage_users",
+                    "manage_roles",
+                    "manage_boss"
+                ],
+            }
+        }))
+    }),
+]

package.json

@@ -63,7 +63,7 @@
     "eslint-plugin-testing-library": "^6.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "msw": "^2.0.3",
+    "msw": "^1.3.1",
     "next-router-mock": "^0.9.10",
     "run-script-os": "^1.1.6"
   }

public/locales/fa/app.json

@@ -2,6 +2,7 @@
   "app_name": "سامانه جامع تسهیلات",
   "app_short_name": "سامانه تسهیلات",
   "dashboard": "داشبورد",
+  "powered_by_witel": "توسعه یافته توسط وایتل",
   "first_page": "خوش آمدید",
   "login": "ورود",
   "login_expert": "ورود کارشناس",

src/components/first/__tests__/index.test.js

@@ -0,0 +1,61 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import FirstComponent from "@/components/first";
+import MockAppWithProviders from "../../../../mocks/AppWithProvider";
+import {server} from "../../../../mocks/server";
+import {rest} from "msw";
+import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
+
+describe("First Component From First Page", () => {
+    describe("Rendering", () => {
+        it("App Name Text Rendered", () => {
+            render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
+            const appNameElement = screen.queryByText(/سامانه جامع تسهیلات/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("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("Show Dashboard Button And Do Not Show Login Button When User Is Authenticated", async () => {
+            localStorage.setItem("_token", 'token');
+            render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
+            await waitFor(() => {
+                const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
+                const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
+                expect(authenticationButtonLogin).not.toBeInTheDocument()
+                expect(authenticationButtonDashboard).toBeInTheDocument()
+            })
+        });
+        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(401))
+            }))
+            render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
+            await waitFor(() => {
+                const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
+                const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
+                expect(authenticationButtonLogin).toBeInTheDocument()
+                expect(authenticationButtonDashboard).not.toBeInTheDocument()
+            })
+        });
+    });
+});

src/components/first/index.jsx

@@ -1,11 +1,10 @@
-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";
 import {Button, Stack, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
 import SvgDashboard from "@/core/components/svgs/SvgDashboard";
-import process from "next/dist/build/webpack/loaders/resolve-url-loader/lib/postcss";
 
 const FirstComponent = () => {
     const t = useTranslations();
@@ -18,28 +17,16 @@ const FirstComponent = () => {
                 <Typography variant="h5" 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"}
@@ -47,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>
     );

src/pages/_app.jsx

@@ -15,7 +15,7 @@ const App = ({Component, pageProps}) => {
         <>
             <UserProvider>
                 <LanguageProvider>
-                    <NextIntlProvider messages={pageProps.messages || {}}>
+                    <NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
                         <MuiLayout isBot={pageProps.isBot}>
                             {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
                             <LoadingProvider>

src/pages/index.jsx

@@ -16,6 +16,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "first_page",
             isBot,
+            locale
         },
     };
 }