Add appStateReady atom

Amsterdam · Jan 9, 2025 · 0613600 · 0613600
1 parent 0cd029c
commit 0613600
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 61 deletions.
diff --git a/src/client/components/MainHeader/ProfileName.test.tsx b/src/client/components/MainHeader/ProfileName.test.tsx
@@ -3,22 +3,29 @@ import { MutableSnapshot } from 'recoil';
 
 import { ProfileName } from './ProfileName';
 import { AppRoutes } from '../../../universal/config/routes';
-import { appStateAtom, useAppStateGetter } from '../../hooks/useAppState';
+import { AppState } from '../../../universal/types';
+import {
+  appStateAtom,
+  appStateReadyAtom,
+  useAppStateGetter,
+} from '../../hooks/useAppState';
 import MockApp from '../../pages/MockApp';
 
 vi.mock('../../hooks/media.hook');
 
 function testState(brp: any = null, profile: any = null, kvk: any = null) {
-  const s: any = {
+  const s = {
     BRP: {
       status: 'OK',
       content: brp,
     },
     PROFILE: { status: 'OK', content: profile },
     KVK: { status: 'OK', content: kvk },
-  };
+  } as unknown as AppState;
+
   return (snapshot: MutableSnapshot) => {
     snapshot.set(appStateAtom, s);
+    snapshot.set(appStateReadyAtom, true);
   };
 }
 
@@ -39,14 +46,16 @@ describe('<ProfileName />', () => {
   const routeEntry = AppRoutes.HOME;
   const routePath = AppRoutes.HOME;
 
-  const Component = ({ profileType, brp, kvk, profile }: any) => (
-    <MockApp
-      routeEntry={routeEntry}
-      routePath={routePath}
-      component={() => <Wrapper profileType={profileType} />}
-      initializeState={testState(brp, profile, kvk)}
-    />
-  );
+  function Component({ profileType, brp, kvk, profile }: any) {
+    return (
+      <MockApp
+        routeEntry={routeEntry}
+        routePath={routePath}
+        component={() => <Wrapper profileType={profileType} />}
+        initializeState={testState(brp, profile, kvk)}
+      />
+    );
+  }
 
   it('Shows BRP naam', () => {
     render(<Component brp={{ persoon: { opgemaakteNaam: 'J de grever' } }} />);

diff --git a/src/client/components/Search/Search.test.tsx b/src/client/components/Search/Search.test.tsx
@@ -9,7 +9,8 @@ import * as bagResponse from './bag-response.json';
 import { Search } from './Search';
 import * as remoteConfig from './search-config.json';
 import { bffApi, remoteApi } from '../../../testing/utils';
-import { appStateAtom } from '../../hooks/useAppState';
+import { AppState } from '../../../universal/types';
+import { appStateAtom, appStateReadyAtom } from '../../hooks/useAppState';
 
 describe('<Search />', () => {
   beforeEach(() => {
@@ -105,7 +106,8 @@ describe('<Search />', () => {
           initializeState={(snapshot) => {
             snapshot.set(appStateAtom, {
               VERGUNNINGEN: { status: 'OK', content: [] },
-            } as any);
+            } as unknown as AppState);
+            snapshot.set(appStateReadyAtom, true);
           }}
         >
           <Search />
@@ -140,7 +142,8 @@ describe('<Search />', () => {
                   },
                 ],
               },
-            } as any);
+            } as unknown as AppState);
+            snapshot.set(appStateReadyAtom, true);
           }}
         >
           <Search />

diff --git a/src/client/data-transform/appState.test.tsx b/src/client/data-transform/appState.test.tsx
@@ -72,7 +72,7 @@ describe('transformSourceData', () => {
     const monitoringSpy = vi.spyOn(Monitoring, 'captureMessage');
     const result = transformSourceData(data as Partial<AppState>);
     expect(monitoringSpy).toHaveBeenCalledWith(
-      '[transformSourceData] Unknown stateKey encountered',
+      '[transformSourceData] Unknown stateKey encountered, not found in PRISTINE_APPSTATE',
       {
         properties: {
           unexpectedStateKeys: ['STATE_KEY'],

diff --git a/src/client/pages/Dashboard/Dashboard.test.tsx b/src/client/pages/Dashboard/Dashboard.test.tsx
@@ -6,7 +6,7 @@ import { describe, expect, it } from 'vitest';
 import { AppRoutes } from '../../../universal/config/routes';
 import { Themas } from '../../../universal/config/thema';
 import { AppState } from '../../../universal/types/App.types';
-import { appStateAtom } from '../../hooks/useAppState';
+import { appStateAtom, appStateReadyAtom } from '../../hooks/useAppState';
 import MockApp from '../MockApp';
 import Dashboard from './Dashboard';
 import { remoteApiHost } from '../../../testing/setup';
@@ -89,6 +89,7 @@ const testState = {
 
 function initializeState(snapshot: MutableSnapshot) {
   snapshot.set(appStateAtom as RecoilState<Partial<AppState>>, testState);
+  snapshot.set(appStateReadyAtom, true);
 }
 
 describe('<Dashboard />', () => {

diff --git a/src/client/pages/ZaakStatus/ZaakStatus.test.tsx b/src/client/pages/ZaakStatus/ZaakStatus.test.tsx
@@ -14,8 +14,9 @@ import {
 } from '../../../server/services';
 import { AppRoutes } from '../../../universal/config/routes';
 import { AppState } from '../../../universal/types';
-import { appStateAtom } from '../../hooks/useAppState';
+import { appStateAtom, appStateReadyAtom } from '../../hooks/useAppState';
 import MockApp from '../MockApp';
+
 const pushMock = vi.fn();
 
 const testState = {
@@ -38,6 +39,7 @@ const testState = {
 
 function initializeState(snapshot: MutableSnapshot) {
   snapshot.set(appStateAtom, testState);
+  snapshot.set(appStateReadyAtom, true);
 }
 
 let historyReturnValue = {
@@ -60,14 +62,16 @@ describe('ZaakStatus', () => {
   const routePath = AppRoutes.ZAAK_STATUS;
 
   test('No query params passed', async () => {
-    const Component = () => (
-      <MockApp
-        routeEntry={routeEntry}
-        routePath={routePath}
-        component={ZaakStatus}
-        initializeState={initializeState}
-      />
-    );
+    function Component() {
+      return (
+        <MockApp
+          routeEntry={routeEntry}
+          routePath={routePath}
+          component={ZaakStatus}
+          initializeState={initializeState}
+        />
+      );
+    }
     const { asFragment } = render(<Component />);
 
     expect(pushMock).not.toHaveBeenCalled();
@@ -84,18 +88,20 @@ describe('ZaakStatus', () => {
       push: pushMock,
     };
 
-    const Component = () => (
-      <MockApp
-        routeEntry={routePath}
-        routePath={routePath}
-        component={ZaakStatus}
-        initializeState={(snapshot) =>
-          snapshot.set(appStateAtom, {
-            VERGUNNINGEN: { status: 'ERROR', content: null },
-          } as unknown as AppState)
-        }
-      />
-    );
+    function Component() {
+      return (
+        <MockApp
+          routeEntry={routePath}
+          routePath={routePath}
+          component={ZaakStatus}
+          initializeState={(snapshot) =>
+            snapshot.set(appStateAtom, {
+              VERGUNNINGEN: { status: 'ERROR', content: null },
+            } as unknown as AppState)
+          }
+        />
+      );
+    }
 
     const { asFragment } = render(<Component />);
 
@@ -111,14 +117,16 @@ describe('ZaakStatus', () => {
       push: pushMock,
     };
 
-    const Component = () => (
-      <MockApp
-        routeEntry={routePath}
-        routePath={routePath}
-        component={ZaakStatus}
-        initializeState={initializeState}
-      />
-    );
+    function Component() {
+      return (
+        <MockApp
+          routeEntry={routePath}
+          routePath={routePath}
+          component={ZaakStatus}
+          initializeState={initializeState}
+        />
+      );
+    }
 
     const { asFragment } = render(<Component />);
 
@@ -140,14 +148,16 @@ describe('ZaakStatus', () => {
       push: pushMock,
     };
 
-    const Component = () => (
-      <MockApp
-        routeEntry={routePath}
-        routePath={routePath}
-        component={ZaakStatus}
-        initializeState={initializeState}
-      />
-    );
+    function Component() {
+      return (
+        <MockApp
+          routeEntry={routePath}
+          routePath={routePath}
+          component={ZaakStatus}
+          initializeState={initializeState}
+        />
+      );
+    }
 
     const { asFragment } = render(<Component />);
 
@@ -174,14 +184,16 @@ describe('ZaakStatus', () => {
       push: pushMock,
     };
 
-    const Component = () => (
-      <MockApp
-        routeEntry={routePath}
-        routePath={routePath}
-        component={ZaakStatus}
-        initializeState={initializeState}
-      />
-    );
+    function Component() {
+      return (
+        <MockApp
+          routeEntry={routePath}
+          routePath={routePath}
+          component={ZaakStatus}
+          initializeState={initializeState}
+        />
+      );
+    }
 
     render(<Component />);