From 3fde1e14b2036c09ff28cf6152dd705c3e8a6fbe Mon Sep 17 00:00:00 2001 From: Mekhla Asopa <59684099+Mekhla-Asopa@users.noreply.github.com> Date: Fri, 9 May 2025 10:18:07 +0530 Subject: [PATCH] Added data-cy for data source (#12815) * added datasource data-cy * add method to get data-cy * update the required fix * fix format * fix selectors * fix selector for appSlug spec --------- Co-authored-by: Akshay --- .../cypress/constants/selectors/common.js | 7 ++++--- .../cypress/constants/selectors/restAPI.js | 2 +- frontend/src/_components/DynamicForm.jsx | 16 +++++++++------- frontend/src/_components/DynamicFormV2.jsx | 16 ++++++++++------ frontend/src/_ui/HttpHeaders/SourceEditor.jsx | 5 ++--- .../components/ui/Input/CommonInput/Index.jsx | 4 +++- .../ui/Input/InputUtils/InputUtils.jsx | 5 +++-- .../src/modules/common/helpers/cypressHelpers.js | 6 ++++++ .../DataSourceManager/DataSourceManager.jsx | 7 ++++++- 9 files changed, 44 insertions(+), 24 deletions(-) create mode 100644 frontend/src/modules/common/helpers/cypressHelpers.js diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js index 42e3378825..ec104d67bc 100644 --- a/cypress-tests/cypress/constants/selectors/common.js +++ b/cypress-tests/cypress/constants/selectors/common.js @@ -6,7 +6,8 @@ export const commonSelectors = { toastMessage: ".go3958317564", oldToastMessage: ".go318386747", appSlugAccept: '[data-cy="app-slug-accepted-label"]', - newToastMessage: '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551 > .go3958317564', + newToastMessage: + '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551 > .go3958317564', toastCloseButton: '[data-cy="toast-close-button"]', editButton: "[data-cy=edit-button]", workspaceConstantNameInput: '[data-cy="name-input-field"]', @@ -18,7 +19,7 @@ export const commonSelectors = { appCardOptionsButton: "[data-cy=app-card-menu-icon]", autoSave: "[data-cy=autosave-indicator]", nameInputFieldd: "[data-cy=name-input-field]", - valueInputFieldd: '[data-cy=value-input-field]', + valueInputFieldd: "[data-cy=value-input-field]", skipButton: ".driver-close-btn", skipInstallationModal: "[data-cy=skip-button]", homePageLogo: "[data-cy=home-page-logo]", @@ -395,7 +396,7 @@ export const commonWidgetSelector = { modalCloseButton: '[data-cy="modal-close-button"]', iframeLinkLabel: '[data-cy="iframe-link-label"]', ifameLinkCopyButton: '[data-cy="iframe-link-copy-button"]', - appSlugLabel: '[data-cy="input-field-label"]', + appSlugLabel: '[data-cy="unique-app-slug-field-label"]', appSlugInput: '[data-cy="app-slug-input-field"]', appSlugInfoLabel: '[data-cy="helper-text"]', appLinkLabel: '[data-cy="app-link-label"]', diff --git a/cypress-tests/cypress/constants/selectors/restAPI.js b/cypress-tests/cypress/constants/selectors/restAPI.js index a24c115712..5ec2d73954 100644 --- a/cypress-tests/cypress/constants/selectors/restAPI.js +++ b/cypress-tests/cypress/constants/selectors/restAPI.js @@ -24,7 +24,7 @@ export const restAPISelector = { return `[data-cy="${cyParamName(header)}-delete-button-${cyParamName(index)}"]`; }, addMoreButton: (header) => { - return `[data-cy="${cyParamName(header)}-add-more-button"]`; + return `[data-cy="${cyParamName(header)}-add-button"]`; }, dropdownLabel: (label) => { return `[data-cy="${cyParamName(label)}-dropdown-label"]`; diff --git a/frontend/src/_components/DynamicForm.jsx b/frontend/src/_components/DynamicForm.jsx index 0f5db30e9b..a71974afc4 100644 --- a/frontend/src/_components/DynamicForm.jsx +++ b/frontend/src/_components/DynamicForm.jsx @@ -26,6 +26,7 @@ import { Constants } from '@/_helpers/utils'; import { OverlayTrigger, Tooltip } from 'react-bootstrap'; import Sharepoint from '@/_components/Sharepoint'; import AccordionForm from './AccordionForm'; +import { generateCypressDataCy } from '../modules/common/helpers/cypressHelpers'; const DynamicForm = ({ schema, @@ -534,7 +535,7 @@ const DynamicForm = ({ const labelElement = ( )} -
+
{flipComponentDropdown.helpText && ( diff --git a/frontend/src/_ui/HttpHeaders/SourceEditor.jsx b/frontend/src/_ui/HttpHeaders/SourceEditor.jsx index 04df343740..dda0775468 100644 --- a/frontend/src/_ui/HttpHeaders/SourceEditor.jsx +++ b/frontend/src/_ui/HttpHeaders/SourceEditor.jsx @@ -21,8 +21,7 @@ export default ({ return (
{options.length === 0 && ( -
+
There are no key value pairs added
@@ -86,7 +85,7 @@ export default ({
addNewKeyValuePair(options)} diff --git a/frontend/src/components/ui/Input/CommonInput/Index.jsx b/frontend/src/components/ui/Input/CommonInput/Index.jsx index baee3ad5d8..2b968a0940 100644 --- a/frontend/src/components/ui/Input/CommonInput/Index.jsx +++ b/frontend/src/components/ui/Input/CommonInput/Index.jsx @@ -3,6 +3,7 @@ import NumberInput from './NumberInput'; import TextInput from './TextInput'; import { HelperMessage, InputLabel, ValidationMessage } from '../InputUtils/InputUtils'; import { ButtonSolid } from '../../../../_components/AppButton'; +import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js'; const CommonInput = ({ label, helperText, disabled, required, onChange: change, ...restProps }) => { const { type, encrypted, validation, isValidatedMessages, isDisabled } = restProps; @@ -65,13 +66,14 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change, rel="noreferrer" disabled={isDisabled} onClick={toggleEditing} + data-cy={`button-${generateCypressDataCy(isEditing ? 'Cancel' : 'Edit')}`} > {isEditing ? 'Cancel' : 'Edit'}
- + Encrypted diff --git a/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx b/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx index 57128adf73..57e92a819b 100644 --- a/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx +++ b/frontend/src/components/ui/Input/InputUtils/InputUtils.jsx @@ -3,6 +3,7 @@ import { Label } from '../../Label/Label'; import ValidationIcon from './ValidationIcon'; import { cn } from '@/lib/utils'; import HelperIcon from './HelperIcon'; +import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js'; export const ValidationMessage = ({ response, validationMessage, className }) => (
@@ -14,7 +15,7 @@ export const ValidationMessage = ({ response, validationMessage, className }) => type="helper" size="default" className={`tw-font-normal ${response === true ? 'tw-text-text-success' : '!tw-text-text-warning'}`} - data-cy="validation-label" + data-cy={`${generateCypressDataCy(validationMessage)}-validation-label`} > {validationMessage} @@ -53,7 +54,7 @@ export const InputLabel = ({ disabled, label, required }) => ( type="label" size="default" className={`tw-font-medium tw-mb-[2px] ${disabled ? 'tw-text-text-disabled' : ''}`} - data-cy="input-field-label" + data-cy={`${generateCypressDataCy(label)}-field-label`} > {label} {required && } diff --git a/frontend/src/modules/common/helpers/cypressHelpers.js b/frontend/src/modules/common/helpers/cypressHelpers.js new file mode 100644 index 0000000000..36bb5d713f --- /dev/null +++ b/frontend/src/modules/common/helpers/cypressHelpers.js @@ -0,0 +1,6 @@ +export function generateCypressDataCy(text) { + return String(text) + .toLowerCase() + .replace(/[^a-z0-9]+/g, "-") + .replace(/^-+|-+$/g, ""); +} diff --git a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx index 65ee96758b..ea556429dd 100644 --- a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx +++ b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx @@ -36,6 +36,7 @@ import './dataSourceManager.theme.scss'; import { canUpdateDataSource } from '@/_helpers'; import DataSourceSchemaManager from '@/_helpers/dataSourceSchemaManager'; import MultiEnvTabs from './MultiEnvTabs'; +import { generateCypressDataCy } from '../../../common/helpers/cypressHelpers'; class DataSourceManagerComponent extends React.Component { constructor(props) { @@ -1127,7 +1128,11 @@ class DataSourceManagerComponent extends React.Component {
{validationError.map((error, index) => ( -
+
{error}
))}