Skip to content

CCM-16455: Add warning banner to "Create a message plan" page about editing a campaign #913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bhansell1 wants to merge 10 commits into
base: main
Choose a base branch
from
Open

CCM-16455: Add warning banner to "Create a message plan" page about editing a campaign #913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c7afe35
CCM-16455: add warning to highlight a user cannot not edit mp
bhansell1 Apr 21, 2026
afeb71f
CCM-16455: do not show banner when single campaign
bhansell1 Apr 21, 2026
1a40433
lockfile
bhansell1 Apr 21, 2026
d81c513
lockfile
bhansell1 Apr 22, 2026
1c2ab0c
Update campaign id error styling, update tests
andykay-nhs Apr 24, 2026
0137c7b
Update lockfile from main
andykay-nhs Apr 24, 2026
10625f1
Update campaign id aria attributes
andykay-nhs Apr 24, 2026
971bd1f
Remove unused campaign id state
andykay-nhs Apr 24, 2026
8ffbbba
Consolidate warning assertions into existing tests
andykay-nhs Apr 24, 2026
41df2ea
Update callout heading level, update mocked context
andykay-nhs Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 49 additions & 7 deletions ...tend/src/__tests__/app/message-plans/create-message-plan/__snapshots__/page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,28 @@ exports[`CreateMessagePlanPage on submit it invokes the server action and render
>
Choose which campaign this message plan will link to
</div>
<div
class="nhsuk-warning-callout nhsuk-u-margin-bottom-5 nhsuk-u-margin-top-5"
data-testid="campaign-warning-callout"
>
<h2
class="nhsuk-warning-callout__label"
>
<span
role="text"
>
<span
class="nhsuk-u-visually-hidden"
>
Important:
</span>
Important
</span>
</h2>
<p>
You cannot edit the campaign after you create a message plan. If you need to link to a different campaign later, create a new message plan.
</p>
</div>
<span
class="nhsuk-error-message"
id="campaignId--error-message"
Expand All @@ -181,14 +203,13 @@ exports[`CreateMessagePlanPage on submit it invokes the server action and render
</span>
<select
aria-describedby="campaignId--hint campaignId--error-message"
aria-labelledby="campaignId--label"
class="nhsuk-select nhsuk-select--error"
data-testid="campaign-id-field"
id="campaignId"
name="campaignId"
>
<option
selected=""
/>
<option />
<option
value="campaign-1"
>
Expand Down Expand Up @@ -359,16 +380,37 @@ exports[`CreateMessagePlanPage renders the page 1`] = `
>
Choose which campaign this message plan will link to
</div>
<div
class="nhsuk-warning-callout nhsuk-u-margin-bottom-5 nhsuk-u-margin-top-5"
data-testid="campaign-warning-callout"
>
<h2
class="nhsuk-warning-callout__label"
>
<span
role="text"
>
<span
class="nhsuk-u-visually-hidden"
>
Important:
</span>
Important
</span>
</h2>
<p>
You cannot edit the campaign after you create a message plan. If you need to link to a different campaign later, create a new message plan.
</p>
</div>
<select
aria-describedby="campaignId--hint"
aria-describedby="campaignId--hint campaignId--error-message"
aria-labelledby="campaignId--label"
class="nhsuk-select"
data-testid="campaign-id-field"
id="campaignId"
name="campaignId"
>
<option
selected=""
/>
<option />
<option
value="campaign-1"
>
Expand Down
242 changes: 125 additions & 117 deletions frontend/src/__tests__/components/forms/MessagePlan/MessagePlan.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,152 +6,160 @@ import { verifyFormCsrfToken } from '@utils/csrf-utils';

jest.mock('@providers/form-provider');
const mockAction = jest.fn();
jest.mocked(useNHSNotifyForm).mockReturnValue([{}, mockAction, false]);

jest.mock('@utils/csrf-utils');
jest.mocked(verifyFormCsrfToken).mockResolvedValue(true);

beforeEach(() => {
jest.clearAllMocks();
});
describe('Message plan form', () => {
beforeEach(() => {
jest.clearAllMocks();
jest.mocked(useNHSNotifyForm).mockReturnValue([{}, mockAction, false]);
});

test('renders form with single campaign id displayed', () => {
const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id']}
/>
);
expect(container.asFragment()).toMatchSnapshot();
});
test('renders form with single campaign id displayed', () => {
const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id']}
/>
);
const warningCallout = screen.queryByTestId('campaign-warning-callout');

expect(container.asFragment()).toMatchSnapshot();
expect(warningCallout).not.toBeInTheDocument();
});

test('renders form with select for multiple campaign ids', () => {
const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-1', 'campaign-2']}
/>
);
expect(container.asFragment()).toMatchSnapshot();
});
test('renders form with select for multiple campaign ids', () => {
const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-1', 'campaign-2']}
/>
);
const warningCallout = screen.queryByTestId('campaign-warning-callout');

expect(container.asFragment()).toMatchSnapshot();
expect(warningCallout).toBeInTheDocument();
});

test('renders form with children', () => {
const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id']}
>
<input type='hidden' name='messagePlanId' value='abc-123' />
</MessagePlanForm>
);
expect(container.asFragment()).toMatchSnapshot();
});
test('renders form with children', () => {
const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id']}
>
<input type='hidden' name='messagePlanId' value='abc-123' />
</MessagePlanForm>
);
expect(container.asFragment()).toMatchSnapshot();
});

test('renders errors', async () => {
jest.mocked(useNHSNotifyForm).mockReturnValueOnce([
{
errorState: {
fieldErrors: {
name: ['Name error'],
campaignId: ['CampaignId error'],
test('renders errors', async () => {
jest.mocked(useNHSNotifyForm).mockReturnValue([
{
errorState: {
fieldErrors: {
name: ['Name error'],
campaignId: ['CampaignId error'],
},
},
},
},
jest.fn(),
false,
]);

const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id', 'campaign-2']}
/>
);

expect(container.asFragment()).toMatchSnapshot();
});
jest.fn(),
false,
]);

const container = render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id', 'campaign-2']}
/>
);

expect(container.asFragment()).toMatchSnapshot();
});

test('invokes the action with the form data when the form is submitted - single campaign id', async () => {
const user = userEvent.setup();
test('invokes the action with the form data when the form is submitted - single campaign id', async () => {
const user = userEvent.setup();

render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id']}
>
<input type='hidden' name='messageOrder' value='NHSAPP' />
</MessagePlanForm>
);
render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id']}
>
<input type='hidden' name='messageOrder' value='NHSAPP' />
</MessagePlanForm>
);

await user.click(screen.getByTestId('name-field'));
await user.click(screen.getByTestId('name-field'));

await user.keyboard('My Message Plan');
await user.keyboard('My Message Plan');

await user.click(screen.getByTestId('submit-button'));
await user.click(screen.getByTestId('submit-button'));

expect(mockAction).toHaveBeenCalledTimes(1);
expect(mockAction).toHaveBeenCalledTimes(1);

expect(mockAction).toHaveBeenLastCalledWith(expect.any(FormData));
expect(mockAction).toHaveBeenLastCalledWith(expect.any(FormData));

const formData = mockAction.mock.lastCall?.at(0) as FormData;
const formData = mockAction.mock.lastCall?.at(0) as FormData;

expect(Object.fromEntries(formData.entries())).toMatchObject({
campaignId: 'campaign-id',
messageOrder: 'NHSAPP',
name: 'My Message Plan',
expect(Object.fromEntries(formData.entries())).toMatchObject({
campaignId: 'campaign-id',
messageOrder: 'NHSAPP',
name: 'My Message Plan',
});
});
});

test('invokes the action with the form data when the form is submitted - multiple campaign id', async () => {
const user = userEvent.setup();
test('invokes the action with the form data when the form is submitted - multiple campaign id', async () => {
const user = userEvent.setup();

render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id', 'campaign-id-2']}
>
<input type='hidden' name='messagePlanId' value='abc-123' />
</MessagePlanForm>
);
render(
<MessagePlanForm
backLink={{
href: '/message-plans/choose-message-order',
text: 'Go back',
}}
campaignIds={['campaign-id', 'campaign-id-2']}
>
<input type='hidden' name='messagePlanId' value='abc-123' />
</MessagePlanForm>
);

await user.click(screen.getByTestId('name-field'));
await user.click(screen.getByTestId('name-field'));

await user.keyboard('My Message Plan');
await user.keyboard('My Message Plan');

await user.selectOptions(
screen.getByTestId('campaign-id-field'),
'campaign-id-2'
);
await user.selectOptions(
screen.getByTestId('campaign-id-field'),
'campaign-id-2'
);

await user.click(screen.getByTestId('submit-button'));
await user.click(screen.getByTestId('submit-button'));

expect(mockAction).toHaveBeenCalledTimes(1);
expect(mockAction).toHaveBeenCalledTimes(1);

expect(mockAction).toHaveBeenLastCalledWith(expect.any(FormData));
expect(mockAction).toHaveBeenLastCalledWith(expect.any(FormData));

const formData = mockAction.mock.lastCall?.at(0) as FormData;
const formData = mockAction.mock.lastCall?.at(0) as FormData;

expect(Object.fromEntries(formData.entries())).toMatchObject({
campaignId: 'campaign-id-2',
messagePlanId: 'abc-123',
name: 'My Message Plan',
expect(Object.fromEntries(formData.entries())).toMatchObject({
campaignId: 'campaign-id-2',
messagePlanId: 'abc-123',
name: 'My Message Plan',
});
});
});
Loading
Loading