diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx index 5c7f073869e48..0a631137e019d 100644 --- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx +++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx @@ -63,6 +63,8 @@ export interface BaseButtonProps { * @default 'start' */ readonly iconPosition?: IconPosition + + readonly testId?: string } /** @@ -155,6 +157,7 @@ export const Button = React.forwardRef(function Button( fullWidth = false, rounding = 'large', tooltip, + testId, ...ariaProps } = props const focusChildProps = focusHooks.useFocusChild() @@ -163,7 +166,9 @@ export const Button = React.forwardRef(function Button( const Tag = isLink ? aria.Link : aria.Button - const goodDefaults = isLink ? { rel: 'noopener noreferrer' } : { type: 'button' } + const goodDefaults = isLink + ? { rel: 'noopener noreferrer', 'data-testid': testId ?? 'link' } + : { type: 'button', 'data-testid': testId ?? 'button' } const tooltipElement = tooltip === false ? null : tooltip ?? ariaProps['aria-label'] diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx index af1532d6e2095..d057305025f41 100644 --- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx +++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx @@ -50,6 +50,7 @@ export function Dialog(props: types.DialogProps) { className, onOpenChange = () => {}, modalProps, + testId = 'dialog', ...ariaDialogProps } = props const cleanupRef = React.useRef(() => {}) @@ -80,6 +81,11 @@ export function Dialog(props: types.DialogProps) { cleanupRef.current = () => { element.removeEventListener('click', onClick) } + + // This is a workaround for the fact that the Dialog component does not support the testid prop + // We need to set the testid on the Dialog element itself, so that we can test the Dialog component + // This is a temporary solution until the Dialog component is refatored to use `useDialog` hook + element.dataset.testid = testId } }} > diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts index 7b6f2693832e9..2f2743b40bba1 100644 --- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts +++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts @@ -15,6 +15,8 @@ export interface DialogProps extends aria.DialogProps { readonly onOpenChange?: (isOpen: boolean) => void readonly isKeyboardDismissDisabled?: boolean readonly modalProps?: Pick + + readonly testId?: string } /** The props for the DialogTrigger component. */ diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/Form.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/Form.tsx index 7dcc3f021c6fe..a2566391156c7 100644 --- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/Form.tsx +++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/Form.tsx @@ -43,6 +43,7 @@ export const Form = React.forwardRef(function Form< onSubmitSuccess = () => {}, onSubmitFailed = () => {}, id = formId, + testId, schema, ...formProps } = props @@ -59,7 +60,7 @@ export const Form = React.forwardRef(function Form< React.useImperativeHandle(formRef, () => innerForm, [innerForm]) const formMutation = reactQuery.useMutation({ - mutationKey: ['FormSubmit', id], + mutationKey: ['FormSubmit', testId, id], mutationFn: async (fieldValues: TFieldValues) => { try { await onSubmit(fieldValues, innerForm) @@ -102,6 +103,7 @@ export const Form = React.forwardRef(function Form< className={typeof className === 'function' ? className(formStateRenderProps) : className} style={typeof style === 'function' ? style(formStateRenderProps) : style} noValidate + data-testid={testId} {...formProps} > diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/components/Submit.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/components/Submit.tsx index 0ea4c0c82e17a..03343402fd15e 100644 --- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/components/Submit.tsx +++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/components/Submit.tsx @@ -38,7 +38,12 @@ export type SubmitProps = Omit ) } diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/types.ts b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/types.ts index 1bfb56c343994..387a7d75f4489 100644 --- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/types.ts +++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/types.ts @@ -3,6 +3,8 @@ * Types for the Form component. */ +import type * as React from 'react' + import type * as reactHookForm from 'react-hook-form' import type * as z from 'zod' @@ -51,6 +53,8 @@ interface BaseFormProps< readonly onSubmitFailed?: (error: unknown) => Promise | void readonly onSubmitSuccess?: () => Promise | void readonly onSubmitted?: () => Promise | void + + readonly testId?: string } /** diff --git a/app/ide-desktop/lib/dashboard/src/modals/TermsOfServiceModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/TermsOfServiceModal.tsx index 13d45432bf144..7a333d0bd993f 100644 --- a/app/ide-desktop/lib/dashboard/src/modals/TermsOfServiceModal.tsx +++ b/app/ide-desktop/lib/dashboard/src/modals/TermsOfServiceModal.tsx @@ -79,8 +79,10 @@ export function TermsOfServiceModal() { isDismissable={false} hideCloseButton modalProps={{ isOpen: true }} + testId="terms-of-service-modal" > { void checkboxRegister.onChange(event) }} + data-testid="terms-of-service-checkbox" />