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

app/react/docker/services/ItemView/PortMappingField/PortsMappingField.tsx

@@ -64,7 +64,7 @@ export function PortsMappingField({
       isValid={!errors}
     >
       {values.length > 0 ? (
-        <Table>
+        <Table data-cy="service-published-ports-table">
           <thead>
             <tr>
               <th>Host port</th>
@@ -123,6 +123,7 @@ function Item({
               onChange={(value) => handleChange('hostPort', value)}
               id={`hostPort-${index}`}
               label="host"
+              data-cy={`hostPort-${index}`}
             />
           </div>
         </td>
@@ -132,6 +133,7 @@ function Item({
             onChange={(value) => handleChange('containerPort', value)}
             id={`containerPort-${index}`}
             label="container"
+            data-cy={`containerPort-${index}`}
           />
         </td>
         <td>
@@ -154,6 +156,7 @@ function Item({
             ]}
             disabled={disabled}
             aria-label="publish mode"
+            data-cy={`publishMode-${index}`}
           />
         </td>
         <td>
@@ -161,6 +164,7 @@ function Item({
             icon={Trash2}
             color="dangerlight"
             onClick={() => onRemove()}
+            data-cy={`remove-port-${index}`}
           />
         </td>
       </tr>

app/react/docker/services/ItemView/PortMappingField/RangeOrNumberField.tsx

@@ -1,3 +1,5 @@
+import { AutomationTestingProps } from '@/types';
+
 import { InputLabeled } from '@@/form-components/Input/InputLabeled';
 import { Checkbox } from '@@/form-components/Checkbox';
 
@@ -10,6 +12,7 @@ export function RangeOrNumberField({
   readOnly,
   id,
   label,
+  'data-cy': dataCy,
 }: {
   value: Range | number | undefined;
   onChange: (value: Range | number | undefined) => void;
@@ -17,10 +20,10 @@ export function RangeOrNumberField({
   readOnly?: boolean;
   id: string;
   label: string;
-}) {
+} & AutomationTestingProps) {
   return (
     <div className="flex gap-2 items-center">
-      <RangeCheckbox value={value} onChange={onChange} />
+      <RangeCheckbox value={value} onChange={onChange} data-cy={dataCy} />
       {isRange(value) ? (
         <RangeInput
           value={value}
@@ -29,6 +32,7 @@ export function RangeOrNumberField({
           disabled={disabled}
           readOnly={readOnly}
           id={id}
+          data-cy={dataCy}
         />
       ) : (
         <InputLabeled
@@ -42,6 +46,7 @@ export function RangeOrNumberField({
           value={value || ''}
           type="number"
           onChange={(e) => onChange(getNumber(e.target.valueAsNumber))}
+          data-cy={dataCy}
         />
       )}
     </div>
@@ -55,6 +60,7 @@ function RangeInput({
   readOnly,
   id,
   label,
+  'data-cy': dataCy,
 }: {
   value: Range;
   onChange: (value: Range) => void;
@@ -62,7 +68,7 @@ function RangeInput({
   readOnly?: boolean;
   id: string;
   label: string;
-}) {
+} & AutomationTestingProps) {
   return (
     <div className="flex items-center gap-2">
       <label className="font-normal m-0">{label}</label>
@@ -77,6 +83,7 @@ function RangeInput({
         readOnly={readOnly}
         id={id}
         type="number"
+        data-cy={`${dataCy}-start`}
       />
 
       <InputLabeled
@@ -90,6 +97,7 @@ function RangeInput({
         readOnly={readOnly}
         id={id}
         type="number"
+        data-cy={`${dataCy}-end`}
       />
     </div>
   );
@@ -106,10 +114,11 @@ function getNumber(value: number) {
 function RangeCheckbox({
   value,
   onChange,
+  'data-cy': dataCy,
 }: {
   value: Range | number | undefined;
   onChange: (value: Range | number | undefined) => void;
-}) {
+} & AutomationTestingProps) {
   const isValueRange = isRange(value);
   return (
     <Checkbox
@@ -122,6 +131,7 @@ function RangeCheckbox({
           onChange(value.start);
         }
       }}
+      data-cy={`${dataCy}-range-checkbox`}
     />
   );
 }

app/react/docker/services/ItemView/ServiceWidget.tsx

@@ -36,7 +36,13 @@ export function ServiceWidget({
     <Widget aria-label={title}>
       <Widget.Title icon={titleIcon} title={title}>
         <Authorized authorizations="DockerServiceUpdate">
-          <Button color="secondary" size="small" onClick={onAdd} icon={Plus}>
+          <Button
+            color="secondary"
+            size="small"
+            onClick={onAdd}
+            icon={Plus}
+            data-cy="service-add-button"
+          >
             {labelForAddButton}
           </Button>
         </Authorized>
@@ -51,6 +57,7 @@ export function ServiceWidget({
               type="button"
               onClick={onSubmit}
               disabled={!hasChanges || !isValid}
+              data-cy="service-apply-changes-button"
             >
               Apply changes
             </Button>
@@ -61,6 +68,7 @@ export function ServiceWidget({
                 size="small"
                 color="default"
                 icon={ChevronDown}
+                data-cy="service-reset-changes-button"
               >
                 <span className="sr-only">Toggle Dropdown</span>
               </MenuButton>

app/react/docker/services/ItemView/TasksDatatable/TasksDatatable.tsx

@@ -32,6 +32,7 @@ export function TasksDatatable({
       dataset={dataset}
       emptyContentLabel="No task available."
       extendTableOptions={withMeta({ table: 'tasks', serviceName })}
+      data-cy="docker-service-tasks-datatable"
     />
   );
 }

app/react/docker/services/ItemView/TasksDatatable/columns/task.tsx

@@ -40,11 +40,17 @@ function Cell({
       to="docker.containers.container"
       params={{ id: item.Container.Id, nodeName: item.Container.NodeName }}
       className="monospaced"
+      data-cy="docker-container-task-link"
     >
       {name}
     </Link>
   ) : (
-    <Link to="docker.tasks.task" params={{ id: value }} className="monospaced">
+    <Link
+      to="docker.tasks.task"
+      params={{ id: value }}
+      className="monospaced"
+      data-cy="docker-task-link"
+    >
       {name}
     </Link>
   );