test(ui): Migrate page filter tests off deprecatedRouterMocks (#105516)

Migrate to in-memory test router. Required a few local mock routers
still

Author: scttcper

static/app/components/organizations/datePageFilter.spec.tsx

@@ -1,22 +1,16 @@
-import {initializeOrg} from 'sentry-test/initializeOrg';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
+
 import {fireEvent, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {initializeUrlState} from 'sentry/actionCreators/pageFilters';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import OrganizationStore from 'sentry/stores/organizationStore';
 import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 
-const {organization, router} = initializeOrg({
-  router: {
-    location: {
-      query: {},
-      pathname: '/test',
-    },
-    params: {},
-  },
-});
-
 describe('DatePageFilter', () => {
+  const organization = OrganizationFixture();
+
   beforeEach(() => {
     PageFiltersStore.init();
     OrganizationStore.init();
@@ -35,10 +29,11 @@ describe('DatePageFilter', () => {
   });
 
   it('can change period', async () => {
-    render(<DatePageFilter />, {
-      router,
+    const {router} = render(<DatePageFilter />, {
       organization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {
+        location: {pathname: '/test', query: {}},
+      },
     });
 
     // Open time period dropdown
@@ -51,9 +46,7 @@ describe('DatePageFilter', () => {
     expect(
       screen.getByRole('button', {name: '30D', expanded: false})
     ).toBeInTheDocument();
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {statsPeriod: '30d'}})
-    );
+    expect(router.location.query).toEqual(expect.objectContaining({statsPeriod: '30d'}));
     expect(PageFiltersStore.getState()).toEqual({
       isReady: true,
       shouldPersist: true,
@@ -73,10 +66,11 @@ describe('DatePageFilter', () => {
   });
 
   it('can change absolute range', async () => {
-    render(<DatePageFilter />, {
-      router,
+    const {router} = render(<DatePageFilter />, {
       organization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {
+        location: {pathname: '/test', query: {}},
+      },
     });
 
     // Open time period dropdown
@@ -96,9 +90,10 @@ describe('DatePageFilter', () => {
     expect(
       await screen.findByRole('button', {name: 'Oct 3 – Oct 4', expanded: false})
     ).toBeInTheDocument();
-    expect(router.push).toHaveBeenCalledWith(
+    expect(router.location.query).toEqual(
       expect.objectContaining({
-        query: {start: '2017-10-03T00:00:00', end: '2017-10-04T23:59:59'},
+        start: '2017-10-03T00:00:00',
+        end: '2017-10-04T23:59:59',
       })
     );
     expect(PageFiltersStore.getState()).toEqual({
@@ -129,30 +124,26 @@ describe('DatePageFilter', () => {
   });
 
   it('displays a desynced state message', async () => {
-    const {organization: desyncOrganization, router: desyncRouter} = initializeOrg({
-      router: {
-        location: {
-          // the datetime parameters need to be non-null for desync detection to work
-          query: {statsPeriod: '7d'},
-          pathname: '/test',
-        },
-        params: {},
-      },
-    });
+    const desyncOrganization = OrganizationFixture();
+    // the datetime parameters need to be non-null for desync detection to work
+    const desyncLocation = {pathname: '/test', query: {statsPeriod: '7d'}};
 
     PageFiltersStore.reset();
     initializeUrlState({
       memberProjects: [],
       nonMemberProjects: [],
       organization: desyncOrganization,
       queryParams: {statsPeriod: '14d'},
-      router: desyncRouter,
+      router: RouterFixture({
+        location: desyncLocation,
+      }),
     });
 
     render(<DatePageFilter />, {
-      router: desyncRouter,
       organization: desyncOrganization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {
+        location: desyncLocation,
+      },
     });
 
     // Open menu

static/app/components/organizations/environmentPageFilter/index.spec.tsx

@@ -1,4 +1,7 @@
-import {initializeOrg} from 'sentry-test/initializeOrg';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
+
 import {act, fireEvent, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {initializeUrlState, updateEnvironments} from 'sentry/actionCreators/pageFilters';
@@ -7,20 +10,11 @@ import OrganizationStore from 'sentry/stores/organizationStore';
 import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
 
-const {organization, projects, router} = initializeOrg({
-  organization: {features: ['open-membership']},
-  projects: [
-    {id: '1', slug: 'project-1', environments: ['prod', 'staging']},
-    {id: '2', slug: 'project-2', environments: ['prod', 'stage']},
-  ],
-  router: {
-    location: {
-      pathname: '/organizations/org-slug/issues/',
-      query: {},
-    },
-    params: {},
-  },
-});
+const organization = OrganizationFixture({features: ['open-membership']});
+const projects = [
+  ProjectFixture({id: '1', slug: 'project-1', environments: ['prod', 'staging']}),
+  ProjectFixture({id: '2', slug: 'project-2', environments: ['prod', 'stage']}),
+];
 
 describe('EnvironmentPageFilter', () => {
   beforeEach(() => {
@@ -40,10 +34,11 @@ describe('EnvironmentPageFilter', () => {
   afterEach(() => PageFiltersStore.reset());
 
   it('renders & handles single selection', async () => {
-    render(<EnvironmentPageFilter />, {
-      router,
+    const {router} = render(<EnvironmentPageFilter />, {
       organization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {
+        location: {pathname: '/organizations/org-slug/issues/', query: {}},
+      },
     });
 
     // Open menu
@@ -59,16 +54,15 @@ describe('EnvironmentPageFilter', () => {
 
     // Trigger label & router is updated
     expect(screen.getByRole('button', {name: 'prod'})).toBeInTheDocument();
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {environment: ['prod']}})
-    );
+    expect(router.location.query).toEqual(expect.objectContaining({environment: 'prod'}));
   });
 
   it('handles multiple selection', async () => {
-    render(<EnvironmentPageFilter />, {
-      router,
+    const {router} = render(<EnvironmentPageFilter />, {
       organization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {
+        location: {pathname: '/organizations/org-slug/issues/', query: {}},
+      },
     });
 
     // Open menu
@@ -83,27 +77,24 @@ describe('EnvironmentPageFilter', () => {
 
     // Trigger button & router are updated
     expect(screen.getByRole('button', {name: 'prod, stage'})).toBeInTheDocument();
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {environment: ['prod', 'stage']}})
+    expect(router.location.query).toEqual(
+      expect.objectContaining({environment: ['prod', 'stage']})
     );
   });
 
   it('handles reset', async () => {
     const onReset = jest.fn();
-    render(<EnvironmentPageFilter onReset={onReset} />, {
-      router,
+    const {router} = render(<EnvironmentPageFilter onReset={onReset} />, {
       organization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {
+        location: {pathname: '/organizations/org-slug/issues/', query: {}},
+      },
     });
 
     // Open the menu, select project-1
     await userEvent.click(screen.getByRole('button', {name: 'All Envs'}));
     await userEvent.click(screen.getByRole('row', {name: 'prod'}));
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({
-        query: {environment: ['prod']},
-      })
-    );
+    expect(router.location.query).toEqual(expect.objectContaining({environment: 'prod'}));
 
     // Open menu again & click "Reset"
     await userEvent.click(screen.getByRole('button', {name: 'prod'}));
@@ -115,52 +106,47 @@ describe('EnvironmentPageFilter', () => {
   });
 
   it('responds to page filter changes, async e.g. from back button nav', async () => {
+    const mockRouter = RouterFixture({
+      location: {pathname: '/organizations/org-slug/issues/', query: {}},
+    });
+
     render(<EnvironmentPageFilter />, {
-      router,
       organization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {
+        location: {pathname: '/organizations/org-slug/issues/', query: {}},
+      },
     });
 
     // Confirm initial selection
     expect(await screen.findByRole('button', {name: 'All Envs'})).toBeInTheDocument();
 
     // Edit store value
-    act(() => updateEnvironments(['prod'], router));
+    act(() => updateEnvironments(['prod'], mockRouter));
 
     // <EnvironmentPageFilter /> is updated
     expect(screen.getByRole('button', {name: 'prod'})).toBeInTheDocument();
   });
 
   it('displays a desynced state message', async () => {
-    const {organization: desyncOrganization, router: desyncRouter} = initializeOrg({
-      organization: {features: ['open-membership']},
-      projects: [
-        {id: '1', slug: 'project-1', environments: ['prod', 'staging']},
-        {id: '2', slug: 'project-2', environments: ['prod', 'stage']},
-      ],
-      router: {
-        location: {
-          pathname: '/organizations/org-slug/issues/',
-          // the environment parameter needs to be non-null for desync detection to work
-          query: {environment: 'prod'},
-        },
-        params: {},
-      },
-    });
+    const desyncOrganization = OrganizationFixture({features: ['open-membership']});
+    // the environment parameter needs to be non-null for desync detection to work
+    const desyncLocation = {
+      pathname: '/organizations/org-slug/issues/',
+      query: {environment: 'prod'},
+    };
 
     PageFiltersStore.reset();
     initializeUrlState({
       memberProjects: projects,
       nonMemberProjects: [],
       organization: desyncOrganization,
       queryParams: {project: ['1'], environment: 'staging'},
-      router: desyncRouter,
+      router: RouterFixture({location: desyncLocation}),
     });
 
     render(<EnvironmentPageFilter />, {
-      router: desyncRouter,
       organization: desyncOrganization,
-      deprecatedRouterMocks: true,
+      initialRouterConfig: {location: desyncLocation},
     });
 
     // Open menu