ref(tests): Convert events table to RTL (#40383)

static/app/components/gridEditable/index.tsx

@@ -314,7 +314,9 @@ class GridEditable<
         {prependColumns &&
           columnOrder?.length > 0 &&
           prependColumns.map((item, i) => (
-            <GridHeadCellStatic key={`prepend-${i}`}>{item}</GridHeadCellStatic>
+            <GridHeadCellStatic data-test-id="grid-head-cell-static" key={`prepend-${i}`}>
+              {item}
+            </GridHeadCellStatic>
           ))}
         {
           /* Note that this.onResizeMouseDown assumes GridResizer is nested

static/app/utils/discover/fieldRenderers.tsx

@@ -774,8 +774,9 @@ export const spanOperationRelativeBreakdownRenderer = (
   } else {
     orderedSpanOpsBreakdownFields = SPAN_OP_BREAKDOWN_FIELDS;
   }
+
   return (
-    <RelativeOpsBreakdown>
+    <RelativeOpsBreakdown data-test-id="relative-ops-breakdown">
       {orderedSpanOpsBreakdownFields.map(field => {
         if (!isDurationValue(data, field)) {
           return null;

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

@@ -1,5 +1,5 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -82,39 +82,39 @@ function initializeData({features: additionalFeatures = []}: Data = {}) {
 }
 
 describe('Performance GridEditable Table', function () {
-  let transactionsListTitles;
-  let totalEventCount;
-  let fields;
-  let organization;
+  const transactionsListTitles = [
+    t('event id'),
+    t('user'),
+    t('operation duration'),
+    t('total duration'),
+    t('trace id'),
+    t('timestamp'),
+  ];
+  const totalEventCount = '100';
+  let fields = EVENTS_TABLE_RESPONSE_FIELDS;
+  const organization = TestStubs.Organization();
+  const transactionName = 'transactionName';
   let data;
-  let transactionName;
+
   const query =
     'transaction.duration:<15m event.type:transaction transaction:/api/0/organizations/{organization_slug}/events/';
+
   beforeEach(function () {
-    transactionName = 'transactionName';
-    totalEventCount = '100';
-    transactionsListTitles = [
-      t('event id'),
-      t('user'),
-      t('operation duration'),
-      t('total duration'),
-      t('trace id'),
-      t('timestamp'),
-    ];
-    fields = EVENTS_TABLE_RESPONSE_FIELDS;
-    organization = TestStubs.Organization();
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/projects/',
       body: [],
     });
+
     MockApiClient.addMockResponse({
       url: '/prompts-activity/',
       body: {},
     });
+
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/sdk-updates/',
       body: [],
     });
+
     data = MOCK_EVENTS_TABLE_DATA;
     // Transaction list response
     MockApiClient.addMockResponse({
@@ -152,6 +152,7 @@ describe('Performance GridEditable Table', function () {
 
   it('renders ops breakdown bar when querying for span_ops_breakdown.relative', async function () {
     const initialData = initializeData();
+
     const eventView = EventView.fromNewQueryWithLocation(
       {
         id: undefined,
@@ -164,7 +165,8 @@ describe('Performance GridEditable Table', function () {
       },
       initialData.router.location
     );
-    const wrapper = mountWithTheme(
+
+    render(
       <EventsTable
         totalEventCount={totalEventCount}
         eventView={eventView}
@@ -175,19 +177,19 @@ describe('Performance GridEditable Table', function () {
         columnTitles={transactionsListTitles}
         transactionName={transactionName}
       />,
-      initialData.routerContext
+      {context: initialData.routerContext}
     );
-    await tick();
-    wrapper.update();
 
-    expect(wrapper.find('GridHeadCell')).toHaveLength(6);
-    expect(wrapper.find('GridHeadCellStatic')).toHaveLength(0);
-    expect(wrapper.find('OperationSort')).toHaveLength(1);
-    expect(wrapper.find('RelativeOpsBreakdown')).toHaveLength(2);
+    expect(await screen.findAllByTestId('relative-ops-breakdown')).toHaveLength(2);
+
+    expect(screen.getAllByRole('columnheader')).toHaveLength(6);
+    expect(screen.getByText('operation duration')).toBeInTheDocument();
+    expect(screen.queryByTestId('grid-head-cell-static')).not.toBeInTheDocument();
   });
 
-  it('renders basic columns without ops breakdown when not querying for span_ops_breakdown.relative', async function () {
+  it('renders basic columns without ops breakdown when not querying for span_ops_breakdown.relative', function () {
     const initialData = initializeData();
+
     fields = [
       'id',
       'user.display',
@@ -196,6 +198,7 @@ describe('Performance GridEditable Table', function () {
       'timestamp',
       'spans.http',
     ];
+
     data.forEach(result => {
       delete result['span_ops_breakdown.relative'];
       delete result['spans.resource'];
@@ -203,6 +206,7 @@ describe('Performance GridEditable Table', function () {
       delete result['spans.db'];
       delete result['spans.total.time'];
     });
+
     const eventView = EventView.fromNewQueryWithLocation(
       {
         id: undefined,
@@ -215,7 +219,8 @@ describe('Performance GridEditable Table', function () {
       },
       initialData.router.location
     );
-    const wrapper = mountWithTheme(
+
+    render(
       <EventsTable
         totalEventCount={totalEventCount}
         eventView={eventView}
@@ -226,15 +231,13 @@ describe('Performance GridEditable Table', function () {
         columnTitles={transactionsListTitles}
         transactionName={transactionName}
       />,
-      initialData.routerContext
+      {context: initialData.routerContext}
     );
-    await tick();
-    wrapper.update();
 
-    expect(wrapper.find('GridHeadCell')).toHaveLength(6);
-    expect(wrapper.find('GridHeadCellStatic')).toHaveLength(0);
-    expect(wrapper.find('OperationSort')).toHaveLength(0);
-    expect(wrapper.find('RelativeOpsBreakdown')).toHaveLength(0);
+    expect(screen.getAllByRole('columnheader')).toHaveLength(6);
+    expect(screen.queryByText(SPAN_OP_RELATIVE_BREAKDOWN_FIELD)).not.toBeInTheDocument();
+    expect(screen.queryByTestId('relative-ops-breakdown')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('grid-head-cell-static')).not.toBeInTheDocument();
   });
 
   it('renders event id and trace id url', async function () {
@@ -251,7 +254,8 @@ describe('Performance GridEditable Table', function () {
       },
       initialData.router.location
     );
-    const wrapper = mountWithTheme(
+
+    render(
       <EventsTable
         totalEventCount={totalEventCount}
         eventView={eventView}
@@ -262,18 +266,17 @@ describe('Performance GridEditable Table', function () {
         columnTitles={transactionsListTitles}
         transactionName={transactionName}
       />,
-      initialData.routerContext
+      {context: initialData.routerContext}
     );
-    await tick();
-    wrapper.update();
 
-    const eventIdCell = wrapper.find('a').at(3);
-    const traceIdCell = wrapper.find('a').at(4);
-    expect(eventIdCell.prop('href')).toMatch(
-      '/organizations/org-slug/performance/undefined:deadbeef/'
+    expect(await screen.findByRole('link', {name: 'deadbeef'})).toHaveAttribute(
+      'href',
+      '/organizations/org-slug/performance/undefined:deadbeef/?project=1&transaction=transactionName&transactionCursor=1%3A0%3A0'
     );
-    expect(traceIdCell.prop('href')).toMatch(
-      '/organizations/org-slug/performance/trace/1234/'
+
+    expect(screen.getByRole('link', {name: '1234'})).toHaveAttribute(
+      'href',
+      '/organizations/org-slug/performance/trace/1234/?'
     );
   });
 });

static/app/views/performance/transactionSummary/transactionEvents/eventsTable.tsx

@@ -63,22 +63,19 @@ export function getProjectID(
   return project.id;
 }
 
-class OperationTitle extends Component<TitleProps> {
-  render() {
-    const {onClick} = this.props;
-    return (
-      <div onClick={onClick}>
-        <span>{t('operation duration')}</span>
-        <StyledIconQuestion
-          size="xs"
-          position="top"
-          title={t(
-            `Span durations are summed over the course of an entire transaction. Any overlapping spans are only counted once.`
-          )}
-        />
-      </div>
-    );
-  }
+function OperationTitle({onClick}: TitleProps) {
+  return (
+    <div onClick={onClick}>
+      <span>{t('operation duration')}</span>
+      <StyledIconQuestion
+        size="xs"
+        position="top"
+        title={t(
+          `Span durations are summed over the course of an entire transaction. Any overlapping spans are only counted once.`
+        )}
+      />
+    </div>
+  );
 }
 
 type Props = {

static/app/views/performance/transactionSummary/transactionEvents/operationSort.tsx

@@ -18,7 +18,7 @@ type Props = {
   eventView: EventView;
   location: Location;
   tableMeta: TableData['meta'];
-  title: React.ComponentClass<TitleProps>;
+  title: React.ComponentType<TitleProps>;
 };
 
 type State = {