Merge branch 'main' of https://github.com/NHSDigital/nhs-notify-web-template-management into feature/CCM-11492-create-edit-message-plans

Author: nicki-nhs

frontend/src/__tests__/app/message-plans/create-message-plan/__snapshots__/page.test.tsx.snap

@@ -1,32 +1,100 @@
-import { render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { redirect, RedirectType } from 'next/navigation';
 import { MESSAGE_ORDER_OPTIONS_LIST } from 'nhs-notify-web-template-management-utils';
 import CreateMessagePlanPage from '@app/message-plans/create-message-plan/page';
-import { MessagePlanForm } from '@forms/MessagePlan/MessagePlan';
-import { fetchClient } from '@utils/server-features';
+import { createMessagePlanServerAction } from '@app/message-plans/create-message-plan/server-action';
 import { NextRedirectError } from '@testhelpers/next-redirect';
+import { verifyFormCsrfToken } from '@utils/csrf-utils';
+import { fetchClient } from '@utils/server-features';
 
 jest.mock('next/navigation');
-jest.mock('@forms/MessagePlan/MessagePlan');
+jest.mocked(redirect).mockImplementation((url, type) => {
+  throw new NextRedirectError(url, type);
+});
+
+jest.mock('@app/message-plans/create-message-plan/server-action');
+
+jest.mock('@utils/csrf-utils');
+jest.mocked(verifyFormCsrfToken).mockResolvedValue(true);
+
 jest.mock('@utils/server-features');
+jest.mocked(fetchClient).mockResolvedValue({
+  campaignIds: ['campaign-1', 'campaign-2'],
+  features: {},
+});
 
 beforeEach(() => {
-  jest.resetAllMocks();
+  jest.clearAllMocks();
+});
 
-  jest.mocked(redirect).mockImplementation((url, type) => {
-    throw new NextRedirectError(url, type);
+describe('CreateMessagePlanPage', () => {
+  test('renders the page', async () => {
+    const ui = await CreateMessagePlanPage({
+      searchParams: Promise.resolve({ messageOrder: 'NHSAPP' }),
+    });
+
+    const container = render(ui);
+
+    expect(container.asFragment()).toMatchSnapshot();
   });
 
-  jest
-    .mocked(MessagePlanForm)
-    .mockImplementation(() => <div data-testid='mocked-message-plan-form' />);
+  test('on submit it invokes the server action and renders error summary', async () => {
+    const user = await userEvent.setup();
 
-  jest
-    .mocked(fetchClient)
-    .mockResolvedValue({ campaignIds: ['campaign-1'], features: {} });
-});
+    jest.mocked(createMessagePlanServerAction).mockResolvedValue({
+      errorState: {
+        fieldErrors: {
+          name: ['Name Error'],
+          campaignId: ['Campaign Id Error'],
+        },
+      },
+    });
+
+    const ui = await CreateMessagePlanPage({
+      searchParams: Promise.resolve({ messageOrder: 'NHSAPP' }),
+    });
+
+    const container = render(ui);
+
+    await user.click(screen.getByTestId('name-field'));
+
+    await user.keyboard('My Message Plan');
+
+    await user.selectOptions(
+      screen.getByTestId('campaign-id-field'),
+      'campaign-2'
+    );
+
+    await user.click(screen.getByTestId('submit-button'));
+
+    expect(container.asFragment()).toMatchSnapshot();
+
+    expect(createMessagePlanServerAction).toHaveBeenCalledTimes(1);
+    expect(createMessagePlanServerAction).toHaveBeenCalledWith(
+      {},
+      expect.any(FormData)
+    );
+
+    const formData = jest
+      .mocked(createMessagePlanServerAction)
+      .mock.lastCall?.at(1) as FormData;
+
+    expect(Object.fromEntries(formData.entries())).toMatchObject({
+      campaignId: 'campaign-2',
+      messageOrder: 'NHSAPP',
+      name: 'My Message Plan',
+    });
+
+    const errorSummaryHeading = await screen.getByTestId('error-summary');
+
+    // "error-summary" test id targets the nested heading rather than the top level of the error summary
+    // so we need to assert against the parent element
+    await waitFor(() => {
+      expect(errorSummaryHeading.parentElement).toHaveFocus();
+    });
+  });
 
-describe('CreateMessagePlanPage', () => {
   test('redirects when there are no campaignIds', async () => {
     jest.mocked(fetchClient).mockResolvedValueOnce({ features: {} });
 
@@ -64,18 +132,11 @@ describe('CreateMessagePlanPage', () => {
   test.each(MESSAGE_ORDER_OPTIONS_LIST)(
     'renders the page when messageOrder is "%s"',
     async (messageOrder) => {
-      const ui = await CreateMessagePlanPage({
-        searchParams: Promise.resolve({ messageOrder }),
-      });
-
-      const container = render(ui);
-
-      expect(container.asFragment()).toMatchSnapshot();
-
-      expect(jest.mocked(MessagePlanForm).mock.calls[0][0]).toEqual({
-        messageOrder,
-        campaignIds: ['campaign-1'],
-      });
+      await expect(
+        CreateMessagePlanPage({
+          searchParams: Promise.resolve({ messageOrder }),
+        })
+      ).resolves.not.toThrow();
     }
   );
 });