test(ui): Swap router props for test stub router props (#54242)

static/app/components/modals/helpSearchModal.spec.tsx

@@ -50,17 +50,10 @@ describe('Docs Search Modal', function () {
   });
 
   it('can open help search modal', async function () {
-    const {routerContext, router, route} = initializeOrg();
+    const {routerContext, routerProps} = initializeOrg();
 
     render(
-      <App
-        location={router.location}
-        routes={router.routes}
-        route={route}
-        router={router}
-        params={{}}
-        routeParams={router.params}
-      >
+      <App {...routerProps}>
         <div>placeholder content</div>
       </App>,
       {

static/app/components/modals/redirectToProject.spec.tsx

@@ -10,13 +10,14 @@ describe('RedirectToProjectModal', function () {
   jest.useFakeTimers();
 
   it('has timer to redirect to new slug after mounting', function () {
-    const {router} = initializeOrg({
+    const {routerProps} = initializeOrg({
       router: {
         routes: [
           {path: '/', childRoutes: []},
           {name: 'Organizations', path: ':orgId/', childRoutes: []},
           {name: 'Projects', path: ':projectId/', childRoutes: []},
         ],
+        params: {orgId: 'org-slug', projectId: 'project-slug'},
       },
     });
 
@@ -26,14 +27,7 @@ describe('RedirectToProjectModal', function () {
 
     act(() =>
       openModal(modalProps => (
-        <RedirectToProjectModal
-          {...modalProps}
-          routes={router.routes}
-          router={router}
-          location={router.location}
-          slug="new-slug"
-          params={{orgId: 'org-slug', projectId: 'project-slug'}}
-        />
+        <RedirectToProjectModal {...modalProps} {...routerProps} slug="new-slug" />
       ))
     );
 

static/app/components/modals/sudoModal.spec.tsx

@@ -51,18 +51,11 @@ describe('Sudo Modal', function () {
   });
 
   it('can delete an org with sudo flow', async function () {
-    const {router, route} = initializeOrg();
+    const {routerProps} = initializeOrg({router: {params: {}}});
     setHasPasswordAuth(true);
 
     render(
-      <App
-        location={router.location}
-        routes={router.routes}
-        route={route}
-        router={router}
-        params={{}}
-        routeParams={router.params}
-      >
+      <App {...routerProps}>
         <div>placeholder content</div>
       </App>
     );
@@ -128,18 +121,11 @@ describe('Sudo Modal', function () {
   });
 
   it('shows button to redirect if user does not have password auth', async function () {
-    const {router, route} = initializeOrg();
+    const {routerProps} = initializeOrg({router: {params: {}}});
     setHasPasswordAuth(false);
 
     render(
-      <App
-        location={router.location}
-        routes={router.routes}
-        route={route}
-        router={router}
-        params={{}}
-        routeParams={router.params}
-      >
+      <App {...routerProps}>
         <div>placeholder content</div>
       </App>
     );

static/app/views/alerts/rules/metric/details/index.spec.tsx

@@ -124,7 +124,7 @@ describe('MetricAlertDetails', () => {
   });
 
   it('renders mute button for metric alert', async () => {
-    const {routerContext, organization, router} = initializeOrg();
+    const {routerContext, organization, routerProps} = initializeOrg();
     const incident = TestStubs.Incident();
     const rule = TestStubs.MetricRule({
       projects: [project.slug],
@@ -151,12 +151,8 @@ describe('MetricAlertDetails', () => {
 
     render(
       <MetricAlertDetails
+        {...routerProps}
         organization={organization}
-        route={{}}
-        router={router}
-        routes={router.routes}
-        routeParams={router.params}
-        location={router.location}
         params={{ruleId: rule.id}}
       />,
       {context: routerContext, organization}

static/app/views/projectInstall/platform.spec.tsx

@@ -52,7 +52,7 @@ describe('ProjectInstallPlatform', function () {
     const routeParams = {
       projectId: TestStubs.Project().slug,
     };
-    const {organization, router, route, project, routerContext} = initializeOrg({
+    const {organization, routerProps, project, routerContext} = initializeOrg({
       router: {
         location: {
           query: {},
@@ -63,20 +63,10 @@ describe('ProjectInstallPlatform', function () {
 
     mockProjectApiResponses([{...project, platform: 'lua'}]);
 
-    render(
-      <ProjectInstallPlatform
-        router={router}
-        route={route}
-        location={router.location}
-        routeParams={routeParams}
-        routes={router.routes}
-        params={routeParams}
-      />,
-      {
-        organization,
-        context: routerContext,
-      }
-    );
+    render(<ProjectInstallPlatform {...routerProps} />, {
+      organization,
+      context: routerContext,
+    });
 
     expect(await screen.findByText('Page Not Found')).toBeInTheDocument();
   });
@@ -86,7 +76,7 @@ describe('ProjectInstallPlatform', function () {
       projectId: TestStubs.Project().slug,
     };
 
-    const {organization, router, route, project} = initializeOrg({
+    const {organization, routerProps, project} = initializeOrg({
       router: {
         location: {
           query: {},
@@ -100,19 +90,9 @@ describe('ProjectInstallPlatform', function () {
 
     mockProjectApiResponses([{...project, platform: 'other'}]);
 
-    render(
-      <ProjectInstallPlatform
-        router={router}
-        route={route}
-        location={router.location}
-        routeParams={routeParams}
-        routes={router.routes}
-        params={routeParams}
-      />,
-      {
-        organization,
-      }
-    );
+    render(<ProjectInstallPlatform {...routerProps} />, {
+      organization,
+    });
 
     expect(
       await screen.findByText(/We cannot provide instructions for 'Other' projects/)
@@ -127,7 +107,7 @@ describe('ProjectInstallPlatform', function () {
       platform: 'python',
     };
 
-    const {router, route, routerContext} = initializeOrg({
+    const {routerProps, routerContext} = initializeOrg({
       router: {
         location: {
           query: {},
@@ -140,19 +120,9 @@ describe('ProjectInstallPlatform', function () {
 
     mockProjectApiResponses([project]);
 
-    render(
-      <ProjectInstallPlatform
-        router={router}
-        route={route}
-        location={router.location}
-        routeParams={routeParams}
-        routes={router.routes}
-        params={routeParams}
-      />,
-      {
-        context: routerContext,
-      }
-    );
+    render(<ProjectInstallPlatform {...routerProps} />, {
+      context: routerContext,
+    });
 
     expect(
       await screen.findByRole('heading', {

static/app/views/settings/account/apiApplications/index.spec.tsx

@@ -4,28 +4,19 @@ import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrar
 import ApiApplications from 'sentry/views/settings/account/apiApplications';
 
 describe('ApiApplications', function () {
+  const {routerProps, router} = initializeOrg({router: {params: {}}});
+
   beforeEach(function () {
     MockApiClient.clearMockResponses();
   });
 
   it('renders empty', function () {
-    const {router} = initializeOrg();
-
     MockApiClient.addMockResponse({
       url: '/api-applications/',
       body: [],
     });
 
-    render(
-      <ApiApplications
-        router={router}
-        params={{}}
-        location={router.location}
-        routes={router.routes}
-        route={{}}
-        routeParams={{}}
-      />
-    );
+    render(<ApiApplications {...routerProps} />);
 
     expect(
       screen.getByText("You haven't created any applications yet.")
@@ -33,23 +24,12 @@ describe('ApiApplications', function () {
   });
 
   it('renders', function () {
-    const {router} = initializeOrg();
-
     const requestMock = MockApiClient.addMockResponse({
       url: '/api-applications/',
       body: [TestStubs.ApiApplication()],
     });
 
-    render(
-      <ApiApplications
-        router={router}
-        params={{}}
-        location={router.location}
-        routes={router.routes}
-        route={{}}
-        routeParams={{}}
-      />
-    );
+    render(<ApiApplications {...routerProps} />);
 
     expect(requestMock).toHaveBeenCalled();
 
@@ -57,8 +37,6 @@ describe('ApiApplications', function () {
   });
 
   it('creates application', async function () {
-    const {router} = initializeOrg();
-
     MockApiClient.addMockResponse({
       url: '/api-applications/',
       body: [],
@@ -71,16 +49,7 @@ describe('ApiApplications', function () {
       method: 'POST',
     });
 
-    render(
-      <ApiApplications
-        router={router}
-        params={{}}
-        location={router.location}
-        routes={router.routes}
-        route={{}}
-        routeParams={{}}
-      />
-    );
+    render(<ApiApplications {...routerProps} />);
 
     await userEvent.click(screen.getByLabelText('Create New Application'));
 
@@ -106,18 +75,7 @@ describe('ApiApplications', function () {
       method: 'DELETE',
     });
 
-    const {router} = initializeOrg();
-
-    render(
-      <ApiApplications
-        router={router}
-        params={{}}
-        location={router.location}
-        routes={router.routes}
-        route={{}}
-        routeParams={{}}
-      />
-    );
+    render(<ApiApplications {...routerProps} />);
 
     await userEvent.click(screen.getByLabelText('Remove'));
 

static/app/views/settings/organizationDeveloperSettings/index.spec.tsx

@@ -1,3 +1,4 @@
+import {initializeOrg} from 'sentry-test/initializeOrg';
 import {
   render,
   renderGlobalModal,
@@ -10,7 +11,7 @@ import {
 import OrganizationDeveloperSettings from 'sentry/views/settings/organizationDeveloperSettings/index';
 
 describe('Organization Developer Settings', function () {
-  const org = TestStubs.Organization();
+  const {organization: org, routerProps, router} = initializeOrg();
   const sentryApp = TestStubs.SentryApp({
     scopes: [
       'team:read',
@@ -26,8 +27,6 @@ describe('Organization Developer Settings', function () {
     MockApiClient.clearMockResponses();
   });
 
-  const router = TestStubs.router();
-
   describe('when no Apps exist', () => {
     it('displays empty state', async () => {
       MockApiClient.addMockResponse({
@@ -35,15 +34,7 @@ describe('Organization Developer Settings', function () {
         body: [],
       });
       const {container} = render(
-        <OrganizationDeveloperSettings
-          organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          location={router.location}
-          routes={router.routes}
-        />
+        <OrganizationDeveloperSettings {...routerProps} organization={org} />
       );
       await waitFor(() => {
         expect(
@@ -63,18 +54,9 @@ describe('Organization Developer Settings', function () {
     });
 
     it('internal integrations list is empty', () => {
-      render(
-        <OrganizationDeveloperSettings
-          organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          location={router.location}
-          routes={router.routes}
-        />,
-        {organization: org}
-      );
+      render(<OrganizationDeveloperSettings {...routerProps} organization={org} />, {
+        organization: org,
+      });
       expect(
         screen.getByText('No internal integrations have been created yet.')
       ).toBeInTheDocument();
@@ -83,12 +65,8 @@ describe('Organization Developer Settings', function () {
     it('public integrations list contains 1 item', () => {
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />,
         {organization: org}
@@ -105,12 +83,8 @@ describe('Organization Developer Settings', function () {
       });
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />
       );
@@ -140,12 +114,8 @@ describe('Organization Developer Settings', function () {
 
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />
       );
@@ -207,12 +177,8 @@ describe('Organization Developer Settings', function () {
     it('shows the published status', () => {
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />
       );
@@ -222,12 +188,8 @@ describe('Organization Developer Settings', function () {
     it('trash button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />
       );
@@ -238,12 +200,8 @@ describe('Organization Developer Settings', function () {
     it('publish button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />
       );
@@ -263,33 +221,13 @@ describe('Organization Developer Settings', function () {
     });
 
     it('allows deleting', async () => {
-      render(
-        <OrganizationDeveloperSettings
-          organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          location={router.location}
-          routes={router.routes}
-        />
-      );
+      render(<OrganizationDeveloperSettings {...routerProps} organization={org} />);
       const deleteButton = await screen.findByRole('button', {name: 'Delete'});
       expect(deleteButton).toHaveAttribute('aria-disabled', 'false');
     });
 
     it('publish button does not exist', () => {
-      render(
-        <OrganizationDeveloperSettings
-          organization={org}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          location={router.location}
-          routes={router.routes}
-        />
-      );
+      render(<OrganizationDeveloperSettings {...routerProps} organization={org} />);
       expect(screen.queryByText('Publish')).not.toBeInTheDocument();
     });
   });
@@ -305,12 +243,8 @@ describe('Organization Developer Settings', function () {
     it('trash button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={newOrg}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />,
         {organization: newOrg}
@@ -322,12 +256,8 @@ describe('Organization Developer Settings', function () {
     it('publish button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
+          {...routerProps}
           organization={newOrg}
-          router={router}
-          route={router.routes[0]}
-          params={router.params}
-          routeParams={router.params}
-          routes={router.routes}
           location={{...router.location, query: {type: 'public'}}}
         />,
         {organization: newOrg}

static/app/views/settings/organizationIntegrations/integrationListDirectory.spec.tsx

@@ -12,7 +12,7 @@ describe('IntegrationListDirectory', function () {
     MockApiClient.clearMockResponses();
   });
 
-  const {organization: org, routerContext, router} = initializeOrg();
+  const {organization: org, routerContext, routerProps} = initializeOrg();
 
   describe('Renders view', function () {
     beforeEach(() => {
@@ -37,11 +37,8 @@ describe('IntegrationListDirectory', function () {
     it('shows installed integrations at the top in order of weight', function () {
       render(
         <IntegrationListDirectory
+          {...routerProps}
           params={{orgId: org.slug}}
-          location={router.location}
-          router={router}
-          route={router.routes[0]}
-          routes={router.routes}
           routeParams={{orgId: org.slug}}
           hideHeader={false}
         />,
@@ -66,11 +63,8 @@ describe('IntegrationListDirectory', function () {
     it('does not show legacy plugin that has a First Party Integration if not installed', function () {
       render(
         <IntegrationListDirectory
+          {...routerProps}
           params={{orgId: org.slug}}
-          location={router.location}
-          router={router}
-          route={router.routes[0]}
-          routes={router.routes}
           routeParams={{orgId: org.slug}}
           hideHeader={false}
         />,
@@ -83,11 +77,8 @@ describe('IntegrationListDirectory', function () {
     it('shows legacy plugin that has a First Party Integration if installed', function () {
       render(
         <IntegrationListDirectory
+          {...routerProps}
           params={{orgId: org.slug}}
-          location={router.location}
-          router={router}
-          route={router.routes[0]}
-          routes={router.routes}
           routeParams={{orgId: org.slug}}
           hideHeader={false}
         />,

static/app/views/settings/organizationProjects/index.spec.tsx

@@ -3,18 +3,16 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import OrganizationProjectsContainer from 'sentry/views/settings/organizationProjects';
 
 describe('OrganizationProjects', function () {
-  let org;
-  let project;
-  let projectsGetMock;
-  let statsGetMock;
-  let projectsPutMock;
+  let projectsGetMock: jest.Mock;
+  let statsGetMock: jest.Mock;
+  let projectsPutMock: jest.Mock;
+  const org = TestStubs.Organization();
+  const project = TestStubs.Project();
+  const routerProps = TestStubs.routeComponentProps();
   const routerContext = TestStubs.routerContext();
   const router = TestStubs.router();
 
   beforeEach(function () {
-    project = TestStubs.Project();
-    org = TestStubs.Organization();
-
     projectsGetMock = MockApiClient.addMockResponse({
       url: '/organizations/org-slug/projects/',
       body: [project],
@@ -38,11 +36,7 @@ describe('OrganizationProjects', function () {
   it('should render the projects in the store', async function () {
     const {container} = render(
       <OrganizationProjectsContainer
-        router={router}
-        routes={router.routes}
-        params={router.params}
-        routeParams={router.params}
-        route={router.routes[0]}
+        {...routerProps}
         location={{...router.location, query: {}}}
       />
     );
@@ -70,11 +64,7 @@ describe('OrganizationProjects', function () {
     });
     render(
       <OrganizationProjectsContainer
-        router={router}
-        routes={router.routes}
-        params={router.params}
-        routeParams={router.params}
-        route={router.routes[0]}
+        {...routerProps}
         location={{...router.location, query: {}}}
       />,
       {

static/app/views/settings/organizationTeams/teamDetails.spec.tsx

@@ -26,7 +26,7 @@ describe('TeamMembers', () => {
   });
 
   it('can request membership', async () => {
-    const {routerContext} = initializeOrg({
+    const {routerProps, routerContext} = initializeOrg({
       organization,
       router: {
         params: {orgId: organization.slug, teamId: team.slug},
@@ -34,20 +34,10 @@ describe('TeamMembers', () => {
     });
 
     render(
-      <TeamDetails
-        params={routerContext.context.router.params}
-        route={routerContext.context.router.routes[0]}
-        routes={routerContext.context.router.routes}
-        router={routerContext.context.router}
-        location={routerContext.context.router.location}
-        routeParams={routerContext.context.router.routeParams}
-      >
+      <TeamDetails {...routerProps}>
         <div data-test-id="test" />
       </TeamDetails>,
-      {
-        organization,
-        context: routerContext,
-      }
+      {organization, context: routerContext}
     );
 
     await userEvent.click(screen.getByRole('button', {name: 'Request Access'}));
@@ -57,27 +47,17 @@ describe('TeamMembers', () => {
   });
 
   it('displays children', () => {
-    const {routerContext} = initializeOrg({
+    const {routerContext, routerProps} = initializeOrg({
       organization,
       router: {
         params: {orgId: organization.slug, teamId: teamHasAccess.slug},
       },
     });
     render(
-      <TeamDetails
-        params={routerContext.context.router.params}
-        route={routerContext.context.router.routes[0]}
-        routes={routerContext.context.router.routes}
-        router={routerContext.context.router}
-        location={routerContext.context.router.location}
-        routeParams={routerContext.context.router.routeParams}
-      >
+      <TeamDetails {...routerProps}>
         <div data-test-id="test" />
       </TeamDetails>,
-      {
-        organization,
-        context: routerContext,
-      }
+      {organization, context: routerContext}
     );
 
     expect(screen.getByTestId('test')).toBeInTheDocument();