Add data-cy-* for items under /settings/appearance

components/input/Radio.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Radio = ({ id, children, className = 'inline-flex', ...rest }) => {
+
+const Radio = ({ id, children, className = 'inline-flex', cypressTag, ...rest }) => {
     return (
         <label htmlFor={id} className={className}>
             <input id={id} type="radio" className="pm-radio" {...rest} />
-            <span className="pm-radio-fakeradio" />
+            <span className="pm-radio-fakeradio" {...cypressTag} />
             {children}
         </label>
     );

components/toggle/Toggle.js

@@ -18,10 +18,11 @@ const label = (key) => {
     );
 };
 
+
 /**
  * @type any
  */
-const Toggle = ({ id = 'toggle', className = '', checked = false, loading, onChange, disabled, ...rest }) => {
+const Toggle = ({ id = 'toggle', className = '', checked = false, loading, onChange, disabled, cypressTag, ...rest }) => {
     const handleChange = (event) => {
         if (!disabled && onChange) {
             onChange(event);
@@ -40,7 +41,8 @@ const Toggle = ({ id = 'toggle', className = '', checked = false, loading, onCha
                 aria-busy={loading}
                 {...rest}
             />
-            <label htmlFor={id} className={classnames(['pm-toggle-label', className])}>
+
+            <label htmlFor={id} className={classnames(['pm-toggle-label', className])} {...cypressTag}>
                 {label('off')}
                 {label('on')}
             </label>

containers/layouts/ComposerModeRadios.js

@@ -19,7 +19,8 @@ const ComposerModeRadios = ({ composerMode, onChange, loading, id, ...rest }) =>
         onChange() {
             onChange(POPUP);
         },
-        children: <img alt="Popup" src={composerPopUpSvg} />
+        children: <img alt="Popup" src={composerPopUpSvg} 
+        data-cy-appearance-composer="popup" />
     };
     const radioCardMaximized = {
         value: MAXIMIZED,
@@ -31,7 +32,8 @@ const ComposerModeRadios = ({ composerMode, onChange, loading, id, ...rest }) =>
         onChange() {
             onChange(MAXIMIZED);
         },
-        children: <img alt="Maximized" src={composerMaximizedSvg} />
+        children: <img alt="Maximized" src={composerMaximizedSvg} 
+        data-cy-appearance-composer="maximized" />
     };
 
     return <RadioCards list={[radioCardPopup, radioCardMaximized]} id={id} {...rest} />;

containers/layouts/DraftTypeSelect.js

@@ -14,7 +14,7 @@ const DraftTypeSelect = ({ draftType, onChange, loading }) => {
 
     const handleChange = ({ target }) => onChange(target.value);
 
-    return <Select value={draftType} options={options} disabled={loading} onChange={handleChange} />;
+    return <Select value={draftType} options={options} disabled={loading} onChange={handleChange} data-cy-appearance="composer-mode" />;
 };
 
 DraftTypeSelect.propTypes = {

containers/layouts/LayoutsSection.js

@@ -154,6 +154,7 @@ const LayoutsSection = () => {
                             stickyLabels={StickyLabels}
                             loading={loadingStickyLabels}
                             onToggle={(value) => withLoadingStickyLabels(handleToggleStickyLabels(value))}
+                            cypressTag={{"data-cy-appearance":"sticky-labels"}}
                         />
                     </Field>
                 </Row>

containers/layouts/TextDirectionSelect.js

@@ -16,7 +16,7 @@ const TextDirectionSelect = ({ rightToLeft, onChange, loading }) => {
         onChange(target.value);
     };
 
-    return <Select value={rightToLeft} options={options} disabled={loading} onChange={handleChange} />;
+    return <Select value={rightToLeft} options={options} disabled={loading} onChange={handleChange} data-cy-appearance="composer-text-direction" />;
 };
 
 TextDirectionSelect.propTypes = {

containers/layouts/ToolbarsSection.js

@@ -45,6 +45,7 @@ const ToolbarsSection = () => {
                             disabled={loading}
                             onChange={hanldeChange}
                             value={READ_UNREAD}
+                            cypressTag={{"data-cy-appearance-toolbar":"read-unread"}}
                         >
                             <Group className="ml1 no-pointer-events">
                                 <ButtonGroup icon="read" title={c('Action').t`Read`} />
@@ -58,6 +59,7 @@ const ToolbarsSection = () => {
                             disabled={loading}
                             onChange={hanldeChange}
                             value={UNREAD_READ}
+                            cypressTag={{"data-cy-appearance-toolbar":"unread-read"}}
                         >
                             <Group className="ml1 no-pointer-events">
                                 <ButtonGroup icon="unread" title={c('Action').t`Unread`} />

containers/layouts/ViewLayoutRadios.js

@@ -19,7 +19,8 @@ const ViewLayoutRadios = ({ viewLayout, onChange, loading, id, ...rest }) => {
         onChange() {
             onChange(COLUMN);
         },
-        children: <img alt="Column" src={inboxColumnSvg} />
+        children: <img alt="Column" src={inboxColumnSvg}
+        data-cy-appearance-inbox="column" />
     };
     const radioCardRow = {
         value: ROW,
@@ -31,7 +32,8 @@ const ViewLayoutRadios = ({ viewLayout, onChange, loading, id, ...rest }) => {
         onChange() {
             onChange(ROW);
         },
-        children: <img alt="Row" src={inboxRowSvg} />
+        children: <img alt="Row" src={inboxRowSvg}
+        data-cy-appearance-inbox="row" />
     };
 
     return <RadioCards list={[radioCardColumn, radioCardRow]} id={id} {...rest} />;

containers/layouts/ViewModeRadios.js

@@ -19,7 +19,8 @@ const ViewModeRadios = ({ viewMode, onChange, loading, id, ...rest }) => {
         onChange() {
             onChange(GROUP);
         },
-        children: <img alt="Group" src={conversationGroupSvg} />
+        children: <img alt="Group" src={conversationGroupSvg}
+        data-cy-appearance-conversations="group" />
     };
     const radioCardSingle = {
         value: SINGLE,
@@ -31,7 +32,8 @@ const ViewModeRadios = ({ viewMode, onChange, loading, id, ...rest }) => {
         onChange() {
             onChange(SINGLE);
         },
-        children: <img alt="Single" src={conversationSingleSvg} />
+        children: <img alt="Single" src={conversationSingleSvg}
+        data-cy-appearance-conversations="single" />
     };
 
     return <RadioCards list={[radioCardGroup, radioCardSingle]} id={id} {...rest} />;

containers/notifications/Container.js

@@ -18,7 +18,7 @@ const NotificationsContainer = ({ notifications, removeNotification, hideNotific
         );
     });
 
-    return <div className="notifications-container flex flex-column flex-items-center">{list}</div>;
+    return <div className="notifications-container flex flex-column flex-items-center" data-cy="notifications-container">{list}</div>;
 };
 
 NotificationsContainer.propTypes = {