Fix acceptance tests

[MAILPOET-2677]

assets/js/src/settings/components/pages_select.tsx

@@ -5,6 +5,7 @@ import { onChange, t } from 'common/functions';
 type Props = {
   id?: string
   value: string
+  automationId?: string
   linkAutomationId?: string
   setValue: (x: string) => any
   preview: 'manage' | 'unsubscribe' | 'confirm'
@@ -17,7 +18,12 @@ export default (props: Props) => {
     : pages[0];
   return (
     <>
-      <select id={props.id} value={props.value} onChange={onChange(props.setValue)}>
+      <select
+        id={props.id}
+        data-automation-id={props.automationId}
+        value={props.value}
+        onChange={onChange(props.setValue)}
+      >
         {pages.map((page) => (
           <option key={page.id} value={page.id}>
             {`${page.title}`}

assets/js/src/settings/components/save_button.tsx

@@ -24,7 +24,15 @@ export default () => {
   };
   return (
     <div>
-      <button type="button" className="button button-primary" disabled={isSaving || hasError} onClick={onClick}>{MailPoet.I18n.t('saveSettings')}</button>
+      <button
+        type="button"
+        data-automation-id="settings-submit-button"
+        className="button button-primary"
+        disabled={isSaving || hasError}
+        onClick={onClick}
+      >
+        {MailPoet.I18n.t('saveSettings')}
+      </button>
     </div>
   );
 };

assets/js/src/settings/pages/basics/default_sender.tsx

@@ -29,14 +29,14 @@ export default function DefaultSender() {
           type="text"
           id="sender-name"
           placeholder={t`yourName`}
-          data-automation-id="settings-page-from-name-field"
+          data-automation-id="from-name-field"
           value={senderName}
           onChange={onChange(setSenderName)}
         />
         <input
           type="text"
           placeholder="from@mydomain.com"
-          data-automation-id="settings-page-from-email-field"
+          data-automation-id="from-email-field"
           value={senderEmail}
           onChange={onChange(setSenderEmail)}
         />
@@ -56,14 +56,14 @@ export default function DefaultSender() {
           type="text"
           id="reply_to-name"
           placeholder={t`yourName`}
-          data-automation-id="settings-page-from-name-field"
+          data-automation-id="reply_to-name-field"
           value={replyToName}
           onChange={onChange(setReplyToName)}
         />
         <input
           type="text"
           placeholder="reply_to@mydomain.com"
-          data-automation-id="settings-page-from-email-field"
+          data-automation-id="reply_to-email-field"
           value={replyToEmail}
           onChange={onChange(setReplyToEmail)}
         />

assets/js/src/settings/pages/basics/manage_subscription.tsx

@@ -19,14 +19,15 @@ export default function ManageSubscription() {
             {t`manageSubDescription2`}
           </>
         )}
-        htmlFor="subscription-pages-manage"
+        htmlFor="subscription-manage-page"
       />
       <Inputs>
         <PagesSelect
           value={page}
           preview="manage"
           setValue={setPage}
-          id="subscription-pages-manage"
+          id="subscription-manage-page"
+          automationId="subscription-manage-page-selection"
           linkAutomationId="preview_manage_subscription_page_link"
         />
         <br />

assets/js/src/settings/pages/basics/subscribe_on.tsx

@@ -24,6 +24,7 @@ export default function SubscribeOn({ title, description, event }: Props) {
         <input
           type="checkbox"
           id={`subscribe-${event}-enabled`}
+          data-automation-id={`subscribe-${event}-checkbox`}
           checked={enabled === '1'}
           onChange={onToggle(setEnabled)}
         />
@@ -39,7 +40,9 @@ export default function SubscribeOn({ title, description, event }: Props) {
             <br />
             <label htmlFor={`subscribe-${event}-segments`}>{t`usersWillBeSubscribedTo`}</label>
             <br />
-            <SegmentsSelect id={`subscribe-${event}-segments`} placeholder={t`chooseList`} value={segments} setValue={setSegments} />
+            <div data-automation-id={`subscribe-${event}-segments-selection`}>
+              <SegmentsSelect id={`subscribe-${event}-segments`} placeholder={t`chooseList`} value={segments} setValue={setSegments} />
+            </div>
           </>
         )}
       </Inputs>