From daf3bbc7ef9b8e15c0ba6f71a45b63615c28cfdf Mon Sep 17 00:00:00 2001
From: Daniel Sami <dsami@redhat.com>
Date: Thu, 21 Nov 2019 15:47:38 -0500
Subject: [PATCH 1/2] Added E2E-friendly selectors to nav and jt details

lint

updated snapshot
---
 .../src/components/DetailList/Detail.jsx      |  7 ++++++-
 .../PageHeaderToolbar/PageHeaderToolbar.jsx   |  1 +
 .../ResourceAccessListItem.test.jsx.snap      | 20 +++++++++++++++++++
 .../JobTemplateDetail/JobTemplateDetail.jsx   |  6 +++++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/components/DetailList/Detail.jsx b/awx/ui_next/src/components/DetailList/Detail.jsx
index 9f8f3647b3..10be98d335 100644
--- a/awx/ui_next/src/components/DetailList/Detail.jsx
+++ b/awx/ui_next/src/components/DetailList/Detail.jsx
@@ -25,17 +25,21 @@ const DetailValue = styled(({ fullWidth, ...props }) => (
   `}
 `;
 
-const Detail = ({ label, value, fullWidth, className }) => {
+const Detail = ({ label, value, fullWidth, className, dataCy }) => {
   if (!value && typeof value !== 'number') {
     return null;
   }
 
+  const labelCy = dataCy ? `${dataCy}-label` : null;
+  const valueCy = dataCy ? `${dataCy}-value` : null;
+
   return (
     <>
       <DetailName
         className={className}
         component={TextListItemVariants.dt}
         fullWidth={fullWidth}
+        data-cy={labelCy}
       >
         {label}
       </DetailName>
@@ -43,6 +47,7 @@ const Detail = ({ label, value, fullWidth, className }) => {
         className={className}
         component={TextListItemVariants.dd}
         fullWidth={fullWidth}
+        data-cy={valueCy}
       >
         {value}
       </DetailValue>
diff --git a/awx/ui_next/src/components/PageHeaderToolbar/PageHeaderToolbar.jsx b/awx/ui_next/src/components/PageHeaderToolbar/PageHeaderToolbar.jsx
index a248d24a5e..d1b88f5c23 100644
--- a/awx/ui_next/src/components/PageHeaderToolbar/PageHeaderToolbar.jsx
+++ b/awx/ui_next/src/components/PageHeaderToolbar/PageHeaderToolbar.jsx
@@ -95,6 +95,7 @@ class PageHeaderToolbar extends Component {
           <Tooltip position="left" content={<div>{i18n._(t`User`)}</div>}>
             <ToolbarItem>
               <Dropdown
+                id="toolbar-user-dropdown"
                 isPlain
                 isOpen={isUserOpen}
                 position={DropdownPosition.right}
diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
index 017091a61d..6e14ea7633 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
@@ -389,10 +389,12 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                 >
                                   <Detail__DetailName
                                     component="dt"
+                                    data-cy={null}
                                     fullWidth={false}
                                   >
                                     <StyledComponent
                                       component="dt"
+                                      data-cy={null}
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
@@ -422,14 +424,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       <Component
                                         className="Detail__DetailName-sc-16ypsyv-0 erdIBg"
                                         component="dt"
+                                        data-cy={null}
                                         fullWidth={false}
                                       >
                                         <TextListItem
                                           className="Detail__DetailName-sc-16ypsyv-0 erdIBg"
                                           component="dt"
+                                          data-cy={null}
                                         >
                                           <dt
                                             className="Detail__DetailName-sc-16ypsyv-0 erdIBg"
+                                            data-cy={null}
                                             data-pf-content={true}
                                           >
                                             Name
@@ -440,10 +445,12 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                   </Detail__DetailName>
                                   <Detail__DetailValue
                                     component="dd"
+                                    data-cy={null}
                                     fullWidth={false}
                                   >
                                     <StyledComponent
                                       component="dd"
+                                      data-cy={null}
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
@@ -473,14 +480,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       <Component
                                         className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
                                         component="dd"
+                                        data-cy={null}
                                         fullWidth={false}
                                       >
                                         <TextListItem
                                           className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
                                           component="dd"
+                                          data-cy={null}
                                         >
                                           <dd
                                             className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
+                                            data-cy={null}
                                             data-pf-content={true}
                                           >
                                             jane brown
@@ -563,10 +573,12 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                 >
                                   <Detail__DetailName
                                     component="dt"
+                                    data-cy={null}
                                     fullWidth={false}
                                   >
                                     <StyledComponent
                                       component="dt"
+                                      data-cy={null}
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
@@ -596,14 +608,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       <Component
                                         className="Detail__DetailName-sc-16ypsyv-0 erdIBg"
                                         component="dt"
+                                        data-cy={null}
                                         fullWidth={false}
                                       >
                                         <TextListItem
                                           className="Detail__DetailName-sc-16ypsyv-0 erdIBg"
                                           component="dt"
+                                          data-cy={null}
                                         >
                                           <dt
                                             className="Detail__DetailName-sc-16ypsyv-0 erdIBg"
+                                            data-cy={null}
                                             data-pf-content={true}
                                           >
                                             Team Roles
@@ -614,10 +629,12 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                   </Detail__DetailName>
                                   <Detail__DetailValue
                                     component="dd"
+                                    data-cy={null}
                                     fullWidth={false}
                                   >
                                     <StyledComponent
                                       component="dd"
+                                      data-cy={null}
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
@@ -647,14 +664,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                       <Component
                                         className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
                                         component="dd"
+                                        data-cy={null}
                                         fullWidth={false}
                                       >
                                         <TextListItem
                                           className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
                                           component="dd"
+                                          data-cy={null}
                                         >
                                           <dd
                                             className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
+                                            data-cy={null}
                                             data-pf-content={true}
                                           >
                                             <ChipGroup
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index 8910914179..480abc146f 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -197,7 +197,11 @@ class JobTemplateDetail extends Component {
       isInitialized && (
         <CardBody css="padding-top: 20px;">
           <DetailList gutter="sm">
-            <Detail label={i18n._(t`Name`)} value={name} />
+            <Detail
+              label={i18n._(t`Name`)}
+              value={name}
+              dataCy="jt-detail-name"
+            />
             <Detail label={i18n._(t`Description`)} value={description} />
             <Detail label={i18n._(t`Job Type`)} value={job_type} />
 

From 0eb55f5038dc9d611b57874f2cbb199b90866d7d Mon Sep 17 00:00:00 2001
From: Daniel Sami <dsami@redhat.com>
Date: Fri, 22 Nov 2019 15:24:35 -0500
Subject: [PATCH 2/2] Updated contributing doc with notes about E2E

---
 awx/ui_next/CONTRIBUTING.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/awx/ui_next/CONTRIBUTING.md b/awx/ui_next/CONTRIBUTING.md
index b1bf60cf69..9e71381fe1 100644
--- a/awx/ui_next/CONTRIBUTING.md
+++ b/awx/ui_next/CONTRIBUTING.md
@@ -112,6 +112,9 @@ afterEach(() => {
 ...
 ```
 
+**Test Attributes** - 
+It should be noted that the `dataCy` prop, as well as its equivalent attribute `data-cy`, are used as flags for any UI test that wants to avoid relying on brittle CSS selectors such as `nth-of-type()`.
+
 ## Handling API Errors
 API requests can and will fail occasionally so they should include explicit error handling. The three _main_ categories of errors from our perspective are: content loading errors, form submission errors, and other errors. The patterns currently in place for these are described below: