MPDX-0000 - Tools - Adds ToolsWrapper to import pages. (#1028)

* Adds ToolsWrapper to import pages.
CruGlobal · Sep 5, 2024 · 40524d1 · 40524d1
1 parent fdb6a3e
commit 40524d1
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 33 deletions.
diff --git a/pages/accountLists/[accountListId]/tools/import/csv.page.tsx b/pages/accountLists/[accountListId]/tools/import/csv.page.tsx
@@ -1,4 +1,3 @@
-import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,12 +8,12 @@ import {
 } from 'src/components/Tool/Import/Csv/CsvImportContext';
 import { CsvImportWrapper } from 'src/components/Tool/Import/Csv/CsvImportWrapper';
 import { useAccountListId } from 'src/hooks/useAccountListId';
-import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { ToolsWrapper } from '../ToolsWrapper';
 
 const CsvHome: React.FC = () => {
-  const { appName } = useGetAppSettings();
   const { t } = useTranslation();
   const accountListId = useAccountListId();
+  const pageUrl = 'tools/import/csv';
 
   const { query, replace, pathname, isReady } = useRouter();
   const urlTab = query?.tab as CsvImportViewStepEnum.Upload;
@@ -61,12 +60,11 @@ const CsvHome: React.FC = () => {
   };
 
   return (
-    <>
-      <Head>
-        <title>
-          {appName} | {t(pageTitle)}
-        </title>
-      </Head>
+    <ToolsWrapper
+      pageTitle={t('Import from CSV')}
+      pageUrl={pageUrl}
+      selectedMenuId="import/csv"
+    >
       <CsvImportProvider csvFileId={csvFileId}>
         <CsvImportWrapper
           accountListId={accountListId}
@@ -76,7 +74,7 @@ const CsvHome: React.FC = () => {
           t={t}
         />
       </CsvImportProvider>
-    </>
+    </ToolsWrapper>
   );
 };
 

diff --git a/pages/accountLists/[accountListId]/tools/import/google.page.test.tsx b/pages/accountLists/[accountListId]/tools/import/google.page.test.tsx
@@ -23,8 +23,8 @@ const RenderGoogleImportPage = () => (
 );
 describe('render', () => {
   it('google import page', async () => {
-    const { findByText } = render(<RenderGoogleImportPage />);
-
-    expect(await findByText('Import from Google')).toBeVisible();
+    const { findAllByText } = render(<RenderGoogleImportPage />);
+    const title = await findAllByText('Import from Google');
+    expect(title).toHaveLength(2);
   });
 });
diff --git a/pages/accountLists/[accountListId]/tools/import/google.page.tsx b/pages/accountLists/[accountListId]/tools/import/google.page.tsx
@@ -1,30 +1,28 @@
-import Head from 'next/head';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import Loading from 'src/components/Loading';
 import GoogleImport from 'src/components/Tool/GoogleImport/GoogleImport';
 import { useAccountListId } from 'src/hooks/useAccountListId';
-import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { ToolsWrapper } from '../ToolsWrapper';
 
 const GoogleImportPage: React.FC = () => {
   const { t } = useTranslation();
   const accountListId = useAccountListId();
-  const { appName } = useGetAppSettings();
+  const pageUrl = 'tools/import/google';
 
   return (
-    <>
-      <Head>
-        <title>
-          {appName} | {t('Import from Google')}
-        </title>
-      </Head>
+    <ToolsWrapper
+      pageTitle={t('Import from Google')}
+      pageUrl={pageUrl}
+      selectedMenuId="import/google"
+    >
       {accountListId ? (
         <GoogleImport accountListId={accountListId} />
       ) : (
         <Loading loading />
       )}
-    </>
+    </ToolsWrapper>
   );
 };
 

diff --git a/pages/accountLists/[accountListId]/tools/import/tnt.page.test.tsx b/pages/accountLists/[accountListId]/tools/import/tnt.page.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { render } from '@testing-library/react';
+import TestRouter from '__tests__/util/TestRouter';
+import TestWrapper from '__tests__/util/TestWrapper';
+import theme from 'src/theme';
+import TntConnectPage from './tnt.page';
+
+const accountListId = 'accountListId';
+const router = {
+  query: { accountListId },
+  isReady: true,
+};
+
+const RenderGoogleImportPage = () => (
+  <TestWrapper>
+    <TestRouter router={router}>
+      <ThemeProvider theme={theme}>
+        <TntConnectPage />
+      </ThemeProvider>
+    </TestRouter>
+  </TestWrapper>
+);
+describe('render', () => {
+  it('google import page', async () => {
+    const { findAllByText } = render(<RenderGoogleImportPage />);
+    const title = await findAllByText('Import from TntConnect');
+    expect(title).toHaveLength(2);
+  });
+});
diff --git a/pages/accountLists/[accountListId]/tools/import/tnt.page.tsx b/pages/accountLists/[accountListId]/tools/import/tnt.page.tsx
@@ -1,30 +1,28 @@
-import Head from 'next/head';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import Loading from 'src/components/Loading';
 import TntConnect from 'src/components/Tool/TntConnect/TntConnect';
 import { useAccountListId } from 'src/hooks/useAccountListId';
-import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { ToolsWrapper } from '../ToolsWrapper';
 
 const TntConnectPage: React.FC = () => {
   const { t } = useTranslation();
   const accountListId = useAccountListId();
-  const { appName } = useGetAppSettings();
+  const pageUrl = 'tools/import/tnt';
 
   return (
-    <>
-      <Head>
-        <title>
-          {appName} | {t('Import Tnt')}
-        </title>
-      </Head>
+    <ToolsWrapper
+      pageTitle={t('Import from TntConnect')}
+      pageUrl={pageUrl}
+      selectedMenuId="import/tnt"
+    >
       {accountListId ? (
         <TntConnect accountListId={accountListId} />
       ) : (
         <Loading loading />
       )}
-    </>
+    </ToolsWrapper>
   );
 };