Skip to content

Commit 5afdaad

Browse files
ClareJonesBJSSClareJonesBJSS
committed
CCM-10630: Code review feedback
1 parent 011a695 commit 5afdaad

File tree

13 files changed

+64
-114
lines changed

13 files changed

+64
-114
lines changed

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const scrollIntoViewMock = jest.fn();
88
window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
99

1010
test('Renders NhsNotifyErrorSummary correctly without errors', () => {
11-
const container = render(<NhsNotifyErrorSummary state={{}} />);
11+
const container = render(<NhsNotifyErrorSummary errorState={undefined} />);
1212

1313
expect(container.asFragment()).toMatchSnapshot();
1414
expect(focusMock).not.toHaveBeenCalled();
@@ -18,18 +18,12 @@ test('Renders NhsNotifyErrorSummary correctly without errors', () => {
1818
test('Renders NhsNotifyErrorSummary correctly with errors', () => {
1919
const container = render(
2020
<NhsNotifyErrorSummary
21-
state={{
22-
errorState: {
23-
fieldErrors: {
24-
'radios-id': ['Radio error 1', 'Radio error 2'],
25-
'select-id': ['Select error'],
26-
},
27-
formErrors: ['Form error', 'Form error 2'],
28-
multilineErrors: [
29-
['Error 1 line 1', 'Error 1 line 2'],
30-
['Error 2 line 1', 'Error 2 line 2'],
31-
],
21+
errorState={{
22+
fieldErrors: {
23+
'radios-id': ['Radio error 1', 'Radio error 2'],
24+
'select-id': ['Select error'],
3225
},
26+
formErrors: ['Form error', 'Form error 2'],
3327
}}
3428
/>
3529
);

‎frontend/src/__tests__/components/molecules/__snapshots__/NhsNotifyErrorSummary.test.tsx.snap‎

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -32,56 +32,20 @@ exports[`Renders NhsNotifyErrorSummary correctly with errors 1`] = `
3232
Select error
3333
</a>
3434
</li>
35-
<span
36-
class="nhsuk-error-message"
37-
>
38-
<span
39-
class="nhsuk-u-visually-hidden"
40-
>
41-
Error:
42-
</span>
43-
Form error
44-
</span>
45-
<span
46-
class="nhsuk-error-message"
47-
>
48-
<span
49-
class="nhsuk-u-visually-hidden"
50-
>
51-
Error:
52-
</span>
53-
Form error 2
54-
</span>
55-
<span
56-
class="nhsuk-error-message"
57-
>
35+
<li>
5836
<span
59-
class="nhsuk-u-visually-hidden"
37+
class="nhsuk-error-message"
6038
>
61-
Error:
39+
Form error
6240
</span>
63-
<p>
64-
Error 1 line 1
65-
</p>
66-
<p>
67-
Error 1 line 2
68-
</p>
69-
</span>
70-
<span
71-
class="nhsuk-error-message"
72-
>
41+
</li>
42+
<li>
7343
<span
74-
class="nhsuk-u-visually-hidden"
44+
class="nhsuk-error-message"
7545
>
76-
Error:
46+
Form error 2
7747
</span>
78-
<p>
79-
Error 2 line 1
80-
</p>
81-
<p>
82-
Error 2 line 2
83-
</p>
84-
</span>
48+
</li>
8549
</ul>
8650
</div>
8751
</DocumentFragment>

‎frontend/src/__tests__/components/organisms/__snapshots__/PreviewLetterTemplate.test.tsx.snap‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1104,21 +1104,20 @@ exports[`PreviewLetterTemplate component matches snapshot when template status i
11041104
<ul
11051105
class="nhsuk-list nhsuk-error-summary__list"
11061106
>
1107-
<span
1108-
class="nhsuk-error-message"
1109-
>
1107+
<li>
11101108
<span
1111-
class="nhsuk-u-visually-hidden"
1109+
class="nhsuk-error-message"
11121110
>
1113-
Error:
1114-
</span>
1115-
<p>
11161111
The personalisation fields in your files are missing or do not match.
1117-
</p>
1118-
<p>
1112+
</span>
1113+
</li>
1114+
<li>
1115+
<span
1116+
class="nhsuk-error-message"
1117+
>
11191118
Check that the personalisation fields in your template file match the fields in your example personalisation file
1120-
</p>
1121-
</span>
1119+
</span>
1120+
</li>
11221121
</ul>
11231122
</div>
11241123
<h1
@@ -1315,21 +1314,20 @@ exports[`PreviewLetterTemplate component matches snapshot when template status i
13151314
<ul
13161315
class="nhsuk-list nhsuk-error-summary__list"
13171316
>
1318-
<span
1319-
class="nhsuk-error-message"
1320-
>
1317+
<li>
13211318
<span
1322-
class="nhsuk-u-visually-hidden"
1319+
class="nhsuk-error-message"
13231320
>
1324-
Error:
1325-
</span>
1326-
<p>
13271321
The file(s) you uploaded may contain a virus.
1328-
</p>
1329-
<p>
1322+
</span>
1323+
</li>
1324+
<li>
1325+
<span
1326+
class="nhsuk-error-message"
1327+
>
13301328
Create a new letter template to upload your file(s) again or upload different file(s).
1331-
</p>
1332-
</span>
1329+
</span>
1330+
</li>
13331331
</ul>
13341332
</div>
13351333
<h1

‎frontend/src/components/forms/ChooseTemplate/ChooseTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const ChooseTemplate = ({
4747
<BackLink data-testid='back-to-templates-link'>{backLinkText}</BackLink>
4848
</Link>
4949
<NHSNotifyMain>
50-
<NhsNotifyErrorSummary state={{ errorState }} />
50+
<NhsNotifyErrorSummary errorState={errorState} />
5151
<NHSNotifyRadioButtonForm
5252
formId='choose-a-template-type'
5353
radiosId='templateType'

‎frontend/src/components/forms/CopyTemplate/CopyTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const CopyTemplate = ({ template }: CopyTemplate) => {
5353
<div className='nhsuk-grid-row'>
5454
<div className='nhsuk-grid-column-two-thirds'>
5555
<h1 className='nhsuk-heading-xl'>{fullPageHeading}</h1>
56-
<NhsNotifyErrorSummary state={{ errorState }} />
56+
<NhsNotifyErrorSummary errorState={errorState} />
5757
<NHSNotifyRadioButtonForm
5858
formId='choose-a-template-type'
5959
radiosId='templateType'

‎frontend/src/components/forms/EmailTemplateForm/EmailTemplateForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export const EmailTemplateForm: FC<
8484
<NHSNotifyMain>
8585
<div className='nhsuk-grid-row'>
8686
<div className='nhsuk-grid-column-two-thirds'>
87-
<NhsNotifyErrorSummary state={{ errorState }} />
87+
<NhsNotifyErrorSummary errorState={errorState} />
8888
<NHSNotifyFormWrapper
8989
action={action}
9090
formId='create-email-template'

‎frontend/src/components/forms/LetterTemplateForm/LetterTemplateForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export const LetterTemplateForm: FC<
103103
<NHSNotifyMain>
104104
<div className='nhsuk-grid-row'>
105105
<div className='nhsuk-grid-column-two-thirds'>
106-
<NhsNotifyErrorSummary state={{ errorState }} />
106+
<NhsNotifyErrorSummary errorState={errorState} />
107107
<NHSNotifyFormWrapper
108108
action={action}
109109
formId='upload-letter-template'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const NhsAppTemplateForm: FC<
7777
<NHSNotifyMain>
7878
<div className='nhsuk-grid-row'>
7979
<div className='nhsuk-grid-column-two-thirds'>
80-
<NhsNotifyErrorSummary state={{ errorState }} />
80+
<NhsNotifyErrorSummary errorState={errorState} />
8181
<NHSNotifyFormWrapper
8282
action={action}
8383
formId='create-nhs-app-template'

‎frontend/src/components/forms/SmsTemplateForm/SmsTemplateForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const SmsTemplateForm: FC<
7979
<NHSNotifyMain>
8080
<div className='nhsuk-grid-row'>
8181
<div className='nhsuk-grid-column-two-thirds'>
82-
<NhsNotifyErrorSummary state={{ errorState }} />
82+
<NhsNotifyErrorSummary errorState={errorState} />
8383
<h1 data-testid='page-heading'>
8484
{editMode ? 'Edit ' : 'Create '}
8585
{pageHeadingSuffix}

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
import { ErrorSummary, ErrorMessage } from 'nhsuk-react-components';
1+
import { ErrorSummary } from 'nhsuk-react-components';
22
import { ErrorState } from 'nhs-notify-web-template-management-utils';
3-
import { useEffect, useRef } from 'react';
3+
import { FC, HTMLProps, useEffect, useRef } from 'react';
44
import content from '@content/content';
55

6+
const UnlinkedErrorSummaryItem: FC<HTMLProps<HTMLSpanElement>> = (props) => (
7+
<li>
8+
<span className='nhsuk-error-message' {...props} />
9+
</li>
10+
);
11+
612
export type NhsNotifyErrorSummaryProps = {
7-
state: { errorState?: ErrorState };
13+
errorState?: ErrorState;
814
};
915

1016
export const NhsNotifyErrorSummary = ({
11-
state: { errorState },
17+
errorState,
1218
}: NhsNotifyErrorSummaryProps) => {
1319
const errorSummaryRef = useRef<HTMLDivElement>(null);
1420

@@ -23,7 +29,7 @@ export const NhsNotifyErrorSummary = ({
2329
return;
2430
}
2531

26-
const { fieldErrors, formErrors, multilineErrors } = errorState;
32+
const { fieldErrors, formErrors } = errorState;
2733

2834
return (
2935
<ErrorSummary ref={errorSummaryRef}>
@@ -42,17 +48,9 @@ export const NhsNotifyErrorSummary = ({
4248
))}
4349
{formErrors &&
4450
formErrors.map((error, id) => (
45-
<ErrorMessage key={`form-error-summary-${id}`}>
51+
<UnlinkedErrorSummaryItem key={`form-error-summary-${id}`}>
4652
{error}
47-
</ErrorMessage>
48-
))}
49-
{multilineErrors &&
50-
multilineErrors.map((errorLines, id) => (
51-
<ErrorMessage key={`error-summary-${id}`}>
52-
{errorLines.map((line, lineId) => (
53-
<p key={`error-line-${lineId}`}>{line}</p>
54-
))}
55-
</ErrorMessage>
53+
</UnlinkedErrorSummaryItem>
5654
))}
5755
</ErrorSummary.List>
5856
</ErrorSummary>

0 commit comments

Comments
 (0)