mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-21 13:37:28 +00:00
Added data-cy for newly added components (#11435)
This commit is contained in:
Ajith KV
GitHub
parent
3b7577262d
commit
b87dbf304c
17 changed files with 58 additions and 37 deletions
|
|
@ -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')}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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={() =>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1,013 B After Width: | Height: | Size: 1 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 516 B After Width: | Height: | Size: 540 B |
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
Loading…
Reference in a new issue