CFE-10 testing first page

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

@@ -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('داشبورد')
+        });
+
+    });
+});

src/components/first/index.jsx

@@ -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
-                    <Button
+                    data-testid="button-login-or-dashboard"
-                        variant="outlined"
+                    variant={isAuth ? "outlined" : "contained"}
-                        component={NextLinkComposed}
+                    component={NextLinkComposed}
-                        to={{
+                    to={{
-                            pathname: "/dashboard",
+                        pathname: isAuth ? "/dashboard" : "/login-expert",
-                        }}
+                    }}
-                    >
+                >
-                        {t("dashboard")}
+                    {isAuth ? t("dashboard") : t("login_expert")}
-                    </Button>
+                </Button>
-                ) : (
-                    <Button
-                        sx={{mx: 2}}
-                        variant="contained"
-                        component={NextLinkComposed}
-                        to={{
-                            pathname: "/login-expert",
-                        }}
-                    >
-                        {t("login_expert")}
-                    </Button>
-                )}
             </CenterLayout>
             <Stack direction="row" alignItems="center" justifyContent="center">
                 <Typography variant={"caption"}