fix tests

Author: ryan953

static/app/components/onboarding/gettingStartedDoc/utils/useCurrentProjectState.spec.tsx

@@ -1,6 +1,7 @@
 import {createMemoryRouter, RouterProvider} from 'react-router-dom';
 import {ProjectFixture} from 'sentry-fixture/project';
 
+import {SentryNuqsTestingAdapter} from 'sentry-test/nuqsTestingAdapter';
 import {act, renderHook} from 'sentry-test/reactTestingLibrary';
 
 import {useCurrentProjectState} from 'sentry/components/onboarding/gettingStartedDoc/utils/useCurrentProjectState';
@@ -16,14 +17,15 @@ import type {Project} from 'sentry/types/project';
 
 function createWrapper(projectSlug?: string) {
   return function Wrapper({children}: any) {
+    const wrapped = <SentryNuqsTestingAdapter>{children}</SentryNuqsTestingAdapter>;
     const memoryRouter = createMemoryRouter([
       {
         path: '/',
-        element: children,
+        element: wrapped,
       },
       {
         path: '/:projectId/',
-        element: children,
+        element: wrapped,
       },
     ]);
 

static/app/utils/replays/hooks/useActiveReplayTab.spec.tsx

@@ -1,7 +1,7 @@
 import {AutofixSetupFixture} from 'sentry-fixture/autofixSetupFixture';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {act, renderHookWithProviders} from 'sentry-test/reactTestingLibrary';
+import {act, renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
 import {setWindowLocation} from 'sentry-test/utils';
 
 import {TabKey, useActiveReplayTab} from 'sentry/utils/replays/hooks/useActiveReplayTab';
@@ -40,17 +40,25 @@ describe('useActiveReplayTab', () => {
         expect(result.current.getActiveTab()).toBe(TabKey.AI);
       });
 
-      it('should set the default tab if the name is invalid', () => {
+      it('should set the default tab if the name is invalid', async () => {
         const {result, router} = renderHookWithProviders(useActiveReplayTab, {
           initialProps: {},
+          initialRouterConfig: {
+            location: {pathname: '/mock-pathname/', query: {query: 'click.tag:button'}},
+          },
           organization: OrganizationFixture({
             features: ['gen-ai-features', 'replay-ai-summaries'],
           }),
         });
         expect(result.current.getActiveTab()).toBe(TabKey.AI);
 
         act(() => result.current.setActiveTab('foo bar'));
-        expect(router.location.query).toEqual({query: 'click.tag:button', t_main: 'ai'});
+        await waitFor(() => {
+          expect(router.location.query).toEqual({
+            query: 'click.tag:button',
+            t_main: 'ai',
+          });
+        });
       });
 
       it('should use AI as default for video replays when replay-ai-summaries-mobile is enabled', () => {
@@ -103,34 +111,43 @@ describe('useActiveReplayTab', () => {
         expect(result.current.getActiveTab()).toBe(TabKey.BREADCRUMBS);
       });
 
-      it('should set the default tab if the name is invalid', () => {
+      it('should set the default tab if the name is invalid', async () => {
         const {result, router} = renderHookWithProviders(useActiveReplayTab, {
           initialProps: {},
+          initialRouterConfig: {
+            location: {pathname: '/mock-pathname/', query: {query: 'click.tag:button'}},
+          },
           organization: OrganizationFixture({features: []}),
         });
         expect(result.current.getActiveTab()).toBe(TabKey.BREADCRUMBS);
 
         act(() => result.current.setActiveTab('foo bar'));
-        expect(router.location.query).toEqual({
-          query: 'click.tag:button',
-          t_main: 'breadcrumbs',
+        await waitFor(() => {
+          expect(router.location.query).toEqual({
+            query: 'click.tag:button',
+            t_main: 'breadcrumbs',
+          });
         });
       });
     });
   });
 
-  it('should allow case-insensitive tab names', () => {
+  it('should allow case-insensitive tab names', async () => {
     const {result, router} = renderHookWithProviders(useActiveReplayTab, {
       initialProps: {},
+      initialRouterConfig: {
+        location: {pathname: '/mock-pathname/', query: {query: 'click.tag:button'}},
+      },
       organization: OrganizationFixture({features: []}),
     });
     expect(result.current.getActiveTab()).toBe(TabKey.BREADCRUMBS);
 
     act(() => result.current.setActiveTab('nEtWoRk'));
-
-    expect(router.location.query).toEqual({
-      query: 'click.tag:button',
-      t_main: 'network',
+    await waitFor(() => {
+      expect(router.location.query).toEqual({
+        query: 'click.tag:button',
+        t_main: 'network',
+      });
     });
   });
 });

static/app/utils/replays/hooks/useActiveReplayTab.tsx

@@ -1,5 +1,5 @@
 import {useCallback} from 'react';
-import {parseAsStringLiteral, useQueryState} from 'nuqs';
+import {createParser, parseAsStringLiteral, useQueryState} from 'nuqs';
 
 import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import {defined} from 'sentry/utils';
@@ -10,34 +10,38 @@ export enum TabKey {
   BREADCRUMBS = 'breadcrumbs',
   CONSOLE = 'console',
   ERRORS = 'errors',
+  LOGS = 'logs',
   MEMORY = 'memory',
   NETWORK = 'network',
+  PLAYLIST = 'playlist',
   TAGS = 'tags',
   TRACE = 'trace',
-  LOGS = 'logs',
-  PLAYLIST = 'playlist',
 }
 
 function isReplayTab({tab, isVideoReplay}: {isVideoReplay: boolean; tab: string}) {
-  const supportedTabs = [
-    TabKey.AI,
-    TabKey.BREADCRUMBS,
-    TabKey.CONSOLE,
-    TabKey.ERRORS,
-    TabKey.LOGS,
-    TabKey.NETWORK,
-    TabKey.PLAYLIST,
-    TabKey.TAGS,
-    TabKey.TRACE,
-  ];
-
   if (isVideoReplay) {
-    return supportedTabs.includes(tab as TabKey);
+    const supportedVideoTabs = [
+      TabKey.AI,
+      TabKey.BREADCRUMBS,
+      TabKey.CONSOLE,
+      TabKey.ERRORS,
+      TabKey.LOGS,
+      TabKey.NETWORK,
+      TabKey.PLAYLIST,
+      TabKey.TAGS,
+      TabKey.TRACE,
+    ];
+    return supportedVideoTabs.includes(tab as TabKey);
   }
 
   return Object.values<string>(TabKey).includes(tab);
 }
 
+const tabKeyParser = createParser<TabKey>({
+  parse: value => parseAsStringLiteral(Object.values(TabKey)).parse(value.toLowerCase()),
+  serialize: value => value,
+});
+
 export function useActiveReplayTab({isVideoReplay = false}: {isVideoReplay?: boolean}) {
   const organization = useOrganization();
   const {areAiFeaturesAllowed} = useOrganizationSeerSetup();
@@ -54,7 +58,7 @@ export function useActiveReplayTab({isVideoReplay = false}: {isVideoReplay?: boo
 
   const [tabParam, setTabParam] = useQueryState(
     't_main',
-    parseAsStringLiteral(Object.values(TabKey))
+    tabKeyParser.withDefault(defaultTab).withOptions({clearOnDefault: false})
   );
 
   return {