CCM-10893 Update markdown content to use only test id and resolve test output error

Author: nicki-nhs

frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap

@@ -160,7 +160,7 @@ exports[`Client-side validation triggers 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>
@@ -860,7 +860,7 @@ exports[`renders page 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>
@@ -1600,7 +1600,7 @@ exports[`renders page one error 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 0 of 5000 characters
               </p>
@@ -2354,7 +2354,7 @@ exports[`renders page with multiple errors 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 0 of 5000 characters
               </p>
@@ -3054,7 +3054,7 @@ exports[`renders page with preloaded field values 1`] = `
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>
@@ -3732,7 +3732,7 @@ exports[`renders page without back link for initial state with id - edit mode 1`
               class=""
             >
               <p
-                id="character-count-0"
+                data-testid="character-count-0"
               >
                 16 of 5000 characters
               </p>

frontend/src/__tests__/components/molecules/MarkdownContent.test.tsx

@@ -24,10 +24,10 @@ describe('MarkdownContent', () => {
     expect(screen.getByRole('link')).toHaveTextContent('link');
   });
 
-  it('passes ID through if content is a string', () => {
-    render(<MarkdownContent content='This is content' id='content-id' />);
+  it('passes test ID through if content is a string', () => {
+    render(<MarkdownContent content='This is content' testId='content-id' />);
     expect(screen.getByText('This is content')).toHaveAttribute(
-      'id',
+      'data-testid',
       'content-id-0'
     );
   });
@@ -45,19 +45,19 @@ describe('MarkdownContent', () => {
     expect(screen.getByRole('link')).toHaveTextContent('link');
   });
 
-  it('passes indexed IDs to each item if content is an array', () => {
+  it('passes indexed test IDs to each item if content is an array', () => {
     render(
       <MarkdownContent
         content={['First paragraph', 'Second paragraph']}
-        id='content-id'
+        testId='content-id'
       />
     );
 
     const first = screen.getByText('First paragraph');
-    expect(first).toHaveAttribute('id', 'content-id-0');
+    expect(first).toHaveAttribute('data-testid', 'content-id-0');
 
     const second = screen.getByText('Second paragraph');
-    expect(second).toHaveAttribute('id', 'content-id-1');
+    expect(second).toHaveAttribute('data-testid', 'content-id-1');
   });
 
   it('adds correct attributes to links', () => {

frontend/src/components/forms/NhsAppTemplateForm/NhsAppTemplateForm.tsx

@@ -127,7 +127,7 @@ export const NhsAppTemplateForm: FC<
                 />
                 <JsEnabled>
                   <MarkdownContent
-                    id='character-count'
+                    testId='character-count'
                     content={characterCountText}
                     variables={{ characters: nhsAppTemplateMessage.length }}
                   />

frontend/src/components/molecules/ContentRenderer/ContentRenderer.tsx

@@ -1,7 +1,7 @@
 import CodeExample from '@atoms/CodeExample/CodeExample';
 import { MarkdownContent } from '@molecules/MarkdownContent/MarkdownContent';
 
-type StandardBlock = { id?: string; testId?: string };
+type StandardBlock = { testId?: string };
 export type MarkdownTextBlock = StandardBlock & { type: 'text'; text: string };
 export type CodeBlock = StandardBlock & {
   type: 'code';
@@ -21,24 +21,21 @@ export function ContentRenderer({ content, variables }: ContentRendererProps) {
   return (
     <>
       {content.map((block, index) => {
-        const key = block.id ?? index;
+        const key = block.testId ?? index;
 
         switch (block.type) {
-          case 'text': {
+          case 'text':
             return (
               <MarkdownContent
-                id={block.id}
                 testId={block.testId}
                 key={key}
                 content={block.text}
                 variables={variables}
               />
             );
-          }
-          case 'code': {
+          case 'code':
             return (
               <CodeExample
-                id={block.id}
                 data-testid={block.testId}
                 key={key}
                 ariaText={block.aria?.text}
@@ -47,21 +44,18 @@ export function ContentRenderer({ content, variables }: ContentRendererProps) {
                 {block.code}
               </CodeExample>
             );
-          }
-          case 'list': {
+          case 'list':
             return (
-              <ul id={block.id} data-testid={block.testId} key={key}>
+              <ul data-testid={block.testId} key={key}>
                 {block.items.map((item, itemId) => (
                   <li key={itemId}>{item}</li>
                 ))}
               </ul>
             );
-          }
-          default: {
+          default:
             console.error('Unsupported content block:', block);
 
             throw new Error('Unsupported content block type');
-          }
         }
       })}
     </>

frontend/src/components/molecules/MarkdownContent/MarkdownContent.tsx

@@ -5,24 +5,26 @@ import React from 'react';
 type MarkdownContentProps = {
   content: string | string[];
   variables?: Record<string, string | number>;
-  id?: string;
   testId?: string;
 };
 
 export function MarkdownContent({
   content,
   variables,
-  id,
   testId,
 }: MarkdownContentProps) {
   const items = Array.isArray(content) ? content : [content];
+  const rendered = items
+    .map((item) => interpolate(item, variables))
+    .filter((s) => s.trim().length > 0);
+
+  if (rendered.length === 0) return null;
 
   return (
     <>
-      {items.map((item, index) => (
+      {rendered.map((item, index) => (
         <Markdown
           key={index}
-          id={id ? `${id}-${index}` : undefined}
           data-testid={testId ? `${testId}-${index}` : undefined}
           options={{
             forceBlock: true,
@@ -31,10 +33,7 @@ export function MarkdownContent({
             overrides: {
               a: {
                 component: 'a',
-                props: {
-                  rel: 'noopener noreferrer',
-                  target: '_blank',
-                },
+                props: { rel: 'noopener noreferrer', target: '_blank' },
               },
             },
           }}

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

@@ -34,7 +34,7 @@ export class TemplateMgmtCreateNhsAppPage extends TemplateMgmtBasePageNonDynamic
     this.namingYourTemplate = page.locator(
       '[data-testid="how-to-name-your-template-details"]'
     );
-    this.characterCountText = page.locator('[id="character-count-0"]');
+    this.characterCountText = page.getByTestId('character-message-count-0');
     this.goBackLink = page
       .locator('.nhsuk-back-link__link')
       .and(page.getByText('Back to choose a template type'));

tests/test-team/pages/nhs-app/template-mgmt-edit-nhs-app-page.ts

@@ -32,7 +32,7 @@ export class TemplateMgmtEditNhsAppPage extends TemplateMgmtBasePageDynamic {
     this.namingYourTemplate = page.locator(
       '[data-testid="how-to-name-your-template-details"]'
     );
-    this.characterCountText = page.locator('[id="character-count-0"]');
+    this.characterCountText = page.getByTestId('character-message-count-0');
     this.messageFormatting = new TemplateMgmtMessageFormatting(page);
 
     this.saveAndPreviewButton = page.locator(