Add automation ids for acceptance tests

[MAILPOET-3469]

assets/js/src/common/grid/three_columns.tsx

@@ -4,10 +4,11 @@ import classnames from 'classnames';
 type Props = {
   children?: React.ReactNode;
   className?: string;
+  automationId?: string;
 };
 
-export const ThreeColumns = ({ children, className }: Props): React.ReactElement => (
+export const ThreeColumns = ({ children, className, automationId }: Props): React.ReactElement => (
-  <div className={classnames(className, 'mailpoet-grid-three-columns')}>
+  <div className={classnames(className, 'mailpoet-grid-three-columns')} data-automation-id={automationId}>
     {children}
   </div>
 );

assets/js/src/segments/dynamic/condition_type.tsx

@@ -22,7 +22,7 @@ const ConditionType: React.FunctionComponent = () => {
   return (
     <>
       <div>
-        <label className="mailpoet-form-radio">
+        <label className="mailpoet-form-radio" data-automation-id="dynamic-segment-condition-type-and">
           <input
             type="radio"
             value={SegmentConnectTypes.AND}
@@ -40,7 +40,7 @@ const ConditionType: React.FunctionComponent = () => {
             )}
           </span>
         </label>
-        <label className="mailpoet-form-radio">
+        <label className="mailpoet-form-radio" data-automation-id="dynamic-segment-condition-type-or">
           <input
             type="radio"
             value={SegmentConnectTypes.OR}

assets/js/src/segments/dynamic/form.tsx

@@ -107,11 +107,12 @@ export const Form: React.FunctionComponent<Props> = ({
           <ConditionType />
           {Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
             <React.Fragment key={filterRow.index}>
-              <Grid.ThreeColumns>
+              <Grid.ThreeColumns automationId={`filter-row-${index}`}>
                 {filterRows.length > 1 && (
                   <a
                     href={undefined}
                     className="mailpoet-form-segment-delete"
+                    data-automation-id="delete-filter-row"
                     onClick={(e) => {
                       e.preventDefault();
                       const filters = segment.filters;