test(projects): Migrate project pages off deprecatedRouterMocks (#105468)

Use the built in memory test router instead of stubbed router mocks.

removes unused location prop in one component

Author: scttcper

static/app/views/projectDetail/projectDetail.tsx

@@ -277,11 +277,7 @@ export default function ProjectDetail() {
                   isProjectStabilized={isProjectStabilized}
                   project={project}
                 />
-                <ProjectQuickLinks
-                  organization={organization}
-                  project={project}
-                  location={location}
-                />
+                <ProjectQuickLinks organization={organization} project={project} />
               </Layout.Side>
             </Layout.Body>
           </NoProjectMessage>

static/app/views/projectDetail/projectIssues.spec.tsx

@@ -1,6 +1,7 @@
 import {GroupFixture} from 'sentry-fixture/group';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
 
-import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ProjectIssues from 'sentry/views/projectDetail/projectIssues';
@@ -10,11 +11,10 @@ describe('ProjectDetail > ProjectIssues', () => {
     filteredEndpointMock: ReturnType<typeof MockApiClient.addMockResponse>,
     newIssuesEndpointMock: ReturnType<typeof MockApiClient.addMockResponse>;
 
-  const {organization, router, project} = initializeOrg({
-    organization: {
-      features: ['discover-basic'],
-    },
+  const organization = OrganizationFixture({
+    features: ['discover-basic'],
   });
+  const project = ProjectFixture();
 
   beforeEach(() => {
     endpointMock = MockApiClient.addMockResponse({
@@ -62,46 +62,40 @@ describe('ProjectDetail > ProjectIssues', () => {
       <ProjectIssues
         api={new MockApiClient()}
         organization={organization}
-        location={router.location}
+        location={{query: {}} as any}
         projectId={parseInt(project.id, 10)}
       />,
       {
-        router,
         organization,
-        deprecatedRouterMocks: true,
       }
     );
 
     expect(await screen.findAllByTestId('group')).toHaveLength(2);
   });
 
   it('renders a link to Issues', async () => {
-    render(
+    const {router} = render(
       <ProjectIssues
         api={new MockApiClient()}
         organization={organization}
         projectId={parseInt(project.id, 10)}
-        location={router.location}
+        location={{query: {}} as any}
       />,
       {
-        router,
         organization,
-        deprecatedRouterMocks: true,
       }
     );
 
     const link = screen.getByLabelText('Open in Issues');
     expect(link).toBeInTheDocument();
     await userEvent.click(link);
 
-    expect(router.push).toHaveBeenCalledWith({
-      pathname: '/organizations/org-slug/issues/',
-      query: {
-        limit: '5',
-        query: 'error.unhandled:true is:unresolved',
-        sort: 'freq',
-        statsPeriod: '14d',
-      },
+    expect(router.location.pathname).toBe('/organizations/org-slug/issues/');
+    expect(router.location.query).toEqual({
+      limit: '5',
+      query: 'error.unhandled:true is:unresolved',
+      sort: 'freq',
+      statsPeriod: '14d',
     });
   });
 
@@ -110,13 +104,11 @@ describe('ProjectDetail > ProjectIssues', () => {
       <ProjectIssues
         api={new MockApiClient()}
         organization={organization}
-        location={router.location}
+        location={{query: {}} as any}
         projectId={parseInt(project.id, 10)}
       />,
       {
-        router,
         organization,
-        deprecatedRouterMocks: true,
       }
     );
 
@@ -137,53 +129,50 @@ describe('ProjectDetail > ProjectIssues', () => {
   });
 
   it('renders a link to Discover', async () => {
-    render(
+    const {router} = render(
       <ProjectIssues
         api={new MockApiClient()}
         organization={organization}
-        location={router.location}
+        location={{query: {}} as any}
         projectId={parseInt(project.id, 10)}
       />,
       {
-        router,
         organization,
-        deprecatedRouterMocks: true,
       }
     );
 
     const link = screen.getByLabelText('Open in Discover');
     expect(link).toBeInTheDocument();
     await userEvent.click(link);
 
-    expect(router.push).toHaveBeenCalledWith({
-      pathname: `/organizations/${organization.slug}/explore/discover/results/`,
-      query: {
-        display: 'top5',
-        field: ['issue', 'title', 'count()', 'count_unique(user)', 'project'],
-        name: 'Frequent Unhandled Issues',
-        query: 'event.type:error error.unhandled:true',
-        queryDataset: 'error-events',
-        sort: '-count',
-        statsPeriod: '14d',
-      },
+    expect(router.location.pathname).toBe(
+      `/organizations/${organization.slug}/explore/discover/results/`
+    );
+    expect(router.location.query).toEqual({
+      display: 'top5',
+      field: ['issue', 'title', 'count()', 'count_unique(user)', 'project'],
+      name: 'Frequent Unhandled Issues',
+      query: 'event.type:error error.unhandled:true',
+      queryDataset: 'error-events',
+      sort: '-count',
+      statsPeriod: '14d',
     });
   });
 
   it('changes according to global header', async () => {
-    render(
+    const locationWithQuery = {
+      query: {statsPeriod: '7d', environment: 'staging', somethingBad: 'nope'},
+    } as any;
+
+    const {router} = render(
       <ProjectIssues
         organization={organization}
         api={new MockApiClient()}
         projectId={parseInt(project.id, 10)}
-        location={{
-          ...router.location,
-          query: {statsPeriod: '7d', environment: 'staging', somethingBad: 'nope'},
-        }}
+        location={locationWithQuery}
       />,
       {
-        router,
         organization,
-        deprecatedRouterMocks: true,
       }
     );
 
@@ -194,15 +183,13 @@ describe('ProjectDetail > ProjectIssues', () => {
     expect(link).toBeInTheDocument();
     await userEvent.click(link);
 
-    expect(router.push).toHaveBeenCalledWith({
-      pathname: `/organizations/${organization.slug}/issues/`,
-      query: {
-        limit: '5',
-        environment: 'staging',
-        statsPeriod: '7d',
-        query: 'error.unhandled:true is:unresolved',
-        sort: 'freq',
-      },
+    expect(router.location.pathname).toBe(`/organizations/${organization.slug}/issues/`);
+    expect(router.location.query).toEqual({
+      limit: '5',
+      environment: 'staging',
+      statsPeriod: '7d',
+      query: 'error.unhandled:true is:unresolved',
+      sort: 'freq',
     });
   });
 });

static/app/views/projectDetail/projectQuickLinks.spec.tsx

@@ -1,30 +1,20 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
-import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ProjectQuickLinks from 'sentry/views/projectDetail/projectQuickLinks';
 
 describe('ProjectDetail > ProjectQuickLinks', () => {
-  const {organization, router} = initializeOrg({
-    organization: {features: ['performance-view']},
-  });
+  const organization = OrganizationFixture({features: ['performance-view']});
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders a list', async () => {
-    render(
-      <ProjectQuickLinks
-        organization={organization}
-        location={router.location}
-        project={ProjectFixture()}
-      />,
-      {
-        router,
-        deprecatedRouterMocks: true,
-      }
+    const {router} = render(
+      <ProjectQuickLinks organization={organization} project={ProjectFixture()} />
     );
 
     expect(screen.getByRole('heading', {name: 'Quick Links'})).toBeInTheDocument();
@@ -34,35 +24,25 @@ describe('ProjectDetail > ProjectQuickLinks', () => {
     const keyTransactions = screen.getByRole('link', {name: 'View Transactions'});
 
     await userEvent.click(userFeedback);
-    expect(router.push).toHaveBeenCalledWith({
-      pathname: '/organizations/org-slug/feedback/',
-      query: {project: '2'},
-    });
+    expect(router.location.pathname).toBe('/organizations/org-slug/feedback/');
+    expect(router.location.query).toEqual({project: '2'});
 
     await userEvent.click(keyTransactions);
-    expect(router.push).toHaveBeenCalledWith({
-      pathname: '/organizations/org-slug/insights/backend/',
-      query: {project: '2'},
-    });
+    expect(router.location.pathname).toBe('/organizations/org-slug/insights/backend/');
+    expect(router.location.query).toEqual({project: '2'});
   });
 
   it('disables link if feature is missing', async () => {
     render(
       <ProjectQuickLinks
         organization={{...organization, features: []}}
-        location={router.location}
         project={ProjectFixture()}
-      />,
-      {
-        router,
-        deprecatedRouterMocks: true,
-      }
+      />
     );
 
     const keyTransactions = screen.getByText('View Transactions');
 
     await userEvent.click(keyTransactions);
-    expect(router.push).toHaveBeenCalledTimes(0);
 
     await userEvent.hover(keyTransactions);
     expect(

static/app/views/projectDetail/projectQuickLinks.tsx

@@ -1,6 +1,5 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
-import type {Location} from 'history';
 
 import {SectionHeading} from 'sentry/components/charts/styles';
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
@@ -24,7 +23,6 @@ import {
 import {SidebarSection} from './styles';
 
 type Props = {
-  location: Location;
   organization: Organization;
   project?: Project;
 };