fix(input): validate on input when field is touched

Closes #171
mdauner · Sep 5, 2020 · 4019fe6 · 4019fe6
1 parent 4d31d9d
commit 4019fe6
Show file tree

Hide file tree

Showing 5 changed files with 1,041 additions and 608 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   transform: {
     '^.+\\.m?js$': 'babel-jest',
-    '^.+\\.svelte$': 'jest-transform-svelte',
+    "^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
   },
   transformIgnorePatterns: [
     '/node_modules/(?!(lodash-es|svelte-writable-derived)).+\\.m?js$',

diff --git a/package.json b/package.json
@@ -9,25 +9,26 @@
   "module": "dist/index.min.mjs",
   "main": "dist/index.min.js",
   "devDependencies": {
-    "@babel/core": "~7.8.7",
+    "@babel/core": "~7.11.6",
     "@babel/plugin-syntax-dynamic-import": "~7.8.3",
-    "@babel/plugin-transform-runtime": "~7.8.3",
-    "@babel/preset-env": "~7.8.7",
+    "@babel/plugin-transform-runtime": "~7.11.5",
+    "@babel/preset-env": "~7.11.5",
     "@commitlint/cli": "~8.3.5",
     "@commitlint/config-conventional": "~8.3.4",
-    "@testing-library/jest-dom": "~5.1.1",
-    "@testing-library/svelte": "~1.11.0",
+    "@testing-library/dom": "^7.24.1",
+    "@testing-library/jest-dom": "~5.11.4",
+    "@testing-library/svelte": "~3.0.0",
+    "@testing-library/user-event": "^12.1.3",
     "@types/jest": "~25.1.3",
     "autoprefixer": "~9.7.4",
-    "babel-jest": "~25.1.0",
+    "babel-jest": "~26.3.0",
     "cz-conventional-changelog": "~3.1.0",
     "eslint": "~6.8.0",
     "eslint-config-prettier": "~6.10.00",
     "eslint-plugin-jest": "~23.8.1",
     "eslint-plugin-svelte3": "~2.7.3",
     "husky": "~4.2.3",
     "jest": "~25.1.0",
-    "jest-transform-svelte": "~2.1.1",
     "lint-staged": "~10.0.8",
     "node-sass": "~4.13.1",
     "npm-run-all": "~4.1.5",
@@ -45,6 +46,7 @@
     "semantic-release": "~17.0.4",
     "sirv-cli": "~0.4.5",
     "svelte": "~3.20.0",
+    "svelte-jester": "^1.1.5",
     "svelte-preprocess": "~3.4.0",
     "yup": "~0.28.2"
   },

diff --git a/src/components/Input.svelte b/src/components/Input.svelte
@@ -34,6 +34,7 @@
       value={get($values, name)}
       on:blur={onBlur}
       on:change={onChange}
+      on:input={get($touched, name) && onChange}
       {...$$restProps} />
   {:else}
     <input
@@ -43,6 +44,7 @@
       value={get($values, name)}
       on:blur={onBlur}
       on:change={onChange}
+      on:input={get($touched, name) && onChange}
       {...$$restProps} />
   {/if}
   {#if get($touched, name) && get($errors, name)}

diff --git a/tests/Input/Input.spec.js b/tests/Input/Input.spec.js
@@ -1,5 +1,6 @@
 import App from './TestApp.svelte';
-import { fireEvent, wait } from '@testing-library/svelte';
+import { fireEvent, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
 import * as yup from 'yup';
 import { render } from '../utils';
 
@@ -33,6 +34,33 @@ describe('Input', () => {
     });
   });
 
+  it('validates on input if field is touched', async () => {
+    const schema = yup.object().shape({
+      email: yup.string().min(4),
+    });
+    const { component, getByPlaceholderText } = await render(App, {
+      props: { schema },
+    });
+
+    const emailInput = getByPlaceholderText('Email');
+
+    await fireEvent.change(emailInput, {
+      target: { value: 'pas' },
+    });
+
+    await waitFor(() =>
+      expect(component.form.$capture_state().$errors.email).toEqual(
+        'email must be at least 4 characters'
+      )
+    );
+
+    userEvent.type(emailInput, 's');
+
+    await waitFor(() =>
+      expect(component.form.$capture_state().$errors).toEqual({})
+    );
+  });
+
   it('validates on change if validateOnChange is true', async () => {
     const schema = yup.object().shape({
       email: yup.string().email(),
@@ -46,11 +74,12 @@ describe('Input', () => {
     await fireEvent.change(emailInput, {
       target: { value: 'invalid value' },
     });
-    await wait();
 
-    expect(component.form.$capture_state().$errors).toEqual({
-      email: 'email must be a valid email',
-    });
+    await waitFor(() =>
+      expect(component.form.$capture_state().$errors).toEqual({
+        email: 'email must be a valid email',
+      })
+    );
   });
 
   it('does not validate on change if validateOnChange is false', async () => {
@@ -66,9 +95,10 @@ describe('Input', () => {
     await fireEvent.change(emailInput, {
       target: { value: 'invalid value' },
     });
-    await wait();
 
-    expect(component.form.$capture_state().$errors).toEqual({});
+    await waitFor(() =>
+      expect(component.form.$capture_state().$errors).toEqual({})
+    );
   });
 
   it('validates on blur if validateOnBlur is true', async () => {
@@ -85,11 +115,12 @@ describe('Input', () => {
       target: { value: 'invalid value' },
     });
     await fireEvent.blur(emailInput);
-    await wait();
 
-    expect(component.form.$capture_state().$errors).toEqual({
-      email: 'email must be a valid email',
-    });
+    await waitFor(() =>
+      expect(component.form.$capture_state().$errors).toEqual({
+        email: 'email must be a valid email',
+      })
+    );
   });
 
   it('does not validate on blur if validateOnBlur is false', async () => {
@@ -106,8 +137,10 @@ describe('Input', () => {
       target: { value: 'invalid value' },
     });
     await fireEvent.blur(emailInput);
-    await wait();
-    expect(component.form.$capture_state().$errors).toEqual({});
+
+    await waitFor(() =>
+      expect(component.form.$capture_state().$errors).toEqual({})
+    );
   });
 
   it('matches snapshot', async () => {