Routing: Add CompatRouter to tests (#92114)

* Add CompatRouter

* Fix tests

* Add CompatRouter to TestProvider

* Use findBy

* Remove AppChromeService

* Remove historyOptions

* Routing: Fix alerting/test utils issues from react compat router usage (#92127)

---------

Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>

public/app/features/alerting/unified/RedirectToRuleViewer.test.tsx

@@ -76,6 +76,9 @@ describe('Redirect to Rule viewer', () => {
   });
 
   it('should properly decode rule name', () => {
+    // TODO: Fix console warning that happens once CompatRouter is wrapped around this component render
+    jest.spyOn(console, 'warn').mockImplementation();
+
     const rulesMatchingSpy = jest.spyOn(combinedRuleHooks, 'useCloudCombinedRulesMatching').mockReturnValue({
       rules: [mockedRules[0]],
       loading: false,
@@ -112,6 +115,9 @@ describe('Redirect to Rule viewer', () => {
   });
 
   it('should properly decode source name', () => {
+    // TODO: Fix console warning that happens once CompatRouter is wrapped around this component render
+    jest.spyOn(console, 'warn').mockImplementation();
+
     const rulesMatchingSpy = jest.spyOn(combinedRuleHooks, 'useCloudCombinedRulesMatching').mockReturnValue({
       rules: [mockedRules[0]],
       loading: false,

public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx

@@ -120,7 +120,7 @@ describe('RuleEditor grafana managed rules', () => {
     const folderInput = await ui.inputs.folder.find();
     await clickSelectOption(folderInput, 'Folder A');
     const groupInput = await ui.inputs.group.find();
-    await userEvent.click(byRole('combobox').get(groupInput));
+    await userEvent.click(await byRole('combobox').find(groupInput));
     await clickSelectOption(groupInput, grafanaRulerGroup.name);
     await userEvent.type(ui.inputs.annotationValue(1).get(), 'some description');
 

public/app/features/alerting/unified/RuleList.test.tsx

@@ -92,7 +92,8 @@ const renderRuleList = () => {
   return render(
     <TestProvider>
       <RuleList />
-    </TestProvider>
+    </TestProvider>,
+    { renderWithRouter: false }
   );
 };
 

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx

@@ -136,7 +136,7 @@ const alertTests = () => {
     });
 
     await renderSharePublicDashboard({ dashboard });
-    expect(screen.queryByTestId(selectors.UnsupportedDataSourcesWarningAlert)).toBeInTheDocument();
+    expect(await screen.findByTestId(selectors.UnsupportedDataSourcesWarningAlert)).toBeInTheDocument();
   });
 };
 

public/app/features/scopes/testUtils.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { KBarProvider } from 'kbar';
-import { getWrapper, render } from 'test/test-utils';
+import { render } from 'test/test-utils';
 
 import { Scope, ScopeDashboardBinding, ScopeNode } from '@grafana/data';
 import {
@@ -16,10 +16,8 @@ import {
   VizPanel,
 } from '@grafana/scenes';
 import { AppChrome } from 'app/core/components/AppChrome/AppChrome';
-import { AppChromeService } from 'app/core/components/AppChrome/AppChromeService';
 import { DashboardControls } from 'app/features/dashboard-scene/scene//DashboardControls';
 import { DashboardScene } from 'app/features/dashboard-scene/scene/DashboardScene';
-import { configureStore } from 'app/store/configureStore';
 
 import { ScopesFacade } from './ScopesFacadeScene';
 import { scopesDashboardsScene, scopesSelectorScene } from './instance';
@@ -464,24 +462,12 @@ export function buildTestScene(overrides: Partial<DashboardScene> = {}) {
 }
 
 export function renderDashboard(dashboardScene: DashboardScene) {
-  const store = configureStore();
-  const chrome = new AppChromeService();
-  chrome.update({ chromeless: false });
-  const Wrapper = getWrapper({ store, renderWithRouter: true, grafanaContext: { chrome } });
-
   return render(
     <KBarProvider>
-      <Wrapper>
       <AppChrome>
         <dashboardScene.Component model={dashboardScene} />
       </AppChrome>
-      </Wrapper>
+    </KBarProvider>
-    </KBarProvider>,
-    {
-      historyOptions: {
-        initialEntries: ['/'],
-      },
-    }
   );
 }
 

public/test/helpers/TestProvider.tsx

@@ -2,6 +2,7 @@ import { Store } from '@reduxjs/toolkit';
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
 
 import { locationService } from '@grafana/runtime';
@@ -35,8 +36,10 @@ export function TestProvider(props: Props) {
     <Provider store={store}>
       <Router history={locationService.getHistory()}>
         <ModalsContextProvider>
+          <CompatRouter>
             <GrafanaContext.Provider value={context}>{children}</GrafanaContext.Provider>
             <ModalRoot />
+          </CompatRouter>
         </ModalsContextProvider>
       </Router>
     </Provider>

public/test/test-utils.tsx

@@ -6,6 +6,7 @@ import { Fragment, PropsWithChildren } from 'react';
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
 
 import { HistoryWrapper, LocationServiceProvider, setLocationService } from '@grafana/runtime';
@@ -49,10 +50,6 @@ const getWrapper = ({
   grafanaContext?: Partial<GrafanaContextType>;
 }) => {
   const reduxStore = store || configureStore();
-  /**
-   * Conditional router - either a MemoryRouter or just a Fragment
-   */
-  const PotentialRouter = renderWithRouter ? Router : Fragment;
 
   // Create a fresh location service for each test - otherwise we run the risk
   // of it being stateful in between runs
@@ -60,6 +57,15 @@ const getWrapper = ({
   const locationService = new HistoryWrapper(history);
   setLocationService(locationService);
 
+  /**
+   * Conditional router - either a MemoryRouter or just a Fragment
+   */
+  const PotentialRouter = renderWithRouter
+    ? ({ children }: PropsWithChildren) => <Router history={history}>{children}</Router>
+    : ({ children }: PropsWithChildren) => <Fragment>{children}</Fragment>;
+
+  const PotentialCompatRouter = renderWithRouter ? CompatRouter : Fragment;
+
   const context = {
     ...getGrafanaContextMock(),
     ...grafanaContext,
@@ -73,9 +79,11 @@ const getWrapper = ({
     return (
       <Provider store={reduxStore}>
         <GrafanaContext.Provider value={context}>
-          <PotentialRouter history={history}>
+          <PotentialRouter>
             <LocationServiceProvider service={locationService}>
+              <PotentialCompatRouter>
                 <ModalsContextProvider>{children}</ModalsContextProvider>
+              </PotentialCompatRouter>
             </LocationServiceProvider>
           </PotentialRouter>
         </GrafanaContext.Provider>