test(ui): Convert a few project detail tests to RTL (#37123)

tests/js/spec/views/projectDetail/projectApdex.spec.jsx

@@ -1,15 +1,10 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render} from 'sentry-test/reactTestingLibrary';
 
 import ProjectApdexScoreCard from 'sentry/views/projectDetail/projectScoreCards/projectApdexScoreCard';
 
 describe('ProjectDetail > ProjectApdex', function () {
   let endpointMock;
-  const {organization} = initializeOrg({
-    organization: {
-      apdexThreshold: 500,
-    },
-  });
+  const organization = TestStubs.Organization({apdexThreshold: 500});
 
   const selection = {
     projects: [1],
@@ -34,10 +29,9 @@ describe('ProjectDetail > ProjectApdex', function () {
   });
 
   it('calls api with apdex', function () {
-    organization.features = ['discover-basic', 'performance-view'];
-    mountWithTheme(
+    render(
       <ProjectApdexScoreCard
-        organization={organization}
+        organization={{...organization, features: ['discover-basic', 'performance-view']}}
         selection={selection}
         isProjectStabilized
         hasTransactions

tests/js/spec/views/projectDetail/projectIssues.spec.jsx

@@ -1,10 +1,10 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ProjectIssues from 'sentry/views/projectDetail/projectIssues';
 
 describe('ProjectDetail > ProjectIssues', function () {
-  let endpointMock, filteredEndpointMock, wrapper;
+  let endpointMock, filteredEndpointMock;
   const {organization, router, routerContext} = initializeOrg({
     organization: {
       features: ['discover-basic'],
@@ -30,7 +30,7 @@ describe('ProjectDetail > ProjectIssues', function () {
 
   afterEach(function () {
     MockApiClient.clearMockResponses();
-    wrapper.unmount();
+    jest.clearAllMocks();
   });
 
   it('renders a list', async function () {
@@ -38,27 +38,24 @@ describe('ProjectDetail > ProjectIssues', function () {
       url: `/organizations/org-slug/issues/?limit=5&query=error.unhandled%3Atrue%20is%3Aunresolved&sort=freq&statsPeriod=14d`,
       body: [TestStubs.Group(), TestStubs.Group({id: '2'})],
     });
-    wrapper = mountWithTheme(
-      <ProjectIssues organization={organization} location={router.location} />,
-      routerContext
-    );
-
-    await tick();
-    wrapper.update();
+    render(<ProjectIssues organization={organization} location={router.location} />, {
+      context: routerContext,
+    });
 
-    expect(wrapper.find('StreamGroup').length).toBe(2);
+    expect(await screen.findAllByTestId('group')).toHaveLength(2);
   });
 
   it('renders a link to Issues', function () {
-    wrapper = mountWithTheme(
-      <ProjectIssues organization={organization} location={router.location} />,
-      routerContext
-    );
+    render(<ProjectIssues organization={organization} location={router.location} />, {
+      context: routerContext,
+    });
 
-    expect(
-      wrapper.find('ControlsWrapper Link[aria-label="Open in Issues"]').at(0).prop('to')
-    ).toEqual({
-      pathname: `/organizations/${organization.slug}/issues/`,
+    const link = screen.getByLabelText('Open in Issues');
+    expect(link).toBeInTheDocument();
+    userEvent.click(link);
+
+    expect(router.push).toHaveBeenCalledWith({
+      pathname: '/organizations/org-slug/issues/',
       query: {
         limit: 5,
         query: 'error.unhandled:true is:unresolved',
@@ -69,14 +66,15 @@ describe('ProjectDetail > ProjectIssues', function () {
   });
 
   it('renders a link to Discover', function () {
-    wrapper = mountWithTheme(
-      <ProjectIssues organization={organization} location={router.location} />,
-      routerContext
-    );
+    render(<ProjectIssues organization={organization} location={router.location} />, {
+      context: routerContext,
+    });
 
-    expect(
-      wrapper.find('ControlsWrapper Link[aria-label="Open in Discover"]').at(0).prop('to')
-    ).toEqual({
+    const link = screen.getByLabelText('Open in Discover');
+    expect(link).toBeInTheDocument();
+    userEvent.click(link);
+
+    expect(router.push).toHaveBeenCalledWith({
       pathname: `/organizations/${organization.slug}/discover/results/`,
       query: {
         display: 'top5',
@@ -90,22 +88,24 @@ describe('ProjectDetail > ProjectIssues', function () {
   });
 
   it('changes according to global header', function () {
-    wrapper = mountWithTheme(
+    render(
       <ProjectIssues
         organization={organization}
         location={{
           query: {statsPeriod: '7d', environment: 'staging', somethingBad: 'nope'},
         }}
       />,
-      routerContext
+      {context: routerContext}
     );
 
     expect(endpointMock).toHaveBeenCalledTimes(0);
     expect(filteredEndpointMock).toHaveBeenCalledTimes(1);
 
-    expect(
-      wrapper.find('ControlsWrapper Link[aria-label="Open in Issues"]').at(0).prop('to')
-    ).toEqual({
+    const link = screen.getByLabelText('Open in Issues');
+    expect(link).toBeInTheDocument();
+    userEvent.click(link);
+
+    expect(router.push).toHaveBeenCalledWith({
       pathname: `/organizations/${organization.slug}/issues/`,
       query: {
         limit: 5,

tests/js/spec/views/projectDetail/projectQuickLinks.spec.jsx

@@ -1,43 +1,50 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ProjectQuickLinks from 'sentry/views/projectDetail/projectQuickLinks';
 
 describe('ProjectDetail > ProjectQuickLinks', function () {
-  const {organization, router} = initializeOrg({
+  const {organization, router, routerContext} = initializeOrg({
     organization: {features: ['performance-view']},
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders a list', function () {
-    const wrapper = mountWithTheme(
+    render(
       <ProjectQuickLinks
         organization={organization}
         location={router.location}
         project={TestStubs.Project()}
-      />
+      />,
+      {context: routerContext}
     );
 
-    expect(wrapper.find('SectionHeading').text()).toBe('Quick Links');
-    expect(wrapper.find('QuickLink a').length).toBe(3);
+    expect(screen.getByRole('heading', {name: 'Quick Links'})).toBeInTheDocument();
+    expect(screen.getAllByRole('link')).toHaveLength(3);
 
-    const userFeedback = wrapper.find('QuickLink').at(0);
-    const keyTransactions = wrapper.find('QuickLink').at(1);
-    const mostChangedTransactions = wrapper.find('QuickLink').at(2);
+    const userFeedback = screen.getByRole('link', {name: 'User Feedback'});
+    const keyTransactions = screen.getByRole('link', {name: 'View Transactions'});
+    const mostChangedTransactions = screen.getByRole('link', {
+      name: 'Most Improved/Regressed Transactions',
+    });
 
-    expect(userFeedback.text()).toBe('User Feedback');
-    expect(userFeedback.prop('to')).toEqual({
+    userEvent.click(userFeedback);
+    expect(router.push).toHaveBeenCalledWith({
       pathname: '/organizations/org-slug/user-feedback/',
       query: {project: '2'},
     });
 
-    expect(keyTransactions.text()).toBe('View Transactions');
-    expect(keyTransactions.prop('to')).toEqual({
+    userEvent.click(keyTransactions);
+    expect(router.push).toHaveBeenCalledWith({
       pathname: '/organizations/org-slug/performance/',
       query: {project: '2'},
     });
 
-    expect(mostChangedTransactions.text()).toBe('Most Improved/Regressed Transactions');
-    expect(mostChangedTransactions.prop('to')).toEqual({
+    userEvent.click(mostChangedTransactions);
+    expect(router.push).toHaveBeenCalledWith({
       pathname: '/organizations/org-slug/performance/trends/',
       query: {
         cursor: undefined,
@@ -47,21 +54,24 @@ describe('ProjectDetail > ProjectQuickLinks', function () {
     });
   });
 
-  it('disables link if feature is missing', function () {
-    const wrapper = mountWithTheme(
+  it('disables link if feature is missing', async function () {
+    render(
       <ProjectQuickLinks
         organization={{...organization, features: []}}
         location={router.location}
         project={TestStubs.Project()}
-      />
+      />,
+      {context: routerContext}
     );
 
-    const keyTransactions = wrapper.find('QuickLink').at(1);
-    const tooltip = wrapper.find('Tooltip').at(1);
+    const keyTransactions = screen.getByText('View Transactions');
+
+    userEvent.click(keyTransactions);
+    expect(router.push).toHaveBeenCalledTimes(0);
 
-    expect(keyTransactions.prop('disabled')).toBeTruthy();
-    expect(keyTransactions.find('a').exists()).toBeFalsy();
-    expect(tooltip.prop('title')).toBe("You don't have access to this feature");
-    expect(tooltip.prop('disabled')).toBeFalsy();
+    userEvent.hover(keyTransactions);
+    expect(
+      await screen.findByText("You don't have access to this feature")
+    ).toBeInTheDocument();
   });
 });