From e5ed096214be25e4a58aba8ba545fa982468e819 Mon Sep 17 00:00:00 2001
From: Aman Agarwal <aman@appsmith.com>
Date: Thu, 26 Dec 2024 17:32:47 +0530
Subject: [PATCH] fix: data test ids

---
 app/client/cypress/limited-tests.txt          | 13 ++++++++-
 .../IntegrationEditor/APIOrSaasPlugins.tsx    |  3 +++
 .../DBOrMostPopularPlugins.tsx                |  4 +++
 .../IntegrationEditor/DatasourceItem.tsx      | 27 ++++++++++++++++---
 .../IntegrationEditor/MockDataSources.tsx     |  4 +++
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt
index aa00835ffb0e..70259347a8d6 100644
--- a/app/client/cypress/limited-tests.txt
+++ b/app/client/cypress/limited-tests.txt
@@ -1,5 +1,16 @@
 # To run only limited tests - give the spec names in below format:
-cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js
+# cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js
+cypress/e2e/Regression/ClientSide/BugTests/DS_Bug26716_Spec.ts
+cypress/e2e/Regression/ClientSide/BugTests/DS_Bug28750_Spec.ts
+cypress/e2e/Regression/ClientSide/BugTests/DatasourceSchema_spec.ts
+cypress/e2e/Regression/ClientSide/Google/EnableGoogle_spec.js
+cypress/e2e/Regression/ClientSide/MobileResponsiveTests/ConversionFlow_Generated_App_spec.ts
+cypress/e2e/Regression/ClientSide/OneClickBinding/PropertyControl_spec.ts
+cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts
+cypress/e2e/Regression/ServerSide/OnLoadTests/JSOnLoad_cyclic_dependency_errors_spec.js
+cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts
+cypress/e2e/Sanity/Datasources/Styles_spec.js
+cypress/e2e/Smoke/GenerateCRUD/Generate_Crud_New_Page_spec.ts
 # For running all specs - uncomment below:
 #cypress/e2e/**/**/*
 
diff --git a/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx b/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx
index e54447bd7a3e..8ee311bbc34b 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx
@@ -176,6 +176,7 @@ function NewApiScreen(props: CreateAPIOrSaasPluginsProps) {
       {props.restAPIVisible && (
         <DatasourceItem
           className="t--createBlankApiCard create-new-api"
+          dataCardWrapperTestId="newapi-datasource-content-wrapper"
           handleOnClick={() => handleOnClick(API_ACTION.CREATE_NEW_API)}
           icon={getAssetUrl(`${ASSETS_CDN_URL}/plus.png`)}
           name={createMessage(CREATE_NEW_DATASOURCE_REST_API)}
@@ -185,6 +186,7 @@ function NewApiScreen(props: CreateAPIOrSaasPluginsProps) {
       {props.graphQLAPIVisible && (
         <DatasourceItem
           className="t--createBlankApiGraphqlCard"
+          dataCardWrapperTestId="graphqlapi-datasource-content-wrapper"
           handleOnClick={() => handleOnClick(API_ACTION.CREATE_NEW_GRAPHQL_API)}
           icon={getAssetUrl(`${ASSETS_CDN_URL}/GraphQL.png`)}
           name={createMessage(CREATE_NEW_DATASOURCE_GRAPHQL_API)}
@@ -193,6 +195,7 @@ function NewApiScreen(props: CreateAPIOrSaasPluginsProps) {
       {authApiPlugin && (
         <DatasourceItem
           className="t--createAuthApiDatasource"
+          dataCardWrapperTestId="authapi-datasource-content-wrapper"
           handleOnClick={() => handleOnClick(API_ACTION.AUTH_API)}
           icon={getAssetUrl(authApiPlugin.iconLocation)}
           name={createMessage(CREATE_NEW_DATASOURCE_AUTHENTICATED_REST_API)}
diff --git a/app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx b/app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx
index fb29f92833d1..8d4951c0c214 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx
@@ -220,6 +220,7 @@ class DBOrMostPopularPlugins extends React.Component<Props> {
               !!showMostPopularPlugins ? (
                 <DatasourceItem
                   className="t--createBlankApiCard create-new-api"
+                  dataCardWrapperTestId="newapi-datasource-content-wrapper"
                   handleOnClick={this.handleOnClick}
                   icon={getAssetUrl(`${ASSETS_CDN_URL}/plus.png`)}
                   key={`${plugin.id}_${idx}`}
@@ -228,6 +229,9 @@ class DBOrMostPopularPlugins extends React.Component<Props> {
               ) : null
             ) : (
               <DatasourceItem
+                dataCardImageTestId="database-datasource-image"
+                dataCardTestId="database-datasource-card"
+                dataCardWrapperTestId="database-datasource-content-wrapper"
                 handleOnClick={() => {
                   AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
                     appName: currentApplication?.name,
diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx
index 2fbd503e9c8d..3e710ad5ca82 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx
@@ -14,10 +14,20 @@ interface DatasourceItem {
   description?: string;
   handleOnClick: () => unknown;
   rightSibling?: ReactNode;
+  dataNameTestId?: string;
+  dataCardTestId?: string;
+  dataCardWrapperTestId?: string;
+  dataCardDescriptionTestId?: string;
+  dataCardImageTestId?: string;
 }
 
 export default function DatasourceItem({
   className,
+  dataCardDescriptionTestId = "datasource-description",
+  dataCardImageTestId = "datasource-image",
+  dataCardTestId = "datasource-card",
+  dataCardWrapperTestId = "datasource-content-wrapper",
+  dataNameTestId = "datasource-name",
   description,
   handleOnClick,
   icon,
@@ -27,14 +37,23 @@ export default function DatasourceItem({
   return (
     <DatasourceCard
       className={`t--create-${name} ${className}`}
+      data-testid={dataCardTestId}
       onClick={handleOnClick}
     >
-      <DatasourceImage alt={name} src={icon} />
-      <DatasourceNameWrapper>
-        <DatasourceName className="t--plugin-name" renderAs="p">
+      <DatasourceImage
+        alt={name}
+        data-testid={dataCardImageTestId}
+        src={icon}
+      />
+      <DatasourceNameWrapper data-testid={dataCardWrapperTestId}>
+        <DatasourceName
+          className="t--plugin-name"
+          data-testid={dataNameTestId}
+          renderAs="p"
+        >
           {name}
         </DatasourceName>
-        <DatasourceDescription data-testid="mockdatasource-description">
+        <DatasourceDescription data-testid={dataCardDescriptionTestId}>
           {description}
         </DatasourceDescription>
       </DatasourceNameWrapper>
diff --git a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
index dc127fcd99f0..e072055bfeae 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
@@ -70,6 +70,10 @@ function MockDatasourceCard(props: MockDatasourceCardProps) {
   return (
     <DatasourceItem
       className="t--mock-datasource"
+      dataCardDescriptionTestId="mockdatasource-description"
+      dataCardImageTestId="mock-datasource-image"
+      dataCardWrapperTestId="mock-datasource-name-wrapper"
+      dataNameTestId="mockdatasource-name"
       description={datasource.description}
       handleOnClick={addMockDataSource}
       icon={getAssetUrl(pluginImages[currentPlugin.id])}