LFFE-14 Create test for first page

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,10 +34,22 @@ 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>
     );
 };
 
-export default FirstComponent;
+export default FirstComponent;