tests(search): Fix tests broken by change from placeholder to label

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx

@@ -74,7 +74,7 @@ describe('SearchAutocomplete', () => {
     expect(screen.queryByText(options[1])).not.toBeInTheDocument();
     expect(screen.queryByText(options[2])).not.toBeInTheDocument();
 
-    await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`));
+    await userEvent.click(screen.getByLabelText(`Search in ${title}`));
 
     await waitFor(() => {
       expect(screen.getByText(options[0])).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe('SearchAutocomplete', () => {
       </TestApiProvider>,
     );
 
-    await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`));
+    await userEvent.click(screen.getByLabelText(`Search in ${title}`));
 
     await userEvent.click(screen.getByText(options[0]));
 
@@ -218,7 +218,7 @@ describe('SearchAutocomplete', () => {
       </TestApiProvider>,
     );
 
-    await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`));
+    await userEvent.click(screen.getByLabelText(`Search in ${title}`));
 
     await waitFor(() => {
       expect(screen.getAllByTitle('Option icon')).toHaveLength(3);

plugins/search-react/src/components/SearchBar/SearchBar.test.tsx

@@ -70,9 +70,28 @@ describe('SearchBar', () => {
     );
 
     await waitFor(() => {
-      expect(
-        screen.getByPlaceholderText('Search in Mock title'),
-      ).toBeInTheDocument();
+      expect(screen.getByLabelText('Search in Mock title')).toBeInTheDocument();
+    });
+  });
+
+  it('Renders with custom label', async () => {
+    const label = 'label';
+
+    const result = await renderWithEffects(
+      <TestApiProvider
+        apis={[
+          [configApiRef, configApiMock],
+          [searchApiRef, searchApiMock],
+        ]}
+      >
+        <SearchContextProvider>
+          <SearchBar label={label} />
+        </SearchContextProvider>
+      </TestApiProvider>,
+    );
+
+    await waitFor(() => {
+      expect(result.getByLabelText(label)).toBeInTheDocument();
     });
   });
 

plugins/search-react/src/components/SearchBar/SearchBar.tsx

@@ -78,7 +78,7 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
         clearButton = true,
         fullWidth = true,
         value: defaultValue,
-        placeholder: defaultPlaceholder,
+        label: defaultLabel,
         inputProps: defaultInputProps = {},
         endAdornment: defaultEndAdornment,
         ...rest
@@ -119,8 +119,8 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
         }
       }, [onChange, onClear]);
 
-      const placeholder =
-        defaultPlaceholder ??
+      const label =
+        defaultLabel ??
         `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;
 
       const startAdornment = (
@@ -142,12 +142,13 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
       return (
         <TrackSearch>
           <TextField
+            id="search-bar-text-field"
             data-testid="search-bar-next"
             variant="outlined"
             margin="normal"
             inputRef={ref}
             value={value}
-            label={placeholder}
+            label={label}
             InputProps={{
               startAdornment,
               endAdornment: clearButton ? endAdornment : defaultEndAdornment,