CCM-10893: server render header

Author: harrim91

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

@@ -1,23 +1,13 @@
 import { render, screen } from '@testing-library/react';
-import { mockDeep } from 'jest-mock-extended';
-import { type UseAuthenticator, useAuthenticator } from '@aws-amplify/ui-react';
+import { useAuthStatus } from '@hooks/use-auth-status';
 import { AuthLink } from '@molecules/AuthLink/AuthLink';
 
-jest.mock('@aws-amplify/ui-react');
+jest.mock('@hooks/use-auth-status');
+const mockUseAuthStatus = jest.mocked(useAuthStatus);
 
 beforeEach(() => {
   jest.resetAllMocks();
-  jest.mocked(useAuthenticator).mockImplementation((cb) => {
-    const context = mockDeep<UseAuthenticator>({
-      authStatus: 'configuring',
-    });
-
-    if (cb) {
-      cb(context);
-    }
-
-    return context;
-  });
+  mockUseAuthStatus.mockReturnValue('configuring');
 });
 
 describe('AuthLink', () => {
@@ -29,28 +19,29 @@ describe('AuthLink', () => {
     expect(container.asFragment()).toMatchSnapshot();
   });
 
-  it('renders Sign in link when authStatus is unauthenticated', async () => {
-    jest.mocked(useAuthenticator).mockReturnValueOnce(
-      mockDeep<UseAuthenticator>({
-        authStatus: 'unauthenticated',
-      })
-    );
-
+  it('renders Sign in link when authStatus changes to unauthenticated', async () => {
     const container = render(<AuthLink />);
 
     await screen.findByText('Sign in');
 
+    mockUseAuthStatus.mockReturnValue('unauthenticated');
+
+    container.rerender(<AuthLink />);
+
+    await screen.findByText('Sign in');
+
     expect(container.asFragment()).toMatchSnapshot();
   });
-  it('renders Sign out link when authStatus is authenticated', async () => {
-    jest.mocked(useAuthenticator).mockReturnValueOnce(
-      mockDeep<UseAuthenticator>({
-        authStatus: 'authenticated',
-      })
-    );
 
+  it('renders Sign out link when authStatus changes to authenticated', async () => {
     const container = render(<AuthLink />);
 
+    await screen.findByText('Sign in');
+
+    mockUseAuthStatus.mockReturnValue('authenticated');
+
+    container.rerender(<AuthLink />);
+
     await screen.findByText('Sign out');
 
     expect(container.asFragment()).toMatchSnapshot();

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

@@ -1,32 +1,219 @@
-import { render, screen } from '@testing-library/react';
-import { mockDeep } from 'jest-mock-extended';
-import { type UseAuthenticator, useAuthenticator } from '@aws-amplify/ui-react';
-import { NHSNotifyHeader } from '@molecules/Header/Header';
+import { render, screen, within } from '@testing-library/react';
+import { useAuthStatus } from '@hooks/use-auth-status';
+import { getSessionServer } from '@utils/amplify-utils';
+import { getIdTokenClaims } from '@utils/token-utils';
+import { NhsNotifyHeader } from '@molecules/Header/Header';
 
-jest.mock('@aws-amplify/ui-react');
+jest.mock('@hooks/use-auth-status');
+const mockUseAuthStatus = jest.mocked(useAuthStatus);
 
-jest.mocked(useAuthenticator).mockReturnValue(
-  mockDeep<UseAuthenticator>({
-    authStatus: 'configuring',
-  })
-);
+jest.mock('@utils/token-utils');
+const mockGetIdTokenClaims = jest.mocked(getIdTokenClaims);
 
-describe('Header component', () => {
-  it('should contain the logo', () => {
-    render(<NHSNotifyHeader />);
+jest.mock('@utils/amplify-utils');
+const mockGetSessionServer = jest.mocked(getSessionServer);
 
-    expect(screen.getByTestId('page-header-logo')).toBeInTheDocument();
-  });
+jest.mock('nhs-notify-web-template-management-utils/logger');
+
+beforeEach(() => {
+  jest.resetAllMocks();
+  mockUseAuthStatus.mockImplementation((status) => status ?? 'configuring');
+});
+
+describe('NhsNotifyHeader', () => {
+  describe('when unauthenticated', () => {
+    beforeEach(() => {
+      mockGetSessionServer.mockResolvedValue({});
+      mockGetIdTokenClaims.mockReturnValue({});
+    });
+
+    it('initializes the authStatus as unauthenticated', async () => {
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+
+      expect(mockUseAuthStatus).toHaveBeenCalledTimes(3);
+
+      for (const call of mockUseAuthStatus.mock.calls) {
+        expect(call[0]).toBe('unauthenticated');
+      }
+    });
+
+    it('renders the logo and service name with the correct url', async () => {
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+
+      const logoServiceLink = screen.getByTestId('header-logo-service-link');
+
+      expect(logoServiceLink).toContainElement(
+        screen.getByRole('img', { name: 'NHS logo' })
+      );
+      expect(logoServiceLink).toHaveAttribute('href', '/message-templates');
+      expect(logoServiceLink).toHaveTextContent('Notify');
+    });
 
-  it('should contain an authentication link', () => {
-    render(<NHSNotifyHeader />);
+    it(`renders the authentication link as 'sign in'`, async () => {
+      const header = await NhsNotifyHeader({});
 
-    expect(screen.getByTestId('sign-in-link')).toBeInTheDocument();
+      render(header);
+
+      expect(screen.getByTestId('sign-in-link')).toHaveTextContent('Sign in');
+    });
+
+    it('does not show the navigation links', async () => {
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+
+      expect(screen.getByTestId('page-header')).toBeVisible();
+
+      expect(screen.queryByTestId('navigation-links')).not.toBeInTheDocument();
+    });
+
+    it('matches snapshot (unauthenticated)', async () => {
+      const header = await NhsNotifyHeader({});
+
+      const container = render(header);
+
+      expect(container.asFragment()).toMatchSnapshot();
+    });
   });
 
-  it('should render correctly', () => {
-    const container = render(<NHSNotifyHeader />);
+  describe('when authenticated', () => {
+    beforeEach(() => {
+      mockGetSessionServer.mockResolvedValue({
+        accessToken: 'fake.access.token',
+        idToken: 'fake.id.token',
+      });
+
+      mockGetIdTokenClaims.mockReturnValue({
+        displayName: 'Dr Test Example',
+        clientName: 'NHS England',
+      });
+    });
+
+    it('initializes the authStatus as authenticated', async () => {
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+
+      // hook used in AuthLink, HeaderNavigation, HeaderAccountDetails
+      expect(mockUseAuthStatus).toHaveBeenCalledTimes(3);
+
+      for (const call of mockUseAuthStatus.mock.calls) {
+        expect(call[0]).toBe('authenticated');
+      }
+    });
+
+    it('renders the users display name', async () => {
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+
+      expect(screen.getByTestId('account-display-name')).toHaveTextContent(
+        'Dr Test Example'
+      );
+    });
+
+    it('renders the client name', async () => {
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+
+      expect(screen.getByTestId('account-client-name')).toHaveTextContent(
+        'NHS England'
+      );
+    });
+
+    it(`renders auth link as 'Sign out'`, async () => {
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+      expect(screen.getByTestId('sign-out-link')).toHaveTextContent('Sign out');
+    });
+
+    it('does not render names but renders sign out link and navigation when id token is missing', async () => {
+      mockGetSessionServer.mockResolvedValueOnce({
+        accessToken: 'fake.access.token',
+      });
+      mockGetIdTokenClaims.mockReturnValueOnce({});
+
+      const header = await NhsNotifyHeader({});
+
+      render(header);
+
+      expect(
+        screen.queryByTestId('account-display-name')
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('account-client-name')
+      ).not.toBeInTheDocument();
+      expect(screen.getByTestId('sign-out-link')).toHaveTextContent('Sign out');
+      expect(screen.getByTestId('navigation-links')).toBeInTheDocument();
+    });
+
+    it('matches snapshot (authenticated)', async () => {
+      const header = await NhsNotifyHeader({});
+
+      const container = render(header);
+      expect(container.asFragment()).toMatchSnapshot();
+    });
+
+    describe(`with 'routing' flag enabled`, () => {
+      it('renders both the navigation links with correct hrefs', async () => {
+        const header = await NhsNotifyHeader({
+          features: { routing: true },
+        });
+
+        render(header);
+
+        screen.getByTestId('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 () => {
+        const header = await NhsNotifyHeader({
+          features: { routing: false },
+        });
+
+        render(header);
+
+        screen.getByTestId('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 () => {
+        const header = await NhsNotifyHeader({
+          features: { routing: false },
+        });
+
+        render(header);
 
-    expect(container.asFragment()).toMatchSnapshot();
+        screen.getByTestId('page-header');
+        const nav = screen.getByTestId('navigation-links');
+        const plansLink = within(nav).queryByRole('link', {
+          name: 'Message plans',
+        });
+        expect(plansLink).not.toBeInTheDocument();
+      });
+    });
   });
 });