Skip to content

Commit 0345f73

Browse files
alexnuttallalexnuttall
committed
CCM-8993: test for new component
1 parent 20f4308 commit 0345f73

File tree

8 files changed

+244
-72
lines changed

8 files changed

+244
-72
lines changed

‎frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎frontend/src/__tests__/app/preview-letter-template/page.test.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { redirect } from 'next/navigation';
77
import { getTemplate } from '@utils/form-actions';
88
import { Language, LetterType, TemplateDto } from 'nhs-notify-backend-client';
99
import { EMAIL_TEMPLATE, NHS_APP_TEMPLATE, SMS_TEMPLATE } from '../../helpers';
10+
import { PreviewLetterTemplate } from '@organisms/PreviewLetterTemplate/PreviewLetterTemplate';
1011

1112
jest.mock('@utils/form-actions');
1213
jest.mock('next/navigation');
@@ -42,6 +43,12 @@ describe('PreviewLetterTemplatePage', () => {
4243
jest.resetAllMocks();
4344
});
4445

46+
const letterTemplate: LetterTemplate = {
47+
...templateDTO,
48+
templateType: 'LETTER',
49+
templateStatus: 'NOT_YET_SUBMITTED',
50+
};
51+
4552
it('should load page', async () => {
4653
getTemplateMock.mockResolvedValueOnce(templateDTO);
4754

@@ -51,7 +58,7 @@ describe('PreviewLetterTemplatePage', () => {
5158
}),
5259
});
5360

54-
expect(page).toMatchSnapshot();
61+
expect(page).toEqual(<PreviewLetterTemplate template={letterTemplate} />);
5562
});
5663

5764
it('should redirect to invalid-template when no template is found', async () => {

frontend/src/__tests__/components/organisms/PreviewTemplate.test.tsx renamed to frontend/src/__tests__/components/organisms/PreviewDigitalTemplate.test.tsx

File renamed without changes.

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { PreviewLetterTemplate } from '@organisms/PreviewLetterTemplate/PreviewLetterTemplate';
3+
4+
describe('PreviewLetterTemplate component', () => {
5+
it('matches snapshot', () => {
6+
const container = render(
7+
<PreviewLetterTemplate
8+
template={{
9+
id: '53525D03-1BC1-4563-ABF9-A74FF04142AF',
10+
name: 'letter',
11+
templateType: 'LETTER',
12+
templateStatus: 'NOT_YET_SUBMITTED',
13+
letterType: 'q4',
14+
language: 'ar',
15+
files: {
16+
pdfTemplate: {
17+
fileName: 'file.pdf',
18+
currentVersion: 'a',
19+
virusScanStatus: 'PASSED',
20+
},
21+
},
22+
createdAt: '2025-04-02T09:33:25.729Z',
23+
updatedAt: '2025-04-02T09:33:25.729Z',
24+
}}
25+
/>
26+
);
27+
28+
expect(container.asFragment()).toMatchSnapshot();
29+
});
30+
31+
it('renders component correctly', () => {
32+
render(
33+
<PreviewLetterTemplate
34+
template={{
35+
id: '2DB31920-47E7-425C-8094-76AF0266823D',
36+
name: 'letter',
37+
templateType: 'LETTER',
38+
templateStatus: 'PENDING_VALIDATION',
39+
letterType: 'x0',
40+
language: 'en',
41+
files: {
42+
pdfTemplate: {
43+
fileName: 'file.pdf',
44+
currentVersion: 'a',
45+
virusScanStatus: 'PENDING',
46+
},
47+
},
48+
createdAt: '2025-04-02T09:33:25.729Z',
49+
updatedAt: '2025-04-02T09:33:25.729Z',
50+
}}
51+
/>
52+
);
53+
54+
expect(screen.getByTestId('submit-button')).toHaveTextContent(
55+
'Submit template'
56+
);
57+
});
58+
});

frontend/src/__tests__/components/organisms/__snapshots__/PreviewTemplate.test.tsx.snap renamed to frontend/src/__tests__/components/organisms/__snapshots__/PreviewDigitalTemplate.test.tsx.snap

File renamed without changes.

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

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`PreviewLetterTemplate component matches snapshot 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="nhsuk-back-link"
7+
>
8+
<a
9+
class="nhsuk-back-link__link"
10+
href="/templates/manage-templates"
11+
id="back-link"
12+
>
13+
<svg
14+
aria-hidden="true"
15+
class="nhsuk-icon nhsuk-icon__chevron-left"
16+
height="24"
17+
viewBox="0 0 24 24"
18+
width="24"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<path
22+
d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"
23+
/>
24+
</svg>
25+
Back to all templates
26+
</a>
27+
</div>
28+
<main
29+
class="nhsuk-main-wrapper"
30+
id="maincontent"
31+
role="main"
32+
>
33+
<div
34+
class="nhsuk-grid-row"
35+
>
36+
<div
37+
class="nhsuk-grid-column-full"
38+
>
39+
<h1
40+
class="preview__heading"
41+
data-testid="preview-message__heading"
42+
>
43+
letter
44+
</h1>
45+
<div
46+
class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
47+
>
48+
<div
49+
class="preview"
50+
>
51+
<div
52+
class="nhsuk-grid-row preview__row"
53+
>
54+
<div
55+
class="nhsuk-grid-column-one-third preview__col"
56+
>
57+
<div
58+
class="preview__col_heading"
59+
>
60+
Template ID
61+
</div>
62+
</div>
63+
<div
64+
class="nhsuk-grid-column-two-thirds col"
65+
>
66+
53525D03-1BC1-4563-ABF9-A74FF04142AF
67+
</div>
68+
</div>
69+
<div
70+
class="nhsuk-grid-row preview__row"
71+
>
72+
<div
73+
class="nhsuk-grid-column-one-third preview__col"
74+
>
75+
<div
76+
class="preview__col_heading"
77+
>
78+
Type
79+
</div>
80+
</div>
81+
<div
82+
class="nhsuk-grid-column-two-thirds col"
83+
>
84+
Letter - Arabic
85+
</div>
86+
</div>
87+
<div
88+
class="nhsuk-grid-row preview__row"
89+
>
90+
<div
91+
class="nhsuk-grid-column-one-third preview__col"
92+
>
93+
<div
94+
class="preview__col_heading"
95+
>
96+
Status
97+
</div>
98+
</div>
99+
<div
100+
class="nhsuk-grid-column-two-thirds col"
101+
>
102+
<strong
103+
class="nhsuk-tag"
104+
>
105+
Not yet submitted
106+
</strong>
107+
</div>
108+
</div>
109+
<div
110+
class="nhsuk-grid-row preview__row"
111+
>
112+
<div
113+
class="nhsuk-grid-column-one-third preview__col"
114+
>
115+
<div
116+
class="preview__col_heading"
117+
>
118+
Template file
119+
</div>
120+
</div>
121+
<div
122+
class="nhsuk-grid-column-two-thirds col"
123+
>
124+
<div
125+
class="container"
126+
>
127+
<svg
128+
class="icon"
129+
fill="none"
130+
height="26"
131+
viewBox="0 0 20 26"
132+
width="20"
133+
xmlns="http://www.w3.org/2000/svg"
134+
>
135+
<path
136+
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
137+
fill="#4C6272"
138+
/>
139+
</svg>
140+
<p
141+
class="text"
142+
>
143+
file.pdf
144+
</p>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
<a
151+
aria-disabled="false"
152+
class="nhsuk-button"
153+
data-testid="submit-button"
154+
draggable="false"
155+
href="/templates/submit-letter-template/53525D03-1BC1-4563-ABF9-A74FF04142AF"
156+
id="preview-letter-template-submit-button"
157+
role="button"
158+
>
159+
Submit template
160+
</a>
161+
<p>
162+
<a
163+
href="/manage-templates"
164+
>
165+
Back to all templates
166+
</a>
167+
</p>
168+
</div>
169+
</div>
170+
</main>
171+
</DocumentFragment>
172+
`;

‎frontend/src/app/preview-letter-template/[templateId]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const PreviewLetterTemplatePage = async (props: PageProps) => {
1919
return redirect('/invalid-template', RedirectType.replace);
2020
}
2121

22-
return <PreviewLetterTemplate initialState={validatedTemplate} />;
22+
return <PreviewLetterTemplate template={validatedTemplate} />;
2323
};
2424

2525
export default PreviewLetterTemplatePage;

‎frontend/src/components/organisms/PreviewLetterTemplate/PreviewLetterTemplate.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,15 @@
33
import Link from 'next/link';
44
import { PreviewTemplateDetails } from '@molecules/PreviewTemplateDetails';
55
import content from '@content/content';
6-
import type {
7-
LetterTemplate,
8-
PageComponentProps,
9-
} from 'nhs-notify-web-template-management-utils';
6+
import type { LetterTemplate } from 'nhs-notify-web-template-management-utils';
107
import { getBasePath } from '@utils/get-base-path';
118
import { BackLink } from 'nhsuk-react-components';
129
import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
1310
import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
1411

1512
export function PreviewLetterTemplate({
16-
initialState,
17-
}: Readonly<PageComponentProps<LetterTemplate>>) {
13+
template,
14+
}: Readonly<{ template: LetterTemplate }>) {
1815
const { backLinkText, buttonText } = content.components.previewLetterTemplate;
1916
const basePath = getBasePath();
2017

@@ -26,11 +23,11 @@ export function PreviewLetterTemplate({
2623
<NHSNotifyMain>
2724
<div className='nhsuk-grid-row'>
2825
<div className='nhsuk-grid-column-full'>
29-
<PreviewTemplateDetails.Letter template={initialState} />
26+
<PreviewTemplateDetails.Letter template={template} />
3027
<NHSNotifyButton
3128
data-testid='submit-button'
3229
id='preview-letter-template-submit-button'
33-
href={`${basePath}/submit-letter-template/${initialState.id}`}
30+
href={`${basePath}/submit-letter-template/${template.id}`}
3431
>
3532
{buttonText}
3633
</NHSNotifyButton>

0 commit comments

Comments
 (0)