CCM-10893 Fix test errors

Author: nicki-nhs

frontend/src/__tests__/components/molecules/HeaderWithAccount.test.tsx

@@ -39,10 +39,12 @@ describe('NhsNotifyHeaderWithAccount', () => {
       setAuthStatus('unauthenticated');
     });
 
-    it('renders the logo and service name with the correct url', () => {
+    it('renders the logo and service name with the correct url', async () => {
       render(<NhsNotifyHeaderWithAccount />);
 
-      const logoServiceLink = screen.getByTestId('header-logo-service-link');
+      const logoServiceLink = await screen.findByTestId(
+        'header-logo-service-link'
+      );
 
       expect(logoServiceLink).toContainElement(
         screen.getByRole('img', { name: 'NHS logo' })
@@ -51,24 +53,28 @@ describe('NhsNotifyHeaderWithAccount', () => {
       expect(logoServiceLink).toHaveTextContent('Notify');
     });
 
-    it(`renders the authentication link as 'sign in'`, () => {
+    it(`renders the authentication link as 'sign in'`, async () => {
       render(<NhsNotifyHeaderWithAccount />);
 
-      expect(screen.getByTestId('auth-link')).toHaveTextContent('Sign in');
+      expect(await screen.findByTestId('auth-link')).toHaveTextContent(
+        'Sign in'
+      );
     });
 
     it('does not fetch session or claims', async () => {
       render(<NhsNotifyHeaderWithAccount />);
 
-      await Promise.resolve();
+      await screen.findByTestId('page-header');
 
       expect(mockFetchAuthSession).not.toHaveBeenCalled();
       expect(mockGetIdTokenClaims).not.toHaveBeenCalled();
     });
 
-    it('matches snapshot (unauthenticated)', () => {
+    it('matches snapshot (unauthenticated)', async () => {
       const container = render(<NhsNotifyHeaderWithAccount />);
 
+      await screen.findByTestId('page-header');
+
       expect(container.asFragment()).toMatchSnapshot();
     });
   });
@@ -94,29 +100,25 @@ describe('NhsNotifyHeaderWithAccount', () => {
     it('renders the users display name', async () => {
       render(<NhsNotifyHeaderWithAccount />);
 
-      await waitFor(() => {
-        expect(screen.getByTestId('account-display-name')).toHaveTextContent(
-          'Dr Test Example'
-        );
-      });
+      expect(
+        await screen.findByTestId('account-display-name')
+      ).toHaveTextContent('Dr Test Example');
     });
 
     it('renders the client name', async () => {
       render(<NhsNotifyHeaderWithAccount />);
 
-      await waitFor(() => {
-        expect(screen.getByTestId('account-client-name')).toHaveTextContent(
-          'NHS England'
-        );
-      });
+      expect(
+        await screen.findByTestId('account-client-name')
+      ).toHaveTextContent('NHS England');
     });
 
     it(`renders auth link as 'Sign out'`, async () => {
       render(<NhsNotifyHeaderWithAccount />);
 
-      await waitFor(() => {
-        expect(screen.getByTestId('auth-link')).toHaveTextContent('Sign out');
-      });
+      expect(await screen.findByTestId('auth-link')).toHaveTextContent(
+        'Sign out'
+      );
     });
 
     it('handles missing id token by clearing names', async () => {
@@ -129,34 +131,38 @@ describe('NhsNotifyHeaderWithAccount', () => {
 
       render(<NhsNotifyHeaderWithAccount />);
 
-      await waitFor(() => {
-        expect(screen.queryByTestId('account-display-name')).toBeNull();
-        expect(screen.queryByTestId('account-client-name')).toBeNull();
-      });
+      await screen.findByTestId('page-header');
+
+      expect(screen.queryByTestId('account-display-name')).toBeNull();
+      expect(screen.queryByTestId('account-client-name')).toBeNull();
     });
 
     it('handles fetchAuthSession errors by clearing names', async () => {
       mockFetchAuthSession.mockRejectedValueOnce(new Error('boom'));
 
       render(<NhsNotifyHeaderWithAccount />);
 
-      await waitFor(() => {
-        expect(screen.queryByTestId('account-display-name')).toBeNull();
-        expect(screen.queryByTestId('account-client-name')).toBeNull();
-      });
+      await screen.findByTestId('page-header');
+
+      expect(screen.queryByTestId('account-display-name')).toBeNull();
+      expect(screen.queryByTestId('account-client-name')).toBeNull();
     });
 
-    it('matches snapshot (authenticated)', () => {
+    it('matches snapshot (authenticated)', async () => {
       const container = render(<NhsNotifyHeaderWithAccount />);
 
+      await screen.findByTestId('page-header');
+
       expect(container.asFragment()).toMatchSnapshot();
     });
   });
 
   describe(`with 'routing' flag enabled`, () => {
-    it('renders both the navigation links with correct hrefs', () => {
+    it('renders both the navigation links with correct hrefs', async () => {
       render(<NhsNotifyHeaderWithAccount features={{ routing: true }} />);
 
+      await screen.findByTestId('page-header');
+
       const nav = screen.getByTestId('navigation-links');
 
       const templatesLink = within(nav).getByRole('link', {
@@ -175,9 +181,11 @@ describe('NhsNotifyHeaderWithAccount', () => {
   });
 
   describe(`with 'routing' flag disabled`, () => {
-    it('renders the templates link with correct href', () => {
+    it('renders the templates link with correct href', async () => {
       render(<NhsNotifyHeaderWithAccount features={{ routing: false }} />);
 
+      await screen.findByTestId('page-header');
+
       const nav = screen.getByTestId('navigation-links');
 
       const templatesLink = within(nav).getByRole('link', {
@@ -186,9 +194,11 @@ describe('NhsNotifyHeaderWithAccount', () => {
       expect(templatesLink).toHaveAttribute('href', '/message-templates');
     });
 
-    it('should not render the message plans link', () => {
+    it('should not render the message plans link', async () => {
       render(<NhsNotifyHeaderWithAccount features={{ routing: false }} />);
 
+      await screen.findByTestId('page-header');
+
       const nav = screen.getByTestId('navigation-links');
 
       const plansLink = within(nav).queryByRole('link', {

frontend/src/__tests__/components/molecules/__snapshots__/HeaderWithAccount.test.tsx.snap

@@ -51,6 +51,29 @@ exports[`NhsNotifyHeaderWithAccount when authenticated matches snapshot (authent
         <ul
           class="nhsuk-header__account-list"
         >
+          <li
+            class="nhsuk-header__account-item"
+            data-testid="account-display-name"
+          >
+            <svg
+              aria-hidden="true"
+              class="nhsuk-icon nhsuk-icon__user"
+              focusable="false"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"
+              />
+            </svg>
+            Dr Test Example
+          </li>
+          <li
+            class="nhsuk-header__account-item"
+            data-testid="account-client-name"
+          >
+            NHS England
+          </li>
           <li
             class="nhsuk-header__account-item"
           >