From 88fba22b348d022112908564ee7c4faa4d429929 Mon Sep 17 00:00:00 2001
From: Midhun Kumar E <midhun752@gmail.com>
Date: Mon, 20 Feb 2023 10:00:05 +0530
Subject: [PATCH] Added data-cy for sidepanel and multipage icons (#5560)

* Add data-cy for side panel elements

* Add data-cy for multipage elements

* Add missing data-cy
---
 .../LeftSidebar/SidebarPageSelector/EditInput.jsx   |  4 +++-
 .../SidebarPageSelector/GlobalSettings.jsx          | 11 +++++++----
 .../SidebarPageSelector/PagehandlerMenu.jsx         | 13 +++++++++----
 .../LeftSidebar/SidebarPageSelector/index.jsx       |  9 ++++++---
 frontend/src/_ui/Alert/Alert.jsx                    |  2 +-
 frontend/src/_ui/LeftSidebar/Button.jsx             |  6 ++++--
 6 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
index cd3867f01d..4146a64237 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
@@ -43,7 +43,9 @@ export const EditInput = ({ slug, error, setError, pageHandle, setPageHandle, is
         value={pageHandle}
         data-cy={'page-handle-input-field'}
       />
-      <div className="invalid-feedback">{error}</div>
+      <div className="invalid-feedback" data-cy={'page-handle-invalid-feedback'}>
+        {error}
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx
index 96f8df2911..b58de4fa72 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx
@@ -16,7 +16,7 @@ export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, sho
         <Popover id="page-handler-menu" className={`global-settings ${darkMode && 'popover-dark-themed'}`}>
           <Popover.Content bsPrefix="popover-body">
             <div className="card-body">
-              <label htmlFor="pin" className="form-label">
+              <label htmlFor="pin" className="form-label" data-cy={`page-settings-header`}>
                 Settings
               </label>
               <hr style={{ margin: '0.75rem 0' }} />
@@ -28,7 +28,7 @@ export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, sho
         </Popover>
       }
     >
-      <MenuIcon width="10" height="16" />
+      <MenuIcon width="10" height="16" data-cy={'menu-icon'} />
     </OverlayTrigger>
   );
 };
@@ -37,6 +37,7 @@ const Toggle = ({ onChange, value = true }) => {
   return (
     <div className="form-check form-switch">
       <input
+        data-cy={`disable-page-menu-toggle`}
         className="form-check-input"
         type="checkbox"
         onClick={(e) => {
@@ -45,10 +46,12 @@ const Toggle = ({ onChange, value = true }) => {
         }}
         checked={value}
       />
-      <span className="form-check-label">Disable Menu</span>
+      <span className="form-check-label" data-cy={`disable-page-menu-label`}>
+        Disable Menu
+      </span>
 
       <div className="toggle-info">
-        <small className="secondary-text">
+        <small className="secondary-text" data-cy={`disable-page-menu-description`}>
           To hide the page navigation sidebar in viewer mode, set this option to on.
         </small>
       </div>
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx
index fe83011c00..f0526bc607 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx
@@ -95,7 +95,7 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
         }}
         styles={{ height: '20px', marginTop: '2px' }}
       >
-        <Button.Content iconSrc={'assets/images/icons/3dots-menu.svg'} />
+        <Button.Content dataCy={`page-menu`} iconSrc={'assets/images/icons/3dots-menu.svg'} />
       </Button.UnstyledButton>
     </OverlayTrigger>
   );
@@ -104,7 +104,7 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
 const PageHandleField = ({ page, updatePageHandle }) => {
   const Label = () => {
     return (
-      <label htmlFor="pin" className="form-label">
+      <label htmlFor="pin" className="form-label" data-cy={`header-page-handle`}>
         Page Handle
       </label>
     );
@@ -114,7 +114,7 @@ const PageHandleField = ({ page, updatePageHandle }) => {
     return (
       <div className="col">
         <span style={{ color: '#889096' }}>.../</span>
-        <span>{page.handle}</span>
+        <span data-cy={`page-handle-text`}>{page.handle}</span>
       </div>
     );
   };
@@ -129,7 +129,12 @@ const PageHandleField = ({ page, updatePageHandle }) => {
         }}
         classNames="page-handle-button-container"
       >
-        <Button.Content title={content} iconSrc={'assets/images/icons/input.svg'} direction="right" />
+        <Button.Content
+          title={content}
+          iconSrc={'assets/images/icons/input.svg'}
+          direction="right"
+          dataCy={`page-handler`}
+        />
       </Button.UnstyledButton>
     </div>
   );
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
index 85bb1f7292..1cc1b4dd0b 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
@@ -83,7 +83,7 @@ const LeftSidebarPageSelector = ({
                 size="sm"
                 styles={{ width: '28px', padding: 0 }}
               >
-                <Button.Content iconSrc={'assets/images/icons/plus.svg'} direction="left" />
+                <Button.Content dataCy={`add-page`} iconSrc={'assets/images/icons/plus.svg'} direction="left" />
               </Button>
               <Button
                 title={'Search'}
@@ -92,7 +92,7 @@ const LeftSidebarPageSelector = ({
                 size="sm"
                 styles={{ width: '28px', padding: 0 }}
               >
-                <Button.Content iconSrc={'assets/images/icons/search.svg'} direction="left" />
+                <Button.Content dataCy={'search-page'} iconSrc={'assets/images/icons/search.svg'} direction="left" />
               </Button>
               <Button
                 title={`${pinned ? 'Unpin' : 'Pin'}`}
@@ -102,6 +102,7 @@ const LeftSidebarPageSelector = ({
                 styles={{ width: '28px', padding: 0 }}
               >
                 <Button.Content
+                  dataCy={'pin-panel'}
                   iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
                   direction="left"
                 />
@@ -149,7 +150,9 @@ const LeftSidebarPageSelector = ({
               <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
                 <div>
                   <EmptyIllustration />
-                  <p className="mt-3">No pages found</p>
+                  <p data-cy={`label-no-pages-found`} className="mt-3">
+                    No pages found
+                  </p>
                 </div>
               </div>
             )}
diff --git a/frontend/src/_ui/Alert/Alert.jsx b/frontend/src/_ui/Alert/Alert.jsx
index 27549939a1..fa539cdc7b 100644
--- a/frontend/src/_ui/Alert/Alert.jsx
+++ b/frontend/src/_ui/Alert/Alert.jsx
@@ -22,7 +22,7 @@ const Container = ({ children, cls = '' }) => {
 
 const Message = ({ children }) => {
   return (
-    <div style={{ fontWeight: 400 }} className="mx-2">
+    <div data-cy={`alert-info-text`} style={{ fontWeight: 400 }} className="mx-2">
       {children}
     </div>
   );
diff --git a/frontend/src/_ui/LeftSidebar/Button.jsx b/frontend/src/_ui/LeftSidebar/Button.jsx
index 0d4885f1a6..9770738872 100644
--- a/frontend/src/_ui/LeftSidebar/Button.jsx
+++ b/frontend/src/_ui/LeftSidebar/Button.jsx
@@ -38,7 +38,7 @@ const Button = ({
   );
 };
 
-const Content = ({ title = null, iconSrc = null, direction = 'left' }) => {
+const Content = ({ title = null, iconSrc = null, direction = 'left', dataCy }) => {
   const icon = !iconSrc ? (
     ''
   ) : (
@@ -47,7 +47,9 @@ const Content = ({ title = null, iconSrc = null, direction = 'left' }) => {
       src={iconSrc}
       width="12"
       height="12"
-      data-cy={`${String(title).toLowerCase().replace(/\s+/g, '-')}-option-icon`}
+      data-cy={`${String(dataCy ?? title)
+        .toLowerCase()
+        .replace(/\s+/g, '-')}-option-icon`}
     />
   );
   const btnTitle = !title ? (