Merge pull request #25382 from simonedstrom96/add-test-id-to-select-component-input-props

Add testid to Select component

.changeset/new-sheep-arrive.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Modified the `Select` component to take in a `data-testid` parameter ensuring backwards compatibility with default value corresponding to previously hardcoded `data-testid` of "select".

packages/core-components/src/components/Select/Select.test.tsx

@@ -85,4 +85,12 @@ describe('<Select />', () => {
 
     expect(getByTestId('select').textContent).toBe('All results');
   });
+
+  it('should function correctly when a custom data-testid is provided', async () => {
+    const { getByTestId } = render(
+      <Select {...minProps} data-testid="custom-select" />,
+    );
+    const input = getByTestId('custom-select');
+    expect(input.textContent).toBe('All results');
+  });
 });

packages/core-components/src/components/Select/Select.tsx

@@ -136,6 +136,7 @@ export type SelectProps = {
   native?: boolean;
   disabled?: boolean;
   margin?: 'dense' | 'none';
+  'data-testid'?: string;
 };
 
 /** @public */
@@ -151,6 +152,7 @@ export function SelectComponent(props: SelectProps) {
     native = false,
     disabled = false,
     margin,
+    'data-testid': dataTestId = 'select',
   } = props;
   const classes = useStyles();
   const [value, setValue] = useState<SelectedItems>(
@@ -203,7 +205,7 @@ export function SelectComponent(props: SelectProps) {
           value={value}
           native={native}
           disabled={disabled}
-          data-testid="select"
+          data-testid={dataTestId}
           displayEmpty
           multiple={multiple}
           margin={margin}

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.test.tsx

@@ -64,7 +64,7 @@ describe('RepoUrlPickerHostField', () => {
       </TestApiProvider>,
     );
 
-    fireEvent.mouseDown(getByTestId('select'));
+    fireEvent.mouseDown(getByTestId('host-select'));
     expect(getByText('gitlab.com')).toBeInTheDocument();
 
     const listbox = within(getByRole('combobox'));
@@ -93,7 +93,7 @@ describe('RepoUrlPickerHostField', () => {
       </TestApiProvider>,
     );
 
-    fireEvent.mouseDown(getByTestId('select'));
+    fireEvent.mouseDown(getByTestId('host-select'));
     expect(getByText('gitlab.com')).toBeInTheDocument();
 
     const listbox = within(getByRole('combobox'));