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: 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 ( <> {label} @@ -43,6 +47,7 @@ const Detail = ({ label, value, fullWidth, className }) => { className={className} component={TextListItemVariants.dd} fullWidth={fullWidth} + data-cy={valueCy} > {value} 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 { {i18n._(t`User`)}}> initially renders succesfully 1`] = ` > initially renders succesfully 1`] = `
Name @@ -440,10 +445,12 @@ exports[` initially renders succesfully 1`] = ` initially renders succesfully 1`] = `
jane brown @@ -563,10 +573,12 @@ exports[` initially renders succesfully 1`] = ` > initially renders succesfully 1`] = `
Team Roles @@ -614,10 +629,12 @@ exports[` initially renders succesfully 1`] = ` initially renders succesfully 1`] = `
- +