fix tests

Author: esanuandra

src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap

@@ -212,6 +212,7 @@ exports[`Results Table Should match snapshot 1`] = `
                         >
                           <div
                             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root search-text-field base css-cmpglg-MuiFormControl-root-MuiTextField-root"
+                            role="textbox"
                           >
                             <div
                               class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1e4fo0f-MuiInputBase-root-MuiOutlinedInput-root"
@@ -537,6 +538,7 @@ exports[`Results Table Should match snapshot 1`] = `
                         >
                           <div
                             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root search-text-field new css-cmpglg-MuiFormControl-root-MuiTextField-root"
+                            role="textbox"
                           >
                             <div
                               class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1e4fo0f-MuiInputBase-root-MuiOutlinedInput-root"

src/__tests__/Search/SearchResultsList.test.tsx

@@ -32,8 +32,11 @@ describe('SearchResultsList', () => {
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
     await renderComponent();
+
+    const placeholder = Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
+
     // focus input to show results
-    const searchInput = screen.getAllByRole('textbox')[0];
+    const searchInput = screen.getAllByPlaceholderText(placeholder)[0];
     await user.click(searchInput);
     await screen.findByText(/flesh wound/);
     expect(document.body).toMatchSnapshot();
@@ -48,6 +51,9 @@ describe('SearchResultsList', () => {
     const searchInput = screen.getAllByRole('textbox')[0];
     await user.click(searchInput);
 
+    // Wait for the dropdown to open and results to load
+    await screen.findByRole('listbox');
+
     const fleshWound = await screen.findAllByText("it's just a flesh wound");
 
     await user.click(fleshWound[0]);
@@ -111,8 +117,11 @@ describe('SearchResultsList', () => {
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
     await renderComponent();
+
+    const placeholder = Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
+    
     // focus input to show results
-    const searchInput = screen.getAllByRole('textbox')[1];
+    const searchInput = screen.getAllByPlaceholderText(placeholder)[1];
     await user.click(searchInput);
 
     const noArmsLeft = await screen.findByText(/no arms left/);
@@ -139,16 +148,17 @@ describe('SearchResultsList', () => {
 
   it('Should apply dark and light mode styles when theme button is toggled', async () => {
     await renderComponent();
+    const placeholder = Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const darkModeToggle = screen.getByRole('checkbox', {
       name: /Dark mode switch/,
     });
 
     await user.click(darkModeToggle);
     expect(screen.getByLabelText('Light mode')).toBeInTheDocument();
-    const searchInput = screen.getAllByRole('textbox')[0];
+    const searchInput = screen.getAllByPlaceholderText(placeholder)[0];
     await user.click(searchInput);
-    const resultsList = screen.getByTestId('list-mode');
+    const resultsList = screen.getByRole('listbox');
     expect(resultsList).toMatchSnapshot('after toggling dark mode');
     expect(resultsList).toHaveClass('results-list-dark');
   });