CCM-11148 Fix unit tests

Author: nicki-nhs

frontend/src/__tests__/app/internal/features/route.test.ts

@@ -2,7 +2,7 @@ import { GET as getFeatures } from '@app/internal/features/route';
 import { getSessionServer } from '@utils/amplify-utils';
 import { fetchClient } from '@utils/server-features';
 import { FEATURES, initialFeatureFlags } from '@utils/features';
-import { NextRequest } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { ErrorCase } from 'nhs-notify-backend-client';
 
 jest.mock('@utils/amplify-utils');
@@ -24,7 +24,17 @@ const createRequest = (internalHeader = true): NextRequest =>
 describe('features route', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+
     mockGetSessionServer.mockResolvedValueOnce({ accessToken: 'token' });
+
+    jest.spyOn(NextResponse, 'json').mockImplementation(
+      (data) =>
+        ({
+          status: 200,
+          ok: true,
+          json: () => Promise.resolve(data),
+        }) as NextResponse
+    );
   });
 
   it('returns 403 status if x-internal-request header is missing', async () => {
@@ -39,8 +49,9 @@ describe('features route', () => {
 
     const req = createRequest();
     const res = await getFeatures(req);
+    const json = await res.json();
 
-    expect(res.json()).toEqual(initialFeatureFlags);
+    expect(json).toEqual(initialFeatureFlags);
   });
 
   it('returns initialFeatureFlags on a fetchClient error', async () => {
@@ -50,8 +61,9 @@ describe('features route', () => {
 
     const req = createRequest();
     const res = await getFeatures(req);
+    const json = await res.json();
 
-    expect(res.json()).toEqual(initialFeatureFlags);
+    expect(json).toEqual(initialFeatureFlags);
   });
 
   it('returns expected feature flags', async () => {
@@ -65,7 +77,8 @@ describe('features route', () => {
 
     const req = createRequest();
     const res = await getFeatures(req);
+    const json = await res.json();
 
-    expect(res.json()).toEqual(allFeaturesEnabled);
+    expect(json).toEqual(allFeaturesEnabled);
   });
 });

frontend/src/__tests__/components/providers/features-provider.test.tsx

@@ -1,86 +1,89 @@
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, screen } from '@testing-library/react';
 import {
   FeatureFlagProvider,
   useFeatureFlags,
 } from '@providers/features-provider';
 import { Authenticator } from '@aws-amplify/ui-react';
+import * as useAuthStatusHook from '@hooks/use-auth-status';
 
-const TestConsumer = () => {
-  const { featureFlags, loaded } = useFeatureFlags();
-  return (
-    <div>
-      <p data-testid='loaded'> {loaded ? 'true' : 'false'}</p>
-      <p data-testid='proofing'>{featureFlags.proofing ? 'true' : 'false'}</p>
-      <p data-testid='routing'>{featureFlags.routing ? 'true' : 'false'}</p>
-    </div>
-  );
-};
-
-const renderProvider = () => {
-  return render(
-    <Authenticator.Provider>
-      <FeatureFlagProvider>
-        <TestConsumer />
-      </FeatureFlagProvider>
-    </Authenticator.Provider>
-  );
-};
+jest.mock('@hooks/use-auth-status');
+
+global.fetch = jest.fn();
+
+const mockUseAuthStatus = useAuthStatusHook.useAuthStatus as jest.Mock;
 
 describe('FeatureFlagProvider', () => {
+  const TestComponent = () => {
+    const { featureFlags, loaded } = useFeatureFlags();
+
+    return (
+      <div>
+        <p data-testid='loaded'> {loaded ? 'true' : 'false'}</p>
+        <p data-testid='proofing'>{featureFlags.proofing ? 'true' : 'false'}</p>
+        <p data-testid='routing'>{featureFlags.routing ? 'true' : 'false'}</p>
+      </div>
+    );
+  };
+
+  const renderWithProvider = () =>
+    render(
+      <Authenticator.Provider>
+        <FeatureFlagProvider>
+          <TestComponent />
+        </FeatureFlagProvider>
+      </Authenticator.Provider>
+    );
+
   beforeEach(() => {
     jest.resetAllMocks();
   });
 
   describe('when unauthenticated', () => {
     beforeEach(() => {
-      jest.mock('@hooks/use-auth-status', () => ({
-        useAuthStatus: () => 'unauthenticated',
-      }));
+      mockUseAuthStatus.mockReturnValue('unauthenticated');
     });
 
     it('should provide all feature flags as false when unauthenticated', async () => {
-      const container = renderProvider();
+      renderWithProvider();
 
       await waitFor(() => {
-        expect(container.getByTestId('loaded')).toHaveTextContent('false');
-        expect(container.getByTestId('proofing')).toHaveTextContent('false');
-        expect(container.getByTestId('routing')).toHaveTextContent('false');
+        expect(screen.getByTestId('loaded')).toHaveTextContent('false'); // loading should remain false
+        expect(screen.getByTestId('proofing')).toHaveTextContent('false');
+        expect(screen.getByTestId('routing')).toHaveTextContent('false');
       });
     });
   });
 
   describe('when authenticated', () => {
     beforeEach(() => {
-      jest.mock('@hooks/use-auth-status', () => ({
-        useAuthStatus: () => 'authenticated',
-      }));
+      mockUseAuthStatus.mockReturnValue('authenticated');
     });
 
     it('should provide feature flags when authenticated', async () => {
-      global.fetch = jest.fn().mockResolvedValue({
+      (global.fetch as jest.Mock).mockResolvedValue({
         ok: true,
         json: async () => ({ proofing: true, routing: true }),
       });
 
-      const container = renderProvider();
+      renderWithProvider();
 
       await waitFor(() => {
-        expect(container.getByTestId('loaded')).toHaveTextContent('true');
-        expect(container.getByTestId('proofing')).toHaveTextContent('true');
-        expect(container.getByTestId('routing')).toHaveTextContent('true');
+        expect(screen.getByTestId('loaded')).toHaveTextContent('true');
+        expect(screen.getByTestId('proofing')).toHaveTextContent('true');
+        expect(screen.getByTestId('routing')).toHaveTextContent('true');
       });
     });
-  });
 
-  it('should fall back to default flags on fetch error', async () => {
-    global.fetch = jest.fn().mockRejectedValue(new Error('Failed'));
+    it('should fall back to default flags on fetch error', async () => {
+      (global.fetch as jest.Mock).mockRejectedValue(new Error('Fetch failed'));
 
-    const container = renderProvider();
+      renderWithProvider();
 
-    await waitFor(() => {
-      expect(container.getByTestId('loaded')).toHaveTextContent('true');
-      expect(container.getByTestId('proofing')).toHaveTextContent('false');
-      expect(container.getByTestId('routing')).toHaveTextContent('false');
+      await waitFor(() => {
+        expect(screen.getByTestId('loaded')).toHaveTextContent('true');
+        expect(screen.getByTestId('proofing')).toHaveTextContent('false');
+        expect(screen.getByTestId('routing')).toHaveTextContent('false');
+      });
     });
   });
 });