test(js): Convert EventsV2 Tags to RTL (#39849)

static/app/components/group/tagDistributionMeter.spec.jsx

@@ -31,10 +31,10 @@ describe('TagDistributionMeter', function () {
       />
     );
     expect(
-      screen.getByLabelText('Add the Chrome segment tag to the search query')
+      screen.getByLabelText('Add the browser Chrome segment tag to the search query')
     ).toBeInTheDocument();
     expect(
-      screen.getByLabelText('Add the Firefox segment tag to the search query')
+      screen.getByLabelText('Add the browser Firefox segment tag to the search query')
     ).toBeInTheDocument();
     expect(screen.getByLabelText('Other')).toBeInTheDocument();
   });

static/app/components/tagDistributionMeter.tsx

@@ -142,7 +142,8 @@ function TagDistributionMeter({
                 ) : (
                   <Segment
                     aria-label={t(
-                      'Add the %s segment tag to the search query',
+                      'Add the %s %s segment tag to the search query',
+                      title,
                       value.value
                     )}
                     {...segmentProps}

static/app/views/eventsV2/tags.spec.jsx

@@ -1,5 +1,10 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {
+  render,
+  screen,
+  userEvent,
+  waitForElementToBeRemoved,
+} from 'sentry-test/reactTestingLibrary';
 
 import {Client} from 'sentry/api';
 import EventView from 'sentry/utils/discover/eventView';
@@ -44,7 +49,7 @@ describe('Tags', function () {
       query: 'event.type:csp',
     });
 
-    const wrapper = mountWithTheme(
+    render(
       <Tags
         eventView={view}
         api={api}
@@ -58,13 +63,12 @@ describe('Tags', function () {
     );
 
     // component is in loading state
-    expect(wrapper.find('StyledPlaceholder').length).toBeTruthy();
-
-    await tick();
-    wrapper.update();
+    expect(screen.getAllByTestId('loading-placeholder')[0]).toBeInTheDocument();
 
     // component has loaded
-    expect(wrapper.find('StyledPlaceholder')).toHaveLength(0);
+    await waitForElementToBeRemoved(
+      () => screen.queryAllByTestId('loading-placeholder')[0]
+    );
   });
 
   it('creates URLs with generateUrl', async function () {
@@ -83,7 +87,7 @@ describe('Tags', function () {
       },
     });
 
-    const wrapper = mountWithTheme(
+    render(
       <Tags
         eventView={view}
         api={api}
@@ -94,29 +98,17 @@ describe('Tags', function () {
         generateUrl={generateUrl}
         confirmedQuery={false}
       />,
-      initialData.routerContext
+      {context: initialData.routerContext}
     );
 
-    // component is in loading state
-    expect(wrapper.find('StyledPlaceholder').length).toBeTruthy();
-
-    await tick();
-    wrapper.update();
-
     // component has loaded
-    expect(wrapper.find('StyledPlaceholder')).toHaveLength(0);
-
-    const environmentFacetMap = wrapper
-      .find('TagDistributionMeter')
-      .filterWhere(component => component.props().title === 'environment')
-      .first();
-
-    const clickable = environmentFacetMap.find('Segment').first();
-
-    clickable.simulate('click', {button: 0});
+    await waitForElementToBeRemoved(
+      () => screen.queryAllByTestId('loading-placeholder')[0]
+    );
 
-    await tick();
-    wrapper.update();
+    userEvent.click(
+      screen.getByLabelText('Add the environment abcd123 segment tag to the search query')
+    );
 
     expect(initialData.router.push).toHaveBeenCalledWith('/endpoint/environment/abcd123');
   });

static/app/views/performance/transactionSummary.spec.tsx

@@ -754,13 +754,13 @@ describe('Performance > TransactionSummary', function () {
       await screen.findByText('Tag Summary');
 
       userEvent.click(
-        screen.getByLabelText('Add the dev segment tag to the search query')
+        screen.getByLabelText('Add the environment dev segment tag to the search query')
       );
       userEvent.click(
-        screen.getByLabelText('Add the bar segment tag to the search query')
+        screen.getByLabelText('Add the foo bar segment tag to the search query')
       );
       userEvent.click(
-        screen.getByLabelText('Add the id:100 segment tag to the search query')
+        screen.getByLabelText('Add the user id:100 segment tag to the search query')
       );
 
       expect(router.push).toHaveBeenCalledTimes(3);
@@ -1185,10 +1185,10 @@ describe('Performance > TransactionSummary', function () {
       await screen.findByText('Tag Summary');
 
       userEvent.click(
-        screen.getByLabelText('Add the dev segment tag to the search query')
+        screen.getByLabelText('Add the environment dev segment tag to the search query')
       );
       userEvent.click(
-        screen.getByLabelText('Add the bar segment tag to the search query')
+        screen.getByLabelText('Add the foo bar segment tag to the search query')
       );
 
       expect(router.push).toHaveBeenCalledTimes(2);