From d62eccef76bdd11773e66b463e0878a52282a1a1 Mon Sep 17 00:00:00 2001 From: Hassane IHAMMOUTEN Date: Thu, 27 Jun 2024 11:27:47 +0200 Subject: [PATCH] fix(tests): adding unit tests --- libs/form-builder/package.json | 3 +- .../src/lib/__tests__/formBuilder.spec.js | 61 +++++++++++++++++- package.json | 2 + yarn.lock | 64 ++++++++++++++++++- 4 files changed, 124 insertions(+), 6 deletions(-) diff --git a/libs/form-builder/package.json b/libs/form-builder/package.json index 48e59f2..69d215a 100644 --- a/libs/form-builder/package.json +++ b/libs/form-builder/package.json @@ -8,8 +8,7 @@ "react": "17.0.2 || ^18.0.0" }, "devDependencies": { - "@testing-library/react": "11.2.6", - "@testing-library/react-hooks": "7.0.2" + "@testing-library/react": "11.2.6" }, "optionalDependencies": { "@hookform/devtools": "4.0.2" diff --git a/libs/form-builder/src/lib/__tests__/formBuilder.spec.js b/libs/form-builder/src/lib/__tests__/formBuilder.spec.js index c25f632..29a8f64 100644 --- a/libs/form-builder/src/lib/__tests__/formBuilder.spec.js +++ b/libs/form-builder/src/lib/__tests__/formBuilder.spec.js @@ -1,5 +1,7 @@ /* eslint-disable */ +import '@testing-library/jest-dom'; import { act, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event' import { FormBuilder } from '../formBuilder'; const makeStep = ({ fieldsById, stepId, label }) => ({ @@ -60,12 +62,18 @@ describe('', () => { steps: { ...stepOne, ...stepTwo }, stepsById: [stepOneId, stepTwoId], }; + // aria-checked="true" const CORRECT_DICTIONARY = { - text: ({ label, ...props }) => ( + text: ({ label, errors, id, ...props }) => (
- - + + + { + !!errors ? ( + {errors.message} + ) : null + }
), checkbox: ({ label, value = false, ...props }) => ( @@ -77,6 +85,53 @@ describe('', () => { submit: ({ label }) => , }; + describe('onChangeTriggerByField behavior', () => { + it.only('should trigger validate only changed field', async () => { + await getWrapper({ + schema: { + fields: { + [fieldOneId]: { + id: fieldOneId, + type: 'text', + meta: { + label: 'bar', + }, + validation: { + required: { + key: 'required', + message: 'field is required', + value: true, + }, + } + }, + [fieldTwoId]: { + id: fieldTwoId, + type: 'text', + meta: { + label: 'foo', + }, + validation: { + required: { + key: 'required', + message: 'field is required', + value: true, + }, + } + }, + }, + steps: { ...stepOne }, + stepsById: [stepOneId, stepTwoId], + }, + dictionary: CORRECT_DICTIONARY, + onSubmit, + }); + + await userEvent.type(screen.getByLabelText('bar'), 'tesTyping'); + + expect(screen.queryByText('field is required')).not.toBeInTheDocument(); + }) + }) + describe('with bad props', () => { it('should not render if we pass no dictionary', async () => { await getWrapper({ diff --git a/package.json b/package.json index c74a955..c2fee87 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,8 @@ "@nx-plus/docusaurus": "12.2.0", "@testing-library/react": "11.2.6", "@testing-library/react-hooks": "7.0.2", + "@testing-library/user-event": "14.5.2", + "@testing-library/jest-dom": "6.4.6", "@types/debug": "4.1.7", "@types/deep-freeze": "0.1.2", "@types/jest": "26.0.24", diff --git a/yarn.lock b/yarn.lock index c55e666..154da1a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"@adobe/css-tools@^4.4.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.0.tgz#728c484f4e10df03d5a3acd0d8adcbbebff8ad63" + integrity sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ== + "@algolia/autocomplete-core@1.5.0": version "1.5.0" resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.5.0.tgz#6c91c9de7748e9c103846828a58dfe92bd4d6689" @@ -3816,7 +3821,7 @@ dependencies: prop-types "^15.6.2" -"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2": +"@docusaurus/react-loadable@5.5.2": version "5.5.2" resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce" integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ== @@ -5749,6 +5754,20 @@ lz-string "^1.4.4" pretty-format "^26.6.2" +"@testing-library/jest-dom@6.4.6": + version "6.4.6" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.6.tgz#ec1df8108651bed5475534955565bed88c6732ce" + integrity sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w== + dependencies: + "@adobe/css-tools" "^4.4.0" + "@babel/runtime" "^7.9.2" + aria-query "^5.0.0" + chalk "^3.0.0" + css.escape "^1.5.1" + dom-accessibility-api "^0.6.3" + lodash "^4.17.21" + redent "^3.0.0" + "@testing-library/react-hooks@7.0.2": version "7.0.2" resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz#3388d07f562d91e7f2431a4a21b5186062ecfee0" @@ -5768,6 +5787,11 @@ "@babel/runtime" "^7.12.5" "@testing-library/dom" "^7.28.1" +"@testing-library/user-event@14.5.2": + version "14.5.2" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd" + integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ== + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -7305,6 +7329,13 @@ aria-query@^4.2.2: "@babel/runtime" "^7.10.2" "@babel/runtime-corejs3" "^7.10.2" +aria-query@^5.0.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e" + integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A== + dependencies: + dequal "^2.0.3" + arr-diff@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520" @@ -8638,6 +8669,14 @@ chalk@^1.0.0, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" +chalk@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" + integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + char-regex@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" @@ -9869,6 +9908,11 @@ css-what@^5.0.0: resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe" integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw== +css.escape@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" + integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg== + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -10496,6 +10540,11 @@ deps-sort@^2.0.0, deps-sort@^2.0.1: subarg "^1.0.0" through2 "^2.0.0" +dequal@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" + integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== + des.js@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843" @@ -10661,6 +10710,11 @@ dom-accessibility-api@^0.5.6: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c" integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g== +dom-accessibility-api@^0.6.3: + version "0.6.3" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8" + integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w== + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -18827,6 +18881,14 @@ react-loadable@^5.5.0: dependencies: prop-types "^15.5.0" +"react-loadable@npm:@docusaurus/react-loadable@5.5.2": + version "5.5.2" + resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce" + integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ== + dependencies: + "@types/react" "*" + prop-types "^15.6.2" + react-redux@7.2.6: version "7.2.6" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"