[CPT-1489] Add data-testid to ValidationErrors in QueryBuilder

toptal · Dec 5, 2023 · dcecd77 · dcecd77
1 parent ec2e315
commit dcecd77
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/picasso-query-builder/src/QueryBuilder/QueryBuilder.tsx b/packages/picasso-query-builder/src/QueryBuilder/QueryBuilder.tsx
@@ -65,6 +65,7 @@ type Props = {
   totalCount?: number
   /** Defines the possibility to display a loading indicator or message to the user while the total count is being fetched. */
   totalCountLoading?: boolean
+  /** Defines the test ids for the different parts component */
   testIds?: TestId
 }
 
@@ -134,7 +135,12 @@ const QueryBuilder = ({
     setSubmitButtonClicked(true)
 
     if (!queryBuilderValid) {
-      showError(<ValidationErrors validationResult={validationErrors} />)
+      showError(
+        <ValidationErrors
+          data-testid={testIds?.validationErrors}
+          validationResult={validationErrors}
+        />
+      )
 
       return
     }

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,
+  'data-testid': testId,
 }: {
   validationResult: Record<string, ValidationResult | boolean>
+  'data-testid'?: 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>
@@ -40,7 +42,9 @@ const ValidationErrors = ({
             <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 data-testid={`${testId}-${index}`} key={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
 }