chore(data-cy): require data-cy attributes [EE-6880] (#11453)

app/react/components/buttons/AddButton.stories.tsx

@@ -12,7 +12,7 @@ type Args = {
 };
 
 function Template({ label }: Args) {
-  return <AddButton>{label}</AddButton>;
+  return <AddButton data-cy="add-">{label}</AddButton>;
 }
 
 export const Primary: Story<Args> = Template.bind({});

app/react/components/buttons/AddButton.test.tsx

@@ -28,7 +28,11 @@ function renderDefault({
     ],
     route: 'root',
   });
-  return render(<Wrapped to="">{label}</Wrapped>);
+  return render(
+    <Wrapped to="" data-cy="wrapped">
+      {label}
+    </Wrapped>
+  );
 }
 
 test('should display a AddButton component', async () => {

app/react/components/buttons/AddButton.tsx

@@ -25,10 +25,10 @@ export function AddButton({
   return (
     <Button
       as={Link}
-      props={{ to, params }}
+      props={{ to, params, 'data-cy': `${dataCy}-link` }}
       icon={Plus}
       className="!m-0"
-      data-cy={dataCy}
+      data-cy={`${dataCy}-button`}
       color={color}
       disabled={disabled}
     >

app/react/components/buttons/Button.stories.tsx

@@ -50,6 +50,7 @@ export function DifferentTheme() {
                 {states.map((state) => (
                   <Button
                     color={color}
+                    data-cy="button"
                     key={state}
                     disabled={state === 'disabled'}
                   >
@@ -72,7 +73,13 @@ function Template({
   disabled,
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
-    <Button onClick={onClick} color={color} size={size} disabled={disabled}>
+    <Button
+      onClick={onClick}
+      color={color}
+      size={size}
+      disabled={disabled}
+      data-cy="button"
+    >
       Primary Button
     </Button>
   );
@@ -90,7 +97,7 @@ Primary.args = {
 
 export function Disabled() {
   return (
-    <Button color="primary" onClick={() => {}} disabled>
+    <Button color="primary" onClick={() => {}} disabled data-cy="button">
       Disabled Button
     </Button>
   );
@@ -98,7 +105,7 @@ export function Disabled() {
 
 export function Danger() {
   return (
-    <Button color="danger" onClick={() => {}}>
+    <Button color="danger" onClick={() => {}} data-cy="button">
       Danger Button
     </Button>
   );
@@ -106,7 +113,7 @@ export function Danger() {
 
 export function ButtonIcon() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download}>
+    <Button color="primary" onClick={() => {}} icon={Download} data-cy="button">
       Button with an icon
     </Button>
   );
@@ -114,7 +121,13 @@ export function ButtonIcon() {
 
 export function ButtonIconLarge() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download} size="large">
+    <Button
+      color="primary"
+      onClick={() => {}}
+      icon={Download}
+      size="large"
+      data-cy="button"
+    >
       Button with an icon
     </Button>
   );
@@ -122,7 +135,13 @@ export function ButtonIconLarge() {
 
 export function ButtonIconMedium() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download} size="medium">
+    <Button
+      color="primary"
+      onClick={() => {}}
+      icon={Download}
+      size="medium"
+      data-cy="button"
+    >
       Button with an icon
     </Button>
   );
@@ -130,7 +149,13 @@ export function ButtonIconMedium() {
 
 export function ButtonIconXSmall() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download} size="xsmall">
+    <Button
+      color="primary"
+      onClick={() => {}}
+      icon={Download}
+      size="xsmall"
+      data-cy="button"
+    >
       Button with an icon
     </Button>
   );
@@ -138,7 +163,7 @@ export function ButtonIconXSmall() {
 
 export function Default() {
   return (
-    <Button color="default" onClick={() => {}}>
+    <Button color="default" onClick={() => {}} data-cy="button">
       Default
     </Button>
   );
@@ -146,7 +171,7 @@ export function Default() {
 
 export function Link() {
   return (
-    <Button color="link" onClick={() => {}}>
+    <Button color="link" onClick={() => {}} data-cy="button">
       Link Button
     </Button>
   );
@@ -154,7 +179,7 @@ export function Link() {
 
 export function XSmall() {
   return (
-    <Button color="primary" onClick={() => {}} size="xsmall">
+    <Button color="primary" onClick={() => {}} size="xsmall" data-cy="button">
       XSmall Button
     </Button>
   );
@@ -162,7 +187,7 @@ export function XSmall() {
 
 export function Small() {
   return (
-    <Button color="primary" onClick={() => {}} size="small">
+    <Button color="primary" onClick={() => {}} size="small" data-cy="button">
       Small Button
     </Button>
   );
@@ -170,7 +195,7 @@ export function Small() {
 
 export function Large() {
   return (
-    <Button color="primary" onClick={() => {}} size="large">
+    <Button color="primary" onClick={() => {}} size="large" data-cy="button">
       Large Button
     </Button>
   );

app/react/components/buttons/Button.test.tsx

@@ -14,6 +14,7 @@ function renderDefault({
   return render(
     <Button
       type={type}
+      data-cy="button"
       color={color}
       size={size}
       disabled={disabled}

app/react/components/buttons/ButtonGroup.stories.tsx

@@ -15,19 +15,30 @@ function Template({
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
     <ButtonGroup size={size}>
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
-      <Button icon={Play} color="primary" disabled onClick={() => {}}>
+      <Button
+        icon={Play}
+        color="primary"
+        disabled
+        onClick={() => {}}
+        data-cy="button"
+      >
         Resume
       </Button>
-      <Button icon={Trash2} color="danger" onClick={() => {}}>
+      <Button icon={Trash2} color="danger" onClick={() => {}} data-cy="button">
         Remove
       </Button>
     </ButtonGroup>
@@ -42,16 +53,21 @@ Primary.args = {
 export function Xsmall() {
   return (
     <ButtonGroup size="xsmall">
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
     </ButtonGroup>
@@ -61,16 +77,21 @@ export function Xsmall() {
 export function Small() {
   return (
     <ButtonGroup size="small">
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
     </ButtonGroup>
@@ -80,16 +101,21 @@ export function Small() {
 export function Large() {
   return (
     <ButtonGroup size="large">
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={Play} color="light" onClick={() => {}}>
+      <Button icon={Play} color="light" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
     </ButtonGroup>

app/react/components/buttons/CopyButton/CopyButton.stories.tsx

@@ -14,7 +14,11 @@ function Template({
   children,
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
-    <CopyButton copyText={copyText} displayText={displayText}>
+    <CopyButton
+      copyText={copyText}
+      displayText={displayText}
+      data-cy="copy-button"
+    >
       {children}
     </CopyButton>
   );

app/react/components/buttons/CopyButton/CopyButton.test.tsx

@@ -5,7 +5,9 @@ import { CopyButton } from './CopyButton';
 test('should display a CopyButton with children', async () => {
   const children = 'test button children';
   const { findByText } = render(
-    <CopyButton copyText="">{children}</CopyButton>
+    <CopyButton copyText="" data-cy="copy-button">
+      {children}
+    </CopyButton>
   );
 
   const button = await findByText(children);
@@ -25,7 +27,9 @@ test('CopyButton should copy text to clipboard', async () => {
   const children = 'button';
   const copyText = 'text successfully copied to clipboard';
   const { findByText } = render(
-    <CopyButton copyText={copyText}>{children}</CopyButton>
+    <CopyButton copyText={copyText} data-cy="copy-button">
+      {children}
+    </CopyButton>
   );
 
   const button = await findByText(children);

app/react/components/buttons/CopyButton/CopyButton.tsx

@@ -2,6 +2,8 @@ import { ComponentProps, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { Check, Copy } from 'lucide-react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Icon } from '@@/Icon';
 
 import { Button } from '../Button';
@@ -9,7 +11,7 @@ import { Button } from '../Button';
 import styles from './CopyButton.module.css';
 import { useCopy } from './useCopy';
 
-export interface Props {
+export interface Props extends AutomationTestingProps {
   copyText: string;
   fadeDelay?: number;
   displayText?: string;
@@ -26,6 +28,7 @@ export function CopyButton({
   color,
   indicatorPosition = 'right',
   children,
+  'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   const { handleCopy, copiedSuccessfully } = useCopy(copyText, fadeDelay);
 
@@ -57,6 +60,7 @@ export function CopyButton({
         type="button"
         icon={Copy}
         disabled={!copyText}
+        data-cy={dataCy}
       >
         {children}
       </Button>

app/react/components/buttons/DeleteButton.tsx

@@ -23,8 +23,8 @@ type ConfirmOrClick =
 export function DeleteButton({
   disabled,
   size,
-  'data-cy': dataCy,
   children,
+  'data-cy': dataCy,
   ...props
 }: PropsWithChildren<
   AutomationTestingProps &

app/react/components/buttons/LoadingButton.stories.tsx

@@ -17,6 +17,7 @@ function Template({ loadingText, isLoading }: Args) {
   return (
     <LoadingButton
       loadingText={loadingText}
+      data-cy="loading-button"
       isLoading={isLoading}
       icon={Download}
     >
@@ -34,7 +35,12 @@ export const Example = Template.bind({});
 
 export function IsLoading() {
   return (
-    <LoadingButton loadingText="loading" isLoading icon={Download}>
+    <LoadingButton
+      loadingText="loading"
+      isLoading
+      icon={Download}
+      data-cy="loading-button"
+    >
       Download
     </LoadingButton>
   );

app/react/components/buttons/LoadingButton.test.tsx

@@ -7,7 +7,7 @@ test('when isLoading is true should show spinner and loading text', async () =>
   const children = 'not visible';
 
   const { queryByText, findByText, container } = render(
-    <LoadingButton loadingText={loadingText} isLoading>
+    <LoadingButton loadingText={loadingText} isLoading data-cy="loading-button">
       {children}
     </LoadingButton>
   );
@@ -27,7 +27,11 @@ test('should show children when false', async () => {
   const children = 'visible';
 
   const { queryByText, container } = render(
-    <LoadingButton loadingText={loadingText} isLoading={false}>
+    <LoadingButton
+      loadingText={loadingText}
+      isLoading={false}
+      data-cy="loading-button"
+    >
       {children}
     </LoadingButton>
   );