CCM-11148: add accessibility test --no-verify

Author: bhansell1

frontend/src/__tests__/components/molecules/__snapshots__/MessagePlans.test.tsx.snap

@@ -88,7 +88,8 @@ exports[`MessagePlans matches snapshot 1`] = `
           aria-disabled="false"
           class="nhsuk-button"
           draggable="false"
-          href="/create-new-message-plan"
+          href="/message-plans/choose-message-order"
+          id="create-message-plan-button"
           role="button"
         >
           New message plan

frontend/src/__tests__/components/molecules/__snapshots__/MessagePlansList.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`MessagePlansList matches snapshot when data is available 1`] = `
 <DocumentFragment>
   <details
     class="nhsuk-details nhsuk-expander"
+    id="message-plans-list-draft"
   >
     <summary
       class="nhsuk-details__summary nhsuk-heading-s nhsuk-u-margin-bottom-0"
@@ -115,6 +116,7 @@ exports[`MessagePlansList matches snapshot when no data is available 1`] = `
 <DocumentFragment>
   <details
     class="nhsuk-details nhsuk-expander"
+    id="message-plans-list-draft"
   >
     <summary
       class="nhsuk-details__summary nhsuk-heading-s nhsuk-u-margin-bottom-0"

frontend/src/components/molecules/MessagePlans/MessagePlans.tsx

@@ -8,6 +8,7 @@ import {
 } from '@molecules/MessagePlansList/MessagePlansList';
 import content from '@content/content';
 import classNames from 'classnames';
+import Link from 'next/link';
 
 const {
   pages: { messagePlansPage },
@@ -91,7 +92,9 @@ export const MessagePlans = (props: MessagePlansProps) => {
               </p>
             </Details.Text>
           </Details>
-          <Button href={button.link}>{button.text}</Button>
+          <Link passHref legacyBehavior href={button.link}>
+            <Button id='create-message-plan-button'>{button.text}</Button>
+          </Link>
           <MessagePlansList
             planType='Draft'
             plans={props.draft.plans}

frontend/src/components/molecules/MessagePlansList/MessagePlansList.tsx

@@ -54,7 +54,7 @@ export const MessagePlansList = (props: MessagePlansListProps) => {
   ));
 
   return (
-    <Details expander>
+    <Details expander id={`message-plans-list-${status.toLowerCase()}`}>
       <Details.Summary
         className={classNames('nhsuk-heading-s', 'nhsuk-u-margin-bottom-0')}
       >

frontend/src/content/content.ts

@@ -1058,7 +1058,7 @@ const messagePlansPage = {
   },
   button: {
     text: 'New message plan',
-    link: '/create-new-message-plan',
+    link: '/message-plans/choose-message-order',
   },
 };
 

tests/accessibility/.pa11y-ci.js

@@ -14,6 +14,7 @@ const {
   emailTemplateSubmittedPage,
   letterTemplateSubmittedPage,
   messageTemplatesPage,
+  messagePlansPage,
   nhsAppTemplateSubmittedPage,
   previewEmailTemplateErrorPage,
   previewEmailTemplatePage,
@@ -113,6 +114,10 @@ const letters = [
   previewSubmittedLetterTemplatePage(messageTemplatesUrl),
 ];
 
+const messagePlans = [
+  messagePlansPage(`${baseUrl}/message-plans`)
+]
+
 const landingPage = [{ url: startUrl, name: 'landing-page' }];
 
 const errors = [
@@ -149,6 +154,7 @@ const allJourneys = {
   letters,
   userEmails,
   errors,
+  messagePlans,
 };
 
 const selectedJourney = process.env.JOURNEY && allJourneys[process.env.JOURNEY]

tests/accessibility/actions/index.js

@@ -8,6 +8,7 @@ module.exports = {
   ...require('./email-template-submitted.actions'),
   ...require('./letter-template-submitted.actions'),
   ...require('./message-templates.actions'),
+  ...require('./message-plans.actions'),
   ...require('./nhs-app-template-submitted.actions'),
   ...require('./preview-email-template.actions'),
   ...require('./preview-letter-template.actions'),

tests/accessibility/actions/message-plans.actions.js

@@ -0,0 +1,19 @@
+const { signInPageActions } = require('./sign-in-page.actions');
+
+const pageActions = [
+  ...signInPageActions,
+  'wait for element #create-message-plan-button to be visible',
+  'click element #message-plans-list-draft',
+  'click element #message-plans-list-production',
+];
+
+const messagePlansPage = (url) => ({
+  name: 'message-plans',
+  url,
+  actions: pageActions,
+});
+
+module.exports = {
+  pageActions,
+  messagePlansPage,
+};

tests/accessibility/pa11y-setup.ts

@@ -64,6 +64,34 @@ const generateLetterTemplateData = (
   };
 };
 
+const generateRoutingConfig = ({
+  clientId,
+  now,
+}: {
+  clientId: string;
+  now: string;
+}) => ({
+  owner: `CLIENT#${clientId}`,
+  id: randomUUID(),
+  campaignId: 'campaignId',
+  cascade: [
+    {
+      cascadeGroups: ['standard'],
+      channel: 'EMAIL',
+      channelType: 'primary',
+      defaultTemplateId: 'email_id',
+    },
+  ],
+  cascadeGroupOverrides: [{ name: 'standard' }],
+  clientId,
+  createdAt: now,
+  createdBy: 'Accessibility tests',
+  name: 'Accessibility Test',
+  status: 'DRAFT',
+  updatedAt: now,
+  updatedBy: 'Accessibility tests',
+});
+
 const setup = async () => {
   const backendConfig = BackendConfigHelper.fromTerraformOutputsFile(
     path.join(__dirname, '..', '..', 'sandbox_tf_outputs.json')
@@ -148,25 +176,40 @@ const setup = async () => {
     ),
   ];
 
-  await Promise.all(
-    templates.map((template) =>
+  const routingConfigs = [
+    generateRoutingConfig({ clientId, now: new Date().toISOString() }),
+  ];
+
+  await Promise.all([
+    ...templates.map((template) => {
       ddbDocClient.send(
         new PutCommand({
           TableName: backendConfig.templatesTableName,
           Item: template,
         })
+      );
+    }),
+    ...routingConfigs.map((rc) =>
+      ddbDocClient.send(
+        new PutCommand({
+          TableName: backendConfig.routingConfigTableName,
+          Item: rc,
+        })
       )
-    )
-  );
+    ),
+  ]);
 
   const templateIds = Object.fromEntries(
     templates.map((t) => [t.templateStatus, t.id])
   );
 
+  const routingConfigIds = routingConfigs.map((r) => r.id);
+
   const fixtureData = {
     email: testEmail,
     password: testPassword,
     templateIds,
+    routingConfigIds,
     userId,
     clientId,
     clientName,

tests/accessibility/pa11y-teardown.ts

@@ -5,7 +5,7 @@ import { DeleteCommand, DynamoDBDocumentClient } from '@aws-sdk/lib-dynamodb';
 import { BackendConfigHelper } from 'nhs-notify-web-template-management-util-backend-config';
 import path from 'node:path';
 
-const { email, templateIds, clientId } = JSON.parse(
+const { email, templateIds, clientId, routingConfigIds } = JSON.parse(
   readFileSync('./pa11y-fixtures.json', 'utf8')
 );
 
@@ -18,8 +18,8 @@ const teardown = async () => {
     path.join(__dirname, '..', '..', 'sandbox_tf_outputs.json')
   );
 
-  await Promise.all(
-    Object.values(templateIds).map((id) =>
+  await Promise.all([
+    ...Object.values(templateIds).map((id) =>
       ddbDocClient.send(
         new DeleteCommand({
           TableName: backendConfig.templatesTableName,
@@ -29,8 +29,19 @@ const teardown = async () => {
           },
         })
       )
-    )
-  );
+    ),
+    ...(routingConfigIds as string[]).map((id) =>
+      ddbDocClient.send(
+        new DeleteCommand({
+          TableName: backendConfig.routingConfigTableName,
+          Key: {
+            owner: `CLIENT#${clientId}`,
+            id,
+          },
+        })
+      )
+    ),
+  ]);
 
   await new TestUserClient(
     backendConfig.userPoolId,