fix routeError tests, and useRouteActivatedHook deps

Author: ryan953

static/app/types/legacyReactRouter.tsx

@@ -1,3 +1,4 @@
+import type {UIMatch} from 'react-router-dom';
 /**
  * These are vendored from react-router v3
  *
@@ -71,6 +72,7 @@ export interface WithRouterProps<P = Record<string, string | undefined>, Q = any
 
 export interface RouteContextInterface<P = Record<string, string | undefined>, Q = any> {
   location: Location<Q>;
+  matches: Array<UIMatch<unknown, unknown>>;
   params: P;
   router: InjectedRouter<P, Q>;
   routes: PlainRoute[];

static/app/utils/getRouteStringFromRoutes.tsx

@@ -21,7 +21,6 @@ export type Props =
  * concatenate all of the following routes. Skips any routes without a path
  *
  * @param params.matches An array of UIMatch objects from react-router-dom `useMatches()`
- * @param @deprecated params.routes An array of route objects from react-router
  * @returns A route path string
  */
 export function getRouteStringFromRoutes({routes, matches}: Props): string {

static/app/views/routeAnalyticsContextProvider.tsx

@@ -1,4 +1,5 @@
 import {createContext, useMemo} from 'react';
+import {useMatches} from 'react-router-dom';
 
 import {HookStore} from 'sentry/stores/hookStore';
 import type {RouteContextInterface} from 'sentry/types/legacyReactRouter';
@@ -45,6 +46,7 @@ export function RouteAnalyticsContextProvider({children}: Props) {
     routes: useRoutes(),
     router: useRouter(),
     location: useLocation(),
+    matches: useMatches(),
   };
 
   const {

static/app/views/routeError.spec.tsx

@@ -2,19 +2,11 @@ import * as Sentry from '@sentry/react';
 
 import {render, waitFor} from 'sentry-test/reactTestingLibrary';
 
-import {useRoutes} from 'sentry/utils/useRoutes';
+import {getRouteStringFromRoutes} from 'sentry/utils/getRouteStringFromRoutes';
 import RouteError from 'sentry/views/routeError';
 
-jest.mock('sentry/utils/useRoutes');
-
-jest
-  .mocked(useRoutes)
-  .mockReturnValue([
-    {path: '/'},
-    {path: '/:orgId/'},
-    {path: '/organizations/:orgId/'},
-    {path: 'api-keys/'},
-  ]);
+jest.mock('sentry/utils/getRouteStringFromRoutes');
+jest.mocked(getRouteStringFromRoutes).mockReturnValue('/organizations/:orgId/api-keys/');
 
 describe('RouteError', () => {
   it('captures errors with sentry', async () => {

static/gsApp/hooks/useRouteActivatedHook.spec.tsx

@@ -1,6 +1,6 @@
+import type {UIMatch} from 'react-router-dom';
 import {LocationFixture} from 'sentry-fixture/locationFixture';
 import {OrganizationFixture} from 'sentry-fixture/organization';
-import {RouterPropsFixture} from 'sentry-fixture/routerPropsFixture';
 
 import {ProjectFixture} from 'getsentry-test/fixtures/project';
 import {SubscriptionFixture} from 'getsentry-test/fixtures/subscription';
@@ -18,6 +18,13 @@ const HALF_ADVANCE_PERIOD = DELAY_TIME_MS * 0.6;
 
 jest.mock('getsentry/utils/rawTrackAnalyticsEvent');
 
+function makeMatch(path: string): UIMatch {
+  return {id: path, pathname: path, params: {}, data: undefined, handle: {path}};
+}
+
+const SETTINGS_MATCHES = [makeMatch('/settings/:orgId/projects/:projectId/')];
+const RELEASES_MATCHES = [makeMatch('/organizations/:orgId/releases/:release/')];
+
 describe('useRouteActivatedHook', () => {
   const organization = OrganizationFixture();
   const project = ProjectFixture({organization});
@@ -27,18 +34,13 @@ describe('useRouteActivatedHook', () => {
   function genProps(extraRouteParams = {}): any {
     const props = {
       organization,
-      ...RouterPropsFixture({
-        location: LocationFixture({
-          pathname: `/settings/${organization.slug}/${project.slug}/`,
-        }),
-        params: {orgId: organization.slug},
-        routes: [
-          {path: '/'},
-          {path: '/settings/'},
-          {path: ':orgId/'},
-          {path: 'projects/:projectId/'},
-        ],
+      location: LocationFixture({
+        pathname: `/settings/${organization.slug}/${project.slug}/`,
       }),
+      params: {orgId: organization.slug},
+      routes: [],
+      router: {} as any,
+      matches: SETTINGS_MATCHES,
       ...extraRouteParams,
     };
     return props;
@@ -173,14 +175,7 @@ describe('useRouteActivatedHook', () => {
       location: LocationFixture({
         pathname: `/organizations/${organization.slug}/releases/some-release/`,
       }),
-      routes: [
-        {path: '/'},
-        {path: '/organizations/:orgId/releases/'},
-        {path: ':release/'},
-      ],
-      ...LocationFixture({
-        pathname: `/organizations/${organization.slug}/releases/some-release/`,
-      }),
+      matches: RELEASES_MATCHES,
     });
     const loadTime = Date.now();
     act(() => rerender(newProps));
@@ -225,6 +220,7 @@ describe('useRouteActivatedHook', () => {
   it('route changes triggers early analytics event', () => {
     jest.useFakeTimers();
     let loadTime = Date.now();
+
     const {result, rerender} = renderHook(useRouteActivatedHook, {
       initialProps: props,
     });
@@ -235,14 +231,7 @@ describe('useRouteActivatedHook', () => {
       location: LocationFixture({
         pathname: `/organizations/${organization.slug}/releases/some-release/`,
       }),
-      routes: [
-        {path: '/'},
-        {path: '/organizations/:orgId/releases/'},
-        {path: ':release/'},
-      ],
-      ...LocationFixture({
-        pathname: `/organizations/${organization.slug}/releases/some-release/`,
-      }),
+      matches: RELEASES_MATCHES,
     });
     expect(rawTrackAnalyticsEvent).toHaveBeenCalledTimes(0);
 

static/gsApp/hooks/useRouteActivatedHook.tsx

@@ -1,5 +1,4 @@
 import {useCallback, useEffect, useState} from 'react';
-import {useMatches} from 'react-router-dom';
 
 import type {Hooks} from 'sentry/types/hooks';
 import type {Organization} from 'sentry/types/organization';
@@ -18,8 +17,7 @@ export const DELAY_TIME_MS = 7000;
 
 type Props = Parameters<Hooks['react-hook:route-activated']>[0];
 
-export function useRouteActivatedHook({location}: Props) {
-  const matches = useMatches();
+export function useRouteActivatedHook({location, matches}: Props) {
   const [analyticsParams, _setRouteAnalyticsParams] = useState({});
   const [disableAnalytics, _setDisableRouteAnalytics] = useState(false);
   const [hasSentAnalytics, setHasSentAnalytics] = useState(false);