Merge pull request #9606 from nixocio/ui_add_selectors

Improve selectors to ease testing

Improve selectors to ease testing

Reviewed-by: Keith Grant <None>

awx/ui_next/src/components/DeleteButton/DeleteButton.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Button } from '@patternfly/react-core';
@@ -12,6 +13,7 @@ function DeleteButton({
   variant,
   children,
   isDisabled,
+  ouiaId,
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -22,6 +24,7 @@ function DeleteButton({
         aria-label={i18n._(t`Delete`)}
         isDisabled={isDisabled}
         onClick={() => setIsOpen(true)}
+        ouiaId={ouiaId}
       >
         {children || i18n._(t`Delete`)}
       </Button>
@@ -58,4 +61,12 @@ function DeleteButton({
   );
 }
 
+DeleteButton.propTypes = {
+  ouiaId: PropTypes.string,
+};
+
+DeleteButton.defaultProps = {
+  ouiaId: null,
+};
+
 export default withI18n()(DeleteButton);

awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx

@@ -10,6 +10,7 @@ const FormActionGroup = ({ onCancel, onSubmit, submitDisabled, i18n }) => {
     <FormFullWidthLayout>
       <ActionGroup>
         <Button
+          ouiaId="Save"
           aria-label={i18n._(t`Save`)}
           variant="primary"
           type="button"
@@ -19,6 +20,7 @@ const FormActionGroup = ({ onCancel, onSubmit, submitDisabled, i18n }) => {
           {i18n._(t`Save`)}
         </Button>
         <Button
+          ouiaId="Cancel"
           aria-label={i18n._(t`Cancel`)}
           variant="link"
           type="button"

awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx

@@ -38,6 +38,7 @@ function PaginatedTable({
   i18n,
   renderToolbar,
   emptyContentMessage,
+  ouiaId,
 }) {
   const history = useHistory();
 
@@ -95,7 +96,7 @@ function PaginatedTable({
     Content = (
       <div css="overflow: auto">
         {hasContentLoading && <LoadingSpinner />}
-        <TableComposable aria-label={dataListLabel}>
+        <TableComposable aria-label={dataListLabel} ouiaId={ouiaId}>
           {headerRow}
           <Tbody>{items.map(renderRow)}</Tbody>
         </TableComposable>
@@ -181,6 +182,7 @@ PaginatedTable.propTypes = {
   renderToolbar: PropTypes.func,
   hasContentLoading: PropTypes.bool,
   contentError: PropTypes.shape(),
+  ouiaId: PropTypes.string,
 };
 
 PaginatedTable.defaultProps = {
@@ -192,6 +194,7 @@ PaginatedTable.defaultProps = {
   pluralizedItemName: 'Items',
   showPageSizeOptions: true,
   renderToolbar: props => <DataListToolbar {...props} />,
+  ouiaId: null,
 };
 
 export { PaginatedTable as _PaginatedTable };

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx

@@ -111,6 +111,7 @@ function ExecutionEnvironmentList({ i18n }) {
       <PageSection>
         <Card>
           <PaginatedTable
+            ouiaId="execution-environment-table"
             contentError={contentError}
             hasContentLoading={isLoading || deleteLoading}
             items={executionEnvironments}

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.jsx

@@ -56,6 +56,7 @@ function ExecutionEnvironmentListItem({
           tooltip={i18n._(t`Edit Execution Environment`)}
         >
           <Button
+            ouiaId={`edit-ee-${executionEnvironment.id}`}
             aria-label={i18n._(t`Edit Execution Environment`)}
             variant="plain"
             component={Link}

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx

@@ -23,7 +23,7 @@ function OrganizationExecEnvListItem({
     <DataListItem
       key={executionEnvironment.id}
       aria-labelledby={labelId}
-      id={`${executionEnvironment.id} `}
+      id={`${executionEnvironment.id}`}
     >
       <DataListItemRow>
         <DataListItemCells

awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx

@@ -32,7 +32,7 @@ function UserTeamListItem({ team, isSelected, onSelect, i18n }) {
           dataListCells={[
             <DataListCell key="name">
               <Link to={`/teams/${team.id}/details`} id={`team-${team.id}`}>
-                {team.name}
+                <b>{team.name}</b>
               </Link>
             </DataListCell>,
             <DataListCell key="organization">