CCM-8579: Create letter template page

frontend/next.config.js

@@ -25,6 +25,7 @@ const nextConfig = (phase) => {
     experimental: {
       serverActions: {
         allowedOrigins: ['**.nhsnotify.national.nhs.uk', 'notify.nhs.uk'],
+        bodySizeLimit: '6mb',
       },
     },
 

frontend/package.json

@@ -20,8 +20,9 @@
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.4.3",
     "@aws-amplify/ui-react": "^6.9.1",
-    "clsx": "^2.1.1",
     "aws-amplify": "^6.12.3",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",

frontend/src/__tests__/app/create-letter-template/__snapshots__/page.test.tsx.snap

@@ -1,17 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CreateLetterTemplatePage should render CreateLetterTemplatePage 1`] = `
-<NHSNotifyMain>
-  <h1
-    className="nhsuk-heading-xl"
-    data-testid="page-heading"
-  >
-    Create letter template
-  </h1>
-  <p
-    id="placeholder"
-  >
-    🚧 Placeholder 🚧
-  </p>
-</NHSNotifyMain>
+<LetterTemplateForm
+  initialState={
+    {
+      "language": "en",
+      "letterType": "x0",
+      "name": "",
+      "templateType": "LETTER",
+    }
+  }
+/>
 `;

frontend/src/__tests__/components/forms/LetterTemplateForm.test.tsx/LetterTemplateForm.test.tsx

@@ -0,0 +1,96 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { mockDeep } from 'jest-mock-extended';
+import {
+  TemplateFormState,
+  LetterTemplate,
+} from 'nhs-notify-web-template-management-utils';
+import { LetterTemplateForm } from '@forms/LetterTemplateForm/LetterTemplateForm';
+
+jest.mock('@utils/amplify-utils');
+
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useActionState: (
+      _: (
+        formState: TemplateFormState,
+        formData: FormData
+      ) => Promise<TemplateFormState>,
+      initialState: TemplateFormState
+    ) => [initialState, '/action'],
+  };
+});
+
+test('renders page with preloaded field values', () => {
+  const container = render(
+    <LetterTemplateForm
+      initialState={mockDeep<TemplateFormState<LetterTemplate>>({
+        validationError: undefined,
+        name: 'template-name',
+        letterType: 'q1',
+        language: 'ar',
+      })}
+    />
+  );
+  expect(container.asFragment()).toMatchSnapshot();
+});
+
+test('renders page one error', () => {
+  const container = render(
+    <LetterTemplateForm
+      initialState={mockDeep<TemplateFormState<LetterTemplate>>({
+        validationError: {
+          formErrors: [],
+          fieldErrors: {
+            letterTemplateName: ['Template name error'],
+          },
+        },
+        name: '',
+        letterType: 'x0',
+        language: 'en',
+      })}
+    />
+  );
+  expect(container.asFragment()).toMatchSnapshot();
+});
+
+test('renders page with multiple errors', () => {
+  const container = render(
+    <LetterTemplateForm
+      initialState={mockDeep<TemplateFormState<LetterTemplate>>({
+        validationError: {
+          formErrors: [],
+          fieldErrors: {
+            letterTemplateName: ['Template name error'],
+            letterType: ['Template letter type error'],
+            letterLanguage: ['Template language error'],
+            letterTemplatePdf: ['PDF error'],
+            letterTemplateCsv: ['CSV error'],
+          },
+        },
+        name: '',
+        letterType: undefined,
+        language: undefined,
+      })}
+    />
+  );
+  expect(container.asFragment()).toMatchSnapshot();
+});
+
+test('Client-side validation triggers', () => {
+  const container = render(
+    <LetterTemplateForm
+      initialState={mockDeep<TemplateFormState<LetterTemplate>>({
+        validationError: undefined,
+        name: undefined,
+        letterType: undefined,
+        language: undefined,
+      })}
+    />
+  );
+  const submitButton = screen.getByTestId('submit-button');
+  fireEvent.click(submitButton);
+  expect(container.asFragment()).toMatchSnapshot();
+});