From 23472aa657f6dc7578a55e269e8faa4b1b65d41e Mon Sep 17 00:00:00 2001
From: Fatih Camgoz <fatihcamgoz@hotmail.com.tr>
Date: Sat, 8 Mar 2025 12:50:27 -0500
Subject: [PATCH] Added unit test for removing chip component

- Added tests on Select.test.tsx to validate opening select dropdown upon removing Chip component is working as expected.
- Added data-testids to Select components child components (Chip and CancelIcon)

Signed-off-by: Fatih Camgoz <fatihcamgoz@hotmail.com.tr>
---
 .../src/components/Select/Select.test.tsx     | 58 +++++++++++++++++++
 .../src/components/Select/Select.tsx          |  2 +
 2 files changed, 60 insertions(+)

diff --git a/packages/core-components/src/components/Select/Select.test.tsx b/packages/core-components/src/components/Select/Select.test.tsx
index b83ac68d5b..505152db5f 100644
--- a/packages/core-components/src/components/Select/Select.test.tsx
+++ b/packages/core-components/src/components/Select/Select.test.tsx
@@ -93,4 +93,62 @@ describe('<Select />', () => {
     const input = getByTestId('custom-select');
     expect(input.textContent).toBe('All results');
   });
+
+  it('should not open dropdown when deleting Chip component from Select', () => {
+    const items = [
+      { value: 'test_1', label: 'test 1' },
+      { value: 'test_2', label: 'test 2' },
+    ];
+
+    const handleChange = jest.fn();
+
+    const { getByTestId, queryByText } = render(
+      <Select
+        label="Default"
+        items={items}
+        multiple
+        selected={['test_1']} // Creates Chip Component initially
+        onChange={handleChange}
+        placeholder="All results"
+      />,
+    );
+
+    // Verify Chip component exist
+    const chip = getByTestId('chip');
+    expect(chip).toBeInTheDocument();
+    expect(chip.textContent).toContain('test 1');
+
+    // Find cancel icon
+    const cancelIcon = getByTestId('cancel-icon');
+    expect(cancelIcon).toBeInTheDocument();
+
+    // Verify dropdown is initially closed
+    expect(queryByText('test 2')).not.toBeInTheDocument();
+
+    // Fire mouseDown on Chip's CancelIcon that tests if onMouseDown={event => event.stopPropagation()} is working properly
+    fireEvent.mouseDown(cancelIcon);
+
+    // Verify dropdown is closed after mouseDown on Chip's CancelIcon
+    expect(queryByText('test 2')).not.toBeInTheDocument();
+
+    // Delete the Chip
+    fireEvent.click(cancelIcon);
+
+    // Verify dropdown is still closed after the removal of Chip
+    expect(queryByText('test 2')).not.toBeInTheDocument();
+
+    // Verify Chip is removed
+    expect(chip).not.toBeInTheDocument();
+    expect(queryByText('test 1')).not.toBeInTheDocument();
+
+    // Verify we can still open the dropdown with a click on the select
+    const selectInput = getByTestId('select');
+    expect(selectInput.textContent).toBe('All results');
+
+    // Simulate click on select
+    fireEvent.mouseDown(within(selectInput).getByRole('button'));
+
+    // Now dropdown should be open
+    expect(queryByText('test 2')).toBeInTheDocument();
+  });
 });
diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx
index 557d66c40f..7a862678b8 100644
--- a/packages/core-components/src/components/Select/Select.tsx
+++ b/packages/core-components/src/components/Select/Select.tsx
@@ -223,11 +223,13 @@ export function SelectComponent(props: SelectProps) {
                   const item = items.find(el => el.value === selectedValue);
                   return item ? (
                     <Chip
+                      data-testid="chip"
                       key={item?.value}
                       label={item?.label}
                       clickable
                       deleteIcon={
                         <CancelIcon
+                          data-testid="cancel-icon"
                           onMouseDown={event => event.stopPropagation()}
                         />
                       }