Skip to content

Commit 96f4a52

Browse files
nicki-nhsnicki-nhs
committed
CCM-11492 Remove templates functionality
1 parent 62ff76a commit 96f4a52

File tree

4 files changed

+119
-56
lines changed

4 files changed

+119
-56
lines changed

‎frontend/src/__tests__/app/choose-templates/__snapshots__/page.test.tsx.snap‎

Lines changed: 78 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -124,20 +124,34 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
124124
</a>
125125
</li>
126126
<li>
127-
<button
128-
class="channel-template-link--remove nhsuk-link"
129-
data-testid="remove-template-link-NHSAPP"
130-
type="button"
127+
<form
128+
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
131129
>
132-
Remove
133-
<span
134-
class="nhsuk-u-visually-hidden"
130+
<input
131+
name="channel"
132+
type="hidden"
133+
value="NHSAPP"
134+
/>
135+
<input
136+
name="routingConfigId"
137+
type="hidden"
138+
value="fbb81055-79b9-4759-ac07-d191ae57be34"
139+
/>
140+
<button
141+
class="channel-template-link--remove nhsuk-link"
142+
data-testid="remove-template-link-NHSAPP"
143+
type="submit"
135144
>
136-
NHS App
137-
</span>
138-
139-
template
140-
</button>
145+
Remove
146+
<span
147+
class="nhsuk-u-visually-hidden"
148+
>
149+
NHS App
150+
</span>
151+
152+
template
153+
</button>
154+
</form>
141155
</li>
142156
</ul>
143157
</div>
@@ -284,20 +298,34 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
284298
</a>
285299
</li>
286300
<li>
287-
<button
288-
class="channel-template-link--remove nhsuk-link"
289-
data-testid="remove-template-link-SMS"
290-
type="button"
301+
<form
302+
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
291303
>
292-
Remove
293-
<span
294-
class="nhsuk-u-visually-hidden"
304+
<input
305+
name="channel"
306+
type="hidden"
307+
value="SMS"
308+
/>
309+
<input
310+
name="routingConfigId"
311+
type="hidden"
312+
value="fbb81055-79b9-4759-ac07-d191ae57be34"
313+
/>
314+
<button
315+
class="channel-template-link--remove nhsuk-link"
316+
data-testid="remove-template-link-SMS"
317+
type="submit"
295318
>
296-
Text message (SMS)
297-
</span>
298-
299-
template
300-
</button>
319+
Remove
320+
<span
321+
class="nhsuk-u-visually-hidden"
322+
>
323+
Text message (SMS)
324+
</span>
325+
326+
template
327+
</button>
328+
</form>
301329
</li>
302330
</ul>
303331
</div>
@@ -582,20 +610,34 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
582610
</a>
583611
</li>
584612
<li>
585-
<button
586-
class="channel-template-link--remove nhsuk-link"
587-
data-testid="remove-template-link-LETTER"
588-
type="button"
613+
<form
614+
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
589615
>
590-
Remove
591-
<span
592-
class="nhsuk-u-visually-hidden"
616+
<input
617+
name="channel"
618+
type="hidden"
619+
value="LETTER"
620+
/>
621+
<input
622+
name="routingConfigId"
623+
type="hidden"
624+
value="fbb81055-79b9-4759-ac07-d191ae57be34"
625+
/>
626+
<button
627+
class="channel-template-link--remove nhsuk-link"
628+
data-testid="remove-template-link-LETTER"
629+
type="submit"
593630
>
594-
Letter
595-
</span>
596-
597-
template
598-
</button>
631+
Remove
632+
<span
633+
class="nhsuk-u-visually-hidden"
634+
>
635+
Letter
636+
</span>
637+
638+
template
639+
</button>
640+
</form>
599641
</li>
600642
</ul>
601643
</div>

‎frontend/src/__tests__/components/molecules/MessagePlanChannelTemplate.test.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,12 +96,24 @@ describe('MessagePlanChannelTemplate', () => {
9696
);
9797
});
9898

99-
it('should display the "Remove template" button with accessible name and href', () => {
100-
const removeTemplateLink = screen.getByRole('button', {
99+
it('should display the "Remove template" button inside a form with hidden inputs and remove action', () => {
100+
const removeButton = screen.getByRole('button', {
101101
name: 'Remove Text message (SMS) template',
102102
});
103+
const form = removeButton.closest('form');
103104

104-
expect(removeTemplateLink).toBeInTheDocument();
105+
expect(removeButton).toBeInTheDocument();
106+
expect(form).toBeInTheDocument();
107+
expect(form).toHaveAttribute('action');
108+
109+
const channelInput = form?.querySelector('input[name="channel"]');
110+
const routingConfigIdInput = form?.querySelector(
111+
'input[name="routingConfigId"]'
112+
);
113+
expect(channelInput).toHaveAttribute('type', 'hidden');
114+
expect(channelInput).toHaveAttribute('value', 'SMS');
115+
expect(routingConfigIdInput).toHaveAttribute('type', 'hidden');
116+
expect(routingConfigIdInput).toHaveAttribute('value', routingConfigId);
105117
});
106118

107119
it('should not display the "Choose template" link', () => {

‎frontend/src/components/molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate.tsx‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
messagePlanChooseTemplateUrl,
77
} from 'nhs-notify-web-template-management-utils';
88
import classNames from 'classnames';
9+
import { removeTemplateFromMessagePlan } from '@app/message-plans/choose-templates/[routingConfigId]/actions';
910

1011
import styles from '@molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate.module.scss';
1112

@@ -57,7 +58,7 @@ export function MessagePlanChannelTemplate({
5758
</li>
5859
)}
5960

60-
{template && template.id && (
61+
{template && (
6162
<>
6263
<li>
6364
<Link
@@ -73,20 +74,29 @@ export function MessagePlanChannelTemplate({
7374
</Link>
7475
</li>
7576
<li>
76-
<button
77-
data-testid={`remove-template-link-${channel}`}
78-
className={classNames(
79-
styles['channel-template-link--remove'],
80-
'nhsuk-link'
81-
)}
82-
type='button'
83-
>
84-
{content.templateLinks.remove}
85-
<span className='nhsuk-u-visually-hidden'>
86-
{channelDisplayText}
87-
</span>{' '}
88-
{content.templateLinks.template}
89-
</button>
77+
<form>
78+
<input type='hidden' name='channel' value={channel} />
79+
<input
80+
type='hidden'
81+
name='routingConfigId'
82+
value={routingConfigId}
83+
/>
84+
<button
85+
data-testid={`remove-template-link-${channel}`}
86+
className={classNames(
87+
styles['channel-template-link--remove'],
88+
'nhsuk-link'
89+
)}
90+
formAction={removeTemplateFromMessagePlan}
91+
type='submit'
92+
>
93+
{content.templateLinks.remove}
94+
<span className='nhsuk-u-visually-hidden'>
95+
{channelDisplayText}
96+
</span>{' '}
97+
{content.templateLinks.template}
98+
</button>
99+
</form>
90100
</li>
91101
</>
92102
)}

‎tests/test-team/template-mgmt-routing-component-tests/choose-templates.routing-component.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -369,13 +369,12 @@ test.describe('Routing - Choose Templates page', () => {
369369

370370
await chooseTemplatesPage.nhsApp.clickRemoveTemplateLink();
371371

372-
// TODO: Implement remove
373-
374372
await expect(page).toHaveURL(
375373
`${baseURL}/templates/message-plans/choose-templates/${validRoutingConfigId}`
376374
);
377375

378376
await expect(chooseTemplatesPage.nhsApp.templateName).toBeHidden();
377+
await expect(chooseTemplatesPage.nhsApp.removeTemplateLink).toBeHidden();
379378
await expect(chooseTemplatesPage.nhsApp.chooseTemplateLink).toBeVisible();
380379
});
381380

0 commit comments

Comments
 (0)