From 22736d39821351937cee360a855a60de716d6d2e Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Wed, 17 Jul 2019 10:51:50 +0200
Subject: [PATCH 01/10] Data-cy-* for composer appearance settings.

---
 containers/layouts/ComposerModeRadios.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/containers/layouts/ComposerModeRadios.js b/containers/layouts/ComposerModeRadios.js
index 87962e741..fec37dd1d 100644
--- a/containers/layouts/ComposerModeRadios.js
+++ b/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} />;

From c5991f3626d566ed21ffec7499ccbd3eb369826b Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Wed, 17 Jul 2019 11:07:38 +0200
Subject: [PATCH 02/10] Add data-cy-* for mailbox layouts.

---
 containers/layouts/ViewLayoutRadios.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/containers/layouts/ViewLayoutRadios.js b/containers/layouts/ViewLayoutRadios.js
index e466cee04..9d2773c80 100644
--- a/containers/layouts/ViewLayoutRadios.js
+++ b/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} />;

From 27235161045536d324aec227f5894e96af09480f Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Wed, 17 Jul 2019 13:18:17 +0200
Subject: [PATCH 03/10] data-cy-* for Sticky labels setting.

---
 containers/layouts/LayoutsSection.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/containers/layouts/LayoutsSection.js b/containers/layouts/LayoutsSection.js
index bf67dbcff..95efc9860 100644
--- a/containers/layouts/LayoutsSection.js
+++ b/containers/layouts/LayoutsSection.js
@@ -150,6 +150,7 @@ const LayoutsSection = () => {
                             stickyLabels={StickyLabels}
                             loading={loadingStickyLabels}
                             onToggle={(value) => withLoadingStickyLabels(handleToggleStickyLabels(value))}
+                            data-cy-appearance="sticky-labels"
                         />
                     </Field>
                 </Row>

From f8beeb2f74a1e5f96791359b3073dbf1035f279d Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Wed, 17 Jul 2019 13:20:06 +0200
Subject: [PATCH 04/10] data-cy-* for composer mode setting.

---
 containers/layouts/DraftTypeSelect.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/containers/layouts/DraftTypeSelect.js b/containers/layouts/DraftTypeSelect.js
index d768647ac..c9f399569 100644
--- a/containers/layouts/DraftTypeSelect.js
+++ b/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 = {

From 3c5b3f310b458f3c0b4c109ba1a0ad1236def90d Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Wed, 17 Jul 2019 13:32:14 +0200
Subject: [PATCH 05/10] data-cy-* for composer text direction.

---
 containers/layouts/TextDirectionSelect.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/containers/layouts/TextDirectionSelect.js b/containers/layouts/TextDirectionSelect.js
index adc0f6022..dede4e192 100644
--- a/containers/layouts/TextDirectionSelect.js
+++ b/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 = {

From 03df77afc8278fb09e630cb545bd550a0297496d Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Wed, 17 Jul 2019 14:04:46 +0200
Subject: [PATCH 06/10] data-cy-* for read/unread toolbar.

---
 containers/layouts/ToolbarsSection.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/containers/layouts/ToolbarsSection.js b/containers/layouts/ToolbarsSection.js
index 2484214e1..0c4573b4d 100644
--- a/containers/layouts/ToolbarsSection.js
+++ b/containers/layouts/ToolbarsSection.js
@@ -45,6 +45,7 @@ const ToolbarsSection = () => {
                             disabled={loading}
                             onChange={hanldeChange}
                             value={READ_UNREAD}
+                            data-cy-appearance-toolbar="read-unread"
                         >
                             <Group className="ml1 no-pointer-events">
                                 <Button icon="read" className="pm-button-group" title={c('Action').t`Read`} />
@@ -58,6 +59,7 @@ const ToolbarsSection = () => {
                             disabled={loading}
                             onChange={hanldeChange}
                             value={UNREAD_READ}
+                            data-cy-appearance-toolbar="unread-read"
                         >
                             <Group className="ml1 no-pointer-events">
                                 <Button icon="unread" className="pm-button-group" title={c('Action').t`Unread`} />

From 789acab936d5f2f5bb8508de512fec25c0840391 Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Thu, 18 Jul 2019 09:54:28 +0200
Subject: [PATCH 07/10] Add data-cy-* for notifications contained.

---
 containers/notifications/Container.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/containers/notifications/Container.js b/containers/notifications/Container.js
index 075600fd7..3607a3b23 100644
--- a/containers/notifications/Container.js
+++ b/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 = {

From 10704e345701a83d294ae6b06dd2aa54997e4210 Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Thu, 18 Jul 2019 16:20:14 +0200
Subject: [PATCH 08/10] Update radio component + selectors.

---
 components/input/Radio.js             | 4 ++--
 containers/layouts/ToolbarsSection.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/input/Radio.js b/components/input/Radio.js
index bed09e181..fe064da5d 100644
--- a/components/input/Radio.js
+++ b/components/input/Radio.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Radio = ({ id, children, className, ...rest }) => {
+const Radio = ({ id, children, className, 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>
     );
diff --git a/containers/layouts/ToolbarsSection.js b/containers/layouts/ToolbarsSection.js
index 0c4573b4d..30ac9c01a 100644
--- a/containers/layouts/ToolbarsSection.js
+++ b/containers/layouts/ToolbarsSection.js
@@ -45,7 +45,7 @@ const ToolbarsSection = () => {
                             disabled={loading}
                             onChange={hanldeChange}
                             value={READ_UNREAD}
-                            data-cy-appearance-toolbar="read-unread"
+                            cypressTag={{"data-cy-appearance-toolbar":"read-unread"}}
                         >
                             <Group className="ml1 no-pointer-events">
                                 <Button icon="read" className="pm-button-group" title={c('Action').t`Read`} />
@@ -59,7 +59,7 @@ const ToolbarsSection = () => {
                             disabled={loading}
                             onChange={hanldeChange}
                             value={UNREAD_READ}
-                            data-cy-appearance-toolbar="unread-read"
+                            cypressTag={{"data-cy-appearance-toolbar":"unread-read"}}
                         >
                             <Group className="ml1 no-pointer-events">
                                 <Button icon="unread" className="pm-button-group" title={c('Action').t`Unread`} />

From 3205b78d843a72cb25a0760c42d5f8037ebbdc05 Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Fri, 19 Jul 2019 14:02:11 +0200
Subject: [PATCH 09/10] Update toggle component + selectors.

---
 components/toggle/Toggle.js          | 4 ++--
 containers/layouts/LayoutsSection.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/toggle/Toggle.js b/components/toggle/Toggle.js
index bca0866b5..821681768 100644
--- a/components/toggle/Toggle.js
+++ b/components/toggle/Toggle.js
@@ -17,7 +17,7 @@ const label = (key) => {
     );
 };
 
-const Toggle = ({ id, className, checked, loading, onChange, disabled, ...rest }) => {
+const Toggle = ({ id, className, checked, loading, onChange, disabled, cypressTag, ...rest }) => {
     const handleChange = (event) => {
         if (!disabled && onChange) {
             onChange(event);
@@ -36,7 +36,7 @@ const Toggle = ({ id, className, checked, loading, onChange, disabled, ...rest }
                 aria-busy={loading}
                 {...rest}
             />
-            <label htmlFor={id} className={`pm-toggle-label ${className}`}>
+            <label htmlFor={id} className={`pm-toggle-label ${className}`} {...cypressTag}>
                 {label('off')}
                 {label('on')}
             </label>
diff --git a/containers/layouts/LayoutsSection.js b/containers/layouts/LayoutsSection.js
index 95efc9860..fb8090da0 100644
--- a/containers/layouts/LayoutsSection.js
+++ b/containers/layouts/LayoutsSection.js
@@ -150,7 +150,7 @@ const LayoutsSection = () => {
                             stickyLabels={StickyLabels}
                             loading={loadingStickyLabels}
                             onToggle={(value) => withLoadingStickyLabels(handleToggleStickyLabels(value))}
-                            data-cy-appearance="sticky-labels"
+                            cypressTag={{"data-cy-appearance":"sticky-labels"}}
                         />
                     </Field>
                 </Row>

From e6354b3051454fc092cddb2054cc6812a4923734 Mon Sep 17 00:00:00 2001
From: RandomAdversary <RandomAdversary@gmail.com>
Date: Mon, 22 Jul 2019 09:03:16 +0200
Subject: [PATCH 10/10] Data-cy-* for view mode options.

---
 containers/layouts/ViewModeRadios.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/containers/layouts/ViewModeRadios.js b/containers/layouts/ViewModeRadios.js
index b9613c4d2..9ce6dfaf4 100644
--- a/containers/layouts/ViewModeRadios.js
+++ b/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} />;