-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix: Routing bug on uninitialised plugin (#628)
* feat: add Router to test suite customRender * feat: add featureToggles option to customRender * fix: import Router from react-router-dom * fix: tidy up router and add routing tests * feat: add useLayout effect to route back home * feat: add 404 tests to routing --------- Co-authored-by: Russ <8377044+rdubrock@users.noreply.github.com>
- Loading branch information
Showing
18 changed files
with
311 additions
and
175 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React from 'react'; | ||
| import { screen } from '@testing-library/react'; | ||
|
|
||
| import { type CustomRenderOptions, createInstance, render } from 'test/render'; | ||
| import { ROUTES } from 'types'; | ||
| import { PLUGIN_URL_PATH } from './constants'; | ||
| import { getRoute, Routing } from './Routing'; | ||
|
|
||
| function renderRouting(options?: CustomRenderOptions) { | ||
| return render(<Routing onNavChanged={jest.fn} />, options); | ||
| } | ||
|
|
||
| const notaRoute = `${PLUGIN_URL_PATH}/404`; | ||
|
|
||
| describe('Only renders the unprovisioned setup page regardless of route when app is not provisioned', () => { | ||
| Object.entries(ROUTES).map(([key, route]) => { | ||
| test(`Route ${key}`, () => { | ||
| renderRouting({ path: getRoute(route), meta: { jsonData: undefined } }); | ||
| screen.getByText('Provisioning is required for Synthetic Monitoring.'); | ||
| }); | ||
| }); | ||
|
|
||
| test('Non-existent route (404)', () => { | ||
| renderRouting({ path: notaRoute, meta: { jsonData: undefined } }); | ||
| screen.getByText('Provisioning is required for Synthetic Monitoring.'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Only renders the welcome page regardless of route when app is not initializd', () => { | ||
| Object.entries(ROUTES).map(([key, route]) => { | ||
| test(`Route ${key}`, () => { | ||
| const instance = createInstance({ api: undefined }); | ||
| renderRouting({ instance, path: getRoute(route) }); | ||
| screen.getByText('Ready to start using synthetic monitoring?'); | ||
| }); | ||
| }); | ||
|
|
||
| test('Non-existent route (404)', () => { | ||
| const instance = createInstance({ api: undefined }); | ||
| renderRouting({ instance, path: notaRoute }); | ||
| screen.getByText('Ready to start using synthetic monitoring?'); | ||
| }); | ||
| }); | ||
|
|
||
| // Would like to have asserted on the h1s but rendering the Grafana pluginpage is tricky | ||
| describe('Routes to pages correctly', () => { | ||
| test('Home page renders', async () => { | ||
| renderRouting({ path: getRoute(ROUTES.Home) }); | ||
| const homePageText = await screen.findByText('What you can do', { selector: 'h2' }); | ||
| expect(homePageText).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('Checks page renders', async () => { | ||
| renderRouting({ path: getRoute(ROUTES.Checks) }); | ||
| const checksButton = await screen.findByText('Add new check'); | ||
| expect(checksButton).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('Probes page renders', async () => { | ||
| renderRouting({ path: getRoute(ROUTES.Probes) }); | ||
| const probeReachabilityTexts = await screen.findAllByText('Reachability'); | ||
| expect(probeReachabilityTexts.length).toBeGreaterThan(0); | ||
| }); | ||
|
|
||
| test('Alert page renders', async () => { | ||
| renderRouting({ path: getRoute(ROUTES.Alerts) }); | ||
| const alertsText = await screen.findByText('Learn more about alerting for Synthetic Monitoring.'); | ||
| expect(alertsText).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('Config page renders', async () => { | ||
| renderRouting({ path: getRoute(ROUTES.Config) }); | ||
| const configText = await screen.findByText( | ||
| /Synthetic Monitoring is a blackbox monitoring solution provided as part of/i | ||
| ); | ||
| expect(configText).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('Non-existent route redirects to homepage', async () => { | ||
| renderRouting({ path: notaRoute }); | ||
| const homePageText = await screen.findByText('What you can do', { selector: 'h2' }); | ||
| expect(homePageText).toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,30 @@ | ||
| import { useCallback } from 'react'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| import { getLocationSrv } from '@grafana/runtime'; | ||
|
|
||
| import { PLUGIN_URL_PATH } from 'components/constants'; | ||
| import { useHistory } from 'react-router-dom'; | ||
|
|
||
| export type QueryParamMap = { | ||
| [key: string]: string; | ||
| }; | ||
|
|
||
| export function useNavigation() { | ||
| const history = useHistory(); | ||
| const navigate = (url: string, queryParams?: QueryParamMap, external?: boolean, additionalState?: any) => { | ||
| const normalized = url.startsWith('/') ? url.slice(1) : url; | ||
| if (external) { | ||
| getLocationSrv().update({ partial: false, path: `/${normalized}`, query: queryParams }); | ||
| } else { | ||
| const paramString = Object.entries(queryParams ?? {}).reduce( | ||
| (acc, [key, val]) => acc.concat(`&${key}=${val}`), | ||
| '' | ||
| ); | ||
| history.push(`${PLUGIN_URL_PATH}${normalized}${paramString ? '?' : ''}${paramString}`, additionalState); | ||
| } | ||
| }; | ||
| const navigate = useCallback( | ||
| (url: string, queryParams?: QueryParamMap, external?: boolean, additionalState?: any) => { | ||
| const normalized = url.startsWith('/') ? url.slice(1) : url; | ||
| if (external) { | ||
| getLocationSrv().update({ partial: false, path: `/${normalized}`, query: queryParams }); | ||
| } else { | ||
| const paramString = Object.entries(queryParams ?? {}).reduce( | ||
| (acc, [key, val]) => acc.concat(`&${key}=${val}`), | ||
| '' | ||
| ); | ||
| history.push(`${PLUGIN_URL_PATH}${normalized}${paramString ? '?' : ''}${paramString}`, additionalState); | ||
| } | ||
| }, | ||
| [history] | ||
| ); | ||
|
|
||
| return navigate; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.