Skip to content

Commit 2b57364

Browse files
tkrotofftkrotoff
committed
Cosmetic improvements on unit tests
1 parent 815084f commit 2b57364

File tree

11 files changed

+519
-477
lines changed

11 files changed

+519
-477
lines changed

‎examples/Bootstrap4/App.test.e2e.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
// @ts-check
2+
13
import 'regenerator-runtime/runtime';
24

35
jest.setTimeout(20000); // 20s
46

57
function indent(text, indentation) {
6-
// [Add a char to the start of each line in JavaScript using regular expression](https://stackoverflow.com/q/11939575)
7-
// [Trim trailing spaces before newlines in a single multi-line string in JavaScript](https://stackoverflow.com/q/5568797)
8-
return text.replace(/^/gm, indentation).replace(/[^\S\n\r]+$/gm, '');
8+
return (
9+
text
10+
// [Add a char to the start of each line in JavaScript using regular expression](https://stackoverflow.com/q/11939575)
11+
.replace(/^/gm, indentation)
12+
// [Trim trailing spaces before newlines in a single multi-line string in JavaScript](https://stackoverflow.com/q/5568797)
13+
.replace(/[^\S\n]+$/gm, '')
14+
);
915
}
1016

1117
beforeEach(async () => {

‎examples/Password/App.test.e2e.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
jest.setTimeout(20000); // 20s
33

44
function indent(text: string, indentation: string) {
5-
// [Add a char to the start of each line in JavaScript using regular expression](https://stackoverflow.com/q/11939575)
6-
// [Trim trailing spaces before newlines in a single multi-line string in JavaScript](https://stackoverflow.com/q/5568797)
7-
return text.replace(/^/gm, indentation).replace(/[^\S\n\r]+$/gm, '');
5+
return (
6+
text
7+
// [Add a char to the start of each line in JavaScript using regular expression](https://stackoverflow.com/q/11939575)
8+
.replace(/^/gm, indentation)
9+
// [Trim trailing spaces before newlines in a single multi-line string in JavaScript](https://stackoverflow.com/q/5568797)
10+
.replace(/[^\S\n]+$/gm, '')
11+
);
812
}
913

1014
beforeEach(async () => {

‎packages/react-form-with-constraints-bootstrap4/src/Bootstrap.test.tsx‎

Lines changed: 62 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import * as React from 'react';
22
import { mount } from 'enzyme';
33

4-
import { beautifyHtml } from '../../react-form-with-constraints/src/beautifyHtml';
4+
import { dBlock, formatHTML, key, keys } from '../../react-form-with-constraints/src/formatHTML';
55
import { validValidityState } from '../../react-form-with-constraints/src/InputElementMock';
66
import { SignUp } from './SignUp';
77

88
const flushPromises = () => new Promise(resolve => setImmediate(resolve));
99

10+
const error = 'class="invalid-feedback"';
11+
const warning = 'class="warning-feedback"';
12+
const info = 'class="info-feedback"';
13+
const whenValid = 'class="valid-feedback"';
14+
1015
describe('FormWithConstraints', () => {
1116
test('change inputs', async () => {
1217
const wrapper = mount(<SignUp />);
@@ -153,22 +158,22 @@ describe('FormWithConstraints', () => {
153158
]);
154159

155160
await flushPromises();
156-
expect(beautifyHtml(wrapper.html(), ' ')).toEqual(`\
161+
expect(formatHTML(wrapper.html(), ' ')).toEqual(`\
157162
<form>
158163
<input name="username" class="form-control is-invalid">
159-
<span data-feedbacks="0">
160-
<span data-feedback="0.3" class="invalid-feedback" style="display: block;">Username 'john' already taken, choose another</span>
164+
<span ${keys}="0">
165+
<span ${key}="0.3" ${error} ${dBlock}>Username 'john' already taken, choose another</span>
161166
</span>
162167
<input type="password" name="password" class="form-control is-warning is-valid">
163-
<span data-feedbacks="1">
164-
<span data-feedback="1.3" class="warning-feedback" style="display: block;">Should contain small letters</span>
165-
<span data-feedback="1.4" class="warning-feedback" style="display: block;">Should contain capital letters</span>
166-
<span data-feedback="1.5" class="warning-feedback" style="display: block;">Should contain special characters</span>
167-
<span data-feedback="1.6" class="valid-feedback" style="display: block;">Looks good!</span>
168+
<span ${keys}="1">
169+
<span ${key}="1.3" ${warning} ${dBlock}>Should contain small letters</span>
170+
<span ${key}="1.4" ${warning} ${dBlock}>Should contain capital letters</span>
171+
<span ${key}="1.5" ${warning} ${dBlock}>Should contain special characters</span>
172+
<span ${key}="1.6" ${whenValid} ${dBlock}>Looks good!</span>
168173
</span>
169174
<input type="password" name="passwordConfirm" class="is-invalid">
170-
<span data-feedbacks="2">
171-
<span data-feedback="2.0" class="invalid-feedback" style="display: block;">Not the same password</span>
175+
<span ${keys}="2">
176+
<span ${key}="2.0" ${error} ${dBlock}>Not the same password</span>
172177
</span>
173178
</form>`);
174179

@@ -186,35 +191,35 @@ describe('FormWithConstraints', () => {
186191
await signUp.form!.validateFields();
187192

188193
await flushPromises();
189-
expect(beautifyHtml(wrapper.html(), ' ')).toEqual(`\
194+
expect(formatHTML(wrapper.html(), ' ')).toEqual(`\
190195
<form>
191196
<input name="username" class="form-control is-invalid">
192-
<span data-feedbacks="0">
193-
<span data-feedback="0.3" class="invalid-feedback" style="display: block;">Username 'john' already taken, choose another</span>
197+
<span ${keys}="0">
198+
<span ${key}="0.3" ${error} ${dBlock}>Username 'john' already taken, choose another</span>
194199
</span>
195200
<input type="password" name="password" class="form-control is-warning is-valid">
196-
<span data-feedbacks="1">
197-
<span data-feedback="1.3" class="warning-feedback" style="display: block;">Should contain small letters</span>
198-
<span data-feedback="1.4" class="warning-feedback" style="display: block;">Should contain capital letters</span>
199-
<span data-feedback="1.5" class="warning-feedback" style="display: block;">Should contain special characters</span>
200-
<span data-feedback="1.6" class="valid-feedback" style="display: block;">Looks good!</span>
201+
<span ${keys}="1">
202+
<span ${key}="1.3" ${warning} ${dBlock}>Should contain small letters</span>
203+
<span ${key}="1.4" ${warning} ${dBlock}>Should contain capital letters</span>
204+
<span ${key}="1.5" ${warning} ${dBlock}>Should contain special characters</span>
205+
<span ${key}="1.6" ${whenValid} ${dBlock}>Looks good!</span>
201206
</span>
202207
<input type="password" name="passwordConfirm" class="is-invalid">
203-
<span data-feedbacks="2">
204-
<span data-feedback="2.0" class="invalid-feedback" style="display: block;">Not the same password</span>
208+
<span ${keys}="2">
209+
<span ${key}="2.0" ${error} ${dBlock}>Not the same password</span>
205210
</span>
206211
</form>`);
207212

208213
signUp.form!.resetFields();
209214

210-
expect(beautifyHtml(wrapper.html(), ' ')).toEqual(`\
215+
expect(formatHTML(wrapper.html(), ' ')).toEqual(`\
211216
<form>
212217
<input name="username" class="form-control">
213-
<span data-feedbacks="0"></span>
218+
<span ${keys}="0"></span>
214219
<input type="password" name="password" class="form-control">
215-
<span data-feedbacks="1"></span>
220+
<span ${keys}="1"></span>
216221
<input type="password" name="passwordConfirm">
217-
<span data-feedbacks="2"></span>
222+
<span ${keys}="2"></span>
218223
</form>`);
219224

220225
signUp.username!.value = 'jimmy';
@@ -224,23 +229,23 @@ describe('FormWithConstraints', () => {
224229
await signUp.form!.validateFields();
225230

226231
await flushPromises();
227-
expect(beautifyHtml(wrapper.html(), ' ')).toEqual(`\
232+
expect(formatHTML(wrapper.html(), ' ')).toEqual(`\
228233
<form>
229234
<input name="username" class="form-control is-info is-valid">
230-
<span data-feedbacks="0">
231-
<span data-feedback="0.4" class="info-feedback" style="display: block;">Username 'jimmy' available</span>
232-
<span data-feedback="0.2" class="valid-feedback" style="display: block;">Looks good!</span>
235+
<span ${keys}="0">
236+
<span ${key}="0.4" ${info} ${dBlock}>Username 'jimmy' available</span>
237+
<span ${key}="0.2" ${whenValid} ${dBlock}>Looks good!</span>
233238
</span>
234239
<input type="password" name="password" class="form-control is-warning is-valid">
235-
<span data-feedbacks="1">
236-
<span data-feedback="1.3" class="warning-feedback" style="display: block;">Should contain small letters</span>
237-
<span data-feedback="1.4" class="warning-feedback" style="display: block;">Should contain capital letters</span>
238-
<span data-feedback="1.5" class="warning-feedback" style="display: block;">Should contain special characters</span>
239-
<span data-feedback="1.6" class="valid-feedback" style="display: block;">Looks good!</span>
240+
<span ${keys}="1">
241+
<span ${key}="1.3" ${warning} ${dBlock}>Should contain small letters</span>
242+
<span ${key}="1.4" ${warning} ${dBlock}>Should contain capital letters</span>
243+
<span ${key}="1.5" ${warning} ${dBlock}>Should contain special characters</span>
244+
<span ${key}="1.6" ${whenValid} ${dBlock}>Looks good!</span>
240245
</span>
241246
<input type="password" name="passwordConfirm" class="is-valid">
242-
<span data-feedbacks="2">
243-
<span data-feedback="2.1" class="valid-feedback" style="display: block;">Looks good!</span>
247+
<span ${keys}="2">
248+
<span ${key}="2.1" ${whenValid} ${dBlock}>Looks good!</span>
244249
</span>
245250
</form>`);
246251

@@ -326,23 +331,23 @@ describe('Async', () => {
326331
]);
327332

328333
await flushPromises();
329-
expect(beautifyHtml(wrapper.html(), ' ')).toEqual(`\
334+
expect(formatHTML(wrapper.html(), ' ')).toEqual(`\
330335
<form>
331336
<input name="username" class="form-control is-info is-valid">
332-
<span data-feedbacks="0">
333-
<span data-feedback="0.3" class="info-feedback" style="display: block;">Username 'jimmy' available</span>
334-
<span data-feedback="0.2" class="valid-feedback" style="display: block;">Looks good!</span>
337+
<span ${keys}="0">
338+
<span ${key}="0.3" ${info} ${dBlock}>Username 'jimmy' available</span>
339+
<span ${key}="0.2" ${whenValid} ${dBlock}>Looks good!</span>
335340
</span>
336341
<input type="password" name="password" class="form-control is-warning is-valid">
337-
<span data-feedbacks="1">
338-
<span data-feedback="1.3" class="warning-feedback" style="display: block;">Should contain small letters</span>
339-
<span data-feedback="1.4" class="warning-feedback" style="display: block;">Should contain capital letters</span>
340-
<span data-feedback="1.5" class="warning-feedback" style="display: block;">Should contain special characters</span>
341-
<span data-feedback="1.6" class="valid-feedback" style="display: block;">Looks good!</span>
342+
<span ${keys}="1">
343+
<span ${key}="1.3" ${warning} ${dBlock}>Should contain small letters</span>
344+
<span ${key}="1.4" ${warning} ${dBlock}>Should contain capital letters</span>
345+
<span ${key}="1.5" ${warning} ${dBlock}>Should contain special characters</span>
346+
<span ${key}="1.6" ${whenValid} ${dBlock}>Looks good!</span>
342347
</span>
343348
<input type="password" name="passwordConfirm" class="is-valid">
344-
<span data-feedbacks="2">
345-
<span data-feedback="2.1" class="valid-feedback" style="display: block;">Looks good!</span>
349+
<span ${keys}="2">
350+
<span ${key}="2.1" ${whenValid} ${dBlock}>Looks good!</span>
346351
</span>
347352
</form>`);
348353

@@ -424,22 +429,22 @@ describe('Async', () => {
424429
]);
425430

426431
await flushPromises();
427-
expect(beautifyHtml(wrapper.html(), ' ')).toEqual(`\
432+
expect(formatHTML(wrapper.html(), ' ')).toEqual(`\
428433
<form>
429434
<input name="username" class="form-control is-invalid">
430-
<span data-feedbacks="0">
431-
<span data-feedback="0.3" class="invalid-feedback" style="display: block;">Something wrong with username 'error'</span>
435+
<span ${keys}="0">
436+
<span ${key}="0.3" ${error} ${dBlock}>Something wrong with username 'error'</span>
432437
</span>
433438
<input type="password" name="password" class="form-control is-warning is-valid">
434-
<span data-feedbacks="1">
435-
<span data-feedback="1.3" class="warning-feedback" style="display: block;">Should contain small letters</span>
436-
<span data-feedback="1.4" class="warning-feedback" style="display: block;">Should contain capital letters</span>
437-
<span data-feedback="1.5" class="warning-feedback" style="display: block;">Should contain special characters</span>
438-
<span data-feedback="1.6" class="valid-feedback" style="display: block;">Looks good!</span>
439+
<span ${keys}="1">
440+
<span ${key}="1.3" ${warning} ${dBlock}>Should contain small letters</span>
441+
<span ${key}="1.4" ${warning} ${dBlock}>Should contain capital letters</span>
442+
<span ${key}="1.5" ${warning} ${dBlock}>Should contain special characters</span>
443+
<span ${key}="1.6" ${whenValid} ${dBlock}>Looks good!</span>
439444
</span>
440445
<input type="password" name="passwordConfirm" class="is-invalid">
441-
<span data-feedbacks="2">
442-
<span data-feedback="2.0" class="invalid-feedback" style="display: block;">Not the same password</span>
446+
<span ${keys}="2">
447+
<span ${key}="2.0" ${error} ${dBlock}>Not the same password</span>
443448
</span>
444449
</form>`);
445450

0 commit comments

Comments
 (0)