From 375f57d9e7ea254218052921944febbebaab8350 Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>
Date: Thu, 22 Dec 2022 14:36:50 +0330
Subject: [PATCH 1/2] test: writting test for route-with-sub-routes component

---
 .../__tests__/route-with-sub-routes.spec.tsx  | 66 ++++++++++++-------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx b/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx
index 3ca94f68d347..685724a42217 100644
--- a/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx
+++ b/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx
@@ -1,30 +1,48 @@
-// TODO refactor old tests in this component
 import React from 'react';
-import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
 import { Redirect } from 'react-router-dom';
-import { PlatformContext } from '@deriv/shared';
+import { render, screen } from '@testing-library/react';
+import { RouteWithSubRoutesRender } from '../route-with-sub-routes';
 
-// configure({ adapter: new Adapter() });
+type TMockFunction = {
+    path: string;
+    exact?: boolean;
+};
 
-describe('<RouteWithSubRoutes />', () => {
-    it('should render one <RouteWithSubRoutesRender /> component', () => {
-        // const comp = (
-        //     <PlatformContext.Provider>
-        //         <RouteWithSubRoutesRender />
-        //     </PlatformContext.Provider>
-        // );
-        // const wrapper = shallow(comp);
-        // expect(wrapper).toHaveLength(1);
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    Route: jest.fn(({ path, exact }: TMockFunction) => (
+        <div>
+            <span>{`path param: ${path}`}</span>
+            <span>{`exact param: ${exact}`}</span>
+        </div>
+    )),
+}));
+
+afterEach(() => jest.clearAllMocks());
+
+const route = {
+    getTitle: jest.fn(),
+    component: Redirect,
+    is_logging_in: true,
+    is_logged_in: true,
+    exact: true,
+    path: '/test-path',
+};
+
+const MockRouteWithSubRoutesRender = () => <RouteWithSubRoutesRender {...route} />;
+
+describe('RouteWithSubRoutesRender component', () => {
+    it('should render the "RouteWithSubRoutesRender" component', () => {
+        render(<MockRouteWithSubRoutesRender />);
+        const span_element = screen.getByText(/path param: \/test-path/i);
+        expect(span_element).toBeInTheDocument();
+    });
+
+    it('should render properties', () => {
+        render(<MockRouteWithSubRoutesRender />);
+        const path_param = screen.getByText(/\/test-path/i);
+        const exact_param = screen.getByText(/exact param: true/i);
+        expect(path_param).toBeInTheDocument();
+        expect(exact_param).toBeInTheDocument();
     });
-    // it('should have props as passed as route', () => {
-    //     const route = { path: '/', component: Redirect, title: '', exact: true, to: '/root' };
-    //     const comp = (
-    //         <PlatformContext.Provider>
-    //             <RouteWithSubRoutesRender {...route} />
-    //         </PlatformContext.Provider>
-    //     );
-    //     const wrapper = shallow(comp);
-    //     expect(wrapper.prop('exact')).toBe(true);
-    //     expect(wrapper.prop('path')).toBe('/');
-    // });
 });

From 26a98b9e9ce177ecbf7bf20ef35b8081cc7a7492 Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>
Date: Sun, 25 Dec 2022 15:33:42 +0330
Subject: [PATCH 2/2] refactor: removed extra export from the component

---
 .../__tests__/route-with-sub-routes.spec.tsx    | 17 +++++++++++++----
 .../Components/Routes/route-with-sub-routes.jsx |  2 --
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx b/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx
index 685724a42217..cceaaa6cd435 100644
--- a/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx
+++ b/packages/core/src/App/Components/Routes/__tests__/route-with-sub-routes.spec.tsx
@@ -1,13 +1,22 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
-import { RouteWithSubRoutesRender } from '../route-with-sub-routes';
+import RouteWithSubRoutes from '../route-with-sub-routes';
 
 type TMockFunction = {
     path: string;
     exact?: boolean;
 };
 
+jest.mock('Stores/connect', () => ({
+    __esModule: true,
+    default: 'mockedDefaultExport',
+    connect:
+        () =>
+        <T,>(Component: T) =>
+            Component,
+}));
+
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
     Route: jest.fn(({ path, exact }: TMockFunction) => (
@@ -29,10 +38,10 @@ const route = {
     path: '/test-path',
 };
 
-const MockRouteWithSubRoutesRender = () => <RouteWithSubRoutesRender {...route} />;
+const MockRouteWithSubRoutesRender = () => <RouteWithSubRoutes {...route} />;
 
-describe('RouteWithSubRoutesRender component', () => {
-    it('should render the "RouteWithSubRoutesRender" component', () => {
+describe('RouteWithSubRoutes component', () => {
+    it('should render the "RouteWithSubRoutes" component', () => {
         render(<MockRouteWithSubRoutesRender />);
         const span_element = screen.getByText(/path param: \/test-path/i);
         expect(span_element).toBeInTheDocument();
diff --git a/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx b/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx
index 7bd184418608..11ef42ef5e27 100644
--- a/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx
+++ b/packages/core/src/App/Components/Routes/route-with-sub-routes.jsx
@@ -75,8 +75,6 @@ const RouteWithSubRoutes = route => {
     return <Route exact={route.exact} path={route.path} render={renderFactory} />;
 };
 
-export { RouteWithSubRoutes as RouteWithSubRoutesRender }; // For tests
-
 export default connect(({ gtm, common }) => ({
     pushDataLayer: gtm.pushDataLayer,
     checkAppId: common.checkAppId,