Routing: Clean up tests (#95018)

* Update ShareDrawer.test

* Update OptionsPaneOptions.test

* Update GenAIButton.test

* Update RouterDebugger

* Update ScopesDashboardsTreeDashboardItem.tsx

* Update ConfigEditor.tsx

* Update MuteTimings.test

* Update NewReceiverView.test
This commit is contained in:
Alex Khomenko
2024-10-21 13:42:30 +03:00
committed by GitHub
parent 975e3acc68
commit 180e82992b
8 changed files with 42 additions and 60 deletions
@@ -1,4 +1,4 @@
import { Link } from 'react-router-dom';
import { Link } from 'react-router-dom-v5-compat';
import { getAppRoutes } from '../../routes/routes';
import { PageContents } from '../components/Page/PageContents';
@@ -1,7 +1,6 @@
import { InitialEntry } from 'history';
import { last } from 'lodash';
import { ReactNode } from 'react';
import { Route } from 'react-router';
import { Route, Routes } from 'react-router-dom-v5-compat';
import { render, screen, userEvent, within } from 'test/test-utils';
import { byRole, byTestId, byText } from 'testing-library-selector';
@@ -24,14 +23,16 @@ import { grantUserPermissions, mockDataSource } from './mocks';
import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from './utils/datasource';
const indexPageText = 'redirected routes page';
const renderMuteTimings = (component: ReactNode, location?: InitialEntry) => {
const Index = () => {
return <div>{indexPageText}</div>;
};
const renderMuteTimings = (location?: InitialEntry) => {
render(
<>
<Route path="/alerting/routes" exact>
{indexPageText}
</Route>
{component}
</>,
<Routes>
<Route path={'/alerting/routes'} element={<Index />} />
<Route path={'/alerting/routes/new'} element={<NewMuteTimingPage />} />
<Route path={'/alerting/routes/edit'} element={<EditMuteTimingPage />} />
</Routes>,
{ historyOptions: location ? { initialEntries: [location] } : undefined }
);
};
@@ -213,7 +214,7 @@ describe('Mute timings', () => {
it('creates a new mute timing, with mute_time_intervals in config', async () => {
const capture = captureRequests();
renderMuteTimings(<NewMuteTimingPage />);
renderMuteTimings('/alerting/routes/new');
await screen.findByText(/add mute timing/i);
@@ -240,9 +241,7 @@ describe('Mute timings', () => {
it('creates a new mute timing, with time_intervals in config', async () => {
const capture = captureRequests();
setAlertmanagerConfig(dataSources.am.uid, defaultConfigWithNewTimeIntervalsField);
renderMuteTimings(<NewMuteTimingPage />, {
search: `?alertmanager=${dataSources.am.name}`,
});
renderMuteTimings({ pathname: '/alerting/routes/new', search: `?alertmanager=${dataSources.am.name}` });
await fillOutForm({
name: 'maintenance period',
@@ -264,9 +263,7 @@ describe('Mute timings', () => {
it('creates a new mute timing, with time_intervals and mute_time_intervals in config', async () => {
setAlertmanagerConfig(dataSources.am.uid, defaultConfigWithBothTimeIntervalsField);
renderMuteTimings(<NewMuteTimingPage />, {
search: `?alertmanager=${dataSources.am.name}`,
});
renderMuteTimings({ pathname: '/alerting/routes/new', search: `?alertmanager=${dataSources.am.name}` });
expect(ui.nameField.get()).toBeInTheDocument();
@@ -285,7 +282,8 @@ describe('Mute timings', () => {
it('prepopulates the form when editing a mute timing', async () => {
const capture = captureRequests();
renderMuteTimings(<EditMuteTimingPage />, {
renderMuteTimings({
pathname: '/alerting/routes/edit',
search: `?muteName=${encodeURIComponent(muteTimeInterval.name)}`,
});
@@ -325,7 +323,7 @@ describe('Mute timings', () => {
});
it('form is invalid with duplicate mute timing name', async () => {
renderMuteTimings(<NewMuteTimingPage />);
renderMuteTimings('/alerting/routes/new');
await fillOutForm({ name: muteTimeInterval.name, days: '1' });
@@ -335,7 +333,8 @@ describe('Mute timings', () => {
});
it('replaces mute timings in routes when the mute timing name is changed', async () => {
renderMuteTimings(<EditMuteTimingPage />, {
renderMuteTimings({
pathname: '/alerting/routes/edit',
search: `?muteName=${encodeURIComponent(muteTimeInterval.name)}`,
});
@@ -350,7 +349,8 @@ describe('Mute timings', () => {
});
it('shows error when mute timing does not exist', async () => {
renderMuteTimings(<EditMuteTimingPage />, {
renderMuteTimings({
pathname: '/alerting/routes/edit',
search: `?alertmanager=${GRAFANA_RULES_SOURCE_NAME}&muteName=${'does not exist'}`,
});
@@ -363,7 +363,7 @@ describe('Mute timings', () => {
});
it('allows creation of new mute timings', async () => {
renderMuteTimings(<NewMuteTimingPage />);
renderMuteTimings('/alerting/routes/new');
await fillOutForm({ name: 'a new mute timing' });
@@ -372,7 +372,8 @@ describe('Mute timings', () => {
});
it('shows error when mute timing does not exist', async () => {
renderMuteTimings(<EditMuteTimingPage />, {
renderMuteTimings({
pathname: '/alerting/routes/edit',
search: `?alertmanager=${GRAFANA_RULES_SOURCE_NAME}&muteName=${TIME_INTERVAL_NAME_HAPPY_PATH + '_force_breakage'}`,
});
@@ -380,7 +381,8 @@ describe('Mute timings', () => {
});
it('loads edit form correctly and allows saving', async () => {
renderMuteTimings(<EditMuteTimingPage />, {
renderMuteTimings({
pathname: '/alerting/routes/edit',
search: `?alertmanager=${GRAFANA_RULES_SOURCE_NAME}&muteName=${TIME_INTERVAL_NAME_HAPPY_PATH}`,
});
@@ -389,7 +391,8 @@ describe('Mute timings', () => {
});
it('loads view form for provisioned interval', async () => {
renderMuteTimings(<EditMuteTimingPage />, {
renderMuteTimings({
pathname: '/alerting/routes/edit',
search: `?muteName=${TIME_INTERVAL_NAME_FILE_PROVISIONED}`,
});
@@ -1,5 +1,5 @@
import 'core-js/stable/structured-clone';
import { Route } from 'react-router';
import { Routes, Route } from 'react-router-dom-v5-compat';
import { render, screen } from 'test/test-utils';
import { byLabelText, byPlaceholderText, byRole, byTestId } from 'testing-library-selector';
@@ -9,23 +9,22 @@ import { AccessControlAction } from 'app/types';
import { setupMswServer } from '../../mockApi';
import { grantUserPermissions } from '../../mocks';
import { AlertmanagerProvider } from '../../state/AlertmanagerContext';
import { testWithFeatureToggles } from '../../test/test-utils';
import NewReceiverView from './NewReceiverView';
setupMswServer();
const Index = () => {
return <div>redirected</div>;
};
const renderForm = () =>
render(
<AlertmanagerProvider accessType="notification" alertmanagerSourceName="grafana">
<Route path="/alerting/notifications/new" exact>
<NewReceiverView />
</Route>
<Route path="/alerting/notifications" exact>
redirected
</Route>
</AlertmanagerProvider>,
<Routes>
<Route path="/alerting/notifications" element={<Index />} />
<Route path="/alerting/notifications/new" element={<NewReceiverView />} />
</Routes>,
{
historyOptions: { initialEntries: ['/alerting/notifications/new'] },
}
@@ -23,15 +23,6 @@ jest.mock('@grafana/runtime', () => ({
useChromeHeaderHeight: jest.fn(),
}));
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: jest.fn().mockReturnValue({
pathname: '/d/dash-1',
hash: '',
state: null,
}),
}));
describe('ShareDrawer', () => {
it('removes shareView query param from url when it is closed', async () => {
const { dashboard } = await buildAndRenderScenario();
@@ -1,10 +1,9 @@
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Router } from 'react-router-dom';
import { Observable } from 'rxjs';
import { render } from 'test/test-utils';
import { selectors } from '@grafana/e2e-selectors';
import { locationService } from '@grafana/runtime';
import { GenAIButton, GenAIButtonProps } from './GenAIButton';
import { StreamStatus, useOpenAIStream } from './hooks';
@@ -33,11 +32,7 @@ describe('GenAIButton', () => {
const eventTrackingSrc = EventTrackingSrc.unknown;
function setup(props: GenAIButtonProps = { onGenerate, messages: [], eventTrackingSrc }) {
return render(
<Router history={locationService.getHistory()}>
<GenAIButton text="Auto-generate" {...props} />
</Router>
);
return render(<GenAIButton text="Auto-generate" {...props} />);
}
describe('when LLM plugin is not configured', () => {
@@ -28,12 +28,6 @@ standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs);
const mockStore = configureMockStore();
const OptionsPaneSelector = selectors.components.PanelEditor.OptionsPane;
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: () => ({
pathname: 'localhost:3000/example/path',
}),
}));
class OptionsPaneOptionsTestScenario {
onFieldConfigsChange = jest.fn();
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import { Link } from 'react-router-dom';
import { Link } from 'react-router-dom-v5-compat';
import { GrafanaTheme2, urlUtil } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
@@ -1,6 +1,6 @@
import { produce } from 'immer';
import { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Link } from 'react-router-dom-v5-compat';
import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';