From 022892ef720240e48e2e41e4bb0c5b5961db300c Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Thu, 22 Aug 2024 13:05:12 +0300 Subject: [PATCH] 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 --- .../unified/RedirectToRuleViewer.test.tsx | 6 +++++ .../unified/RuleEditorGrafanaRules.test.tsx | 2 +- .../alerting/unified/RuleList.test.tsx | 3 ++- .../SharePublicDashboard.test.tsx | 2 +- public/app/features/scopes/testUtils.tsx | 24 ++++--------------- public/test/helpers/TestProvider.tsx | 7 ++++-- public/test/test-utils.tsx | 20 +++++++++++----- 7 files changed, 34 insertions(+), 30 deletions(-) diff --git a/public/app/features/alerting/unified/RedirectToRuleViewer.test.tsx b/public/app/features/alerting/unified/RedirectToRuleViewer.test.tsx index aae12f66c77..3372d095755 100644 --- a/public/app/features/alerting/unified/RedirectToRuleViewer.test.tsx +++ b/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, diff --git a/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx b/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx index ebd179642d5..aac162157b9 100644 --- a/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx +++ b/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'); diff --git a/public/app/features/alerting/unified/RuleList.test.tsx b/public/app/features/alerting/unified/RuleList.test.tsx index 2e3e8e56ea4..1eb97e68b1f 100644 --- a/public/app/features/alerting/unified/RuleList.test.tsx +++ b/public/app/features/alerting/unified/RuleList.test.tsx @@ -92,7 +92,8 @@ const renderRuleList = () => { return render( - + , + { renderWithRouter: false } ); }; diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx index c19af9d767f..a0cf8085e08 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx +++ b/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(); }); }; diff --git a/public/app/features/scopes/testUtils.tsx b/public/app/features/scopes/testUtils.tsx index 1ab33d8e7ef..291007d62a3 100644 --- a/public/app/features/scopes/testUtils.tsx +++ b/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 = {}) { } 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( - - - - - - , - { - historyOptions: { - initialEntries: ['/'], - }, - } + + + + ); } diff --git a/public/test/helpers/TestProvider.tsx b/public/test/helpers/TestProvider.tsx index 7fc3861693c..2e7f21043dc 100644 --- a/public/test/helpers/TestProvider.tsx +++ b/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) { - {children} - + + {children} + + diff --git a/public/test/test-utils.tsx b/public/test/test-utils.tsx index 1e6e5cee3b0..2dbc22267d5 100644 --- a/public/test/test-utils.tsx +++ b/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; }) => { 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) => {children} + : ({ children }: PropsWithChildren) => {children}; + + const PotentialCompatRouter = renderWithRouter ? CompatRouter : Fragment; + const context = { ...getGrafanaContextMock(), ...grafanaContext, @@ -73,9 +79,11 @@ const getWrapper = ({ return ( - + - {children} + + {children} +