Merge branch 'feature/CCM-10893-header-with-account-info' into feature/CCM-10893-account-header

Author: nicki-nhs

frontend/public/lib/nhsuk-9.1.0.min.css

@@ -160,7 +160,7 @@ exports[`Client-side validation triggers 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>
@@ -860,7 +860,7 @@ exports[`renders page 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>
@@ -1600,7 +1600,7 @@ exports[`renders page one error 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 0 of 5000 characters
               </p>
@@ -2354,7 +2354,7 @@ exports[`renders page with multiple errors 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 0 of 5000 characters
               </p>
@@ -3054,7 +3054,7 @@ exports[`renders page with preloaded field values 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>
@@ -3732,7 +3732,7 @@ exports[`renders page without back link for initial state with id - edit mode 1`
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>

frontend/public/lib/nhsuk-9.1.0.min.js

@@ -81,4 +81,10 @@ describe('Footer component', () => {
       screen.getByTestId('nhs-england-copyright-text')
     ).toBeInTheDocument();
   });
+
+  it('matches snapshot', () => {
+    const container = render(<NHSNotifyFooter />);
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
 });

frontend/public/lib/nhsuk-frontend-10.0.0.min.css

@@ -21,7 +21,7 @@ describe('Header component', () => {
   it('should contain an authentication link', () => {
     render(<NHSNotifyHeader />);
 
-    expect(screen.getByTestId('auth-link')).toBeInTheDocument();
+    expect(screen.getByTestId('sign-in-link')).toBeInTheDocument();
   });
 
   it('should render correctly', () => {

frontend/public/lib/nhsuk-frontend-10.0.0.min.js

@@ -0,0 +1,218 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { mockDeep } from 'jest-mock-extended';
+import NhsNotifyHeaderWithAccount from '@molecules/HeaderWithAccount/HeaderWithAccount';
+import { type UseAuthenticator, useAuthenticator } from '@aws-amplify/ui-react';
+
+jest.mock('@aws-amplify/ui-react');
+
+const mockFetchAuthSession = jest.fn();
+jest.mock('aws-amplify/auth', () => ({
+  fetchAuthSession: () => mockFetchAuthSession(),
+}));
+
+const mockGetIdTokenClaims = jest.fn();
+jest.mock('@utils/token-utils', () => ({
+  getIdTokenClaims: (token: string) => mockGetIdTokenClaims(token),
+}));
+
+const setAuthStatus = (
+  status: 'authenticated' | 'unauthenticated' | 'configuring'
+) => {
+  jest.mocked(useAuthenticator).mockImplementation((selector) => {
+    const context = mockDeep<UseAuthenticator>({
+      authStatus: status,
+    });
+
+    if (selector) {
+      selector(context);
+    }
+
+    return context;
+  });
+};
+
+describe('NhsNotifyHeaderWithAccount', () => {
+  describe('when unauthenticated', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+      setAuthStatus('unauthenticated');
+    });
+
+    it('renders the logo and service name with the correct url', async () => {
+      render(<NhsNotifyHeaderWithAccount />);
+
+      const logoServiceLink = await screen.findByTestId(
+        'header-logo-service-link'
+      );
+
+      expect(logoServiceLink).toContainElement(
+        screen.getByRole('img', { name: 'NHS logo' })
+      );
+      expect(logoServiceLink).toHaveAttribute('href', '/message-templates');
+      expect(logoServiceLink).toHaveTextContent('Notify');
+    });
+
+    it(`renders the authentication link as 'sign in'`, async () => {
+      render(<NhsNotifyHeaderWithAccount />);
+
+      expect(await screen.findByTestId('sign-in-link')).toHaveTextContent(
+        'Sign in'
+      );
+    });
+
+    it('does not fetch session or claims', async () => {
+      render(<NhsNotifyHeaderWithAccount />);
+
+      await screen.findByTestId('page-header');
+
+      expect(mockFetchAuthSession).not.toHaveBeenCalled();
+      expect(mockGetIdTokenClaims).not.toHaveBeenCalled();
+    });
+
+    it('does not show the navigation links', async () => {
+      render(<NhsNotifyHeaderWithAccount />);
+
+      await screen.findByTestId('page-header');
+
+      expect(screen.queryByTestId('navigation-links')).not.toBeInTheDocument();
+    });
+
+    it('matches snapshot (unauthenticated)', async () => {
+      const container = render(<NhsNotifyHeaderWithAccount />);
+
+      await screen.findByTestId('page-header');
+
+      expect(container.asFragment()).toMatchSnapshot();
+    });
+  });
+
+  describe('when authenticated', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+      setAuthStatus('authenticated');
+
+      mockFetchAuthSession.mockResolvedValue({
+        tokens: {
+          idToken: { toString: () => 'fake.id.token' },
+          accessToken: { toString: () => 'fake.access.token' },
+        },
+      });
+
+      mockGetIdTokenClaims.mockReturnValue({
+        displayName: 'Dr Test Example',
+        clientName: 'NHS England',
+      });
+    });
+
+    it('renders the users display name', async () => {
+      render(<NhsNotifyHeaderWithAccount />);
+
+      expect(
+        await screen.findByTestId('account-display-name')
+      ).toHaveTextContent('Dr Test Example');
+    });
+
+    it('renders the client name', async () => {
+      render(<NhsNotifyHeaderWithAccount />);
+
+      expect(
+        await screen.findByTestId('account-client-name')
+      ).toHaveTextContent('NHS England');
+    });
+
+    it(`renders auth link as 'Sign out'`, async () => {
+      render(<NhsNotifyHeaderWithAccount />);
+
+      expect(await screen.findByTestId('sign-out-link')).toHaveTextContent(
+        'Sign out'
+      );
+    });
+
+    it('handles missing id token by clearing names', async () => {
+      mockFetchAuthSession.mockResolvedValueOnce({
+        tokens: {
+          idToken: undefined,
+          accessToken: { toString: () => 'fake.access.token' },
+        },
+      });
+
+      render(<NhsNotifyHeaderWithAccount />);
+
+      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 screen.findByTestId('page-header');
+
+      expect(screen.queryByTestId('account-display-name')).toBeNull();
+      expect(screen.queryByTestId('account-client-name')).toBeNull();
+    });
+
+    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', async () => {
+        render(<NhsNotifyHeaderWithAccount features={{ routing: true }} />);
+
+        await screen.findByTestId('page-header');
+
+        const nav = screen.getByTestId('navigation-links');
+
+        const templatesLink = within(nav).getByRole('link', {
+          name: 'Templates',
+        });
+        expect(templatesLink).toHaveAttribute('href', '/message-templates');
+
+        const plansLink = within(nav).getByRole('link', {
+          name: 'Message plans',
+        });
+        expect(plansLink).toHaveAttribute(
+          'href',
+          '/templates-and-message-plans/message-plans'
+        );
+      });
+    });
+
+    describe(`with 'routing' flag disabled`, () => {
+      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', {
+          name: 'Templates',
+        });
+        expect(templatesLink).toHaveAttribute('href', '/message-templates');
+      });
+
+      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', {
+          name: 'Message plans',
+        });
+        expect(plansLink).not.toBeInTheDocument();
+      });
+    });
+  });
+});

frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap

@@ -24,10 +24,10 @@ describe('MarkdownContent', () => {
     expect(screen.getByRole('link')).toHaveTextContent('link');
   });
 
-  it('passes ID through if content is a string', () => {
-    render(<MarkdownContent content='This is content' id='content-id' />);
+  it('passes test ID through if content is a string', () => {
+    render(<MarkdownContent content='This is content' testId='content-id' />);
     expect(screen.getByText('This is content')).toHaveAttribute(
-      'id',
+      'data-testid',
       'content-id-0'
     );
   });
@@ -45,19 +45,19 @@ describe('MarkdownContent', () => {
     expect(screen.getByRole('link')).toHaveTextContent('link');
   });
 
-  it('passes indexed IDs to each item if content is an array', () => {
+  it('passes indexed test IDs to each item if content is an array', () => {
     render(
       <MarkdownContent
         content={['First paragraph', 'Second paragraph']}
-        id='content-id'
+        testId='content-id'
       />
     );
 
     const first = screen.getByText('First paragraph');
-    expect(first).toHaveAttribute('id', 'content-id-0');
+    expect(first).toHaveAttribute('data-testid', 'content-id-0');
 
     const second = screen.getByText('Second paragraph');
-    expect(second).toHaveAttribute('id', 'content-id-1');
+    expect(second).toHaveAttribute('data-testid', 'content-id-1');
   });
 
   it('adds correct attributes to links', () => {