Skip to content

Commit 4019fe6

Browse files
committed
fix(input): validate on input when field is touched
Closes #171
1 parent 4d31d9d commit 4019fe6

File tree

5 files changed

+1041
-608
lines changed

5 files changed

+1041
-608
lines changed

jest.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
22
transform: {
33
'^.+\\.m?js$': 'babel-jest',
4-
'^.+\\.svelte$': 'jest-transform-svelte',
4+
"^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
55
},
66
transformIgnorePatterns: [
77
'/node_modules/(?!(lodash-es|svelte-writable-derived)).+\\.m?js$',

package.json

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,26 @@
99
"module": "dist/index.min.mjs",
1010
"main": "dist/index.min.js",
1111
"devDependencies": {
12-
"@babel/core": "~7.8.7",
12+
"@babel/core": "~7.11.6",
1313
"@babel/plugin-syntax-dynamic-import": "~7.8.3",
14-
"@babel/plugin-transform-runtime": "~7.8.3",
15-
"@babel/preset-env": "~7.8.7",
14+
"@babel/plugin-transform-runtime": "~7.11.5",
15+
"@babel/preset-env": "~7.11.5",
1616
"@commitlint/cli": "~8.3.5",
1717
"@commitlint/config-conventional": "~8.3.4",
18-
"@testing-library/jest-dom": "~5.1.1",
19-
"@testing-library/svelte": "~1.11.0",
18+
"@testing-library/dom": "^7.24.1",
19+
"@testing-library/jest-dom": "~5.11.4",
20+
"@testing-library/svelte": "~3.0.0",
21+
"@testing-library/user-event": "^12.1.3",
2022
"@types/jest": "~25.1.3",
2123
"autoprefixer": "~9.7.4",
22-
"babel-jest": "~25.1.0",
24+
"babel-jest": "~26.3.0",
2325
"cz-conventional-changelog": "~3.1.0",
2426
"eslint": "~6.8.0",
2527
"eslint-config-prettier": "~6.10.00",
2628
"eslint-plugin-jest": "~23.8.1",
2729
"eslint-plugin-svelte3": "~2.7.3",
2830
"husky": "~4.2.3",
2931
"jest": "~25.1.0",
30-
"jest-transform-svelte": "~2.1.1",
3132
"lint-staged": "~10.0.8",
3233
"node-sass": "~4.13.1",
3334
"npm-run-all": "~4.1.5",
@@ -45,6 +46,7 @@
4546
"semantic-release": "~17.0.4",
4647
"sirv-cli": "~0.4.5",
4748
"svelte": "~3.20.0",
49+
"svelte-jester": "^1.1.5",
4850
"svelte-preprocess": "~3.4.0",
4951
"yup": "~0.28.2"
5052
},

src/components/Input.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
value={get($values, name)}
3535
on:blur={onBlur}
3636
on:change={onChange}
37+
on:input={get($touched, name) && onChange}
3738
{...$$restProps} />
3839
{:else}
3940
<input
@@ -43,6 +44,7 @@
4344
value={get($values, name)}
4445
on:blur={onBlur}
4546
on:change={onChange}
47+
on:input={get($touched, name) && onChange}
4648
{...$$restProps} />
4749
{/if}
4850
{#if get($touched, name) && get($errors, name)}

tests/Input/Input.spec.js

Lines changed: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import App from './TestApp.svelte';
2-
import { fireEvent, wait } from '@testing-library/svelte';
2+
import { fireEvent, waitFor } from '@testing-library/svelte';
3+
import userEvent from '@testing-library/user-event';
34
import * as yup from 'yup';
45
import { render } from '../utils';
56

@@ -33,6 +34,33 @@ describe('Input', () => {
3334
});
3435
});
3536

37+
it('validates on input if field is touched', async () => {
38+
const schema = yup.object().shape({
39+
email: yup.string().min(4),
40+
});
41+
const { component, getByPlaceholderText } = await render(App, {
42+
props: { schema },
43+
});
44+
45+
const emailInput = getByPlaceholderText('Email');
46+
47+
await fireEvent.change(emailInput, {
48+
target: { value: 'pas' },
49+
});
50+
51+
await waitFor(() =>
52+
expect(component.form.$capture_state().$errors.email).toEqual(
53+
'email must be at least 4 characters'
54+
)
55+
);
56+
57+
userEvent.type(emailInput, 's');
58+
59+
await waitFor(() =>
60+
expect(component.form.$capture_state().$errors).toEqual({})
61+
);
62+
});
63+
3664
it('validates on change if validateOnChange is true', async () => {
3765
const schema = yup.object().shape({
3866
email: yup.string().email(),
@@ -46,11 +74,12 @@ describe('Input', () => {
4674
await fireEvent.change(emailInput, {
4775
target: { value: 'invalid value' },
4876
});
49-
await wait();
5077

51-
expect(component.form.$capture_state().$errors).toEqual({
52-
email: 'email must be a valid email',
53-
});
78+
await waitFor(() =>
79+
expect(component.form.$capture_state().$errors).toEqual({
80+
email: 'email must be a valid email',
81+
})
82+
);
5483
});
5584

5685
it('does not validate on change if validateOnChange is false', async () => {
@@ -66,9 +95,10 @@ describe('Input', () => {
6695
await fireEvent.change(emailInput, {
6796
target: { value: 'invalid value' },
6897
});
69-
await wait();
7098

71-
expect(component.form.$capture_state().$errors).toEqual({});
99+
await waitFor(() =>
100+
expect(component.form.$capture_state().$errors).toEqual({})
101+
);
72102
});
73103

74104
it('validates on blur if validateOnBlur is true', async () => {
@@ -85,11 +115,12 @@ describe('Input', () => {
85115
target: { value: 'invalid value' },
86116
});
87117
await fireEvent.blur(emailInput);
88-
await wait();
89118

90-
expect(component.form.$capture_state().$errors).toEqual({
91-
email: 'email must be a valid email',
92-
});
119+
await waitFor(() =>
120+
expect(component.form.$capture_state().$errors).toEqual({
121+
email: 'email must be a valid email',
122+
})
123+
);
93124
});
94125

95126
it('does not validate on blur if validateOnBlur is false', async () => {
@@ -106,8 +137,10 @@ describe('Input', () => {
106137
target: { value: 'invalid value' },
107138
});
108139
await fireEvent.blur(emailInput);
109-
await wait();
110-
expect(component.form.$capture_state().$errors).toEqual({});
140+
141+
await waitFor(() =>
142+
expect(component.form.$capture_state().$errors).toEqual({})
143+
);
111144
});
112145

113146
it('matches snapshot', async () => {

0 commit comments

Comments
 (0)