chore: Add data-test attribute to picker item remove button #273 (#2271)

h2oai · Feb 22, 2024 · 721273a · 721273a
1 parent 15283bf
commit 721273a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git 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
@@ -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}