CCM-11474: message plan name screen

frontend/src/__tests__/app/edit-nhs-app-template/page.test.tsx

@@ -9,7 +9,11 @@ import EditNhsAppTemplatePage, {
   generateMetadata,
 } from '@app/edit-nhs-app-template/[templateId]/page';
 import { TemplateDto } from 'nhs-notify-backend-client';
-import { EMAIL_TEMPLATE, LETTER_TEMPLATE, SMS_TEMPLATE } from '../../helpers';
+import {
+  EMAIL_TEMPLATE,
+  LETTER_TEMPLATE,
+  SMS_TEMPLATE,
+} from '@testhelpers/helpers';
 import content from '@content/content';
 
 const { editPageTitle } = content.components.templateFormNhsApp;

frontend/src/__tests__/app/letter-template-submitted/page.test.tsx

@@ -6,7 +6,7 @@ import LetterTemplateSubmittedPage, {
 } from '@app/letter-template-submitted/[templateId]/page';
 import content from '@content/content';
 import { TemplateSubmitted } from '@molecules/TemplateSubmitted/TemplateSubmitted';
-import { LETTER_TEMPLATE } from '@testhelpers';
+import { LETTER_TEMPLATE } from '@testhelpers/helpers';
 import { getTemplate } from '@utils/form-actions';
 import { redirect } from 'next/navigation';
 

frontend/src/__tests__/app/message-plans/campaign-id-required/__snapshots__/page.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+      data-testid="page-content-wrapper"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+          data-testid="page-heading"
+        >
+          You cannot create message plans yet
+        </h1>
+        <p>
+          To get access, contact your onboarding manager and give them this error message:
+        </p>
+        <div
+          class="nhsuk-inset-text"
+        >
+          <p>
+            Account needs a campaign ID
+          </p>
+        </div>
+        <p>
+          <a
+            data-testid="back-link"
+            href="/message-plans"
+          >
+            Go back
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;

frontend/src/__tests__/app/message-plans/campaign-id-required/page.test.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import MessagePlanCampaignIdRequiredPage from '@app/message-plans/campaign-id-required/page';
+
+test('matches snapshot', () => {
+  const container = render(MessagePlanCampaignIdRequiredPage());
+
+  expect(container.asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "LETTER" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "NHSAPP" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "NHSAPP,EMAIL" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "NHSAPP,EMAIL,SMS" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "NHSAPP,EMAIL,SMS,LETTER" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "NHSAPP,SMS" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "NHSAPP,SMS,EMAIL" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`CreateMessagePlanPage renders the page when messageOrder is "NHSAPP,SMS,LETTER" 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1
+          class="nhsuk-heading-xl"
+        >
+          Create a message plan
+        </h1>
+        <div
+          data-testid="mocked-message-plan-form"
+        />
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,81 @@
+import { render } from '@testing-library/react';
+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 { NextRedirectError } from '@testhelpers/next-redirect';
+
+jest.mock('next/navigation');
+jest.mock('@forms/MessagePlan/MessagePlan');
+jest.mock('@utils/server-features');
+
+beforeEach(() => {
+  jest.resetAllMocks();
+
+  jest.mocked(redirect).mockImplementation((url, type) => {
+    throw new NextRedirectError(url, type);
+  });
+
+  jest
+    .mocked(MessagePlanForm)
+    .mockImplementation(() => <div data-testid='mocked-message-plan-form' />);
+
+  jest
+    .mocked(fetchClient)
+    .mockResolvedValue({ campaignIds: ['campaign-1'], features: {} });
+});
+
+describe('CreateMessagePlanPage', () => {
+  test('redirects when there are no campaignIds', async () => {
+    jest.mocked(fetchClient).mockResolvedValueOnce({ features: {} });
+
+    await expect(
+      CreateMessagePlanPage({ searchParams: Promise.resolve({}) })
+    ).rejects.toMatchObject({
+      message: 'NEXT_REDIRECT',
+      url: '/message-plans/campaign-id-required',
+      type: RedirectType.replace,
+    });
+  });
+
+  test('redirects when searchParams are missing', async () => {
+    await expect(
+      CreateMessagePlanPage({ searchParams: Promise.resolve({}) })
+    ).rejects.toMatchObject({
+      message: 'NEXT_REDIRECT',
+      url: '/message-plans/choose-message-order',
+      type: RedirectType.replace,
+    });
+  });
+
+  test('redirects when messageOrder is invalid', async () => {
+    await expect(
+      CreateMessagePlanPage({
+        searchParams: Promise.resolve({ messageOrder: 'invalid' }),
+      })
+    ).rejects.toMatchObject({
+      message: 'NEXT_REDIRECT',
+      url: '/message-plans/choose-message-order',
+      type: RedirectType.replace,
+    });
+  });
+
+  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'],
+      });
+    }
+  );
+});