BN-37 | Fix. Component Structure In Index

Author: rahu1ramesh

src/index.tsx

@@ -16,8 +16,8 @@ root.render(
   <React.StrictMode>
     <BrowserRouter basename={process.env.PUBLIC_URL || '/'}>
       <NotificationProvider>
+        <NotificationServiceComponent />
         <ClinicalConfigProvider>
-          <NotificationServiceComponent />
           <App />
         </ClinicalConfigProvider>
       </NotificationProvider>

src/pages/HomePage.tsx

@@ -1,25 +1,18 @@
 import React, { Suspense } from 'react';
 import { Grid, Column, Section, Loading } from '@carbon/react';
+import PatientDetails from '@components/patient/PatientDetails';
+import ConditionsTable from '@components/conditions/ConditionsTable';
+import AllergiesTable from '@components/allergies/AllergiesTable';
 import { useClinicalConfig } from '@hooks/useClinicalConfig';
 
-const PatientDetails = React.lazy(
-  () => import('@components/patient/PatientDetails'),
-);
-const ConditionsTable = React.lazy(
-  () => import('@components/conditions/ConditionsTable'),
-);
-const AllergiesTable = React.lazy(
-  () => import('@components/allergies/AllergiesTable'),
-);
-
 const HomePage: React.FC = () => {
   const { clinicalConfig } = useClinicalConfig();
   if (!clinicalConfig) {
     return <Loading description="Loading..." />;
   }
   console.log(clinicalConfig);
   return (
-    <Suspense fallback={<Loading description="Loading..." />}>
+    <Suspense fallback="loading">
       <Section>
         <Grid>
           <Column lg={16} md={8} sm={4}>

src/pages/__tests__/HomePage.test.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { render, screen } from '@testing-library/react';
 import HomePage from '../HomePage';
 import PatientDetails from '@components/patient/PatientDetails';
 import ConditionsTable from '@components/conditions/ConditionsTable';
 import { useClinicalConfig } from '@hooks/useClinicalConfig';
 import { validFullClinicalConfig } from '@__mocks__/configMocks';
 
+// Mock React.Suspense to render children immediately in tests
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  Suspense: ({ children }: { children: ReactNode }) => children,
+}));
+
 // Mock Carbon components
 jest.mock('@carbon/react', () => ({
   Grid: jest.fn(({ children }) => (
@@ -67,7 +73,7 @@ describe('HomePage Component', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('should render with correct Carbon layout structure when config is loaded', () => {
+  it('should render with correct Carbon layout structure when config is loaded', async () => {
     // Mock useClinicalConfig to return config
     (useClinicalConfig as jest.Mock).mockReturnValue({
       clinicalConfig: validFullClinicalConfig,
@@ -76,12 +82,12 @@ describe('HomePage Component', () => {
     render(<HomePage />);
 
     // Should render Carbon layout components
-    expect(screen.getByTestId('carbon-section')).toBeInTheDocument();
-    expect(screen.getByTestId('carbon-grid')).toBeInTheDocument();
-    expect(screen.getByTestId('carbon-column')).toBeInTheDocument();
+    expect(await screen.findByTestId('carbon-section')).toBeInTheDocument();
+    expect(await screen.findByTestId('carbon-grid')).toBeInTheDocument();
+    expect(await screen.findByTestId('carbon-column')).toBeInTheDocument();
   });
 
-  it('should render child components when config is loaded', () => {
+  it('should render child components when config is loaded', async () => {
     // Mock useClinicalConfig to return config
     (useClinicalConfig as jest.Mock).mockReturnValue({
       clinicalConfig: validFullClinicalConfig,
@@ -91,12 +97,20 @@ describe('HomePage Component', () => {
 
     // Should render child components
     expect(PatientDetails).toHaveBeenCalled();
-    expect(screen.getByTestId('mocked-patient-details')).toBeInTheDocument();
-    expect(screen.getByText('Mocked PatientDetails')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId('mocked-patient-details'),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Mocked PatientDetails'),
+    ).toBeInTheDocument();
 
     expect(ConditionsTable).toHaveBeenCalled();
-    expect(screen.getByTestId('mocked-conditions-table')).toBeInTheDocument();
-    expect(screen.getByText('Mocked ConditionsTable')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId('mocked-conditions-table'),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Mocked ConditionsTable'),
+    ).toBeInTheDocument();
   });
 
   it('should match snapshot when loading', () => {