From 79f3806637fc3c3890df2908e3461c5e2cd22094 Mon Sep 17 00:00:00 2001
From: AmirHossein Mahmoodi <amir.mahmoodi74@gmail.com>
Date: Tue, 26 Sep 2023 10:35:36 +0330
Subject: [PATCH] CFE-15 fixed bug mock App with providers and wrapper

---
 mocks/AppWithProvider.jsx                    |  6 +++---
 src/components/first/__tests__/index.test.js | 18 ++++++++----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/mocks/AppWithProvider.jsx b/mocks/AppWithProvider.jsx
index 46096f2..a81bb3c 100644
--- a/mocks/AppWithProvider.jsx
+++ b/mocks/AppWithProvider.jsx
@@ -2,12 +2,12 @@ import App from "@/pages/_app";
 import fa from "&/locales/fa/app.json"
 
 const translations = {fa};
-const MockAppWithProviders = ({Component, locale, title, isBot}) => {
+const MockAppWithProviders = ({children, locale, title, isBot}) => {
     const pageProps = {
         title: title || '', isBot: isBot || true, locale: locale || 'fa', messages: translations[locale || 'fa']
     }
-
-    return (<App Component={Component} pageProps={pageProps}/>)
+    
+    return (<App Component={() => (<>{children}</>)} pageProps={pageProps}/>)
 }
 
 export default MockAppWithProviders
\ No newline at end of file
diff --git a/src/components/first/__tests__/index.test.js b/src/components/first/__tests__/index.test.js
index 987b7c5..7e60576 100644
--- a/src/components/first/__tests__/index.test.js
+++ b/src/components/first/__tests__/index.test.js
@@ -1,6 +1,6 @@
+import FirstComponent from "@/components/first";
 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";
@@ -8,33 +8,31 @@ import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
 describe('First page component', () => {
     describe('Rendering', () => {
         it('Should see app name text', () => {
-            render(<MockAppWithProviders Component={FirstComponent}/>)
+            render(<FirstComponent/>, {wrapper: MockAppWithProviders})
             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}/>)
+            render(<FirstComponent/>, {wrapper: MockAppWithProviders})
             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}/>)
+            render(<FirstComponent/>, {wrapper: MockAppWithProviders})
             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}/>)
+            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('داشبورد')