Skip to content

Commit 744f1ea

Browse files
bhansell1bhansell1
authored
CCM-9749: Client side validation (#454)
1 parent 965e967 commit 744f1ea

File tree

41 files changed

+3299
-112
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+3299
-112
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
"editor.codeActionsOnSave": {
1010
"source.fixAll.eslint": "explicit"
1111
},
12-
"eslint.codeActionsOnSave.mode": "problems",
12+
"eslint.codeActionsOnSave.mode": "problems"
1313
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,13 @@ describe('Choose template page', () => {
8383
);
8484
expect(container.asFragment()).toMatchSnapshot();
8585
});
86+
87+
test('Client-side validation triggers', () => {
88+
const container = render(
89+
<ChooseTemplate templateTypes={TEMPLATE_TYPE_LIST} />
90+
);
91+
const submitButton = screen.getByTestId('submit-button');
92+
fireEvent.click(submitButton);
93+
expect(container.asFragment()).toMatchSnapshot();
94+
});
8695
});

‎frontend/src/__tests__/components/forms/ChooseTemplate/__snapshots__/ChooseTemplate.test.tsx.snap‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,218 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Choose template page Client-side validation triggers 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="nhsuk-back-link"
7+
>
8+
<a
9+
class="nhsuk-back-link__link"
10+
href="/templates/message-templates"
11+
>
12+
<svg
13+
aria-hidden="true"
14+
class="nhsuk-icon nhsuk-icon__chevron-left"
15+
height="24"
16+
viewBox="0 0 24 24"
17+
width="24"
18+
xmlns="http://www.w3.org/2000/svg"
19+
>
20+
<path
21+
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"
22+
/>
23+
</svg>
24+
Back to all templates
25+
</a>
26+
</div>
27+
<main
28+
class="nhsuk-main-wrapper"
29+
id="maincontent"
30+
role="main"
31+
>
32+
<div
33+
aria-labelledby="error-summary-title"
34+
class="nhsuk-error-summary"
35+
role="alert"
36+
tabindex="-1"
37+
>
38+
<h2
39+
class="nhsuk-error-summary__title"
40+
data-testid="error-summary"
41+
id="error-summary-title"
42+
>
43+
There is a problem
44+
</h2>
45+
<ul
46+
class="nhsuk-list nhsuk-error-summary__list"
47+
>
48+
<li>
49+
<a
50+
href="#templateType"
51+
>
52+
Select a template type
53+
</a>
54+
</li>
55+
</ul>
56+
</div>
57+
<form
58+
action="/action"
59+
>
60+
<input
61+
name="form-id"
62+
readonly=""
63+
type="hidden"
64+
value="choose-a-template-type"
65+
/>
66+
<input
67+
name="csrf_token"
68+
readonly=""
69+
type="hidden"
70+
value="no_token"
71+
/>
72+
<div
73+
class="nhsuk-form-group nhsuk-form-group--error"
74+
>
75+
<fieldset
76+
class="nhsuk-fieldset"
77+
>
78+
<legend
79+
class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l"
80+
data-testid="templateType-form__legend"
81+
>
82+
<h1
83+
class="nhsuk-fieldset__heading"
84+
>
85+
Choose a template type to create
86+
</h1>
87+
</legend>
88+
<p>
89+
<a
90+
href="/features"
91+
rel="noopener noreferrer"
92+
target="_blank"
93+
>
94+
Learn more about message channels (opens in a new tab)
95+
</a>
96+
</p>
97+
<div
98+
class="nhsuk-form-group nhsuk-form-group--error"
99+
>
100+
<div
101+
class="nhsuk-hint"
102+
id="templateType--hint"
103+
>
104+
Select one option
105+
</div>
106+
<span
107+
class="nhsuk-error-message"
108+
id="templateType--error-message"
109+
>
110+
<span
111+
class="nhsuk-u-visually-hidden"
112+
>
113+
Error:
114+
</span>
115+
Select a template type
116+
</span>
117+
<div
118+
aria-describedby="templateType--hint templateType--error-message"
119+
class="nhsuk-radios"
120+
id="templateType"
121+
>
122+
<div
123+
class="nhsuk-radios__item"
124+
>
125+
<input
126+
class="nhsuk-radios__input"
127+
data-testid="NHS_APP-radio"
128+
id="templateType-NHS_APP"
129+
name="templateType"
130+
type="radio"
131+
value="NHS_APP"
132+
/>
133+
<label
134+
class="nhsuk-label nhsuk-radios__label"
135+
for="templateType-NHS_APP"
136+
id="templateType-NHS_APP--label"
137+
>
138+
NHS App message
139+
</label>
140+
</div>
141+
<div
142+
class="nhsuk-radios__item"
143+
>
144+
<input
145+
class="nhsuk-radios__input"
146+
data-testid="EMAIL-radio"
147+
id="templateType-EMAIL"
148+
name="templateType"
149+
type="radio"
150+
value="EMAIL"
151+
/>
152+
<label
153+
class="nhsuk-label nhsuk-radios__label"
154+
for="templateType-EMAIL"
155+
id="templateType-EMAIL--label"
156+
>
157+
Email
158+
</label>
159+
</div>
160+
<div
161+
class="nhsuk-radios__item"
162+
>
163+
<input
164+
class="nhsuk-radios__input"
165+
data-testid="SMS-radio"
166+
id="templateType-SMS"
167+
name="templateType"
168+
type="radio"
169+
value="SMS"
170+
/>
171+
<label
172+
class="nhsuk-label nhsuk-radios__label"
173+
for="templateType-SMS"
174+
id="templateType-SMS--label"
175+
>
176+
Text message (SMS)
177+
</label>
178+
</div>
179+
<div
180+
class="nhsuk-radios__item"
181+
>
182+
<input
183+
class="nhsuk-radios__input"
184+
data-testid="LETTER-radio"
185+
id="templateType-LETTER"
186+
name="templateType"
187+
type="radio"
188+
value="LETTER"
189+
/>
190+
<label
191+
class="nhsuk-label nhsuk-radios__label"
192+
for="templateType-LETTER"
193+
id="templateType-LETTER--label"
194+
>
195+
Letter
196+
</label>
197+
</div>
198+
</div>
199+
</div>
200+
</fieldset>
201+
</div>
202+
<button
203+
aria-disabled="false"
204+
class="nhsuk-button"
205+
data-testid="submit-button"
206+
id="choose-a-template-type-submit-button"
207+
type="submit"
208+
>
209+
Continue
210+
</button>
211+
</form>
212+
</main>
213+
</DocumentFragment>
214+
`;
215+
3216
exports[`Choose template page renders error component 1`] = `
4217
<DocumentFragment>
5218
<div

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,4 +91,17 @@ describe('Choose template page', () => {
9191
);
9292
expect(container.asFragment()).toMatchSnapshot();
9393
});
94+
95+
test('Client-side validation triggers', () => {
96+
const container = render(
97+
<CopyTemplate
98+
template={mockDeep<
99+
ValidatedTemplateDto & { templateType: ValidCopyType }
100+
>()}
101+
/>
102+
);
103+
const submitButton = screen.getByTestId('submit-button');
104+
fireEvent.click(submitButton);
105+
expect(container.asFragment()).toMatchSnapshot();
106+
});
94107
});

0 commit comments

Comments
 (0)