From dcecd7707a5c6ef9f80b70d6dff35c6f4fa53a28 Mon Sep 17 00:00:00 2001
From: Wadii Basmi <wadii.basmi@toptal.com>
Date: Tue, 5 Dec 2023 21:47:52 +0100
Subject: [PATCH] [CPT-1489] Add data-testid to ValidationErrors  in
 QueryBuilder

---
 .../src/QueryBuilder/QueryBuilder.tsx                     | 8 +++++++-
 .../src/ValidationErrors/ValidationErrors.tsx             | 8 ++++++--
 packages/picasso-query-builder/src/types/query-builder.ts | 1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/picasso-query-builder/src/QueryBuilder/QueryBuilder.tsx b/packages/picasso-query-builder/src/QueryBuilder/QueryBuilder.tsx
index 0b990fce9ef..40eb5db8165 100644
--- 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
index fe7704ffcb7..ea4cfd2ce11 100644
--- 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
index ac03886c461..b4da7ecae08 100644
--- 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
 }