ref(tests): Query `CompactSelect` options by role (#44319)

Now that `CompactSelect` options are more easily queryable
(https://github.com/getsentry/sentry/pull/43449), we can update existing
tests that still use `get/findByTestId(…)` with
`get/findByRole('option', {…})`.

static/app/components/events/interfaces/threadsV2.spec.tsx

@@ -910,9 +910,10 @@ describe('ThreadsV2', function () {
         expect(screen.getByText('Oldest')).toBeInTheDocument();
 
         // Recent first is checked by default
-        expect(
-          within(screen.getByTestId('recent-first')).getByTestId('icon-check-mark')
-        ).toBeInTheDocument();
+        expect(screen.getByRole('option', {name: 'Newest'})).toHaveAttribute(
+          'aria-selected',
+          'true'
+        );
 
         // Click on recent last
         userEvent.click(screen.getByText('Oldest'));
@@ -1016,6 +1017,9 @@ describe('ThreadsV2', function () {
 
         // Raw content and the Raw stack trace option
         expect(screen.getAllByTestId('raw-stack-trace')).toHaveLength(2);
+
+        // Raw stack trace option
+        expect(screen.getByRole('option', {name: 'Raw stack trace'})).toBeInTheDocument();
       });
     });
   });

static/app/views/dashboards/detail.spec.jsx

@@ -1411,12 +1411,12 @@ describe('Dashboards > Detail', function () {
       userEvent.click(await screen.findByText('All Releases'));
       userEvent.type(screen.getByPlaceholderText('Search\u2026'), 's');
       await act(async () => {
-        userEvent.click(await screen.findByText('search-result'));
+        userEvent.click(await screen.findByRole('option', {name: 'search-result'}));
       });
 
       // Validate that after search is cleared, search result still appears
-      await screen.findByText('Latest Release(s)');
-      screen.getByTestId('search-result');
+      expect(screen.getByText('Latest Release(s)')).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'search-result'})).toBeInTheDocument();
     });
   });
 });

static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx

@@ -1029,7 +1029,7 @@ describe('Performance > Widgets > WidgetContainer', function () {
 
     // Check that the the "User Misery" option is disabled by clicking on it,
     // expecting that the selected option doesn't change
-    const userMiseryOption = await screen.findByTestId('user_misery_area');
+    const userMiseryOption = await screen.findByRole('option', {name: 'User Misery'});
     userEvent.click(userMiseryOption);
     expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
       'Failure Rate'

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/index.spec.tsx

@@ -494,7 +494,11 @@ describe('Performance > Transaction Spans > Span Summary', function () {
         );
 
         (await within(displayToggle).findByRole('button')).click();
-        (await within(displayToggle).findByTestId('histogram')).click();
+        (
+          await within(displayToggle).findByRole('option', {
+            name: 'Self Time Distribution',
+          })
+        ).click();
 
         expect(browserHistory.push).toHaveBeenCalledWith(
           expect.objectContaining({

static/app/views/performance/trends/index.spec.tsx

@@ -56,30 +56,6 @@ async function getParameterDropdown() {
   return dropdown;
 }
 
-async function selectMenuItemFromDropdown(value) {
-  (browserHistory.push as any).mockReset();
-  expect(browserHistory.push).not.toHaveBeenCalled();
-  const option = await screen.findByTestId(value);
-  expect(option).toBeInTheDocument();
-  clickEl(option);
-
-  await waitFor(() => expect(browserHistory.push).toHaveBeenCalled());
-}
-
-async function selectTrendFunction(value) {
-  const dropdown = await getTrendDropdown();
-  clickEl(dropdown);
-
-  await selectMenuItemFromDropdown(value);
-}
-
-async function selectTrendParameter(value) {
-  const dropdown = await getParameterDropdown();
-  clickEl(dropdown);
-
-  await selectMenuItemFromDropdown(value);
-}
-
 async function waitForMockCall(mock: any) {
   await waitFor(() => {
     expect(mock).toHaveBeenCalled();
@@ -461,7 +437,13 @@ describe('Performance > Trends', function () {
     );
 
     for (const trendFunction of TRENDS_FUNCTIONS) {
-      await selectTrendFunction(trendFunction.field);
+      // Open dropdown
+      const dropdown = await getTrendDropdown();
+      clickEl(dropdown);
+
+      // Select function
+      const option = screen.getByRole('option', {name: trendFunction.label});
+      clickEl(option);
 
       expect(browserHistory.push).toHaveBeenCalledWith({
         query: expect.objectContaining({
@@ -534,7 +516,13 @@ describe('Performance > Trends', function () {
     );
 
     for (const parameter of TRENDS_PARAMETERS) {
-      await selectTrendParameter(parameter.label);
+      // Open dropdown
+      const dropdown = await getParameterDropdown();
+      clickEl(dropdown);
+
+      // Select parameter
+      const option = screen.getByRole('option', {name: parameter.label});
+      clickEl(option);
 
       expect(browserHistory.push).toHaveBeenCalledWith({
         query: expect.objectContaining({