CCM-12038: preview production message plan

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

@@ -1,292 +1,22 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MessagePlanBlock } from '@molecules/MessagePlanBlock/MessagePlanBlock';
-import type { CascadeItem, Channel } from 'nhs-notify-backend-client';
-import type { TemplateDto } from 'nhs-notify-backend-client';
-import { EMAIL_TEMPLATE, LETTER_TEMPLATE } from '@testhelpers/helpers';
-import { MessagePlanTemplates } from '@utils/routing-utils';
+import { ORDINALS } from 'nhs-notify-web-template-management-utils';
 
-function buildCascadeItem(channel: Channel): CascadeItem {
-  return {
-    cascadeGroups: [],
-    channel,
-    channelType: 'primary',
-    defaultTemplateId: '',
-  };
-}
-
-const mockTemplate: TemplateDto = {
-  ...EMAIL_TEMPLATE,
-  name: 'Test email template',
-};
-
-const emptyConditionalTemplates: MessagePlanTemplates = {};
+const cases = ORDINALS.map((ordinal, index) => ({ ordinal, index }));
 
 describe('MessagePlanBlock', () => {
-  it('should render the step number and the heading for the first cascade item', () => {
-    const channelItem = buildCascadeItem('EMAIL');
-
-    const { container } = render(
-      <MessagePlanBlock
-        index={0}
-        channelItem={channelItem}
-        routingConfigId='test-routing-config-id'
-        conditionalTemplates={emptyConditionalTemplates}
-        lockNumber={42}
-      />
-    );
-
-    const stepNumber = container.querySelector('.message-plan-block-number');
-    expect(stepNumber).toHaveTextContent('1');
-
-    expect(
-      screen.getByRole('heading', { level: 2, name: 'First message' })
-    ).toBeInTheDocument();
-  });
-
-  it('should render the step number and the interpolated heading for a third item', () => {
-    const channelItem = buildCascadeItem('NHSAPP');
-
-    const { container } = render(
-      <MessagePlanBlock
-        index={2}
-        channelItem={channelItem}
-        routingConfigId='test-routing-config-id'
-        conditionalTemplates={emptyConditionalTemplates}
-        lockNumber={42}
-      />
-    );
-
-    const stepNumber = container.querySelector('.message-plan-block-number');
-    expect(stepNumber).toHaveTextContent('3');
-    expect(
-      screen.getByRole('heading', { level: 2, name: 'Third message' })
-    ).toBeInTheDocument();
-  });
-
-  it('should render the channel template section with the correct channel subheading', () => {
-    const channelItem = buildCascadeItem('EMAIL');
-
-    render(
-      <MessagePlanBlock
-        index={0}
-        channelItem={channelItem}
-        routingConfigId='test-routing-config-id'
-        conditionalTemplates={emptyConditionalTemplates}
-        lockNumber={42}
-      />
-    );
-
-    expect(
-      screen.getByRole('heading', { level: 3, name: 'Email' })
-    ).toBeInTheDocument();
-  });
-
-  describe('when the channel has a template', () => {
-    it('should display the template name', () => {
-      const channelItem = buildCascadeItem('EMAIL');
-
-      render(
-        <MessagePlanBlock
-          index={0}
-          channelItem={channelItem}
-          defaultTemplate={mockTemplate}
-          routingConfigId='test-routing-config-id'
-          conditionalTemplates={emptyConditionalTemplates}
-          lockNumber={42}
-        />
-      );
-      expect(screen.getByText('Test email template')).toBeInTheDocument();
-    });
-
-    it('should show Change/Remove links (and no Choose link)', () => {
-      const channelItem = buildCascadeItem('EMAIL');
-
-      render(
-        <MessagePlanBlock
-          index={0}
-          channelItem={channelItem}
-          defaultTemplate={mockTemplate}
-          routingConfigId='test-routing-config-id'
-          conditionalTemplates={emptyConditionalTemplates}
-          lockNumber={42}
-        />
-      );
-
-      expect(
-        screen.getByRole('link', { name: 'Change Email template' })
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('button', { name: 'Remove Email template' })
-      ).toBeInTheDocument();
-      expect(
-        screen.queryByRole('link', { name: 'Choose Email template' })
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  describe('when the channel does not have a template', () => {
-    it('should show Choose link (and no Change/Remove links)', () => {
-      const channelItem = buildCascadeItem('SMS');
-
-      render(
-        <MessagePlanBlock
-          index={0}
-          channelItem={channelItem}
-          routingConfigId='test-routing-config-id'
-          conditionalTemplates={emptyConditionalTemplates}
-          lockNumber={42}
-        />
-      );
-
-      expect(
-        screen.getByRole('link', { name: 'Choose Text message (SMS) template' })
-      ).toBeInTheDocument();
-      expect(
-        screen.queryByRole('link', {
-          name: 'Change Text message (SMS) template',
-        })
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByRole('button', {
-          name: 'Remove Text message (SMS) template',
-        })
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  describe('when channel is LETTER', () => {
-    it('should render conditional templates section', () => {
-      const channelItem = buildCascadeItem('LETTER');
-
-      render(
-        <MessagePlanBlock
-          index={0}
-          channelItem={channelItem}
-          routingConfigId='test-routing-config-id'
-          lockNumber={42}
-          conditionalTemplates={emptyConditionalTemplates}
-        />
-      );
-
-      expect(
-        screen.getByTestId('message-plan-conditional-templates')
-      ).toBeInTheDocument();
-    });
-
-    it('should render accessible format templates', () => {
-      const channelItem = buildCascadeItem('LETTER');
-
-      render(
+  it.each(cases)(
+    'matches snapshot - index $index renders "$ordinal"',
+    ({ index, ordinal }) => {
+      const { asFragment } = render(
         <MessagePlanBlock
-          index={0}
-          channelItem={channelItem}
-          routingConfigId='test-routing-config-id'
-          lockNumber={42}
-          conditionalTemplates={emptyConditionalTemplates}
+          index={index}
+          className='extra-message-plan-block-class'
+          data-testid={`message-plan-block-${ordinal}`}
         />
       );
 
-      expect(
-        screen.getByRole('heading', {
-          level: 3,
-          name: 'Large print letter (optional)',
-        })
-      ).toBeInTheDocument();
-    });
-
-    it('should render language templates section', () => {
-      const channelItem = buildCascadeItem('LETTER');
-
-      render(
-        <MessagePlanBlock
-          index={0}
-          channelItem={channelItem}
-          routingConfigId='test-routing-config-id'
-          lockNumber={42}
-          conditionalTemplates={emptyConditionalTemplates}
-        />
-      );
-
-      expect(
-        screen.getByRole('heading', {
-          level: 3,
-          name: 'Other language letters (optional)',
-        })
-      ).toBeInTheDocument();
-    });
-
-    it('should display conditional template names when provided', () => {
-      const largePrintTemplate: TemplateDto = {
-        ...LETTER_TEMPLATE,
-        id: 'large-print-id',
-        name: 'Large print template',
-      };
-
-      const channelItem: CascadeItem = {
-        ...buildCascadeItem('LETTER'),
-        conditionalTemplates: [
-          {
-            accessibleFormat: 'x1',
-            templateId: 'large-print-id',
-          },
-        ],
-      };
-
-      const conditionalTemplates: MessagePlanTemplates = {
-        'large-print-id': largePrintTemplate,
-      };
-
-      render(
-        <MessagePlanBlock
-          index={0}
-          channelItem={channelItem}
-          routingConfigId='test-routing-config-id'
-          lockNumber={42}
-          conditionalTemplates={conditionalTemplates}
-        />
-      );
-
-      expect(screen.getByText('Large print template')).toBeInTheDocument();
-    });
-  });
-
-  describe.each(['NHSAPP', 'EMAIL', 'SMS', 'LETTER'] as const)(
-    'for channel %s with template',
-    (channel) => {
-      it('should match snapshot', async () => {
-        const channelItem = buildCascadeItem(channel);
-        const { asFragment } = render(
-          <MessagePlanBlock
-            index={0}
-            channelItem={channelItem}
-            defaultTemplate={mockTemplate}
-            routingConfigId='test-routing-config-id'
-            conditionalTemplates={emptyConditionalTemplates}
-            lockNumber={42}
-          />
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-    }
-  );
-
-  describe.each(['NHSAPP', 'EMAIL', 'SMS', 'LETTER'] as const)(
-    'for channel %s with no template',
-    (channel) => {
-      it('should match snapshot', async () => {
-        const channelItem = buildCascadeItem(channel);
-        const { asFragment } = render(
-          <MessagePlanBlock
-            index={0}
-            channelItem={channelItem}
-            routingConfigId='test-routing-config-id'
-            conditionalTemplates={emptyConditionalTemplates}
-            lockNumber={42}
-          />
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
+      expect(asFragment()).toMatchSnapshot();
     }
   );
 });

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

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import { MessagePlanChannelCard } from '@molecules/MessagePlanChannelCard/MessagePlanChannelCard';
+
+describe('MessagePlanChannelCard', () => {
+  it('matches snapshot', () => {
+    const { asFragment } = render(
+      <MessagePlanChannelCard
+        heading='Card Heading'
+        className='extra-channel-card-class'
+        data-testid='channel-card'
+      >
+        Card Content
+      </MessagePlanChannelCard>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { MessagePlanChannelList } from '@molecules/MessagePlanChannelList/MessagePlanChannelList';
+
+describe('MessagePlanChannelList', () => {
+  it('matches snapshot', () => {
+    expect(
+      render(
+        <MessagePlanChannelList
+          className='extra-channel-list-class'
+          data-testid='channel-list'
+        >
+          List content
+        </MessagePlanChannelList>
+      ).asFragment()
+    ).toMatchSnapshot();
+  });
+});