CCM-8590: fix some UI tests

Author: alexnuttall

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

@@ -0,0 +1,17 @@
+// 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>
+`;

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

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment node
+ */
+import CreateLetterTemplatePage from '@app/create-letter-template/page';
+
+describe('CreateLetterTemplatePage', () => {
+  beforeEach(jest.resetAllMocks);
+
+  it('should render CreateLetterTemplatePage', async () => {
+    const page = await CreateLetterTemplatePage();
+
+    expect(page).toMatchSnapshot();
+  });
+
+  it('returns 404 when letters feature flag is not enabled', async () => {
+    delete process.env.ENABLE_LETTERS;
+
+    await expect(CreateLetterTemplatePage()).rejects.toThrow('NEXT_NOT_FOUND');
+  });
+});

frontend/src/app/create-letter-template/page.tsx

@@ -9,7 +9,7 @@ const CreateLetterTemplatePage = async () => {
       <h1 className='nhsuk-heading-xl' data-testid='page-heading'>
         Create letter template
       </h1>
-      <p>🚧 Placeholder 🚧</p>
+      <p id='placeholder'>🚧 Placeholder 🚧</p>
     </NHSNotifyMain>
   );
 };

tests/accessibility/.pa11y-ci.js

@@ -8,6 +8,7 @@ const {
   reviewNHSAppTemplateErrorPage,
   submitNHSAppTemplatePage,
   createEmailTemplatePage,
+  createLetterTemplatePage,
   createEmailTemplateErrorPage,
   reviewEmailTemplatePage,
   reviewEmailTemplateErrorPage,
@@ -64,7 +65,9 @@ module.exports = {
     performCheck(createTextMessageTemplateErrorPage(chooseTemplateUrl)),
     performCheck(reviewTextMessageTemplatePage(chooseTemplateUrl)),
     performCheck(reviewTextMessageTemplateErrorPage(chooseTemplateUrl)),
-    performCheck(viewNotYetSubmittedTextMessageTemplatePage(manageTemplatesUrl)),
+    performCheck(
+      viewNotYetSubmittedTextMessageTemplatePage(manageTemplatesUrl)
+    ),
     performCheck(submitTextMessageTemplatePage(chooseTemplateUrl)),
     performCheck(textMessageTemplateSubmittedPage(chooseTemplateUrl)),
     performCheck(viewSubmittedTextMessageTemplatePage(manageTemplatesUrl)),
@@ -79,7 +82,14 @@ module.exports = {
     performCheck(emailTemplateSubmittedPage(chooseTemplateUrl)),
     performCheck(viewSubmittedEmailTemplatePage(manageTemplatesUrl)),
 
-    performCheck({ url: `${baseUrl}/invalid-template`, actions: [...signInPageActions, 'wait for h1 to be visible'], name: 'invalid-template'}),
+    // Letter Journey
+    performCheck(createLetterTemplatePage(chooseTemplateUrl)),
+
+    performCheck({
+      url: `${baseUrl}/invalid-template`,
+      actions: [...signInPageActions, 'wait for h1 to be visible'],
+      name: 'invalid-template',
+    }),
   ],
   defaults: {
     reporters: [
@@ -88,18 +98,15 @@ module.exports = {
         'pa11y-ci-reporter-html',
         {
           destination: './.reports/accessibility',
-          includeZeroIssues: true
-        }
+          includeZeroIssues: true,
+        },
       ],
     ],
-    rules: [
-      'Principle1.Guideline1_3.1_3_1_AAA',
-    ],
+    rules: ['Principle1.Guideline1_3.1_3_1_AAA'],
     chromeLaunchConfig: {
-      args: ['--no-sandbox']
+      args: ['--no-sandbox'],
     },
     standard: 'WCAG2AA',
     agent: 'pa11y',
-  }
+  },
 };
-

tests/accessibility/actions/create-letter-template.actions.js

@@ -0,0 +1,20 @@
+const { signInPageActions } = require('./sign-in-page.actions');
+
+const pageActions = [
+  ...signInPageActions,
+  'wait for element #templateType-LETTER to be visible',
+  'click element #templateType-LETTER',
+  'click element #choose-a-template-type-submit-button',
+  'wait for element #placeholder to be visible',
+];
+
+const createLetterTemplatePage = (url) => ({
+  name: 'create-letter-template',
+  url,
+  actions: pageActions,
+});
+
+module.exports = {
+  pageActions,
+  createLetterTemplatePage,
+};

tests/test-team/pages/letter/template-mgmt-create-letter-page.ts

@@ -1,6 +1,8 @@
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtCreateLetterPage extends TemplateMgmtBasePageNonDynamic {
+  static readonly pageUrlSegment = 'create-letter-template';
+
   async loadPage() {
     await this.navigateTo('/templates/create-letter-template');
   }

tests/test-team/template-mgmt-component-tests/template-mgmt-choose-page.component.spec.ts

@@ -49,7 +49,7 @@ test.describe('Choose Template Type Page', () => {
 
     await chooseTemplatePage.loadPage();
 
-    await expect(chooseTemplatePage.radioButtons).toHaveCount(3);
+    await expect(chooseTemplatePage.radioButtons).toHaveCount(4);
   });
 
   test('should display error if no template type option selected and continue button clicked', async ({

tests/test-team/template-mgmt-component-tests/template-mgmt-copy-page.component.spec.ts

@@ -96,7 +96,7 @@ test.describe('Copy Template Page', () => {
 
     await copyTemplatePage.loadPage(templates.email.id);
 
-    await expect(copyTemplatePage.radioButtons).toHaveCount(3);
+    await expect(copyTemplatePage.radioButtons).toHaveCount(4);
   });
 
   test('should display error if no template type option selected and continue button clicked', async ({