From 2ba907f9f93ed4c9fee3268da9c1567bb684e3e6 Mon Sep 17 00:00:00 2001 From: No-Cash-7970 Date: Mon, 9 Sep 2024 02:52:31 -0700 Subject: [PATCH] refactor(app): add components to index.ts files --- src/app/[lang]/components/NavBar/NavBar.test.tsx | 15 ++++++++++----- .../NodeSelector/CustomNodeDialogContent.tsx | 2 +- .../NavBar/NodeSelector/NodeSelector.test.tsx | 7 +++++-- .../NavBar/NodeSelector/NodeSelector.tsx | 2 +- .../components/NavBar/Settings/SettingsDialog.tsx | 2 +- .../components/NavBar/Settings/SettingsForm.tsx | 3 +-- .../[lang]/components/PageTitleHeading/index.ts | 2 ++ src/app/[lang]/components/index.ts | 4 +++- 8 files changed, 24 insertions(+), 13 deletions(-) create mode 100644 src/app/[lang]/components/PageTitleHeading/index.ts diff --git a/src/app/[lang]/components/NavBar/NavBar.test.tsx b/src/app/[lang]/components/NavBar/NavBar.test.tsx index 533492a..cb9c3de 100644 --- a/src/app/[lang]/components/NavBar/NavBar.test.tsx +++ b/src/app/[lang]/components/NavBar/NavBar.test.tsx @@ -1,6 +1,8 @@ import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import i18nextClientMock from '@/app/lib/testing/i18nextClientMock'; +// This must be imported after the mock classes are imported +import { JotaiProvider } from '@/app/[lang]/components'; // Mock react `use` function before modules that use it are imported jest.mock('react', () => ({ @@ -21,33 +23,36 @@ jest.mock('next/navigation', () => ({ // Mock i18next because it is used by child components jest.mock('react-i18next', () => i18nextClientMock); +// Mock the wallet provider +jest.mock('../wallet/WalletProvider.tsx', () => 'div'); + import NavBar from './NavBar'; describe('Nav Bar Component', () => { it('renders', async () => { - render(); + render(); expect(await screen.findByRole('navigation')).toBeInTheDocument(); }); it('has site name', async () => { - render(); + render(); expect(await screen.findByText('site_name_pt1')).toBeInTheDocument(); expect(screen.getByText('site_name_pt2')).toBeInTheDocument(); }); it('has node selector button', async () => { - render(); + render(); expect(await screen.findByTitle('node_selector.choose_node')).toBeInTheDocument(); }); it('has language selector button', async () => { - render(); + render(); expect(await screen.findByTestId('lang-btn')).toBeInTheDocument(); }); it('has settings button', async () => { - render(); + render(); expect(await screen.findByTitle('settings.heading')).toBeInTheDocument(); }); diff --git a/src/app/[lang]/components/NavBar/NodeSelector/CustomNodeDialogContent.tsx b/src/app/[lang]/components/NavBar/NodeSelector/CustomNodeDialogContent.tsx index 52ed2d8..769b01b 100644 --- a/src/app/[lang]/components/NavBar/NodeSelector/CustomNodeDialogContent.tsx +++ b/src/app/[lang]/components/NavBar/NodeSelector/CustomNodeDialogContent.tsx @@ -12,9 +12,9 @@ import { type PrimitiveAtom, atom, useAtom, useAtomValue, useSetAtom, useStore } import { RESET } from "jotai/utils"; import { atomWithValidate } from "jotai-form"; import * as NodeConfigLib from "@/app/lib/node-config"; +import { ToastNotification } from '@/app/[lang]/components'; import { FieldErrorMessage, FieldGroup, TextField } from "@/app/[lang]/components/form"; import { ValidationMessage, isAlgodOK, removeNonNumericalChars } from "@/app/lib/utils"; -import ToastNotification from '@/app/[lang]/components/ToastNotification'; import { UNIT_NAME_MAX_LENGTH } from "@/app/lib/txn-data/constants"; type Props = { diff --git a/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.test.tsx b/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.test.tsx index ad4f8fd..abc8738 100644 --- a/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.test.tsx +++ b/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.test.tsx @@ -9,9 +9,9 @@ import { voiTestnetNodeConfig, } from '@/app/lib/node-config'; import { type NodeConfig } from '@/app/lib/node-config'; -import JotaiProvider from '@/app/[lang]/components/JotaiProvider'; -import { Provider as ToastProvider, Viewport as ToastViewport } from '@radix-ui/react-toast'; import i18nextClientMock from '@/app/lib/testing/i18nextClientMock'; +// Jotai provider must be imported after the mock classes are imported +import { JotaiProvider, ToastProvider, ToastViewport } from '@/app/[lang]/components'; // Mock i18next before modules that use it are imported jest.mock('react-i18next', () => i18nextClientMock); @@ -44,6 +44,9 @@ jest.mock('algosdk', () => ({ } })); +// Mock the wallet provider +jest.mock('../../wallet/WalletProvider.tsx', () => 'div'); + import NodeSelector from './NodeSelector'; describe('Node Selector', () => { diff --git a/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.tsx b/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.tsx index d3caabc..5832ee5 100644 --- a/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.tsx +++ b/src/app/[lang]/components/NavBar/NodeSelector/NodeSelector.tsx @@ -19,7 +19,7 @@ import { } from '@tabler/icons-react'; import { useTranslation } from '@/app/i18n/client'; import * as NodeConfigLib from '@/app/lib/node-config'; -import DialogLoadingPlaceholder from '@/app/[lang]/components/DialogLoadingPlaceholder'; +import { DialogLoadingPlaceholder } from '@/app/[lang]/components'; import NodeMenuItem from './NodeMenuItem'; const ViewConfigDialogContent = dynamic(() => import('./ViewConfigDialogContent'), { diff --git a/src/app/[lang]/components/NavBar/Settings/SettingsDialog.tsx b/src/app/[lang]/components/NavBar/Settings/SettingsDialog.tsx index 45f780d..7023fa4 100644 --- a/src/app/[lang]/components/NavBar/Settings/SettingsDialog.tsx +++ b/src/app/[lang]/components/NavBar/Settings/SettingsDialog.tsx @@ -4,7 +4,7 @@ import { useTranslation } from '@/app/i18n/client'; import * as Dialog from '@radix-ui/react-dialog'; import { IconSettings, IconX } from '@tabler/icons-react'; import dynamic from 'next/dynamic'; -import DialogLoadingPlaceholder from '@/app/[lang]/components/DialogLoadingPlaceholder'; +import { DialogLoadingPlaceholder } from '@/app/[lang]/components'; const SettingsModalBox = dynamic(() => import('./SettingsForm'), { ssr: false, diff --git a/src/app/[lang]/components/NavBar/Settings/SettingsForm.tsx b/src/app/[lang]/components/NavBar/Settings/SettingsForm.tsx index 32461e1..3a90fd4 100644 --- a/src/app/[lang]/components/NavBar/Settings/SettingsForm.tsx +++ b/src/app/[lang]/components/NavBar/Settings/SettingsForm.tsx @@ -5,6 +5,7 @@ import { useAtom, useSetAtom } from 'jotai'; import { RESET } from 'jotai/utils'; import { useTranslation } from '@/app/i18n/client'; import { Trans } from 'react-i18next'; +import { ToastNotification, WalletProvider } from '@/app/[lang]/components'; import { NumberField, RadioButtonGroupField, @@ -12,10 +13,8 @@ import { } from '@/app/[lang]/components/form'; import { useDebouncedCallback } from 'use-debounce'; import * as Settings from '@/app/lib/app-settings'; -import { WalletProvider } from '@/app/[lang]/components'; import { storedSignedTxnAtom, storedTxnDataAtom } from '@/app/lib/txn-data'; import ConnectWallet from './ConnectWallet'; -import ToastNotification from '@/app/[lang]/components/ToastNotification'; import { IconExclamationCircle } from '@tabler/icons-react'; type Props = { diff --git a/src/app/[lang]/components/PageTitleHeading/index.ts b/src/app/[lang]/components/PageTitleHeading/index.ts new file mode 100644 index 0000000..01103ec --- /dev/null +++ b/src/app/[lang]/components/PageTitleHeading/index.ts @@ -0,0 +1,2 @@ +import PageTitleHeading from './PageTitleHeading'; +export default PageTitleHeading; diff --git a/src/app/[lang]/components/index.ts b/src/app/[lang]/components/index.ts index 6ad721a..f357f57 100644 --- a/src/app/[lang]/components/index.ts +++ b/src/app/[lang]/components/index.ts @@ -1,8 +1,10 @@ export {default as BuilderSteps} from './BuilderSteps'; +export {default as DialogLoadingPlaceholder} from './DialogLoadingPlaceholder'; export {default as Footer} from './Footer'; export {default as JotaiProvider} from './JotaiProvider'; export {default as NavBar} from './NavBar'; -export {default as PageTitleHeading} from './PageTitleHeading/PageTitleHeading'; +export {default as PageTitleHeading} from './PageTitleHeading'; +export {default as ToastNotification} from './ToastNotification'; export {default as ToastProvider} from './ToastProvider'; export {default as ToastViewport} from './ToastViewport'; export {default as WalletProvider} from './wallet/WalletProvider';