ref(test): Convert Transaction Summary header to rtl (#39784)

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

@@ -1,6 +1,7 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import {Organization} from 'sentry/types';
 import EventView from 'sentry/utils/discover/eventView';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 import TransactionHeader from 'sentry/views/performance/transactionSummary/header';
@@ -47,107 +48,164 @@ function initializeData(opts?: InitialOpts) {
   };
 }
 
-const WrappedComponent = ({
-  hasWebVitals,
-  platform,
-  features,
+function ComponentProviders({
+  organization,
+  children,
 }: {
-  hasWebVitals: 'yes' | 'no' | 'maybe';
-} & InitialOpts) => {
-  const {project, organization, router, eventView} = initializeData({features, platform});
-
+  children: React.ReactNode;
+  organization: Organization;
+}) {
   return (
     <OrganizationContext.Provider value={organization}>
-      <TransactionHeader
-        eventView={eventView}
-        location={router.location}
-        organization={organization}
-        projects={[project]}
-        projectId={project.id}
-        transactionName="transaction_name"
-        currentTab={Tab.TransactionSummary}
-        hasWebVitals={hasWebVitals}
-      />
+      {children}
     </OrganizationContext.Provider>
   );
-};
+}
 
 describe('Performance > Transaction Summary Header', function () {
-  let wrapper;
-
-  afterEach(function () {
+  beforeEach(function () {
     MockApiClient.clearMockResponses();
-    wrapper.unmount();
   });
 
-  it('should render web vitals tab when yes', async function () {
-    wrapper = mountWithTheme(<WrappedComponent hasWebVitals="yes" />);
-
-    await tick();
-    wrapper.update();
+  it('should render web vitals tab when yes', function () {
+    const {project, organization, router, eventView} = initializeData();
+
+    render(
+      <ComponentProviders organization={organization}>
+        <TransactionHeader
+          eventView={eventView}
+          location={router.location}
+          organization={organization}
+          projects={[project]}
+          projectId={project.id}
+          transactionName="transaction_name"
+          currentTab={Tab.TransactionSummary}
+          hasWebVitals="yes"
+        />
+      </ComponentProviders>
+    );
 
-    expect(wrapper.find('ListLink[data-test-id="web-vitals-tab"]').exists()).toBeTruthy();
+    expect(screen.getByRole('link', {name: 'Web Vitals'})).toBeInTheDocument();
   });
 
-  it('should not render web vitals tab when no', async function () {
-    wrapper = mountWithTheme(<WrappedComponent hasWebVitals="no" />);
+  it('should not render web vitals tab when no', function () {
+    const {project, organization, router, eventView} = initializeData();
 
-    await tick();
-    wrapper.update();
+    <ComponentProviders organization={organization}>
+      <TransactionHeader
+        eventView={eventView}
+        location={router.location}
+        organization={organization}
+        projects={[project]}
+        projectId={project.id}
+        transactionName="transaction_name"
+        currentTab={Tab.TransactionSummary}
+        hasWebVitals="no"
+      />
+    </ComponentProviders>;
 
-    expect(wrapper.find('ListLink[data-test-id="web-vitals-tab"]').exists()).toBeFalsy();
+    expect(screen.queryByRole('link', {name: 'Web Vitals'})).not.toBeInTheDocument();
   });
 
-  it('should render web vitals tab when maybe and is frontend platform', async function () {
-    wrapper = mountWithTheme(
-      <WrappedComponent hasWebVitals="maybe" platform="javascript" />
-    );
+  it('should render web vitals tab when maybe and is frontend platform', function () {
+    const {project, organization, router, eventView} = initializeData({
+      platform: 'javascript',
+    });
 
-    await tick();
-    wrapper.update();
+    render(
+      <ComponentProviders organization={organization}>
+        <TransactionHeader
+          eventView={eventView}
+          location={router.location}
+          organization={organization}
+          projects={[project]}
+          projectId={project.id}
+          transactionName="transaction_name"
+          currentTab={Tab.TransactionSummary}
+          hasWebVitals="maybe"
+        />
+      </ComponentProviders>
+    );
 
-    expect(wrapper.find('ListLink[data-test-id="web-vitals-tab"]').exists()).toBeTruthy();
+    expect(screen.getByRole('link', {name: 'Web Vitals'})).toBeInTheDocument();
   });
 
   it('should render web vitals tab when maybe and has measurements', async function () {
-    MockApiClient.addMockResponse({
+    const {project, organization, router, eventView} = initializeData();
+
+    const eventHasMeasurementsMock = MockApiClient.addMockResponse({
       url: '/organizations/org-slug/events-has-measurements/',
       body: {measurements: true},
     });
 
-    wrapper = mountWithTheme(<WrappedComponent hasWebVitals="maybe" />);
+    render(
+      <ComponentProviders organization={organization}>
+        <TransactionHeader
+          eventView={eventView}
+          location={router.location}
+          organization={organization}
+          projects={[project]}
+          projectId={project.id}
+          transactionName="transaction_name"
+          currentTab={Tab.TransactionSummary}
+          hasWebVitals="maybe"
+        />
+      </ComponentProviders>
+    );
 
-    await tick();
-    wrapper.update();
+    await waitFor(() => expect(eventHasMeasurementsMock).toHaveBeenCalled());
 
-    expect(wrapper.find('ListLink[data-test-id="web-vitals-tab"]').exists()).toBeTruthy();
+    expect(screen.getByRole('link', {name: 'Web Vitals'})).toBeInTheDocument();
   });
 
   it('should not render web vitals tab when maybe and has no measurements', async function () {
-    MockApiClient.addMockResponse({
+    const {project, organization, router, eventView} = initializeData();
+
+    const eventHasMeasurementsMock = MockApiClient.addMockResponse({
       url: '/organizations/org-slug/events-has-measurements/',
       body: {measurements: false},
     });
 
-    wrapper = mountWithTheme(<WrappedComponent hasWebVitals="maybe" />);
+    render(
+      <ComponentProviders organization={organization}>
+        <TransactionHeader
+          eventView={eventView}
+          location={router.location}
+          organization={organization}
+          projects={[project]}
+          projectId={project.id}
+          transactionName="transaction_name"
+          currentTab={Tab.TransactionSummary}
+          hasWebVitals="maybe"
+        />
+      </ComponentProviders>
+    );
 
-    await tick();
-    wrapper.update();
+    await waitFor(() => expect(eventHasMeasurementsMock).toHaveBeenCalled());
 
-    expect(wrapper.find('ListLink[data-test-id="web-vitals-tab"]').exists()).toBeFalsy();
+    expect(screen.queryByRole('link', {name: 'Web Vitals'})).not.toBeInTheDocument();
   });
 
-  it('should render spans tab with feature', async function () {
-    wrapper = mountWithTheme(
-      <WrappedComponent
-        hasWebVitals="yes"
-        features={['performance-suspect-spans-view']}
-      />
-    );
+  it('should render spans tab with feature', function () {
+    const {project, organization, router, eventView} = initializeData({
+      features: ['performance-suspect-spans-view'],
+    });
 
-    await tick();
-    wrapper.update();
+    render(
+      <ComponentProviders organization={organization}>
+        <TransactionHeader
+          eventView={eventView}
+          location={router.location}
+          organization={organization}
+          projects={[project]}
+          projectId={project.id}
+          transactionName="transaction_name"
+          currentTab={Tab.TransactionSummary}
+          hasWebVitals="yes"
+        />
+      </ComponentProviders>
+    );
 
-    expect(wrapper.find('ListLink[data-test-id="spans-tab"]').exists()).toBeTruthy();
+    expect(screen.getByRole('link', {name: 'Spans'})).toBeInTheDocument();
   });
 });

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

@@ -170,7 +170,7 @@ class TransactionHeader extends Component<Props> {
 
     const tab = (
       <ListLink
-        data-test-id="web-vitals-tab"
+        href=""
         to={vitalsTarget}
         isActive={() => currentTab === Tab.WebVitals}
         onClick={this.trackTabClick(Tab.WebVitals)}
@@ -296,10 +296,10 @@ class TransactionHeader extends Component<Props> {
               features={['organizations:performance-suspect-spans-view']}
             >
               <ListLink
-                data-test-id="spans-tab"
-                to={spansTarget}
                 isActive={() => currentTab === Tab.Spans}
                 onClick={this.trackTabClick(Tab.Spans)}
+                href=""
+                to={spansTarget}
               >
                 {t('Spans')}
               </ListLink>