fix(tests): adding unit tests

BedrockStreaming · Jun 27, 2024 · d62ecce · d62ecce
1 parent bb70eba
commit d62ecce
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 6 deletions.
diff --git 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
@@ -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('<FormBuilder />', () => {
     steps: { ...stepOne, ...stepTwo },
     stepsById: [stepOneId, stepTwoId],
   };
+
   // aria-checked="true"
   const CORRECT_DICTIONARY = {
-    text: ({ label, ...props }) => (
+    text: ({ label, errors, id, ...props }) => (
       <fieldset>
-        <label>{label}</label>
-        <input type="text" placeholder="Test" />
+        <label for={id}>{label}</label>
+        <input id={id} type="text" placeholder="Test" />
+        {
+          !!errors ? (
+            <span>{errors.message}</span>
+          ) : null
+        }
       </fieldset>
     ),
     checkbox: ({ label, value = false, ...props }) => (
@@ -77,6 +85,53 @@ describe('<FormBuilder />', () => {
     submit: ({ label }) => <button type="submit">{label}</button>,
   };
 
+  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
@@ -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
@@ -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/[email protected]":
   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/[email protected]", "react-loadable@npm:@docusaurus/[email protected]":
+"@docusaurus/[email protected]":
   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/[email protected]":
+  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/[email protected]":
   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/[email protected]":
+  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/[email protected]":
+  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"
+
 [email protected]:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"