From 1e750cfed950d94484132f3319aa6bb95fb9e819 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Wed, 23 Jun 2021 14:15:08 -0400
Subject: [PATCH] Add datalist test selectors

---
 .../src/components/SelectedList/DraggableSelectedList.jsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx b/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx
index c8abf4ef80..b60c8b139d 100644
--- a/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx
+++ b/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx
@@ -61,6 +61,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
     <>
       <DataList
         aria-label={t`Draggable list to reorder and remove selected items.`}
+        data-cy="draggable-list"
         itemOrder={orderedList}
         onDragCancel={onDragCancel}
         onDragFinish={onDragFinish}
@@ -81,13 +82,14 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
                     Press enter to confirm the drag, or any other key to
                     cancel the drag operation.`}
                     aria-pressed="false"
+                    data-cy={`reorder-${label}`}
                   />
                 </DataListControl>
                 <DataListItemCells
                   dataListCells={[
                     <DataListCell key={label}>
                       <span id={rowPosition}>
-                        {rowPosition}. {label}
+                        {`${rowPosition}. ${label}`}
                       </span>
                     </DataListCell>,
                   ]}
@@ -97,7 +99,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
                     onClick={() => removeItem(label)}
                     variant="plain"
                     aria-label={t`Remove`}
-                    ouiaId="draggable-list-remove"
+                    ouiaId={`draggable-list-remove-${label}`}
                   >
                     <TimesIcon />
                   </Button>