From b87dbf304c6474a068c4e334ed3236d0a8a3e113 Mon Sep 17 00:00:00 2001
From: Ajith KV <ajith.jaban@gmail.com>
Date: Tue, 3 Dec 2024 11:53:34 +0530
Subject: [PATCH] Added data-cy for newly added components (#11435)

---
 frontend/src/ManageOrgUsers/InviteUsersForm.jsx     | 10 +++++-----
 .../src/_components/OrganizationManager/List.jsx    |  4 ++--
 .../ForgotPasswordInfoScreen.jsx                    |  8 ++++++--
 .../LoginPage/components/LoginForm/LoginForm.jsx    |  2 +-
 .../ResetPasswordInfoScreen.jsx                     |  4 +++-
 .../components/FormDescription/FormDescription.jsx  |  4 +++-
 .../common/components/FormHeader/FormHeader.jsx     | 11 ++++++-----
 .../components/FormTextInput/FormTextInput.jsx      | 13 +++++++++----
 .../GeneralFeatureImage/GeneralFeatureImage.jsx     |  2 +-
 .../components/PasswordInput/PasswordInput.jsx      |  4 ++--
 .../PasswordInput/resources/images/eyeclose.svg     |  2 +-
 .../PasswordInput/resources/images/eyeopen.svg      |  2 +-
 .../SSOButtonWrapper/SSOButtonWrapper.jsx           |  8 +++++---
 .../common/components/SubmitButton/SubmitButton.jsx |  4 ++--
 .../OnboardingFormWrapper/OnboardingFormWrapper.jsx |  2 +-
 .../SignupSuccessInfo/SignupSuccessInfo.jsx         | 12 ++++++++----
 .../ResendVerificationEmail.jsx                     |  3 ++-
 17 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/frontend/src/ManageOrgUsers/InviteUsersForm.jsx b/frontend/src/ManageOrgUsers/InviteUsersForm.jsx
index 1f877c8c70..6a238276ee 100644
--- a/frontend/src/ManageOrgUsers/InviteUsersForm.jsx
+++ b/frontend/src/ManageOrgUsers/InviteUsersForm.jsx
@@ -237,7 +237,7 @@ function InviteUsersForm({
                   className="invite-email-body"
                   id="inviteByEmail"
                 >
-                  <label className="form-label" data-cy="label-full-name-input-field">
+                  <label className="form-label" data-cy="name-label">
                     Name
                   </label>
                   <div className="form-group mb-3 ">
@@ -255,7 +255,7 @@ function InviteUsersForm({
                           name="fullName"
                           onChange={changeNewUserOption.bind(this, 'fullName')}
                           value={fields['fullName']}
-                          data-cy="input-field-full-name"
+                          data-cy="name-input"
                           disabled={isEditing}
                         />
                         <span className="text-danger" data-cy="error-message-fullname">
@@ -265,7 +265,7 @@ function InviteUsersForm({
                     </ToolTip>
                   </div>
                   <div className="form-group mb-3 ">
-                    <label className="form-label" data-cy="label-email-input-field">
+                    <label className="form-label" data-cy="email-label">
                       {t('header.organization.menus.manageUsers.emailAddress', 'Email Address')}
                     </label>
                     <ToolTip
@@ -283,7 +283,7 @@ function InviteUsersForm({
                           name="email"
                           onChange={changeNewUserOption.bind(this, 'email')}
                           value={fields['email']}
-                          data-cy="input-field-email"
+                          data-cy="email-input"
                           disabled={isEditing}
                         />
                         <span className="text-danger" data-cy="error-message-email">
@@ -293,7 +293,7 @@ function InviteUsersForm({
                     </ToolTip>
                   </div>
                   <div className="form-group mb-3 manage-groups-invite-form" data-cy="user-group-select">
-                    <label className="form-label" data-cy="label-group-input-field">
+                    <label className="form-label" data-cy="user-group-label">
                       {isEditing
                         ? 'User groups'
                         : t('header.organization.menus.manageUsers.selectGroup', 'Select Group')}
diff --git a/frontend/src/_components/OrganizationManager/List.jsx b/frontend/src/_components/OrganizationManager/List.jsx
index 9229d4079b..87f0d62b0a 100644
--- a/frontend/src/_components/OrganizationManager/List.jsx
+++ b/frontend/src/_components/OrganizationManager/List.jsx
@@ -54,7 +54,7 @@ export const OrganizationList = function () {
         <div className={`align-items-center d-flex tj-org-dropdown  ${darkMode && 'dark-theme'}`}>
           {org.id === current_organization_id ? (
             <div className="current-org-avatar">
-              <SolidIcon name="tick" fill="#3E63DD" dataCy="add-new-workspace-link" width="20" viewBox="0 0 17 15" />
+              <SolidIcon name="tick" fill="#3E63DD" data-cy="add-new-workspace-link" width="20" viewBox="0 0 17 15" />
             </div>
           ) : (
             <div
@@ -79,7 +79,7 @@ export const OrganizationList = function () {
                 data-cy="current-org-indicator"
                 onClick={() => setShowEditOrg(true)}
               >
-                <SolidIcon name="editable" fill="#3E63DD" dataCy="add-new-workspace-link" width="16" />
+                <SolidIcon name="editable" fill="#3E63DD" data-cy="edit-rectangle-icon" width="16" />
               </div>
             </ToolTip>
           ) : (
diff --git a/frontend/src/modules/auth/pages/ForgotPasswordPage/components/ForgotPasswordInfoScreen/ForgotPasswordInfoScreen.jsx b/frontend/src/modules/auth/pages/ForgotPasswordPage/components/ForgotPasswordInfoScreen/ForgotPasswordInfoScreen.jsx
index 5ec9d3708e..cd50811420 100644
--- a/frontend/src/modules/auth/pages/ForgotPasswordPage/components/ForgotPasswordInfoScreen/ForgotPasswordInfoScreen.jsx
+++ b/frontend/src/modules/auth/pages/ForgotPasswordPage/components/ForgotPasswordInfoScreen/ForgotPasswordInfoScreen.jsx
@@ -21,8 +21,12 @@ const ForgotPasswordInfoScreen = ({ email }) => {
     <div className="forgot-password-info-wrapper info-screen">
       <OnboardingUIWrapper>
         <FormHeader>{t('forgotPasswordInfo.header', 'Check your mail')}</FormHeader>
-        <p className="message">{message}</p>
-        <span className="info">{info}</span>
+        <p className="message" data-cy="onboarding-page-description">
+          {message}
+        </p>
+        <span className="info" data-cy="info-message">
+          {info}
+        </span>
         <SepratorComponent />
         <div className="action-buttons">
           <button onClick={() => navigate('/login')} className="back-to-login-button" data-cy="back-to-login">
diff --git a/frontend/src/modules/auth/pages/LoginPage/components/LoginForm/LoginForm.jsx b/frontend/src/modules/auth/pages/LoginPage/components/LoginForm/LoginForm.jsx
index 51fd3a24ab..762c62e152 100644
--- a/frontend/src/modules/auth/pages/LoginPage/components/LoginForm/LoginForm.jsx
+++ b/frontend/src/modules/auth/pages/LoginPage/components/LoginForm/LoginForm.jsx
@@ -129,7 +129,7 @@ const LoginForm = ({
                     <>
                       {' '}
                       {signupText}{' '}
-                      <Link to={signUpUrl} className="signin-link" tabIndex="-1" data-cy="signin-link">
+                      <Link to={signUpUrl} className="signin-link" tabIndex="-1" data-cy="create-an-account-link">
                         {t('createToolJetAccount', signUpCTA)}
                       </Link>
                     </>
diff --git a/frontend/src/modules/auth/pages/ResetPasswordPage/components/ResetPasswordInfoScreen/ResetPasswordInfoScreen.jsx b/frontend/src/modules/auth/pages/ResetPasswordPage/components/ResetPasswordInfoScreen/ResetPasswordInfoScreen.jsx
index 1f19e9e72e..2a44b1e513 100644
--- a/frontend/src/modules/auth/pages/ResetPasswordPage/components/ResetPasswordInfoScreen/ResetPasswordInfoScreen.jsx
+++ b/frontend/src/modules/auth/pages/ResetPasswordPage/components/ResetPasswordInfoScreen/ResetPasswordInfoScreen.jsx
@@ -17,7 +17,9 @@ const ForgotPasswordInfoScreen = ({ email }) => {
     <div className="forgot-password-info-wrapper info-screen">
       <OnboardingUIWrapper>
         <FormHeader>Password has been reset</FormHeader>
-        <p className="message">{message}</p>
+        <p className="message" data-cy="reset-password-page-description">
+          {message}
+        </p>
         <div className="action-buttons pt-3">
           <button
             onClick={() =>
diff --git a/frontend/src/modules/common/components/FormDescription/FormDescription.jsx b/frontend/src/modules/common/components/FormDescription/FormDescription.jsx
index 0f10c1981f..9525f10990 100644
--- a/frontend/src/modules/common/components/FormDescription/FormDescription.jsx
+++ b/frontend/src/modules/common/components/FormDescription/FormDescription.jsx
@@ -4,7 +4,9 @@ import './resources/styles/form-description.styles.scss';
 const FormDescription = ({ children: View }) => {
   return (
     <>
-      <p className="onboarding-form-description">{View}</p>
+      <p className="onboarding-form-description" data-cy="onboarding-page-description">
+        {View}
+      </p>
     </>
   );
 };
diff --git a/frontend/src/modules/common/components/FormHeader/FormHeader.jsx b/frontend/src/modules/common/components/FormHeader/FormHeader.jsx
index f4c2da682d..98c3583e43 100644
--- a/frontend/src/modules/common/components/FormHeader/FormHeader.jsx
+++ b/frontend/src/modules/common/components/FormHeader/FormHeader.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 
 const FormHeader = ({ children: View, styles, dataCy }) => {
+  const defaultDataCy = View?.toString()?.toLowerCase().replace(/\s+/g, '-');
+  const computedDataCy = dataCy || defaultDataCy;
+
   return (
-    <>
-      <h2 className="form-header" style={styles} data-cy={dataCy}>
-        {View}
-      </h2>
-    </>
+    <h2 className="form-header" style={styles} data-cy={`${computedDataCy}-header`}>
+      {View}
+    </h2>
   );
 };
 
diff --git a/frontend/src/modules/common/components/FormTextInput/FormTextInput.jsx b/frontend/src/modules/common/components/FormTextInput/FormTextInput.jsx
index 0b3bdbcde7..cf7c12930b 100644
--- a/frontend/src/modules/common/components/FormTextInput/FormTextInput.jsx
+++ b/frontend/src/modules/common/components/FormTextInput/FormTextInput.jsx
@@ -10,7 +10,7 @@ const FormTextInput = ({
   error,
   disabled,
   name,
-  dataCy,
+  dataCy = label ? label.toLowerCase().replace(/\s+/g, '-') : value ? value.toLowerCase().replace(/\s+/g, '-') : '',
   maxLength,
   disableStartAdornment = false,
 }) => {
@@ -33,7 +33,7 @@ const FormTextInput = ({
       )}
 
       {disabled ? (
-        <p className="form-input__field form-input__field--disabled" data-cy={dataCy}>
+        <p className="form-input__field form-input__field--disabled" data-cy={`${dataCy}-input-value`}>
           {value}
         </p>
       ) : (
@@ -47,11 +47,16 @@ const FormTextInput = ({
             value={value}
             onChange={handleChange}
             required
-            data-cy={dataCy}
+            data-cy={`${dataCy}-input`}
             autoComplete="off"
             {...(maxLength ? { maxLength } : {})}
           />
-          <span className={`tj-input-error form-input__error${error ? '__error-enabled' : ''}`}>{error}</span>
+          <span
+            className={`tj-input-error form-input__error${error ? '__error-enabled' : ''}`}
+            data-cy={`${dataCy}-error-message`}
+          >
+            {error}
+          </span>
         </>
       )}
     </div>
diff --git a/frontend/src/modules/common/components/GeneralFeatureImage/GeneralFeatureImage.jsx b/frontend/src/modules/common/components/GeneralFeatureImage/GeneralFeatureImage.jsx
index fcd197fb5b..e69e8d90be 100644
--- a/frontend/src/modules/common/components/GeneralFeatureImage/GeneralFeatureImage.jsx
+++ b/frontend/src/modules/common/components/GeneralFeatureImage/GeneralFeatureImage.jsx
@@ -7,7 +7,7 @@ const GeneralFeatureImage = () => {
   return (
     <div className="general-feature-image">
       <div className="content-wrapper">
-        <div className="image-wrapper">
+        <div className="image-wrapper" data-cy="onboarding-image">
           <FeatImage />
         </div>
         <div className="slogan-wrapper">
diff --git a/frontend/src/modules/common/components/PasswordInput/PasswordInput.jsx b/frontend/src/modules/common/components/PasswordInput/PasswordInput.jsx
index 217c00aa39..f414eb2335 100644
--- a/frontend/src/modules/common/components/PasswordInput/PasswordInput.jsx
+++ b/frontend/src/modules/common/components/PasswordInput/PasswordInput.jsx
@@ -13,7 +13,7 @@ const PasswordInput = ({
   onChange,
   error,
   name = 'password',
-  dataCy = 'password-input',
+  dataCy = 'password',
   minLength = 5,
   hint = `Password must be at least ${minLength} characters`,
   disabled = false,
@@ -60,7 +60,7 @@ const PasswordInput = ({
           onChange={handleChange}
           required
           minLength={minLength}
-          data-cy={dataCy}
+          data-cy={`${dataCy}-input`}
           autoComplete="off"
         />
         <button
diff --git a/frontend/src/modules/common/components/PasswordInput/resources/images/eyeclose.svg b/frontend/src/modules/common/components/PasswordInput/resources/images/eyeclose.svg
index b0a66fec9e..c434590f61 100644
--- a/frontend/src/modules/common/components/PasswordInput/resources/images/eyeclose.svg
+++ b/frontend/src/modules/common/components/PasswordInput/resources/images/eyeclose.svg
@@ -1,3 +1,3 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" data-cy="eye-close-icon">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2.51494 3.02021C2.31967 2.82495 2.31967 2.50837 2.51494 2.3131C2.7102 2.11784 3.02678 2.11784 3.22204 2.3131L13.8887 12.9798C14.084 13.175 14.084 13.4916 13.8887 13.6869C13.6934 13.8821 13.3769 13.8821 13.1816 13.6869L11.2971 11.8024C10.3576 12.3139 9.30851 12.6667 8.20182 12.6667C5.65815 12.6667 3.41882 10.8031 2.11496 9.43126C1.34189 8.61787 1.34189 7.3821 2.11496 6.56872C2.66817 5.98666 3.38979 5.31608 4.23161 4.73689L2.51494 3.02021ZM6.47873 6.98401C6.30279 7.28176 6.20182 7.62909 6.20182 7.99999C6.20182 9.10456 7.09725 9.99999 8.20182 9.99999C8.57273 9.99999 8.92005 9.89902 9.21781 9.72308L6.47873 6.98401ZM8.20182 3.33332C10.7455 3.33332 12.9848 5.19688 14.2887 6.56872C15.0618 7.3821 15.0618 8.61788 14.2887 9.43126C13.9953 9.73993 13.6546 10.0735 13.2737 10.4051L6.47696 3.60842C7.02994 3.43503 7.60757 3.33332 8.20182 3.33332Z" fill="#ACB2B9"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/src/modules/common/components/PasswordInput/resources/images/eyeopen.svg b/frontend/src/modules/common/components/PasswordInput/resources/images/eyeopen.svg
index 2ba39d9ec5..f8845307e9 100644
--- a/frontend/src/modules/common/components/PasswordInput/resources/images/eyeopen.svg
+++ b/frontend/src/modules/common/components/PasswordInput/resources/images/eyeopen.svg
@@ -1,3 +1,3 @@
-<svg width="17" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="17" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-cy="eye-open-icon">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17.5C9.24 17.5 7 15.26 7 12.5C7 9.74 9.24 7.5 12 7.5C14.76 7.5 17 9.74 17 12.5C17 15.26 14.76 17.5 12 17.5ZM12 15.5C13.38 15.5 14.5 14.38 14.5 13C14.5 11.62 13.38 10.5 12 10.5C10.62 10.5 9.5 11.62 9.5 13C9.5 14.38 10.62 15.5 12 15.5Z" fill="#ACB2B9"/>
 </svg>
diff --git a/frontend/src/modules/common/components/SSOAuthModule/components/SSOButtonWrapper/SSOButtonWrapper.jsx b/frontend/src/modules/common/components/SSOAuthModule/components/SSOButtonWrapper/SSOButtonWrapper.jsx
index c26bab30a6..4753463d3e 100644
--- a/frontend/src/modules/common/components/SSOAuthModule/components/SSOButtonWrapper/SSOButtonWrapper.jsx
+++ b/frontend/src/modules/common/components/SSOAuthModule/components/SSOButtonWrapper/SSOButtonWrapper.jsx
@@ -3,10 +3,12 @@ import './resources/styles/sso-button-wrapper.styles.scss';
 
 const SSOButtonWrapper = ({ onClick, icon, text, dataCy }) => {
   return (
-    <div className="sso-button-wrapper" data-cy={dataCy}>
-      <button onClick={onClick} className="sso-button">
+    <div className="sso-button-wrapper">
+      <button onClick={onClick} className="sso-button" data-cy={dataCy}>
         <img src={icon} alt={`${text} icon`} className="sso-icon" />
-        <span className="sso-text">{text}</span>
+        <span className="sso-text" data-cy={`${dataCy}-text`}>
+          {text}
+        </span>
       </button>
     </div>
   );
diff --git a/frontend/src/modules/common/components/SubmitButton/SubmitButton.jsx b/frontend/src/modules/common/components/SubmitButton/SubmitButton.jsx
index 141b993b5c..0d5ae79659 100644
--- a/frontend/src/modules/common/components/SubmitButton/SubmitButton.jsx
+++ b/frontend/src/modules/common/components/SubmitButton/SubmitButton.jsx
@@ -8,8 +8,8 @@ import cx from 'classnames';
 const SubmitButton = ({
   onClick = () => {},
   disabled,
-  dataCy,
   buttonText,
+  dataCy = (buttonText || 'Get started for free').toLowerCase().replace(/\s+/g, '-'),
   isLoading,
   darkMode,
   isSignUpButtonDisabled,
@@ -26,7 +26,7 @@ const SubmitButton = ({
         className={classes}
         onClick={onClick}
         disabled={disabled || isLoading}
-        data-cy={dataCy}
+        data-cy={`${dataCy}-button`}
       >
         {isLoading ? (
           <div className="spinner-center">
diff --git a/frontend/src/modules/onboarding/components/OnboardingFormWrapper/OnboardingFormWrapper.jsx b/frontend/src/modules/onboarding/components/OnboardingFormWrapper/OnboardingFormWrapper.jsx
index 73e1acff0f..e2cc130573 100644
--- a/frontend/src/modules/onboarding/components/OnboardingFormWrapper/OnboardingFormWrapper.jsx
+++ b/frontend/src/modules/onboarding/components/OnboardingFormWrapper/OnboardingFormWrapper.jsx
@@ -19,7 +19,7 @@ const OnboardingFormWrapper = ({ children: components }) => {
   }
   return (
     <div>
-      <div className="tooljet-header cursor-pointer" onClick={redirectToLoginPage}>
+      <div className="tooljet-header cursor-pointer" onClick={redirectToLoginPage} data-cy="page-logo">
         <Logo />
       </div>
       {components}
diff --git a/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/SignupSuccessInfo.jsx b/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/SignupSuccessInfo.jsx
index 475ff9f93e..8339d1ced8 100644
--- a/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/SignupSuccessInfo.jsx
+++ b/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/SignupSuccessInfo.jsx
@@ -14,12 +14,16 @@ const SignupSuccessInfo = ({ email, name, backToSignup, organizationId, redirect
       <div className="email-verification-wrapper" style={{ width: '356px' }}>
         <OnboardingUIWrapper>
           <FormHeader>Check your mail</FormHeader>
-          <p className="message">{message}</p>
-          <span className="message">{info}</span>
+          <p className="message" data-cy="onboarding-page-description">
+            {message}
+          </p>
+          <span className="message" data-cy="info-message">
+            {info}
+          </span>
           <SepratorComponent />
           <ResendVerificationEmail email={email} organizationId={organizationId} redirectTo={redirectTo} />
-          <div className="back-to-signup-button" data-cy={'back-to-signup'}>
-            <button onClick={() => backToSignup(email, name)} className="button-parent">
+          <div className="back-to-signup-button">
+            <button onClick={() => backToSignup(email, name)} className="button-parent" data-cy={'back-to-signup'}>
               <span className="button-text">Back to sign up</span>
             </button>
           </div>
diff --git a/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/components/ResendVerificationEmail/ResendVerificationEmail.jsx b/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/components/ResendVerificationEmail/ResendVerificationEmail.jsx
index 8415c7e109..0144513058 100644
--- a/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/components/ResendVerificationEmail/ResendVerificationEmail.jsx
+++ b/frontend/src/modules/onboarding/pages/SignupPage/components/SignupSuccessInfo/components/ResendVerificationEmail/ResendVerificationEmail.jsx
@@ -32,11 +32,12 @@ const ResendVerificationEmail = ({ email, organizationId, redirectTo }) => {
     return () => clearTimeout(timer);
   }, [countdown]);
   return (
-    <div className="back-to-signup-button" data-cy={'resend-verification'}>
+    <div className="back-to-signup-button">
       <button
         onClick={handleResend}
         className={cx('button-parent', { disabled: isResendDisabled })}
         disabled={isResendDisabled}
+        data-cy={'resend-verification-email-button'}
       >
         <span className="button-text">
           {isResendDisabled ? `Resend verification email in ${countdown}s` : 'Resend verification email'}