[CPT-1489] Add data-testid to ValidationErrors in QueryBuilder (#4047)

* [CPT-1489] Add data-testid to ValidationErrors in QueryBuilder * [CPT-1489] Remove testid property description * [CPT-1489] Update test id property name in ValidationErrors * [CPT-1489] Add Changeset * [CPT-1489] Update ValidationErrors test * [CPT-1489] Update yarn lock * Return undefined if testId if not defined --------- Co-authored-by: Rasit Ozcan <[email protected]>
toptal · Dec 7, 2023 · 43a6e5a · 43a6e5a
1 parent 6d4a9c7
commit 43a6e5a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 10 deletions.
diff --git a/.changeset/purple-onions-glow.md b/.changeset/purple-onions-glow.md
@@ -0,0 +1,12 @@
+---
+'@toptal/picasso-query-builder': minor
+---
+
+### QueryBuilder
+
+- update validationErrors to testIds properties
+
+### ValidationErrors
+
+- add validationErrorsTestId property as a test id for its container.
+- property validationErrorsTestId is used to set test id for validation errors messages with their corresponding index.
diff --git a/packages/picasso-query-builder/src/QueryBuilder/QueryBuilder.tsx b/packages/picasso-query-builder/src/QueryBuilder/QueryBuilder.tsx
@@ -134,7 +134,12 @@ const QueryBuilder = ({
     setSubmitButtonClicked(true)
 
     if (!queryBuilderValid) {
-      showError(<ValidationErrors validationResult={validationErrors} />)
+      showError(
+        <ValidationErrors
+          validationErrorsTestId={testIds?.validationErrors}
+          validationResult={validationErrors}
+        />
+      )
 
       return
     }

diff --git a/packages/picasso-query-builder/src/ValidationErrors/ValidationErrors.test.tsx b/packages/picasso-query-builder/src/ValidationErrors/ValidationErrors.test.tsx
@@ -86,15 +86,15 @@ describe('ValidationErrors', () => {
 
       expect(ListItemMock).toHaveBeenCalledTimes(2)
       expect(ListItemMock).toHaveBeenCalledWith(
-        {
+        expect.objectContaining({
           children: 'reason1',
-        },
+        }),
         {}
       )
       expect(ListItemMock).toHaveBeenCalledWith(
-        {
+        expect.objectContaining({
           children: 'reason2',
-        },
+        }),
         {}
       )
     })

diff --git a/packages/picasso-query-builder/src/ValidationErrors/ValidationErrors.tsx b/packages/picasso-query-builder/src/ValidationErrors/ValidationErrors.tsx
@@ -4,8 +4,10 @@ import type { ValidationResult } from 'react-querybuilder'
 
 const ValidationErrors = ({
   validationResult,
+  validationErrorsTestId: testId,
 }: {
   validationResult: Record<string, ValidationResult | boolean>
+  validationErrorsTestId?: string
 }) => {
   const validationErrors = useMemo(
     () =>
@@ -26,7 +28,7 @@ const ValidationErrors = ({
   }
 
   return (
-    <Container flex direction='column' gap='small'>
+    <Container data-testid={testId} flex direction='column' gap='small'>
       <Typography>
         Please fix validation errors before running the query
       </Typography>
@@ -39,8 +41,13 @@ const ValidationErrors = ({
           return (
             <Fragment key={rule}>
               {reasons?.map((reason, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <List.Item key={index}>{reason.message ?? reason}</List.Item>
+                <List.Item
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={index}
+                  data-testid={testId && `${testId}-${index}`}
+                >
+                  {reason.message ?? reason}
+                </List.Item>
               ))}
             </Fragment>
           )

diff --git a/packages/picasso-query-builder/src/types/query-builder.ts b/packages/picasso-query-builder/src/types/query-builder.ts
@@ -80,4 +80,5 @@ export type TestId = {
   controls?: string
   valueEditor?: string
   fieldSelector?: string
+  validationErrors?: string
 }
diff --git a/yarn.lock b/yarn.lock
@@ -15431,14 +15431,14 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@1, json5@^1.0.1, json5@^2.1.1:
+json5@1, json5@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
-[email protected], json5@^2.1.0, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3, json5@^2.x:
+[email protected], json5@^2.1.0, json5@^2.1.1, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3, json5@^2.x:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==