From b3d7c56e64f6c8cd61bd2acefeb05efea4d399b7 Mon Sep 17 00:00:00 2001
From: Midhun Kumar E <midhun752@gmail.com>
Date: Wed, 20 Sep 2023 11:54:59 +0530
Subject: [PATCH] Add data-cy for query manager regression and smoke. (#7460)

* Add missing data-cy

* Add mising data-cy
---
 .../Components/DataSourcePicker.jsx           | 11 +++++++---
 .../Components/DataSourceSelect.jsx           | 22 +++++++++++++++----
 .../Editor/QueryPanel/FilterandSortPopup.jsx  |  6 ++++-
 .../src/Editor/QueryPanel/QueryDataPane.jsx   |  2 +-
 4 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx b/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
index af84f80cb6..e59db2b03c 100644
--- a/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
+++ b/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
@@ -52,10 +52,15 @@ function DataSourcePicker({ dataSources, staticDataSources, darkMode, globalData
       <h4 className="w-100 text-center" data-cy={'label-select-datasource'} style={{ fontWeight: 500 }}>
         Connect to a data source
       </h4>
-      <p className="mb-3" style={{ textAlign: 'center' }}>
+      <p className="mb-3" style={{ textAlign: 'center' }} data-cy="querymanager-description">
         Select a data source to start creating a new query. To know more about queries in ToolJet, you can read our
         &nbsp;
-        <a target="_blank" href="https://docs.tooljet.com/docs/app-builder/query-panel" rel="noreferrer">
+        <a
+          data-cy="querymanager-doc-link"
+          target="_blank"
+          href="https://docs.tooljet.com/docs/app-builder/query-panel"
+          rel="noreferrer"
+        >
           documentation
         </a>
       </p>
@@ -143,7 +148,7 @@ const EmptyDataSourceBanner = () => (
     <div className="me-2">
       <Information fill="var(--slate9)" />
     </div>
-    <div>No global data sources have been added yet.</div>
+    <div data-cy="label-no-ds-added">No global data sources have been added yet.</div>
   </div>
 );
 
diff --git a/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx b/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx
index 0cc5ce8ec0..262415a9cc 100644
--- a/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx
+++ b/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx
@@ -52,7 +52,11 @@ function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
         label: (
           <div>
             {index === 0 && (
-              <div className="color-slate9 mb-2 pb-1" style={{ fontWeight: 500, marginTop: '-8px' }}>
+              <div
+                data-cy="ds-section-header-gds"
+                className="color-slate9 mb-2 pb-1"
+                style={{ fontWeight: 500, marginTop: '-8px' }}
+              >
                 Global data sources
               </div>
             )}
@@ -66,6 +70,7 @@ function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
               className="py-2 px-2 rounded option-nested-datasource-selector small text-truncate"
               data-tooltip-id="tooltip-for-add-query-dd-option"
               data-tooltip-content={source.name}
+              data-cy={`ds-${source.name.toLowerCase()}`}
             >
               {source.name}
               <Tooltip id="tooltip-for-add-query-dd-option" className="tooltip query-manager-ds-select-tooltip" />
@@ -83,7 +88,7 @@ function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
   const DataSourceOptions = [
     {
       label: (
-        <span className="color-slate9" style={{ fontWeight: 500 }}>
+        <span data-cy="ds-section-header-default" className="color-slate9" style={{ fontWeight: 500 }}>
           Defaults
         </span>
       ),
@@ -92,7 +97,10 @@ function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
         ...staticDataSources.map((source) => ({
           label: (
             <div>
-              <DataSourceIcon source={source} height={16} /> <span className="ms-1 small">{source.name}</span>
+              <DataSourceIcon source={source} height={16} />{' '}
+              <span data-cy={`ds-${source.name.toLowerCase()}`} className="ms-1 small">
+                {source.name}
+              </span>
             </div>
           ),
           value: source.id,
@@ -245,7 +253,13 @@ const MenuList = ({ children, getStyles, innerRef, ...props }) => {
       </div>
       {admin && (
         <div className="p-2 mt-2 border-slate3-top">
-          <ButtonSolid variant="secondary" size="md" className="w-100" onClick={handleAddClick}>
+          <ButtonSolid
+            variant="secondary"
+            size="md"
+            className="w-100"
+            onClick={handleAddClick}
+            data-cy="button-add-ds-dropdown"
+          >
             + Add new data source
           </ButtonSolid>
         </div>
diff --git a/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx b/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx
index bc98851d6a..ec4da75de2 100644
--- a/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx
+++ b/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx
@@ -259,6 +259,7 @@ const DataSourceSelector = ({
             onChange={(e) => setSearch(e.target.value)}
             ref={searchBoxRef}
             value={search}
+            data-cy="input-query-ds-filter"
           />
         </div>
       </div>
@@ -279,7 +280,10 @@ const DataSourceSelector = ({
               label={
                 <div className="d-flex align-items-center">
                   <DataSourceIcon source={source} height={12} styles={{ minWidth: 12 }} />
-                  &nbsp;<span className="ms-1 text-truncate">{source.name}</span>
+                  &nbsp;
+                  <span className="ms-1 text-truncate" data-cy={`ds-filter-${source.name.toLowerCase()}`}>
+                    {source.name}
+                  </span>
                 </div>
               }
             />
diff --git a/frontend/src/Editor/QueryPanel/QueryDataPane.jsx b/frontend/src/Editor/QueryPanel/QueryDataPane.jsx
index f87882b116..990f813af7 100644
--- a/frontend/src/Editor/QueryPanel/QueryDataPane.jsx
+++ b/frontend/src/Editor/QueryPanel/QueryDataPane.jsx
@@ -202,7 +202,7 @@ const EmptyDataSource = () => (
         <FolderEmpty style={{ height: '16px' }} />
       </span>
     </div>
-    <span>No queries have been added. </span>
+    <span data-cy="label-no-queries">No queries have been added. </span>
   </div>
 );