From 721273a03a3e6312fd675eb11edc026731db2323 Mon Sep 17 00:00:00 2001
From: Dan Branley <61979454+dbranley@users.noreply.github.com>
Date: Thu, 22 Feb 2024 01:51:45 -0500
Subject: [PATCH] chore: Add data-test attribute to picker item remove button
 #273 (#2271)

---
 ui/src/picker.test.tsx | 9 +++++++++
 ui/src/picker.tsx      | 1 +
 2 files changed, 10 insertions(+)

diff --git a/ui/src/picker.test.tsx b/ui/src/picker.test.tsx
index b3a8c3ddf0..cce67e0c5a 100644
--- a/ui/src/picker.test.tsx
+++ b/ui/src/picker.test.tsx
@@ -41,6 +41,15 @@ describe('Picker.tsx', () => {
     expect(queryByTestId(name)).toBeInTheDocument()
   })
 
+  it('Renders data-test attr on selection remove button', () => {
+    const { queryByTestId } = render(<XPicker model={{...pickerProps, values: [name]}} />)
+
+    const removeButton = (queryByTestId('remove_'+name) as HTMLElement)
+    expect(removeButton).toBeInTheDocument()
+    fireEvent.click(removeButton)
+    expect(queryByTestId('remove_'+name)).toBe(null)      
+  })
+
   it('Sets correct args - init', () => {
     render(<XPicker model={pickerProps} />)
     expect(wave.args[name]).toBeNull()
diff --git a/ui/src/picker.tsx b/ui/src/picker.tsx
index 51902765cf..2d329944bd 100644
--- a/ui/src/picker.tsx
+++ b/ui/src/picker.tsx
@@ -79,6 +79,7 @@ export const XPicker = ({ model: m }: { model: Picker }) => {
       {m.label && <Fluent.Label required={m.required}>{m.label}</Fluent.Label>}
       <Fluent.TagPicker
         inputProps={{ 'data-test': m.name } as Fluent.IInputProps}
+        removeButtonIconProps={{ iconName: 'Cancel', 'data-test' : 'remove_' + m.name } as Fluent.IIconProps}
         removeButtonAriaLabel="Remove"
         onResolveSuggestions={filterSuggestedTags}
         onChange={onChange}