CFE-17 Merge branch 'feature/CFE-17-testing-first-page' into 'develop'

example.env.local

@@ -7,5 +7,6 @@ NEXT_PUBLIC_PRIMARY_MAIN = "#1b4332"
 NEXT_PUBLIC_SECONDARY_MAIN = "#800e13"
 
 NEXT_PUBLIC_BASE_URL = "https://crm.witel.ir"
+NEXT_PUBLIC_POWERED_BY_URL = "https://witel.ir"
 
 NODE_ENV = "development"

public/locales/fa/app.json

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

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

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

src/components/first/index.jsx

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

src/components/login-expert/index.jsx

@@ -140,7 +140,7 @@ const LoginComponent = () => {
                         backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
                     }
                 >
-                    {t("LoginPage.link_routing_back_to")}{" "}
+                    {t("LoginPage.link_routing_back_to")}{"Witel"}
                     {backUrlDecodedPath
                         ? t("LoginPage.link_routing_previuos_page")
                         : t("LoginPage.link_routing_main_page")}